From e1b4400f70e1c982ec27fed6d74a93a6f4d2028d Mon Sep 17 00:00:00 2001 From: titiviking <73351833+titiviking@users.noreply.github.com> Date: Wed, 19 Jan 2022 13:42:32 +0100 Subject: [PATCH] Several updates - Added "Feels like" in Current section - Enables toggle of "Feels like" in configurator - Reorganized current section for better customization - Reduced size of icon - Added weather state as title - Added location description under the weather state - some additional minor UI customization --- dist/weather-card-editor.js | 14 +++ dist/weather-card.js | 178 +++++++++++++++++++++++++++--------- 2 files changed, 151 insertions(+), 41 deletions(-) diff --git a/dist/weather-card-editor.js b/dist/weather-card-editor.js index 10733239..9e0f6548 100644 --- a/dist/weather-card-editor.js +++ b/dist/weather-card-editor.js @@ -60,6 +60,10 @@ export class WeatherCardEditor extends LitElement { get _hourly_forecast() { return this._config.hourly_forecast !== false; } + + get _feels_like() { + return this._config.feels_like !== false; + } get _number_of_forecasts() { return this._config.number_of_forecasts || 5; @@ -158,6 +162,16 @@ export class WeatherCardEditor extends LitElement { >Show hourly forecast +
+
+ Show "Feels like" temp +
+
@@ -150,9 +148,9 @@ class WeatherCard extends LitElement { return html` ${this._config.current !== false ? this.renderCurrent(stateObj) : ""} - ${this._config.details !== false ? this.renderDetails(stateObj, lang) : ""} + ${this._config.details !== false ? this.renderDetails(stateObj) : ""} ${this._config.forecast !== false - ? this.renderForecast(stateObj.attributes.forecast, lang) + ? this.renderForecast(stateObj.attributes.forecast) : ""} `; @@ -161,43 +159,43 @@ class WeatherCard extends LitElement { renderCurrent(stateObj) { this.numberElements++; + const apparent_temperature = this.hass.states[this._config.entity_apparent_temperature]; + return html` -
- ${stateObj.state} - - ${this._config.name - ? html` ${this._config.name} ` - : ""} - ${this.getUnit("temperature") == "°F" +
+
+ + +
+
+
+
${stateObj.state}
+
${this._config.name ? html` ${this._config.name}` : html`${this.hass.config.location_name}`}
+
+
+
${this.getUnit("temperature") == "°F" ? Math.round(stateObj.attributes.temperature) - : stateObj.attributes.temperature} - ${this.getUnit("temperature")} -
+ : stateObj.attributes.temperature} ${this.getUnit("temperature")}
+ ${this._config.feels_like ? html `
Feels like ${apparent_temperature.state} ${this.getUnit("temperature")}
`: ""} +
+
`; } - renderDetails(stateObj, lang) { + 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).toLocaleTimeString(lang, { - hour: "2-digit", - minute: "2-digit", - }); - next_setting = new Date(sun.attributes.next_setting).toLocaleTimeString(lang, { - hour: "2-digit", - minute: "2-digit", - }); + next_rising = new Date(sun.attributes.next_rising); + next_setting = new Date(sun.attributes.next_setting); } this.numberElements++; @@ -233,7 +231,7 @@ class WeatherCard extends LitElement { ? html`
  • - ${next_rising} + ${next_rising.toLocaleTimeString()}
    • ` : ""} @@ -241,7 +239,7 @@ class WeatherCard extends LitElement { ? html`
  • - ${next_setting} + ${next_setting.toLocaleTimeString()}
    • ` : ""} @@ -249,11 +247,13 @@ class WeatherCard extends LitElement { `; } - renderForecast(forecast, lang) { + renderForecast(forecast) { if (!forecast || forecast.length === 0) { return html``; } + const lang = this.hass.selectedLanguage || this.hass.language; + this.numberElements++; return html`
    @@ -379,7 +379,15 @@ class WeatherCard extends LitElement { position: absolute; left: 3em; font-weight: 300; - font-size: 3em; + font-size: 2em; + color: var(--primary-text-color); + } + + .subtitle { + position: absolute; + left: 3em; + font-weight: 300; + font-size: 1em; color: var(--primary-text-color); } @@ -390,7 +398,16 @@ class WeatherCard extends LitElement { position: absolute; right: 1em; } - + + .tempf { + font-weight: 300; + font-size: 1em; + color: var(--primary-text-color); + position: absolute; + right: 3.5em; + top: 7em; + } + .tempc { font-weight: 300; font-size: 1.5em; @@ -401,6 +418,85 @@ class WeatherCard extends LitElement { margin-top: -14px; margin-right: 7px; } + + .tempfc { + font-weight: 300; + font-size: 1em; + vertical-align: super; + color: var(--primary-text-color); + position: absolute; + right: 2.15em; + top: 7em; + } + + .content { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5em; + margin-top: 0.75em; + } + + .icon-image { + display: flex; + align-items: center; + min-width: 90px; /* 64px default */ + /* margin-right: 16px; */ + } + + .info { + display: flex; + justify-content: space-between; + flex-grow: 1; + overflow: hidden; + } + + .name-state { + overflow: hidden; + padding-right: 12px; + width: 100%; + } + + .temp-attribute { + text-align: right; + } + .temp-attribute .attribute { + right: 2em; + position: relative; + } + + .name, .state { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .state, .temp-attribute .temp { + font-size: 28px; + line-height: 1.2; + text-transform: capitalize; + } + + .name, .attribute { + font-size: 14px; + line-height: 1; + } + + .temp-attribute .temp { + position: relative; + /* margin-right: 24px; */ + } + + .name, .attribute { + font-size: 14px; + line-height: 1; + } + .temp-attribute .temp span { + position: absolute; + font-size: 24px; + top: 1px; + } @media (max-width: 460px) { .title { @@ -416,7 +512,7 @@ class WeatherCard extends LitElement { } .current { - padding: 1.2em 0; + padding: 2em 0; margin-bottom: 3.5em; } @@ -499,9 +595,9 @@ class WeatherCard extends LitElement { } .icon.bigger { - width: 10em; - height: 10em; - margin-top: -4em; + width: 8em; + height: 8em; + /* margin-top: -2em; */ position: absolute; left: 0em; }