added the ability to hide/show ICON, NAME, TEXT for indexes (fixes #43)

graphic changes in order to improve text in graphs (fixes #42)
fix for wrong effect text if sensor return NaN (fixes comment in #42)
added pt_BR to languages so detection when 'Brazilian' is selected would works (as in merge 41)

Author: argaar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comfortable-environment-card",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Lovelace comfortable-environment-card",
   "keywords": [
     "home-assistant",

src/comfortable-environment-card.ts

@@ -68,7 +68,7 @@ class ComfortableEnvironmentCard extends LitElement {
   }
 
   public static getStubConfig(): Record<string, unknown> {
-    return { name: localize('configurator.room_name'), temperature_sensor: "sensor.room_temperature", humidity_sensor: "sensor.room_humidity", display_precision: 1, show_index: "ALL", show_realvalues: "ALL" };
+    return { name: localize('configurator.room_name'), temperature_sensor: "sensor.room_temperature", humidity_sensor: "sensor.room_humidity", display_precision: 1, show_index: "ALL", show_realvalues: "ALL", index_showinfo: "ALL" };
   }
 
   protected calcHI(tempInF: number, humValue: number): number {
@@ -102,8 +102,11 @@ class ComfortableEnvironmentCard extends LitElement {
   }
 
   protected calcHIEffects(hiValue: number): number {
-    let hieffects = 0
+    let hieffects = NaN
     switch(true) {
+        case hiValue<80:
+          hieffects = 0
+          break;
         case hiValue>=80 && hiValue<=90.0:
           hieffects = 1
           break;
@@ -125,8 +128,11 @@ class ComfortableEnvironmentCard extends LitElement {
   }
 
   protected calcDIEffects(diValue: number): number {
-    let diEffects = 0
+    let diEffects = NaN
     switch(true) {
+      case diValue <= 10.0:
+        diEffects = 0
+        break;
       case diValue>10.0 && diValue<=15.0:
         diEffects = 1
         break;
@@ -164,9 +170,10 @@ class ComfortableEnvironmentCard extends LitElement {
     const humSensorStatus = Number(this.hass.states[this.config.humidity_sensor]?.state);
     const tempSensorUnit = this.hass.states[this.config.temperature_sensor]?.attributes.unit_of_measurement
     const tempSensorUnitInF = this.hass.states[this.config.temperature_sensor]?.attributes.unit_of_measurement==='°F'
-    const showIndex = this.config.show_index
-    const showRealValues = this.config.show_realvalues
-    const display_precision = Number(this.config.display_precision)
+    const showIndex = this.config.show_index || 'ALL'
+    const indexInfo = this.config.index_showinfo || 'ALL'
+    const showRealValues = this.config.show_realvalues || 'ALL'
+    const display_precision = Number(this.config.display_precision) || 1
 
     const tempCelsiusValue = tempSensorUnitInF ? this.toCelsius(tempSensorStatus) : tempSensorStatus
     const tempFarenheitValue = tempSensorUnitInF ? tempSensorStatus : this.toFahrenheit(tempSensorStatus)
@@ -186,74 +193,108 @@ class ComfortableEnvironmentCard extends LitElement {
       ${this.renderStyle()}
       <ha-card tabindex="0">
 
-        ${(this.config.room_name || showRealValues != 'NONE')?html`
-          <div class="header">
-            <div class="name">
-              ${this.config.room_name}
-            </div>
-            ${(showRealValues != 'NONE')?html`
-              <div class="header_icons">
-                ${(showRealValues == 'ALL' || showRealValues == 'TEMPERATURE')?html`
-                  <div class="temp">
-                    ${tempSensorStatus.toFixed(display_precision)}${tempSensorUnit}
-                    <div class="icon">
-                      <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
-                        <g>
-                          <path class="primary-path" d="${mdiThermometer}" />
-                        </g>
-                      </svg>
-                    </div>
+        <div class="header">
+
+          <div class="name">
+            ${this.config.room_name}
+          </div>
+
+          ${(showRealValues != 'NONE')?html`
+            <div class="header_icons">
+              ${(showRealValues == 'ALL' || showRealValues == 'TEMPERATURE')?html`
+                <div class="temp">
+                  ${tempSensorStatus.toFixed(display_precision)}${tempSensorUnit}
+                  <div class="icon">
+                    <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
+                      <g>
+                        <path class="primary-path" d="${mdiThermometer}" />
+                      </g>
+                    </svg>
                   </div>
-                `:``}
-                ${(showRealValues == 'ALL' || showRealValues == 'HUMIDITY')?html`
-                  <div class="hum">
-                    ${humSensorStatus.toFixed(display_precision)}%
-                    <div class="icon">
-                      <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
-                        <g>
-                          <path class="primary-path" d="${mdiWaterPercent}" />
-                        </g>
-                      </svg>
-                    </div>
+                </div>
+              `:``}
+
+              ${(showRealValues == 'ALL' || showRealValues == 'HUMIDITY')?html`
+                <div class="hum">
+                  ${humSensorStatus.toFixed(display_precision)}%
+                  <div class="icon">
+                    <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
+                      <g>
+                        <path class="primary-path" d="${mdiWaterPercent}" />
+                      </g>
+                    </svg>
                   </div>
-                `:``}
-              </div>
+                </div>
               `:``}
-          </div>
-        `:``}
+            </div>
+            `:``}
+
+        </div>
 
         <div class="info">
 
           ${(showIndex == 'ALL' || showIndex == 'HI')?html`
-            <div class="comfort-env-text">
-              <div class="icon">
-                <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
-                  <g>
-                    <path class="primary-path" d="${mdiSunThermometer}" />
-                  </g>
-                </svg>
+            ${(indexInfo != 'NONE')?html`
+              <div class="comfort-env-text">
+                ${(indexInfo == 'ALL' || indexInfo == 'ICON' || indexInfo == 'ICON_AND_NAME' || indexInfo == 'ICON_AND_TEXT')?html`
+                  <div class="icon">
+                    <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
+                      <g>
+                        <path class="primary-path" d="${mdiSunThermometer}" />
+                      </g>
+                    </svg>
+                  </div>
+                `:``}
+                ${(indexInfo != 'ICON')?html`
+                  <div class="effects">
+                    ${(indexInfo == 'ALL' || indexInfo == 'ICON_AND_NAME' || indexInfo == 'NAME' || indexInfo == 'NAME_AND_TEXT')?html`
+                      ${localize('common.hi')}: ${HI}${tempSensorUnit}
+                    `:``}
+                    ${(indexInfo == 'ALL' || indexInfo == 'NAME_AND_TEXT')?html`
+                       - 
+                    `:``}
+                    ${(indexInfo == 'ALL' || indexInfo == 'ICON_AND_TEXT' || indexInfo == 'TEXT' || indexInfo == 'NAME_AND_TEXT')?html`
+                      ${!Number.isNaN(HIeffects)?localize('states.hi.'+[HIeffects]):'---'}
+                    `:``}
+                  </div>
+                `:``}
               </div>
-              <div class="effects">${localize('common.hi')}: ${HI}${tempSensorUnit} - ${localize('states.hi.'+[HIeffects])}</div>
-            </div>
-            <div class="color-range-container">
+            `:``}
+            <div class="color-range-container${indexInfo=='NONE'?' collapsed':''}">
               <div class="color-range-gradient" style="background: linear-gradient(90deg, rgb(254, 240, 217) 0%, rgb(253, 204, 138) 28%, rgb(252, 141, 89) 42%, rgb(227, 74, 51) 66%, rgb(179, 0, 0) 100%);" >
-                  <li class="value-box" style="margin-left: max(0%,calc(${this.calcRange(0,100,tempSensorUnitInF?76:23,tempSensorUnitInF?132:57,HI)}% - 46px))">${HI}</li>
+                  <div class="value-box" style="margin-left: max(0%,calc(${this.calcRange(0,100,tempSensorUnitInF?76:23,tempSensorUnitInF?132:57,HI)}% - 46px))">${HI}</div>
               </div>
             </div>
           `:``}
 
           ${(showIndex == 'ALL' || showIndex == 'DI')?html`
-            <div class="comfort-env-text">
-              <div class="icon">
-                <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
-                  <g>
-                    <path class="primary-path" d="${mdiThermometerLines}" />
-                  </g>
-                </svg>
-              </div>
-              <div class="effects">${localize('common.di')}: ${DI} - ${localize('states.di.'+[DIeffects])}</div>
+            ${(indexInfo != 'NONE')?html`
+              <div class="comfort-env-text">
+                ${(indexInfo == 'ALL' || indexInfo == 'ICON' || indexInfo == 'ICON_AND_NAME' || indexInfo == 'ICON_AND_TEXT')?html`
+                  <div class="icon">
+                    <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" style="fill: var(--state-icon-color); vertical-align: sub;">
+                      <g>
+                        <path class="primary-path" d="${mdiThermometerLines}" />
+                      </g>
+                    </svg>
+                  </div>
+                `:``}
+                ${(indexInfo != 'ICON')?html`
+                  <div class="effects">
+                  ${(indexInfo == 'ALL' || indexInfo == 'ICON_AND_NAME' || indexInfo == 'NAME' || indexInfo == 'NAME_AND_TEXT')?html`
+                    ${localize('common.di')}: ${DI}
+                  `:``}
+                  ${(indexInfo == 'ALL' || indexInfo == 'NAME_AND_TEXT')?html`
+                     - 
+                  `:``}
+                  ${(indexInfo == 'ALL' || indexInfo == 'ICON_AND_TEXT' || indexInfo == 'TEXT' || indexInfo == 'NAME_AND_TEXT')?html`
+                    ${!Number.isNaN(DIeffects)?localize('states.di.'+[DIeffects]):'---'}
+                  `:``}
+                  </div>
+                `:``}
             </div>
-            <div class="color-range-container">
+            `:``}
+            <div class="color-range-container${indexInfo=='NONE'?' collapsed':''}">
               <div class="color-range-gradient" style="background: linear-gradient(90deg,rgb(5, 112, 176) 0%,rgb(116, 169, 207)12%,rgb(189, 201, 225) 32%,rgb(241, 238, 246) 44%,rgb(254, 240, 217) 56%,rgb(253, 204, 138) 68%,rgb(252, 141, 89) 80%,rgb(227, 74, 51) 88%,rgb(179, 0, 0) 100%);" >
                   <div class="value-box" style="margin-left: max(0%,calc(${this.calcRange(0,100,8,34,DI)}% - 46px))">${DI}</div>
               </div>
@@ -283,13 +324,16 @@ class ComfortableEnvironmentCard extends LitElement {
         .color-range-container {
             display: flex;
         }
+        .collapsed {
+          margin-top: 2%;
+        }
         .color-range-gradient {
             width: 100%;
             border-radius: 5px;
             margin: 0 10px 10px;
         }
         .value-box {
-            border: solid 3px #000;
+            border: solid 2px #000;
             border-radius: 10px;
             padding: 3px;
             width: 32px;
@@ -303,15 +347,18 @@ class ComfortableEnvironmentCard extends LitElement {
             margin: 0 10px 0;
             padding: 5px 0 5px;
             text-align: left;
-            line-height: var(--mdc-icon-size);
+            line-height: var(--mdc-icon-size, 8px);
         }
         .info {
             margin-top: -4px;
             padding-bottom: 1%;
         }
+        .effects {
+          display: inline;
+        }
         .header {
             display: flex;
-            padding: 0 2% 0;
+            padding: 1% 2% 0;
             justify-content: space-between;
             font-weight: 500;
             margin-bottom: 1%;
@@ -328,8 +375,8 @@ class ComfortableEnvironmentCard extends LitElement {
         }
         .icon {
             display: inline-block;
-            width: var(--mdc-icon-size);
-            height: var(--mdc-icon-size);
+            width: var(--mdc-icon-size, 24px);
+            height: var(--mdc-icon-size, 24px);
         }
       </style>
     `;

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.6.0'
+export const CARD_VERSION = '1.7.0'

src/editor.ts

@@ -58,6 +58,10 @@ export class ComfortableEnvironmentCardEditor extends ScopedRegistryHost(LitElem
     return this._config?.display_precision ?? 1;
   }
 
+  get _index_showinfo(): string {
+    return this._config?.index_showinfo ?? "ALL";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -134,6 +138,20 @@ export class ComfortableEnvironmentCardEditor extends ScopedRegistryHost(LitElem
         })}
       </mwc-select>
 
+      <mwc-select
+        naturalMenuWidth
+        fixedMenuPosition
+        label="${localize('configurator.index_showinfo')}"
+        .configValue=${'index_showinfo'}
+        .value=${this._index_showinfo}
+        @selected=${this._valueChanged}
+        @closed=${(ev) => ev.stopPropagation()}
+      >
+        ${['ALL','ICON','ICON_AND_NAME','ICON_AND_TEXT','NAME','NAME_AND_TEXT','TEXT','NONE'].map((entity) => {
+          return html`<mwc-list-item .value=${entity}>${entity}</mwc-list-item>`;
+        })}
+      </mwc-select>
+
       <mwc-select
         naturalMenuWidth
         fixedMenuPosition

src/localize/languages/en.json

@@ -14,7 +14,8 @@
     "hum_sensor": "Humidity Sensor",
     "show_index": "Choose which index you want to show",
     "display_precision": "Display N numbers after decimal",
-    "show_realvalues": "Display real values in top right corner"
+    "show_realvalues": "Display real values in top right corner",
+    "index_showinfo": "Display index info"
   },
   "states": {
     "hi": {

src/localize/languages/it.json

@@ -14,7 +14,8 @@
     "hum_sensor": "Sensore di umidità",
     "show_index": "Scegli quale indice mostrare",
     "display_precision": "Mostra N numeri dopo la virgola",
-    "show_realvalues": "Mostra i valori reali in alto a destra"
+    "show_realvalues": "Mostra i valori reali in alto a destra",
+    "index_showinfo": "Mostra informazioni per l'indice"
   },
   "states": {
     "hi": {

src/localize/languages/pt_BR.json

@@ -0,0 +1,39 @@
+{
+  "common": {
+    "version": "Versão",
+    "description": "Um cartão para mostrar informação sobre Índice de Calor e/ou Índice de Desconforto com base na temperatura e humidade de uma divisão!",
+    "invalid_configuration": "A configuração do cartão é inválido ou não existe, por favor verifique!",
+    "temperature": "Temperatura",
+    "humidity": "Humidade",
+    "hi": "Índice de Calor",
+    "di": "Índice de Desconforto"
+  },
+  "configurator": {
+    "room_name": "Nome da Divisão",
+    "temp_sensor": "Sensor de Temperatura",
+    "hum_sensor": "Sensor de Humidade",
+    "show_index": "Escolha qual(ais) os índices a mostrar",
+    "display_precision": "Exibir N casas decimais",
+    "show_realvalues": "Exibir valores reais no canto superior-direito"
+  },
+  "states": {
+    "hi": {
+      "0": "Bom",
+      "1": "Cautela",
+      "2": "Extrema Cautela",
+      "3": "Perigo",
+      "4": "Perigo Extremo"
+    },
+    "di" : {
+      "0": "Extremamente desconfortável",
+      "1": "Moderadamente desconfortável",
+      "2": "Relativamente confortável",
+      "3": "Confortável",
+      "4": "Menos de 50% da população sente desconforto",
+      "5": "Mais de 50% da população sente desconforto",
+      "6": "A maioria da população sente desconforto",
+      "7": "Stress severo em toda a população",
+      "8": "Estado de emergência médica"
+    }
+  }
+}

src/localize/localize.ts

@@ -8,6 +8,7 @@ import * as hu from "./languages/hu.json";
 import * as it from "./languages/it.json";
 import * as nl from "./languages/nl.json";
 import * as pt from "./languages/pt.json";
+import * as pt_BR from "./languages/pt_BR.json";
 import * as ru from "./languages/ru.json";
 import * as sk from "./languages/sk.json";
 import * as uk from "./languages/uk.json";
@@ -24,6 +25,7 @@ const languages: any = {
   it: it,
   nl: nl,
   pt: pt,
+  pt_BR: pt_BR,
   ru: ru,
   sk: sk,
   uk: uk,

src/types.ts

@@ -14,4 +14,5 @@ export interface ComfortableEnvironmentCardConfig extends LovelaceCardConfig {
   show_index: string;
   display_precision: number;
   show_realvalues: string;
+  index_showinfo: string;
 }