From cdfc3f8fafa11d618f1221b75586c0bf858a288b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Sun, 8 Sep 2019 20:47:36 +0200 Subject: [PATCH] Use new round sliders for light card (#3634) * Use new round sliders for light card * Remove _roundSliderstyle --- package.json | 1 + src/panels/lovelace/cards/hui-light-card.ts | 130 +++++--------------- yarn.lock | 14 +++ 3 files changed, 48 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index 6b95d1adfb..3be9a261e9 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@polymer/paper-toggle-button": "^3.0.1", "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.1.0", + "@thomasloven/round-slider": "^0.2.2", "@vaadin/vaadin-combo-box": "^4.2.8", "@vaadin/vaadin-date-picker": "^3.3.3", "@webcomponents/shadycss": "^1.9.0", diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 7f596209f8..ee7f345a35 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -7,6 +7,7 @@ import { customElement, } from "lit-element"; import "@polymer/paper-icon-button/paper-icon-button"; +import "@thomasloven/round-slider"; import stateIcon from "../../../common/entity/state_icon"; import computeStateName from "../../../common/entity/compute_state_name"; @@ -22,25 +23,9 @@ import { styleMap } from "lit-html/directives/style-map"; import { HomeAssistant, LightEntity } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; -import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand"; import { toggleEntity } from "../common/entity/toggle-entity"; import { LightCardConfig } from "./types"; -const lightConfig = { - radius: 80, - step: 1, - circleShape: "pie", - startAngle: 315, - width: 5, - min: 1, - max: 100, - sliderType: "min-range", - lineCap: "round", - handleSize: "+12", - showTooltip: false, - animation: false, -}; - @customElement("hui-light-card") export class HuiLightCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { @@ -55,10 +40,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard { @property() private _config?: LightCardConfig; - @property() private _roundSliderStyle?: TemplateResult; - - @property() private _jQuery?: any; - private _brightnessTimout?: number; public getCardSize(): number { @@ -79,6 +60,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard { } const stateObj = this.hass.states[this._config!.entity] as LightEntity; + const brightness = + Math.round((stateObj.attributes.brightness / 254) * 100) || 0; if (!stateObj) { return html` @@ -107,7 +90,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard { class="more-info" @click="${this._handleMoreInfo}" > -
+
+ +
-
+
+ ${brightness} % +
${this._config.name || computeStateName(stateObj)}
@@ -134,35 +125,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard { return hasConfigOrEntityChanged(this, changedProps); } - protected async firstUpdated(): Promise { - const loaded = await loadRoundslider(); - - this._roundSliderStyle = loaded.roundSliderStyle; - this._jQuery = loaded.jQuery; - - const stateObj = this.hass!.states[this._config!.entity] as LightEntity; - - if (!stateObj) { - // Card will require refresh to work again - return; - } - - const brightness = stateObj.attributes.brightness || 0; - - this._jQuery("#light", this.shadowRoot).roundSlider({ - ...lightConfig, - change: (value) => this._setBrightness(value), - drag: (value) => this._dragEvent(value), - start: () => this._showBrightness(), - stop: () => this._hideBrightness(), - }); - this.shadowRoot!.querySelector(".brightness")!.innerHTML = - (Math.round((brightness / 254) * 100) || 0) + "%"; - } - protected updated(changedProps: PropertyValues): void { super.updated(changedProps); - if (!this._config || !this.hass || !this._jQuery) { + if (!this._config || !this.hass) { return; } @@ -172,12 +137,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard { return; } - const attrs = stateObj.attributes; - - this._jQuery("#light", this.shadowRoot).roundSlider({ - value: Math.round((attrs.brightness / 254) * 100) || 0, - }); - const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if (!oldHass || oldHass.themes !== this.hass.themes) { applyThemesOnElement(this, this.hass.themes, this._config.theme); @@ -186,7 +145,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard { private renderStyle(): TemplateResult { return html` - ${this._roundSliderStyle}