Merge pull request #283 from gauner666/main

Added graphical options

README.md

@@ -108,7 +108,7 @@ Else, if you prefer the graphical editor, use the menu to add the resource:
 | clickable_entities  | `boolean` |    false     | If true, clicking on the entity will open the entity's more info dialog. |
 | min_expected_power | `number`  |    0.01 | Represents the minimum amount of power (in Watts) expected to flow through the system at a given moment. Only used in the [New Flow Formula](#new-flow-formula). |
 | max_expected_power | `number`  | 2000 | Represents the maximum amount of power (in Watts) expected to flow through the system at a given moment. Only used in the [New Flow Formula](#new-flow-formula). |
-| display_zero_lines | `boolean` | true | If false, lines where no power is flowing will be hidden. |
+| display_zero_lines | `object` | `{mode: "show"}` | Check [Display Zero Lines](#display-zero) |
 | use_new_flow_rate_model | `boolean` | false | If set to true, the card will use the [New Flow Formula](#new-flow-formula).
 
 #### Entities object
@@ -262,6 +262,16 @@ This feature allows you to configure how the card handles a Grid Power Outage sc
 | label_alert | `string` | A text that will be displayed below the icon when there is a power outage. |
 | calculate_flow_rate | `boolean` or `number` | `false` | If set to `true`, the flow rate will be calculated by using the flow rate formula (either the new or the old one, depending on your configuration). If set to a number, the flow rate will be set to that number. For example, defining the value `10` will ensure one dot will flow every 10 seconds. |
 
+#### Display Zero Lines
+
+This object allows you to control the behavior of the flow lines that are inactive.
+
+| Name | Type | Description |
+| ----------- | -------- | ------------------------------------------------------------------------------------------------- |
+| mode | string | Valid Options are: `show`, `hide`, `transparency`, `grey_out`, `custom` |
+| transparency | number | A number between 0 and 100. 100 means the line doesn't show at all. 0 means the line shows in full opacity. Default is 50. Will be used when the mode is either `transparency` or `custom`. |
+| grey_color | `string` or `list of numbers` | Either a HEX Code or a List of three numbers between 0 and 255 in RGB order. Will be used when the mode is either `grey_out` or `custom`. |
+
 ### Minimal Configuration
 
 > Don't forget to change the entity ids

src/localize/languages/de.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Nulllinien anzeigen",
         "clickable_entities": "Klickbare Entitäten",
         "use_new_flow_rate_model": "Neues Fluss-Modell verwenden",
-        "use_metadata": "Metadaten verwenden"
+        "use_metadata": "Metadaten verwenden",
+        "mode": "Modus",
+        "show": "Anzeigen",
+        "hide": "Verstecken",
+        "custom": "Benutzerdefiniert",
+        "grey_out": "Ausgrauen",
+        "transparency": "Transparenz",
+        "grey_color": "Graue Farbe"
     }
 }

src/localize/languages/en.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Display Zero Lines",
         "clickable_entities": "Clickable Entities",
         "use_new_flow_rate_model": "New Flow Rate Model",
-        "use_metadata": "Use Metadata"
+        "use_metadata": "Use Metadata",
+        "mode": "Mode",
+        "show": "Show",
+        "hide": "Hide",
+        "custom": "Custom",
+        "grey_out": "Grey Out",
+        "transparency": "Transparency",
+        "grey_color": "Grey Color"
     }
 }

src/localize/languages/es.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Mostrar Líneas de Cero",
         "clickable_entities": "Entidades Clicables",
         "use_new_flow_rate_model": "Utilizar Nuevo Modelo de Tasa de Flujo",
-        "use_metadata": "Utilizar Metadatos"
+        "use_metadata": "Utilizar Metadatos",
+        "mode": "Modo",
+        "show": "Mostrar",
+        "hide": "Ocultar",
+        "custom": "Personalizado",
+        "grey_out": "Gris",
+        "transparency": "Transparencia",
+        "grey_color": "Color Gris"
     }
 }

src/localize/languages/fi.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Näytä nolla-viivat",
         "clickable_entities": "Napautettavat kohteet",
         "use_new_flow_rate_model": "Uusi virtausnopeusmalli",
-        "use_metadata": "Käytä metatietoja"
+        "use_metadata": "Käytä metatietoja",
+        "mode": "Tila",
+        "show": "Näytä",
+        "hide": "Piilota",
+        "custom": "Mukautettu",
+        "grey_out": "Harmaa",
+        "transparency": "Läpinäkyvyys",
+        "grey_color": "Harmaa väri"
     }
 }

src/localize/languages/fr.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Afficher les lignes zéro",
         "clickable_entities": "Entités cliquables",
         "use_new_flow_rate_model": "Nouveau modèle de débit",
-        "use_metadata": "Utiliser les métadonnées"
+        "use_metadata": "Utiliser les métadonnées",
+        "mode": "Mode",
+        "show": "Afficher",
+        "hide": "Masquer",
+        "custom": "Personnalisé",
+        "grey_out": "Griser",
+        "transparency": "Transparence",
+        "grey_color": "Couleur grise"
     }
 }

src/localize/languages/it.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Mostra Linee Zero",
         "clickable_entities": "Entità Cliccabili",
         "use_new_flow_rate_model": "Utilizza Nuovo Modello di Tasso di Flusso",
-        "use_metadata": "Utilizza Metadati"
+        "use_metadata": "Utilizza Metadati",
+        "mode": "Modalità",
+        "show": "Mostra",
+        "hide": "Nascondi",
+        "custom": "Personalizzato",
+        "grey_out": "Sfuma",
+        "transparency": "Trasparenza",
+        "grey_color": "Colore Sfumato"
     }
 }

src/localize/languages/nl.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Nullijnen Weergeven",
         "clickable_entities": "Klikbare Entiteiten",
         "use_new_flow_rate_model": "Nieuw Stroomsnelheid Model Gebruiken",
-        "use_metadata": "Metadata Gebruiken"
+        "use_metadata": "Metadata Gebruiken",
+        "mode": "Modus",
+        "show": "Weergeven",
+        "hide": "Verbergen",
+        "custom": "Aangepast",
+        "grey_out": "Grijstint",
+        "transparency": "Transparantie",
+        "grey_color": "Grijstint"
     }
 }

src/localize/languages/pl.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Wyświetl linie zera",
         "clickable_entities": "Klikalne jednostki",
         "use_new_flow_rate_model": "Nowy model wskaźnika przepływu",
-        "use_metadata": "Użyj metadanych"
+        "use_metadata": "Użyj metadanych",
+        "mode": "Tryb",
+        "show": "Pokaż",
+        "hide": "Ukryj",
+        "custom": "Niestandardowy",
+        "grey_out": "Szary",
+        "transparency": "Przezroczystość",
+        "grey_color": "Kolor szary"
     }
 }

src/localize/languages/pt-BR.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Exibir Linhas Zero",
         "clickable_entities": "Entidades Clicáveis",
         "use_new_flow_rate_model": "Utilizar Novo Modelo de Velocidade",
-        "use_metadata": "Utilizar Metadados"
+        "use_metadata": "Utilizar Metadados",
+        "mode": "Modo",
+        "show": "Mostrar",
+        "hide": "Esconder",
+        "custom": "Personalizado",
+        "grey_out": "Cinza",
+        "transparency": "Transparência",
+        "grey_color": "Cor do Cinza"
     }
 }

src/localize/languages/pt-PT.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Mostrar Linhas Zero",
         "clickable_entities": "Entidades Clicáveis",
         "use_new_flow_rate_model": "Utilizar Novo Modelo de Velocidade",
-        "use_metadata": "Utilizar Metadados"
+        "use_metadata": "Utilizar Metadados",
+        "mode": "Modo",
+        "show": "Mostrar",
+        "hide": "Esconder",
+        "custom": "Personalizado",
+        "grey_out": "Cinzento",
+        "transparency": "Transparência",
+        "grey_color": "Cor Cinzenta"
     }
 }

src/localize/languages/ru.json

@@ -60,6 +60,13 @@
         "display_zero_lines": "Отображать нулевые линии",
         "clickable_entities": "Кликабельные сущности",
         "use_new_flow_rate_model": "Использовать новую модель скорости потока",
-        "use_metadata": "Использовать метаданные"
+        "use_metadata": "Использовать метаданные",
+        "mode": "Режим",
+        "show": "Показать",
+        "hide": "Скрыть",
+        "custom": "Пользовательский",
+        "grey_out": "Серый",
+        "transparency": "Прозрачность",
+        "grey_color": "Серый цвет"
     }
 }

src/power-flow-card-plus-config.ts

@@ -12,8 +12,12 @@ interface mainConfigOptions {
   clickable_entities: boolean;
   max_expected_power: number;
   min_expected_power: number;
-  display_zero_lines?: boolean;
   use_new_flow_rate_model?: boolean;
+  display_zero_lines?: {
+    mode?: string;
+    transparency?: number;
+    grey_color?: string | number[];
+  };
 }
 export interface PowerFlowCardPlusConfig extends LovelaceCardConfig, mainConfigOptions {
   entities: {

src/power-flow-card-plus.ts

@@ -56,6 +56,11 @@ export class PowerFlowCardPlus extends LitElement {
       watt_threshold: coerceNumber(config.watt_threshold, defaultValues.wattThreshold),
       max_expected_power: coerceNumber(config.max_expected_power, defaultValues.maxExpectedPower),
       min_expected_power: coerceNumber(config.min_expected_power, defaultValues.minExpectedPower),
+      display_zero_lines: {
+        mode: config.display_zero_lines?.mode ?? defaultValues.displayZeroLines.mode,
+        transparency: coerceNumber(config.display_zero_lines?.transparency, defaultValues.displayZeroLines.transparency),
+        grey_color: config.display_zero_lines?.grey_color ?? defaultValues.displayZeroLines.grey_color,
+      },
     };
   }
 
@@ -232,9 +237,34 @@ export class PowerFlowCardPlus extends LitElement {
     ) as boolean;
   }
 
+  /**
+   * Determine wether to show the line or not based on if the power is flowing or not and if not, based on display_zero_lines mode
+   * @param power - power flowing through the line
+   * @returns  boolean - `true` if line should be shown, `false` if not
+   */
   private showLine(power: number): boolean {
-    if (this._config?.display_zero_lines !== false) return true;
-    return power > 0;
+    if (power > 0) return true;
+    return this._config?.display_zero_lines?.mode !== "hide";
+  }
+
+  /**
+   * Depending on display_zero_lines mode, return the style class to apply to the line
+   * @param power - power flowing through the line
+   * @returns string - style class to apply to the line
+   */
+  private styleLine(power: number): string {
+    if (power > 0) return "";
+    const displayZeroMode = this._config?.display_zero_lines?.mode;
+    if (displayZeroMode === "show" || displayZeroMode === undefined) return "";
+    let styleclass = "";
+    if (displayZeroMode === "transparency" || displayZeroMode === "custom") {
+      const transparency = this._config?.display_zero_lines?.transparency;
+      if (transparency ?? 50 > 0) styleclass += "transparency ";
+    }
+    if (displayZeroMode === "grey_out" || displayZeroMode === "custom") {
+      styleclass += "grey";
+    }
+    return styleclass;
   }
 
   private computeFieldIcon(field: any, fallback: string): string {
@@ -879,6 +909,17 @@ export class PowerFlowCardPlus extends LitElement {
       entities.home?.secondary_info?.color_value ? "var(--text-home-color)" : "var(--primary-text-color)"
     );
 
+    this.style.setProperty(
+      "--transparency-unused-lines",
+      this._config?.display_zero_lines?.transparency ? this._config.display_zero_lines.transparency.toString() : "0"
+    );
+
+    if (this._config.display_zero_lines?.grey_color !== undefined) {
+      let greyColor = this._config.display_zero_lines.grey_color;
+      if (typeof greyColor === "object") greyColor = this.convertColorListToHex(greyColor);
+      this.style.setProperty("--greyed-out--line-color", greyColor);
+    }
+
     const templatesObj = {
       gridSecondary: this._templateResults.gridSecondary?.result,
       solarSecondary: this._templateResults.solarSecondary?.result,
@@ -1072,7 +1113,7 @@ export class PowerFlowCardPlus extends LitElement {
                       ${this.showLine(nonFossil.state.power || 0)
                         ? html`
                             <svg width="80" height="30">
-                              <path d="M40 -10 v40" class="low-carbon" id="low-carbon" />
+                              <path d="M40 -10 v40" class="low-carbon ${this.styleLine(nonFossil.state.power || 0)}" id="low-carbon" />
                               ${nonFossil.has
                                 ? svg`<circle
                               r="2.4"
@@ -1157,7 +1198,7 @@ export class PowerFlowCardPlus extends LitElement {
                       ${this.showLine(individual2.state || 0)
                         ? html`
                             <svg width="80" height="30">
-                              <path d="M40 -10 v50" id="individual2" />
+                              <path d="M40 -10 v50" id="individual2" class="${this.styleLine(individual2.state || 0)}" />
                               ${individual2.state
                                 ? svg`<circle
                               r="2.4"
@@ -1213,7 +1254,7 @@ export class PowerFlowCardPlus extends LitElement {
                       ${this.showLine(individual1.state || 0)
                         ? html`
                             <svg width="80" height="30">
-                              <path d="M40 -10 v40" id="individual1" />
+                              <path d="M40 -10 v40" id="individual1" class="${this.styleLine(individual1.state || 0)}" />
                               ${individual1.state
                                 ? svg`<circle
                                 r="2.4"
@@ -1495,7 +1536,7 @@ export class PowerFlowCardPlus extends LitElement {
                       ${this.showLine(individual1.state || 0)
                         ? html`
                             <svg width="80" height="30">
-                              <path d="M40 40 v-40" id="individual1" />
+                              <path d="M40 40 v-40" id="individual1" class="${this.styleLine(individual1.state || 0)}" />
                               ${individual1.state
                                 ? svg`<circle
                                 r="2.4"
@@ -1559,7 +1600,7 @@ export class PowerFlowCardPlus extends LitElement {
                 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="solar-home-flow">
                   <path
                     id="solar"
-                    class="solar"
+                    class="solar ${this.styleLine(solar.state.toHome || 0)}"
                     d="M${battery.has ? 55 : 53},0 v${grid.has ? 15 : 17} c0,${battery.has ? "30 10,30 30,30" : "35 10,35 30,35"} h25"
                     vector-effect="non-scaling-stroke"
                   ></path>
@@ -1591,7 +1632,7 @@ export class PowerFlowCardPlus extends LitElement {
                 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="solar-grid-flow">
                   <path
                     id="return"
-                    class="return"
+                    class="return ${this.styleLine(solar.state.toGrid || 0)}"
                     d="M${battery.has ? 45 : 47},0 v15 c0,${battery.has ? "30 -10,30 -30,30" : "35 -10,35 -30,35"} h-20"
                     vector-effect="non-scaling-stroke"
                   ></path>
@@ -1627,9 +1668,12 @@ export class PowerFlowCardPlus extends LitElement {
                   id="solar-battery-flow"
                   class="flat-line"
                 >
-                  <path id="battery-solar" class="battery-solar" d="M50,0 V100" vector-effect="non-scaling-stroke"></path>
-                  ${solar.state.toBattery
-                    ? svg`<circle
+                  <path id="battery-solar" class="battery-solar ${this.styleLine(
+                    solar.state.toBattery || 0
+                  )}" d="M50,0 V100" vector-effect="non-scaling-stroke"></path>
+                  ${
+                    solar.state.toBattery
+                      ? svg`<circle
                             r="1"
                             class="battery-solar"
                             vector-effect="non-scaling-stroke"
@@ -1642,7 +1686,8 @@ export class PowerFlowCardPlus extends LitElement {
                               <mpath xlink:href="#battery-solar" />
                             </animateMotion>
                           </circle>`
-                    : ""}
+                      : ""
+                  }
                 </svg>
               </div>`
             : ""}
@@ -1660,8 +1705,13 @@ export class PowerFlowCardPlus extends LitElement {
                   id="grid-home-flow"
                   class="flat-line"
                 >
-                  <path class="grid" id="grid" d="M0,${battery.has ? 50 : solar.has ? 56 : 53} H100" vector-effect="non-scaling-stroke"></path>
-                  ${grid.state.fromGrid
+                  <path
+                    class="grid ${this.styleLine(grid.state.toHome || 0)}"
+                    id="grid"
+                    d="M0,${battery.has ? 50 : solar.has ? 56 : 53} H100"
+                    vector-effect="non-scaling-stroke"
+                  ></path>
+                  ${grid.state.toHome
                     ? svg`<circle
                     r="1"
                     class="grid"
@@ -1689,7 +1739,7 @@ export class PowerFlowCardPlus extends LitElement {
                 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="battery-home-flow">
                   <path
                     id="battery-home"
-                    class="battery-home"
+                    class="battery-home ${this.styleLine(battery.state.toHome || 0)}"
                     d="M55,100 v-${grid.has ? 15 : 17} c0,-30 10,-30 30,-30 h20"
                     vector-effect="non-scaling-stroke"
                   ></path>
@@ -1721,10 +1771,7 @@ export class PowerFlowCardPlus extends LitElement {
                 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="battery-grid-flow">
                   <path
                     id="battery-grid"
-                    class=${classMap({
-                      "battery-from-grid": Boolean(grid.state.toBattery),
-                      "battery-to-grid": Boolean(battery.state.toGrid),
-                    })}
+                    class=${this.styleLine(battery.state.toGrid || 0)}
                     d="M45,100 v-15 c0,-30 -10,-30 -30,-30 h-20"
                     vector-effect="non-scaling-stroke"
                   ></path>