diff --git a/README.md b/README.md index 0260544a..89c603f6 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,8 @@ Thanks for all picking this card up. You have 2 options, hosted or self hosted (manual). The first option needs internet and will update itself. ### If you are using Firefox: -Firefox < 66 does not support all the needed functions yet for the editor. + +Firefox < 66 does not support all the needed functions yet for the editor. You change this by enabling `javascript.options.dynamicImport` in `about:config`. Or use the version without the editor: [Version without editor](https://raw.githubusercontent.com/bramkragten/custom-ui/58c41ad177b002e149497629a26ea10ccfeebcd0/weather-card/weather-card.js) @@ -45,20 +46,36 @@ resources: And add a card with type `custom:weather-card`: ```yaml -- type: custom:weather-card - entity: weather.yourweatherentity - name: Optional name +type: custom:weather-card +entity: weather.yourweatherentity +name: Optional name ``` If you want to use your local icons add the location to the icons: ```yaml -- type: custom:weather-card - entity: weather.yourweatherentity - icons: "/local/custom-lovelace/weather-card/icons/" +type: custom:weather-card +entity: weather.yourweatherentity +icons: "/local/custom-lovelace/weather-card/icons/" +``` + +You can choose wich elements of the weather card you want to show: + +The 3 different rows, being: + +- The current weather icon, the current temperature and title +- The details about the current weather +- The 5 day forecast + +```yaml +type: custom:weather-card +entity: weather.yourweatherentity +current: true +details: false +forecast: true ``` -Make sure the `sun` component is enabled: +If you want to show the sunrise and sunset times, make sure the `sun` component is enabled: ```yaml # Example configuration.yaml entry diff --git a/dist/weather-card.js b/dist/weather-card.js index 5369be02..4026532d 100644 --- a/dist/weather-card.js +++ b/dist/weather-card.js @@ -1,6 +1,4 @@ -const LitElement = Object.getPrototypeOf( - customElements.get("hui-view") -); +const LitElement = Object.getPrototypeOf(customElements.get("hui-view")); const html = LitElement.prototype.html; const weatherIconsDay = { @@ -114,7 +112,7 @@ class WeatherCard extends LitElement { if (!this._config || !this.hass) { return html``; } - + this.numberElements = 0; const stateObj = this.hass.states[this._config.entity]; @@ -141,7 +139,9 @@ class WeatherCard extends LitElement { ${this._config.current !== false ? this.renderCurrent(stateObj) : ""} ${this._config.details !== false ? this.renderDetails(stateObj) : ""} - ${this._config.forecast !== false ? this.renderForecast(stateObj.attributes.forecast) : ""} + ${this._config.forecast !== false + ? this.renderForecast(stateObj.attributes.forecast) + : ""} `; } @@ -150,154 +150,139 @@ class WeatherCard extends LitElement { this.numberElements++; return html` -
- + ${stateObj.state} - ${ - this._config.name - ? html` - ${this._config.name} - ` - : "" - } + ${this._config.name + ? html` + ${this._config.name} + ` + : ""} ${ - this.getUnit("temperature") == "°F" - ? Math.round(stateObj.attributes.temperature) - : stateObj.attributes.temperature - }${this.getUnit("temperature") == "°F" + ? Math.round(stateObj.attributes.temperature) + : stateObj.attributes.temperature} ${this.getUnit("temperature")} -
`; + + `; } - + renderDetails(stateObj) { const sun = this.hass.states["sun.sun"]; let next_rising; let next_setting; - + if (sun) { - next_rising = new Date( - sun.attributes.next_rising - ); - next_setting = new Date( - sun.attributes.next_setting - ); + next_rising = new Date(sun.attributes.next_rising); + next_setting = new Date(sun.attributes.next_setting); } this.numberElements++; return html` - + `; - } + } renderForecast(forecast) { - if (!forecast || forecast.length === 0) { - return html``; - } - - const lang = this.hass.selectedLanguage || this.hass.language; - - this.numberElements++; - return html` -
- ${ - forecast.slice(0, 5).map( - daily => html` -
- ${ - new Date(daily.datetime).toLocaleDateString( - lang, - { - weekday: "short" - } - ) - } -
-
${daily.temperature}${ - this.getUnit("temperature") - } - ${ - typeof daily.templow !== 'undefined' - ? html` -
${daily.templow}${ - this.getUnit("temperature") - } - ` - : "" - } -
- ` - ) - } -
- `; + if (!forecast || forecast.length === 0) { + return html``; + } + + const lang = this.hass.selectedLanguage || this.hass.language; + + console.log(forecast); + + this.numberElements++; + return html` +
+ ${forecast.slice(0, 5).map( + daily => html` +
+
+ ${new Date(daily.datetime).toLocaleDateString(lang, { + weekday: "short" + })} +
+ +
+ ${daily.temperature}${this.getUnit("temperature")} +
+ ${daily.templow !== undefined + ? html` +
+ ${daily.templow}${this.getUnit("temperature")} +
+ ` + : ""} + ${daily.precipitation !== undefined && + daily.precipitation !== null + ? html` +
+ + ${daily.precipitation} ${this.getUnit("precipitation")} +
+ ` + : ""} +
+ ` + )} +
+ `; } getWeatherIcon(condition, sun) { @@ -348,19 +333,13 @@ class WeatherCard extends LitElement { } .spacer { - padding-top: 1em; + padding-top: 1em; } .clear { clear: both; } - .ha-icon { - height: 18px; - margin-right: 5px; - color: var(--paper-item-icon-color); - } - .title { position: absolute; left: 3em; @@ -401,20 +380,29 @@ class WeatherCard extends LitElement { font-weight: 300; color: var(--primary-text-color); list-style: none; - padding: 0; + padding: 0 1em; margin: 0; } + .variations ha-icon { + height: 22px; + margin-right: 5px; + color: var(--paper-item-icon-color); + } + .variations li { flex-basis: auto; + width: 50%; } - .variations li:first-child { - padding-left: 1em; + .variations li:nth-child(2n) { + text-align: right; } - .variations li:last-child { - padding-right: 1em; + .variations li:nth-child(2n) ha-icon { + margin-right: 0; + margin-left: 8px; + float: right; } .unit { @@ -424,13 +412,12 @@ class WeatherCard extends LitElement { .forecast { width: 100%; margin: 0 auto; - height: 9em; + display: flex; } .day { + flex: 1; display: block; - width: 20%; - float: left; text-align: center; color: var(--primary-text-color); border-right: 0.1em solid #d9d9d9; @@ -459,6 +446,15 @@ class WeatherCard extends LitElement { color: var(--secondary-text-color); } + .precipitation { + color: var(--primary-text-color); + font-weight: 300; + } + + .precipitation ha-icon { + height: 18px; + } + .icon.bigger { width: 10em; height: 10em; diff --git a/info.md b/info.md index 6328da97..bac5c8db 100644 --- a/info.md +++ b/info.md @@ -11,7 +11,8 @@ Thanks for all picking this card up. ## Installation: ### If you are using Firefox: -Firefox < 66 does not support all the needed functions yet for the editor. + +Firefox < 66 does not support all the needed functions yet for the editor. You change this by enabling `javascript.options.dynamicImport` in `about:config`. Add the following to resources in your lovelace config: @@ -40,7 +41,23 @@ If you want to use your local icons add the location to the icons: icons: "/community_plugin/weather-card/icons/" ``` -Make sure the `sun` component is enabled: +You can choose wich elements of the weather card you want to show: + +The 3 different rows, being: + +- The current weather icon, the current temperature and title +- The details about the current weather +- The 5 day forecast + +```yaml +type: custom:weather-card +entity: weather.yourweatherentity +current: true +details: false +forecast: true +``` + +If you want to show the sunrise and sunset times, make sure the `sun` component is enabled: ```yaml # Example configuration.yaml entry