Merge pull request #366 from flixlix/feat-color-value-battery-grid

feat: 🎨 add option color_value for grid and battery

README.md

@@ -34,7 +34,7 @@
 - Display Low Carbon Energy from the grid
 - Customize Low Carbon Energy label, icon, circle color, icon color and state type
 - Customize Battery, Solar and Home's color, icon, color of icon and label
-  
+
 </details>
 
 ## Goal
@@ -77,7 +77,7 @@ Else, if you prefer the graphical editor, use the menu to add the resource:
 3. Click three dot icon
 4. Select Resources
 5. Hit (+ ADD RESOURCE) icon
-6. Enter URL `/local/power-flow-card-plus.js` and select type "JavaScript Module". 
+6. Enter URL `/local/power-flow-card-plus.js` and select type "JavaScript Module".
    (Use `/hacsfiles/power-flow-card-plus/power-flow-card-plus.js` and select "JavaScript Module" for HACS install if HACS didn't do it already)
 
 </details>
@@ -146,6 +146,7 @@ At least one of _grid_, _battery_, or _solar_ is required. All entites (except _
 | secondary_info | `object` | `undefined` | Check [Secondary Info Object](#secondary-info-configuration) |
 | display_zero_tolerance | `number` | `0` | If the state of the entity is less than this number, it will be considered zero. This is to avoid having the grid circle show a small amount of consumption when the battery is trying to correct itself to the grid. |
 | power_outage | `object` | `undefined` | Configure how the card handles a power outage. Check [Power Outage](#power-outage) for more info. |
+| color_value | `boolean` | Default is `true`. If set to `false`, the values of power will not be colored according to input and output. |
 | invert_state | `boolean` | `false` | If set to true the direction as well as the values will be inverted, meaning a positive value will be shown as production and a negative value will be shown as consumption. |
 
 #### Solar Configuration
@@ -177,8 +178,9 @@ At least one of _grid_, _battery_, or _solar_ is required. All entites (except _
 | color_icon | `boolean` or "production" or "consumption" | `false` | If set to `true`, icon color will match the highest value. If set to `production`, icon color will match the production. If set to `consumption`, icon color will match the consumption. |
 | display_state | "two_way" or "one_way" or "one_way_no_zero" | `two_way` | If set to `two_way` the production will always be shown simultaneously, no matter the state. If set to `one_way` only the direction that is active will be shown (since this card only shows instantaneous power, there will be no overlaps ✅). If set to `one_way_no_zero` the behavior will be the same as `one_way` but you will still the consumption direction when every state is `0`. |
 | state_of_charge_unit_white_space | `boolean` | `true` | If set to `false`, there will be no white space between the state of charge and the unit of the state of charge. |
-| color_state_of_charge_value | `boolean` or "production" or "consumption" | If set to `true`, state of charge text color will match the highest value. If set to `production`, state of charge text color will match the production. If set to `consumption`, state of charge text color will match the consumption. |
-| color_circle | `boolean` or "production" or "consumption" | If set to `true`, circle color will match the highest value. If set to `production`, circle color will match the production. If set to `consumption`, circle text color will match the consumption. |
+| color_state_of_charge_value | `boolean` or "production" or "consumption" | `false` | If set to `true`, state of charge text color will match the highest value. If set to `production`, state of charge text color will match the production. If set to `consumption`, state of charge text color will match the consumption. |
+| color_circle | `boolean` or "production" or "consumption" | `true` | If set to `true`, circle color will match the highest value. If set to `production`, circle color will match the production. If set to `consumption`, circle text color will match the consumption. |
+| color_value | `boolean` | `true` | If set to `false`, the values of power will not be colored according to input and output. |
 | invert_state | `boolean` | `false` | If set to true the direction as well as the values will be inverted, meaning a positive value will be shown as production and a negative value will be shown as consumption. |
 
 #### Individual Configuration
@@ -264,7 +266,7 @@ This feature allows you to configure how the card handles a Grid Power Outage sc
 | Name        | Type     | Description                                                                                       |
 | ----------- | -------- | ------------------------------------------------------------------------------------------------- |
 | entity| `string` required | Entity ID providing a state that changes when there is a Power Outage. (eg: `binary_sensor.grid_connection_status`). Doesn't need to be a binary_sensor. |
-| entity_generator | `string` | Entity ID providing the power of a Generator. (eg: `sensor.generator_power`). This is optional, meaning if you don't use this, the card will assume the grid is the only source of power. | 
+| entity_generator | `string` | Entity ID providing the power of a Generator. (eg: `sensor.generator_power`). This is optional, meaning if you don't use this, the card will assume the grid is the only source of power. |
 | state_alert | `string` | The state the provided entity is at when there is a power outage. Default is `on`, meaning if the entity's state is `on` the card will assume there is a power outage. |
 | icon_alert | `string` |  An icon path to be override the grid icon when there is a power outage. Default is `mdi:transmission-tower-off`. |
 | label_alert | `string` | A text that will be displayed below the icon when there is a power outage. |
@@ -445,17 +447,17 @@ return ((value  -  minIn) * (maxOut  -  minOut)) / (maxIn  -  minIn) +  minOut;
 
 // value = value of the current line to calculate (eg: grid to home)
 //
-// minIn = amount of watts at which the lowest speed will be selected. 
+// minIn = amount of watts at which the lowest speed will be selected.
 //   ↳ In your configuration this is `min_expected_power`
 //   ↳ eg: setting this at `100` means that at `100` watts, the dots will still flow at the lowest speed
-// maxIn = amount of watts at which the highest speed will be selected. 
+// maxIn = amount of watts at which the highest speed will be selected.
 //   ↳ In your configuration this is `max_expected_power`
 //   ↳ eg: setting this at `2000` means that everything more than `2000` will flow at the highest speed selected
 //
-// minOut = amount of watts at which the lowest speed will be selected. 
+// minOut = amount of watts at which the lowest speed will be selected.
 //   ↳ In your configuration this is `max_flow_rate`
 //   ↳ eg: setting this at `5` means that one dot will take `5` second to travel
-// maxOut = amount of watts at which the highest speed will be selected. 
+// maxOut = amount of watts at which the highest speed will be selected.
 //   ↳ In your configuration this is `min_flow_rate`
 //   ↳ eg: setting this at `1` means that one dot will take `1` second to travel
 ```
@@ -465,7 +467,7 @@ The following video aims to show the diffence between the two flow formulas:
 
 https://user-images.githubusercontent.com/61006057/231479254-91d6c625-8f38-4abb-b9ba-8dd24d6395f3.mp4
 
-Notice that when the Power changes to only coming from the sun, the old formula accelerates to maintain a constant amount of dots/second. 
+Notice that when the Power changes to only coming from the sun, the old formula accelerates to maintain a constant amount of dots/second.
 Using the new formula is more intuitive, since you can immediately see that the Solar Power is relatively low since the dots are flowing very slowly.
 On the old Flow Formula you might think that the sun is producing a lot of power, which in this case is not true.
 

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

@@ -33,12 +33,14 @@ export interface PowerFlowCardPlusConfig extends LovelaceCardConfig, mainConfigO
       state_of_charge_decimals?: number;
       color_state_of_charge_value?: boolean | "production" | "consumption";
       color_circle: boolean | "production" | "consumption";
+      color_value?: boolean;
       color?: ComboEntity;
     };
     grid?: baseConfigEntity & {
       power_outage: GridPowerOutage;
       secondary_info?: SecondaryInfoType;
       color_circle: boolean | "production" | "consumption";
+      color_value?: boolean;
       color?: ComboEntity;
     };
     solar?: baseConfigEntity & {

src/power-flow-card-plus.ts

@@ -548,7 +548,7 @@ export class PowerFlowCardPlus extends LitElement {
     if (solar.has) {
       solar.state.toHome = (solar.state.total ?? 0) - (grid.state.toGrid ?? 0) - (battery.state.toBattery ?? 0);
       if (entities.solar?.display_zero_tolerance) {
-        if (entities.solar.display_zero_tolerance >= (solar.state.total || 0) ) solar.state.toHome = 0;
+        if (entities.solar.display_zero_tolerance >= (solar.state.total || 0)) solar.state.toHome = 0;
       }
     }
     const largestGridBatteryTolerance = Math.max(entities.grid?.display_zero_tolerance ?? 0, entities.battery?.display_zero_tolerance ?? 0);
@@ -580,7 +580,7 @@ export class PowerFlowCardPlus extends LitElement {
         }
         solar.state.toBattery = battery.state.toBattery - (grid.state.toBattery || 0);
         if (entities.solar?.display_zero_tolerance) {
-          if (entities.solar.display_zero_tolerance >= (solar.state.total || 0) ) solar.state.toBattery = 0;
+          if (entities.solar.display_zero_tolerance >= (solar.state.total || 0)) solar.state.toBattery = 0;
         }
       } else {
         battery.state.toGrid = grid.state.toGrid || 0;
@@ -593,7 +593,7 @@ export class PowerFlowCardPlus extends LitElement {
 
     if (solar.has && grid.state.toGrid) solar.state.toGrid = grid.state.toGrid - (battery.state.toGrid ?? 0);
     if (entities.solar?.display_zero_tolerance) {
-      if (entities.solar.display_zero_tolerance >= (solar.state.total || 0) ) solar.state.toGrid = 0;
+      if (entities.solar.display_zero_tolerance >= (solar.state.total || 0)) solar.state.toGrid = 0;
     }
     this.style.setProperty("--text-solar-color", entities.solar?.color_value ? "var(--energy-solar-color)" : "var(--primary-text-color)");
 
@@ -632,7 +632,7 @@ export class PowerFlowCardPlus extends LitElement {
     if (entities.grid?.display_zero_tolerance !== undefined) {
       solar.state.toGrid = (solar.state.toGrid ?? 0) > entities.grid?.display_zero_tolerance ? solar.state.toGrid : 0;
       grid.state.toGrid = (grid.state.toGrid ?? 0) > entities.grid?.display_zero_tolerance ? grid.state.toGrid : 0;
-      if(grid.state.fromGrid <= entities.grid?.display_zero_tolerance) {
+      if (grid.state.fromGrid <= entities.grid?.display_zero_tolerance) {
         grid.state.fromGrid = 0;
         grid.state.toHome = 0;
         grid.state.toBattery = 0;
@@ -946,6 +946,22 @@ export class PowerFlowCardPlus extends LitElement {
       grid.state.toBattery || 0 > 0 ? "var(--energy-grid-consumption-color)" : "var(--energy-grid-return-color)"
     );
 
+    if (!entities.grid?.color_value) {
+      this.style.setProperty("--text-grid-consumption-color", "var(--primary-text-color)");
+      this.style.setProperty("--text-grid-return-color", "var(--primary-text-color)");
+    } else {
+      this.style.setProperty("--text-grid-consumption-color", "var(--energy-grid-consumption-color)");
+      this.style.setProperty("--text-grid-return-color", "var(--energy-grid-return-color)");
+    }
+
+    if (!entities.battery?.color_value) {
+      this.style.setProperty("--text-battery-in-color", "var(--primary-text-color)");
+      this.style.setProperty("--text-battery-out-color", "var(--primary-text-color)");
+    } else {
+      this.style.setProperty("--text-battery-in-color", "var(--energy-battery-in-color)");
+      this.style.setProperty("--text-battery-out-color", "var(--energy-battery-out-color)");
+    }
+
     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);
@@ -1251,7 +1267,7 @@ export class PowerFlowCardPlus extends LitElement {
                               vector-effect="non-scaling-stroke"
                             >
                               <animateMotion
-                                dur="${this.additionalCircleRate(entities.individual2?.calculate_flow_rate, newDur.individual2)}s"    
+                                dur="${this.additionalCircleRate(entities.individual2?.calculate_flow_rate, newDur.individual2)}s"
                                 repeatCount="indefinite"
                                 calcMode="linear"
                                 keyPoints=${individual2.invertAnimation ? "0;1" : "1;0"}

src/style.ts

@@ -35,6 +35,10 @@ export const styles = css`
     --lines-svg-not-flat-width: calc(103% - 165px);
     --transparency: var(--transparency-unused-lines);
     --greyed-out--line-color: #bdbdbd;
+    --text-grid-consumption-color: var(--energy-grid-consumption-color);
+    --text-grid-return-color: var(--energy-grid-return-color);
+    --text-battery-in-color: var(--energy-battery-in-color);
+    --text-battery-out-color: var(--energy-battery-out-color);
   }
 
   ha-card.full-size {
@@ -287,6 +291,12 @@ export const styles = css`
   .battery-out {
     color: var(--energy-battery-out-color);
   }
+  span.battery-in {
+    color: var(--text-battery-in-color);
+  }
+  span.battery-out {
+    color: var(--text-battery-out-color);
+  }
   path.battery-from-grid {
     stroke: var(--energy-grid-consumption-color);
   }
@@ -310,12 +320,18 @@ export const styles = css`
   .return {
     color: var(--energy-grid-return-color);
   }
+  span.return {
+    color: var(--text-grid-return-color);
+  }
   .grid .circle {
     border-color: var(--circle-grid-color);
   }
   .consumption {
     color: var(--energy-grid-consumption-color);
   }
+  span.consumption {
+    color: var(--text-grid-consumption-color);
+  }
   circle.grid,
   circle.battery-from-grid,
   path.grid {

src/ui-editor/schema/battery.ts

@@ -12,6 +12,11 @@ const mainSchema = {
       label: "Invert State",
       selector: { boolean: {} },
     },
+    {
+      name: "color_value",
+      label: "Color of Value",
+      selector: { boolean: {} },
+    },
     {
       name: "use_metadata",
       label: "Use Metadata",

src/ui-editor/schema/grid.ts

@@ -22,6 +22,11 @@ const mainSchema = {
       label: "Use Metadata",
       selector: { boolean: {} },
     },
+    {
+      name: "color_value",
+      label: "Color of Value",
+      selector: { boolean: {} },
+    },
   ],
 };