diff --git a/CHANGELOG.md b/CHANGELOG.md index 024dc1c3..37d19353 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 1.2.1m + +Added latest changes from original bramkragten card aug9->oct11 + +## 1.2.0m + +- Mod the windspeed to use m/s and added precipitation from original card + ## 1.2.0 - Added UI editor diff --git a/README.md b/README.md index 0260544a..67039fc1 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ -# Lovelace animated weather card +# Lovelace animated weather card (modified by @helto4real) +*Modified the original card from @bramkragten to show percipitation and use eu m/s as wind speed unit*, all else is @bramkragten work. Thanks for this awesome work!* + +Please checkout the original and instructions at https://github.com/bramkragten/weather-card + Originally created for the [old UI](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008) converted by @arsaboo and @ciotlosm to [Lovelace](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008/291) and now converted to Lit to make it even better. This card uses the awesome [animated SVG weather icons by amCharts](https://www.amcharts.com/free-animated-svg-weather-icons/). -![Weather Card](https://github.com/bramkragten/custom-ui/blob/master/weather-card/weather-card.gif?raw=true) +*(modded)* +![Weather Card](https://github.com/helto4real/weather-card-mod/blob/master/weather-card.gif?raw=true) Thanks for all picking this card up. @@ -17,35 +22,26 @@ 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) -# Hosted: - -Add the following to resources in your lovelace config: - -```yaml -- url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js - type: module -``` - # Manual: -1. Download the [weather-card.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`) +1. Download the [weather-card-mod.js](https://github.com/helto4real/weather-card-mod/tree/master/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`) 2. Save, the [amCharts icons](https://www.amcharts.com/free-animated-svg-weather-icons/) (The contents of the folder "animated") under `/config/www/custom-lovelace/weather-card/icons/` (or an other folder in `/config/www/`) -3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above) +3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://github.com/helto4real/weather-card-mod/tree/master/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above) Add the following to resources in your lovelace config: ```yaml resources: - - url: /local/custom-lovelace/weather-card/weather-card.js + - url: /local/custom-lovelace/weather-card/weather-card-mod.js type: module ``` ## Configuration: -And add a card with type `custom:weather-card`: +And add a card with type `custom:weather-card-mod`: ```yaml -- type: custom:weather-card +- type: custom:weather-card-mod entity: weather.yourweatherentity name: Optional name ``` @@ -53,7 +49,7 @@ And add a card with type `custom:weather-card`: If you want to use your local icons add the location to the icons: ```yaml -- type: custom:weather-card +- type: custom:weather-card-mod entity: weather.yourweatherentity icons: "/local/custom-lovelace/weather-card/icons/" ``` diff --git a/dist/weather-card-editor.js b/dist/weather-card-editor.js index 1dd1f705..f3f6342b 100644 --- a/dist/weather-card-editor.js +++ b/dist/weather-card-editor.js @@ -1,8 +1,3 @@ -if (!customElements.get("paper-input")) { - console.log("imported", "paper-input"); - import("https://unpkg.com/@polymer/paper-input/paper-input.js?module"); -} - const fireEvent = (node, type, detail, options) => { options = options || {}; detail = detail === null || detail === undefined ? {} : detail; @@ -16,10 +11,16 @@ const fireEvent = (node, type, detail, options) => { return event; }; -const LitElement = Object.getPrototypeOf( - customElements.get("ha-panel-lovelace") -); +if ( + !customElements.get("ha-switch") && + customElements.get("paper-toggle-button") +) { + customElements.define("ha-switch", customElements.get("paper-toggle-button")); +} + +const LitElement = Object.getPrototypeOf(customElements.get("hui-view")); const html = LitElement.prototype.html; +const css = LitElement.prototype.css; export class WeatherCardEditor extends LitElement { setConfig(config) { @@ -42,14 +43,30 @@ export class WeatherCardEditor extends LitElement { return this._config.icons || ""; } + get _current() { + return this._config.current !== false; + } + + get _details() { + return this._config.details !== false; + } + + get _forecast() { + return this._config.forecast !== false; + } + render() { if (!this.hass) { return html``; } + const entities = Object.keys(this.hass.states).filter( + eid => eid.substr(0, eid.indexOf(".")) === "weather" + ); + return html`
-
+
- ${ - customElements.get("ha-entity-picker") - ? html` - - ` - : html` - - ` - } + ${customElements.get("ha-entity-picker") + ? html` + + ` + : html` + + + ${entities.map(entity => { + return html` + ${entity} + `; + })} + + + `} + Show current + Show details + Show forecast
`; @@ -102,12 +145,28 @@ export class WeatherCardEditor extends LitElement { } else { this._config = { ...this._config, - [target.configValue]: target.value + [target.configValue]: + target.checked !== undefined ? target.checked : target.value }; } } fireEvent(this, "config-changed", { config: this._config }); } + + static get styles() { + return css` + ha-switch { + padding-top: 16px; + } + .side-by-side { + display: flex; + } + .side-by-side > * { + flex: 1; + padding-right: 4px; + } + `; + } } customElements.define("weather-card-editor", WeatherCardEditor); diff --git a/dist/weather-card.js b/dist/weather-card-mod.js similarity index 56% rename from dist/weather-card.js rename to dist/weather-card-mod.js index 9691e268..f1e02519 100644 --- a/dist/weather-card.js +++ b/dist/weather-card-mod.js @@ -1,6 +1,4 @@ -const LitElement = Object.getPrototypeOf( - customElements.get("ha-panel-lovelace") -); +const LitElement = customElements.get("hui-masonry-view") ? Object.getPrototypeOf(customElements.get("hui-masonry-view")) : Object.getPrototypeOf(customElements.get("hui-view")); const html = LitElement.prototype.html; const weatherIconsDay = { @@ -80,7 +78,7 @@ function hasConfigOrEntityChanged(element, changedProps) { return true; } -class WeatherCard extends LitElement { +class WeatherCardMod extends LitElement { static get properties() { return { _config: {}, @@ -113,7 +111,10 @@ class WeatherCard extends LitElement { return html``; } + this.numberElements = 0; + const stateObj = this.hass.states[this._config.entity]; + const stateObjTemp = this.hass.states[this._config.tempsource]; if (!stateObj) { return html` @@ -132,138 +133,154 @@ class WeatherCard extends LitElement { `; } - const lang = this.hass.selectedLanguage || this.hass.language; - - const next_rising = new Date( - this.hass.states["sun.sun"].attributes.next_rising - ); - const next_setting = new Date( - this.hass.states["sun.sun"].attributes.next_setting - ); - return html` ${this.renderStyle()} + ${this._config.current !== false ? this.renderCurrent(stateObj) : ""} + ${this._config.details !== false ? this.renderDetails(stateObj) : ""} + ${this._config.forecast !== false + ? this.renderForecast(stateObj.attributes.forecast) + : ""} + + `; + } + + renderCurrent(stateObj) { + 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")} - -
    -
  • - - ${stateObj.attributes.humidity} % -
    - - ${ - windDirections[ - parseInt((stateObj.attributes.wind_bearing + 11.25) / 22.5) - ] - } - ${stateObj.attributes.wind_speed} - ${this.getUnit("length")}/h - -
    - - ${next_rising.toLocaleTimeString()} -
    • -
  • - ${stateObj.attributes.pressure} - ${this.getUnit("air_pressure")} - -
    - - ${stateObj.attributes.visibility} - ${this.getUnit("length")} - -
    - - ${next_setting.toLocaleTimeString()} -
    • -
- - ${ - stateObj.attributes.forecast && - stateObj.attributes.forecast.length > 0 - ? html` -
- ${ - stateObj.attributes.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") - } - ` - : "" - } -
- ` - ) - } -
- ` - : "" - } - +
+ `; + } + + 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); + } + + 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")} +
+ ${daily.templow !== undefined + ? html` +
+ ${daily.templow}${this.getUnit("temperature")} +
+ ` + : ""} + ${!this._config.hide_precipitation && + daily.precipitation !== undefined && + daily.precipitation !== null + ? html` +
+ ${daily.precipitation} ${this.getUnit("precipitation")} +
+ ` + : ""} +
+ ` + )} +
`; } @@ -307,21 +324,19 @@ class WeatherCard extends LitElement { ha-card { cursor: pointer; margin: auto; - padding-top: 2.5em; + padding-top: 1.3em; padding-bottom: 1.3em; padding-left: 1em; padding-right: 1em; position: relative; } - .clear { - clear: both; + .spacer { + padding-top: 1em; } - .ha-icon { - height: 18px; - margin-right: 5px; - color: var(--paper-item-icon-color); + .clear { + clear: both; } .title { @@ -352,6 +367,11 @@ class WeatherCard extends LitElement { margin-right: 7px; } + .current { + padding-top: 1.2em; + margin-bottom: 3.5em; + } + .variations { display: flex; flex-flow: row wrap; @@ -359,20 +379,29 @@ class WeatherCard extends LitElement { font-weight: 300; color: var(--primary-text-color); list-style: none; - margin-top: 4.5em; - 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 { @@ -382,13 +411,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; @@ -417,6 +445,11 @@ class WeatherCard extends LitElement { color: var(--secondary-text-color); } + .precipitation { + color: var(--primary-text-color); + font-weight: 300; + } + .icon.bigger { width: 10em; height: 10em; @@ -452,4 +485,4 @@ class WeatherCard extends LitElement { `; } } -customElements.define("weather-card", WeatherCard); +customElements.define("weather-card-mod", WeatherCardMod); diff --git a/info.md b/info.md index 6328da97..0b301e17 100644 --- a/info.md +++ b/info.md @@ -1,43 +1,57 @@ -# Lovelace animated weather card +# Lovelace animated weather card (modified by @helto4real) + +_Modified the original card from @bramkragten to show percipitation and use eu m/s as wind speed unit_, all else is @bramkragten work. Thanks for this awesome work!\* + +Please checkout the original and instructions at https://github.com/bramkragten/weather-card Originally created for the [old UI](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008) converted by @arsaboo and @ciotlosm to [Lovelace](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008/291) and now converted to Lit to make it even better. This card uses the awesome [animated SVG weather icons by amCharts](https://www.amcharts.com/free-animated-svg-weather-icons/). -![Weather Card](https://github.com/bramkragten/custom-ui/blob/master/weather-card/weather-card.gif?raw=true) +![Weather Card](https://github.com/helto4real/weather-card-mod/blob/master/weather-card.gif?raw=true) 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: ```yaml resources: - - url: /community_plugin/weather-card/weather-card.js + - url: /community_plugin/weather-card-mod/weather-card-mod.js type: module ``` ## Configuration: -And add a card with type `custom:weather-card`: +And add a card with type `custom:weather-card-mod`: + +```yaml +- type: custom:weather-card-mod + entity: weather.yourweatherentity + name: Optional name +``` + +If you want to use an sensor as current temperature use the tempsource ```yaml -- type: custom:weather-card +- type: custom:weather-card-mod entity: weather.yourweatherentity + tempsource: sensor.outside_temp_sensor name: Optional name ``` If you want to use your local icons add the location to the icons: ```yaml -- type: custom:weather-card +- type: custom:weather-card-mod entity: weather.yourweatherentity - icons: "/community_plugin/weather-card/icons/" + icons: "/community_plugin/weather-card-mod/icons/" ``` Make sure the `sun` component is enabled: diff --git a/weather-card.gif b/weather-card.gif index 53bef10e..1cc72647 100644 Binary files a/weather-card.gif and b/weather-card.gif differ