From 1a6226270ff3ab812df3c4348b4fafe6cebb0200 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 13 Dec 2018 23:36:01 +0100 Subject: [PATCH 1/8] Fix setting aspect ratio in percentage (#2289) * Fix setting aspect ratio in percentage * Use endsWith * Fix invalid test --- src/common/util/parse-aspect-ratio.ts | 42 +++++++++++-------- .../common/util/parse_aspect_ratio_test.ts | 6 +-- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/common/util/parse-aspect-ratio.ts b/src/common/util/parse-aspect-ratio.ts index cd80d4b90d..8fb1dee0a2 100644 --- a/src/common/util/parse-aspect-ratio.ts +++ b/src/common/util/parse-aspect-ratio.ts @@ -1,24 +1,30 @@ -export default function parseAspectRatio(input) { - // Handle 16x9, 16:9, 1.78x1, 1.78:1, 1.78 - // Ignore everything else - function parseOrThrow(num) { - const parsed = parseFloat(num); - if (isNaN(parsed)) { - throw new Error(`${num} is not a number`); - } - return parsed; +// Handle 16x9, 16:9, 1.78x1, 1.78:1, 1.78 +// Ignore everything else +const parseOrThrow = (num) => { + const parsed = parseFloat(num); + if (isNaN(parsed)) { + throw new Error(`${num} is not a number`); + } + return parsed; +}; + +export default function parseAspectRatio(input: string) { + if (!input) { + return null; } try { - if (input) { - const arr = input.replace(":", "x").split("x"); - if (arr.length === 0) { - return null; - } - - return arr.length === 1 - ? { w: parseOrThrow(arr[0]), h: 1 } - : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) }; + if (input.endsWith("%")) { + return { w: 100, h: parseOrThrow(input.substr(0, input.length - 1)) }; } + + const arr = input.replace(":", "x").split("x"); + if (arr.length === 0) { + return null; + } + + return arr.length === 1 + ? { w: parseOrThrow(arr[0]), h: 1 } + : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) }; } catch (err) { // Ignore the error } diff --git a/test-mocha/common/util/parse_aspect_ratio_test.ts b/test-mocha/common/util/parse_aspect_ratio_test.ts index 15b42a0cc1..758010aefa 100644 --- a/test-mocha/common/util/parse_aspect_ratio_test.ts +++ b/test-mocha/common/util/parse_aspect_ratio_test.ts @@ -31,9 +31,9 @@ describe("parseAspectRatio", () => { assert.deepEqual(r, ratio178); }); - it("Skips null states", () => { - const r = parseAspectRatio(null); - assert.equal(r, null); + it("Parses 23%", () => { + const r = parseAspectRatio("23%"); + assert.deepEqual(r, { w: 100, h: 23 }); }); it("Skips empty states", () => { From f683337cbe74ad33403cab036ccf10032f39f014 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 13 Dec 2018 21:46:57 +0100 Subject: [PATCH 2/8] Fix opening edit dialog twice when closed by clicking on overlay (#2290) --- .../editor/card-editor/hui-dialog-edit-card.ts | 1 + .../editor/card-editor/hui-dialog-pick-card.ts | 13 ++++++++++++- .../lovelace/editor/card-editor/hui-edit-card.ts | 12 +++++++++++- 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 3046a4d5f4..f47930a851 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -58,6 +58,7 @@ export class HuiDialogEditCard extends LitElement { `; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts index 75553235ad..5c55787dfa 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts @@ -11,6 +11,7 @@ import { LovelaceCardConfig } from "../../../../data/lovelace"; export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) { public hass?: HomeAssistant; public cardPicked?: (cardConf: LovelaceCardConfig) => void; + public closeDialog?: () => void; static get properties(): PropertyDeclarations { return {}; @@ -18,7 +19,11 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) { protected render(): TemplateResult { return html` - +

${this.localize("ui.panel.lovelace.editor.edit_card.header")}

+

${this.localize("ui.panel.lovelace.editor.edit_card.header")}

Date: Thu, 13 Dec 2018 15:26:23 +0100 Subject: [PATCH 3/8] Call super updated (#2293) --- src/panels/config/cloud/cloud-exposed-entities.ts | 1 + src/panels/config/cloud/cloud-webhooks.ts | 1 + src/panels/lovelace/cards/hui-entities-card.ts | 3 ++- src/panels/lovelace/cards/hui-entity-button-card.ts | 1 + src/panels/lovelace/cards/hui-gauge-card.ts | 7 ++----- src/panels/lovelace/cards/hui-glance-card.ts | 1 + src/panels/lovelace/cards/hui-light-card.ts | 1 + src/panels/lovelace/cards/hui-sensor-card.ts | 1 + src/panels/lovelace/components/hui-entities-toggle.ts | 1 + src/panels/lovelace/components/hui-timestamp-display.ts | 1 + src/panels/lovelace/ha-panel-lovelace.ts | 1 + 11 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/panels/config/cloud/cloud-exposed-entities.ts b/src/panels/config/cloud/cloud-exposed-entities.ts index e9d6438a2a..fd47f759b0 100644 --- a/src/panels/config/cloud/cloud-exposed-entities.ts +++ b/src/panels/config/cloud/cloud-exposed-entities.ts @@ -70,6 +70,7 @@ export class CloudExposedEntities extends LitElement { } protected updated(changedProperties: PropertyValues) { + super.updated(changedProperties); if ( changedProperties.has("filter") && changedProperties.get("filter") !== this.filter diff --git a/src/panels/config/cloud/cloud-webhooks.ts b/src/panels/config/cloud/cloud-webhooks.ts index db0d3a1dad..e89b6123a9 100644 --- a/src/panels/config/cloud/cloud-webhooks.ts +++ b/src/panels/config/cloud/cloud-webhooks.ts @@ -79,6 +79,7 @@ export class CloudWebhooks extends LitElement { } protected updated(changedProps: PropertyValues) { + super.updated(changedProps); if (changedProps.has("cloudStatus") && this.cloudStatus) { this._cloudHooks = this.cloudStatus.prefs.cloudhooks || {}; } diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 188c8a15ae..1462183742 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -88,7 +88,8 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement) this._configEntities = entities; } - protected updated(_changedProperties: PropertyValues): void { + protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); if (this._hass && this._config) { applyThemesOnElement(this, this._hass.themes, this._config.theme); } diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index fbb074b0b4..d2b208ae40 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -116,6 +116,7 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement) } protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); if (!this._config || !this.hass) { return; } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 65508b542e..3872d6ca12 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -110,11 +110,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } protected updated(changedProps: PropertyValues): void { - if ( - !this._config || - !this.hass || - !this.shadowRoot!.getElementById("gauge") - ) { + super.updated(changedProps); + if (!this._config || !this.hass) { return; } const stateObj = this.hass.states[this._config.entity]; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index ff74e0dc0f..537bc405e2 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -135,6 +135,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement) } protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); if (!this._config || !this.hass) { return; } diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 4dbdbc40c1..1c224e8453 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -154,6 +154,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement) } protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); if (!this._config || !this.hass || !this._jQuery) { return; } diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts index 2434527bcb..67d1ea8d45 100755 --- a/src/panels/lovelace/cards/hui-sensor-card.ts +++ b/src/panels/lovelace/cards/hui-sensor-card.ts @@ -265,6 +265,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard { } protected updated(changedProps: PropertyValues) { + super.updated(changedProps); if (!this._config || this._config.graph !== "line" || !this.hass) { return; } diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts index 95d1559766..d441f7369f 100644 --- a/src/panels/lovelace/components/hui-entities-toggle.ts +++ b/src/panels/lovelace/components/hui-entities-toggle.ts @@ -25,6 +25,7 @@ class HuiEntitiesToggle extends LitElement { } public updated(changedProperties: PropertyValues) { + super.updated(changedProperties); if (changedProperties.has("entities")) { this._toggleEntities = this.entities!.filter( (entityId) => diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts index d97b9abdd0..3a346ff0ce 100644 --- a/src/panels/lovelace/components/hui-timestamp-display.ts +++ b/src/panels/lovelace/components/hui-timestamp-display.ts @@ -78,6 +78,7 @@ class HuiTimestampDisplay extends hassLocalizeLitMixin(LitElement) { } protected updated(changedProperties: PropertyValues) { + super.updated(changedProperties); if (!changedProperties.has("format") || !this._connected) { return; } diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index 136a9283b5..559e1e5311 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -105,6 +105,7 @@ class LovelacePanel extends hassLocalizeLitMixin(LitElement) { } public updated(changedProps: PropertyValues): void { + super.updated(changedProps); if (changedProps.has("narrow") || changedProps.has("showMenu")) { this._updateColumns(); } From 87eac4cdee136d1509a006420a8372a46aff6c4a Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Thu, 13 Dec 2018 21:45:21 -0500 Subject: [PATCH 4/8] remove Animation for thermostat and light (#2303) * Update Animation * Update light --- src/panels/lovelace/cards/hui-light-card.ts | 1 + src/panels/lovelace/cards/hui-thermostat-card.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 1c224e8453..dc0ecad1e4 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -36,6 +36,7 @@ const lightConfig = { lineCap: "round", handleSize: "+12", showTooltip: false, + animation: false, }; interface Config extends LovelaceCardConfig { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 91f0cc0766..36620b541f 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -29,6 +29,7 @@ const thermostatConfig = { lineCap: "round", handleSize: "+10", showTooltip: false, + animation: false, }; const modeIcons = { From 4f6ecf5c2117e5bee9c1ca32954fd7ec2a69a158 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Mon, 17 Dec 2018 03:07:59 -0600 Subject: [PATCH 5/8] :hammer: Fix for element positioning (#2335) * Fix for element positioning * Address comments --- .../demos/demo-hui-picture-elements-card.ts | 49 +++++++++++++++++++ .../cards/hui-picture-elements-card.ts | 20 ++++---- 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index aa991d7706..8c01770306 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -76,6 +76,55 @@ const CONFIGS = [ left: 35% `, }, + { + heading: "Card with header", + config: ` +- type: picture-elements + image: /images/floorplan.png + title: My House + elements: + - type: service-button + title: Lights Off + style: + top: 97% + left: 90% + padding: 0px + service: light.turn_off + service_data: + entity_id: group.all_lights + - type: icon + icon: mdi:cctv + entity: camera.demo_camera + style: + top: 12% + left: 6% + transform: rotate(-60deg) scaleX(-1) + --iron-icon-height: 30px + --iron-icon-width: 30px + --iron-icon-stroke-color: black + --iron-icon-fill-color: rgba(50, 50, 50, .75) + - type: image + entity: light.bed_light + tap_action: + action: toggle + image: /images/light_bulb_off.png + state_image: + 'on': /images/light_bulb_on.png + state_filter: + 'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold) + 'off': brightness(80%) saturate(0.8) + style: + top: 35% + left: 65% + width: 7% + padding: 50px 50px 100px 50px + - type: state-icon + entity: binary_sensor.movement_backyard + style: + top: 8% + left: 35% + `, + }, ]; class DemoPicElements extends PolymerElement { diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 072215f318..56a1de194d 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -63,15 +63,15 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { return html` ${this.renderStyle()} -
+ ${ this._config.elements.map((elementConfig: LovelaceElementConfig) => this._createHuiElement(elementConfig) @@ -85,9 +85,9 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { private renderStyle(): TemplateResult { return html`