Skip to content

Commit

Permalink
Merge pull request #20 from flixlix/added-display-state
Browse files Browse the repository at this point in the history 
feat: added display state functionality for battery and grid
  • Loading branch information
@flixlix
flixlix authored Mar 26, 2023
2 parents 5e451d9 + d39c318 commit c47ef10
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 77 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

# Power Flow Card Plus

![GitHub release (latest by date)](https://img.shields.io/github/v/release/flixlix/power-flow-card-plus?style=flat-square)
Expand Down Expand Up @@ -113,6 +114,9 @@ At least one of _grid_, _battery_, or _solar_ is required. All entites (except _
| icon | `string` | `mdi:transmission-tower` | Icon path for the icon inside the Grid Circle. |
| color | `object` | | Check [Color Objects](#color-object) for more information. |
| 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`. |


#### Solar Configuration

Expand All @@ -128,12 +132,13 @@ At least one of _grid_, _battery_, or _solar_ is required. All entites (except _

| Name | Type | Default | Description |
| ----------- | ------- | -------- | ------------------------------------------------------------------------------------------------- |
| entity | `string` or `object` | `undefined` required | Entity ID of a sensor supporting a single state with negative values for production and positive values for consumption or an object for [split entites](#split-entities). Examples of both can be found below. |
| entity | `string` or `object` | `undefined` required | Entity ID of a sensor supporting a single state with negative values for production and positive values for consumption or an object for [split entities](#split-entities). Examples of both can be found below. |
| state_of_charge | `string` | `undefined` required | Entity ID providing a state with the state of charge of the battery in percent (state of `100` for a full battery). |
| name | `string` | `Battery` | Label for the battery option. If you don't populate this option, the label will continue to update based on the language selected. |
| icon | `string` | `mdi:battery` or dynamic based on state of the battery | Icon path for the icon inside the Battery Circle. |
| color | `object` | | Check [Color Objects](#color-object) for more information. |
| 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`. |

#### Individual Configuration

Expand Down
2 changes: 2 additions & 0 deletions src/power-flow-card-plus-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ export interface PowerFlowCardConfig extends LovelaceCardConfig {
icon?: string;
color?: ComboEntity;
color_icon?: boolean | "production" | "consumption";
display_state?: "two_way" | "one_way" | "one_way_no_zero";
}
grid?: {
entity: string | ComboEntity;
name?: string;
icon?: string;
color?: ComboEntity;
color_icon?: boolean | "production" | "consumption";
display_state?: "two_way" | "one_way" | "one_way_no_zero";
};
solar?: {
entity: string;
Expand Down
191 changes: 115 additions & 76 deletions src/power-flow-card-plus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,15 +401,15 @@ export class PowerFlowCard extends LitElement {
}

if (this._config.entities.battery?.color?.consumption !== undefined)
this.style.setProperty(
"--energy-battery-out-color",
this._config.entities.battery?.color?.consumption || "#4db6ac"
);
this.style.setProperty(
"--energy-battery-out-color",
this._config.entities.battery?.color?.consumption || "#4db6ac"
);
if (this._config.entities.battery?.color?.production !== undefined)
this.style.setProperty(
"--energy-battery-in-color",
this._config.entities.battery?.color?.production || "#a280db"
);
this.style.setProperty(
"--energy-battery-in-color",
this._config.entities.battery?.color?.production || "#a280db"
);
const batteryIconColorType = this._config.entities.battery?.color_icon;
this.style.setProperty(
"--icon-battery-color",
Expand Down Expand Up @@ -794,7 +794,14 @@ export class PowerFlowCard extends LitElement {
<ha-icon
.icon=${entities.grid?.icon || "mdi:transmission-tower"}
></ha-icon>
${totalToGrid !== null
${(entities.grid?.display_state === "two_way" ||
entities.grid?.display_state === undefined ||
(entities.grid?.display_state === "one_way" &&
totalToGrid > 0) ||
(entities.grid?.display_state === "one_way_no_zero" &&
(totalFromGrid === null || totalFromGrid === 0) &&
totalToGrid !== 0)) &&
totalToGrid !== null
? html`<span
class="return"
@click=${(e: { stopPropagation: () => void }) => {
Expand Down Expand Up @@ -826,13 +833,21 @@ export class PowerFlowCard extends LitElement {
${this.displayValue(totalToGrid)}
</span>`
: null}
<span class="consumption">
<ha-icon
class="small"
.icon=${"mdi:arrow-right"}
></ha-icon
>${this.displayValue(totalFromGrid)}
</span>
${(entities.grid?.display_state === "two_way" ||
entities.grid?.display_state === undefined ||
(entities.grid?.display_state === "one_way" &&
totalFromGrid > 0) ||
(entities.grid?.display_state === "one_way_no_zero" &&
(totalToGrid === null || totalToGrid === 0))) &&
totalFromGrid !== null
? html` <span class="consumption">
<ha-icon
class="small"
.icon=${"mdi:arrow-right"}
></ha-icon
>${this.displayValue(totalFromGrid)}
</span>`
: ""}
</div>
<span class="label"
>${entities.grid!.name ||
Expand Down Expand Up @@ -986,6 +1001,10 @@ export class PowerFlowCard extends LitElement {
: null}
<ha-icon
.icon=${batteryIcon}
style=${entities.battery?.display_state ===
"one_way" && totalBatteryIn > 0
? "padding-top: 0px; padding-bottom: 2px;"
: "padding-top: 2px; padding-bottom: 0px;"}
@click=${(e: { stopPropagation: () => void }) => {
e.stopPropagation();
this.openDetails(
Expand All @@ -1004,66 +1023,86 @@ export class PowerFlowCard extends LitElement {
}
}}
></ha-icon>
<span
class="battery-in"
@click=${(e: { stopPropagation: () => void }) => {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.production!;
e.stopPropagation();
this.openDetails(target);
}}
@keyDown=${(e: {
key: string;
stopPropagation: () => void;
}) => {
if (e.key === "Enter") {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.production!;
e.stopPropagation();
this.openDetails(target);
}
}}
>
<ha-icon
class="small"
.icon=${"mdi:arrow-down"}
></ha-icon>
${this.displayValue(totalBatteryIn)}</span
>
<span
class="battery-out"
@click=${(e: { stopPropagation: () => void }) => {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.consumption!;
e.stopPropagation();
this.openDetails(target);
}}
@keyDown=${(e: {
key: string;
stopPropagation: () => void;
}) => {
if (e.key === "Enter") {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.consumption!;
e.stopPropagation();
this.openDetails(target);
}
}}
>
<ha-icon
class="small"
.icon=${"mdi:arrow-up"}
></ha-icon>
${this.displayValue(totalBatteryOut)}</span
>
${(entities.battery?.display_state === "two_way" ||
entities.battery?.display_state === undefined ||
(entities.battery?.display_state === "one_way" &&
totalBatteryIn > 0) ||
(entities.grid?.display_state === "one_way_no_zero" &&
(totalBatteryOut === null ||
totalBatteryOut === 0) &&
totalBatteryIn !== 0)) &&
totalToGrid !== null
? html`<span
class="battery-in"
@click=${(e: { stopPropagation: () => void }) => {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.production!;
e.stopPropagation();
this.openDetails(target);
}}
@keyDown=${(e: {
key: string;
stopPropagation: () => void;
}) => {
if (e.key === "Enter") {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.production!;
e.stopPropagation();
this.openDetails(target);
}
}}
>
<ha-icon
class="small"
.icon=${"mdi:arrow-down"}
></ha-icon>
${this.displayValue(totalBatteryIn)}</span
>`
: ""}
${(entities.battery?.display_state === "two_way" ||
entities.battery?.display_state === undefined ||
(entities.battery?.display_state === "one_way" &&
totalBatteryOut > 0) ||
(entities.battery?.display_state ===
"one_way_no_zero" &&
(totalBatteryIn === null ||
totalBatteryIn === 0))) &&
totalBatteryOut !== null
? html`<span
class="battery-out"
@click=${(e: { stopPropagation: () => void }) => {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.consumption!;
e.stopPropagation();
this.openDetails(target);
}}
@keyDown=${(e: {
key: string;
stopPropagation: () => void;
}) => {
if (e.key === "Enter") {
const target =
typeof entities.battery!.entity === "string"
? entities.battery!.entity!
: entities.battery!.entity!.consumption!;
e.stopPropagation();
this.openDetails(target);
}
}}
>
<ha-icon
class="small"
.icon=${"mdi:arrow-up"}
></ha-icon>
${this.displayValue(totalBatteryOut)}</span
>`
: ""}
</div>
<span class="label"
>${entities.battery!.name ||
Expand Down

0 comments on commit c47ef10

Please sign in to comment.