added percentage to sliders

nboissel · Jul 25, 2019 · a7a8abc · a7a8abc
1 parent 07fa940
commit a7a8abc
Show file tree

Hide file tree

Showing 6 changed files with 15,211 additions and 195 deletions.
diff --git a/dist/light-entity-card.js b/dist/light-entity-card.js
diff --git a/dist/light-entity-card.js.map b/dist/light-entity-card.js.map
diff --git a/src/defaults.js b/src/defaults.js
@@ -7,6 +7,8 @@ export default {
     white_value: true,
     color_picker: true,
 
+    show_slider_percent: false,
+
     full_width_sliders: false,
 
     brightness_icon: 'weather-sunny',

diff --git a/src/index-editor.js b/src/index-editor.js
@@ -168,6 +168,11 @@ export default class LightEntityCardEditor extends LitElement {
                 .checked=${this._config.full_width_sliders}
                 .configValue="${"full_width_sliders"}"
               >Full Width Sliders</paper-checkbox>
+              <paper-checkbox
+                @checked-changed="${this._valueChanged}" 
+                .checked=${this._config.show_slider_percent}
+                .configValue="${"show_slider_percent"}"
+              >Show Slider Percent</paper-checkbox>
             </div>
           </div>
       </div>

diff --git a/src/index.js b/src/index.js
@@ -226,12 +226,29 @@ class LightEntityCard extends LitElement {
     return html`
       <div class='control light-entity-card-center'>
         <ha-icon icon="hass:${this.config.brightness_icon}"></ha-icon>
-        <ha-slider .value='${stateObj.attributes.brightness}' @value-changed="${e => this.setBrightness(e, stateObj)}" min="1"
-          max="255">
+        <ha-slider .value='${stateObj.attributes.brightness}' @value-changed="${e => this.setBrightness(e, stateObj)}" min="1" max="255"></ha-slider>
+        ${this.showPercent(stateObj.attributes.brightness, 0, 254)}
       </div>
     `;
   }
 
+  /**
+   * shows slider percent if config is set
+   * @param {number} value 
+   * @param {number} min 
+   * @param {number} max 
+   * @return {TemplateResult}
+   */
+  showPercent(value, min, max){
+    if (!this.config.show_slider_percent) return html``;
+    let percent = parseInt(((value - min) * 100) / (max - min), 0);
+    if (isNaN(percent)) percent = 0;
+
+    return html`
+      <div class='percent-slider'>${percent}%</div>
+    `;
+  }
+
   /**
    * creates color temperature slider for a given entity
    * @param {LightEntity} stateObj
@@ -246,7 +263,8 @@ class LightEntityCard extends LitElement {
         <ha-icon icon="hass:${this.config.temperature_icon}"></ha-icon>
         <ha-slider class='light-entity-card-color_temp' min="${stateObj.attributes.min_mireds}" max="${stateObj.attributes.max_mireds}"
           .value=${stateObj.attributes.color_temp} @value-changed="${e => this.setColorTemp(e, stateObj)}">
-          </ha-labeled-slider>
+        </ha-slider>
+        ${this.showPercent(stateObj.attributes.color_temp, stateObj.attributes.min_mireds-1, stateObj.attributes.max_mireds-1)}
       </div>
     `;
   }
@@ -264,7 +282,8 @@ class LightEntityCard extends LitElement {
       <div class="control light-entity-card-center">
         <ha-icon icon="hass:${this.config.white_icon}"></ha-icon>
         <ha-slider max="255" .value="${stateObj.attributes.white_value}" @value-changed="${e => this.setWhiteValue(e, stateObj)}">
-          </ha-labeled-slider>
+        </ha-slider>
+        ${this.showPercent(stateObj.attributes.white_value, 0, 254)}
       </div>
     `;
   }

diff --git a/src/style.js b/src/style.js
@@ -14,6 +14,11 @@ const style = css`
         width: 100%;
     }
 
+    .percent-slider {
+        color: var(--primary-text-color);
+        margin-top: 5px;
+    }
+
     .light-entity-card__header {
         display: flex;
         justify-content: space-between;