Skip to content

Commit

Permalink
feat: Add optional card title
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sese-Schneider
Sese-Schneider committed Dec 29, 2023
1 parent 19a992d commit 5abdfc2
Show file tree
Hide file tree
Showing 7 changed files with 248 additions and 246 deletions.
85 changes: 38 additions & 47 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ A simple card which displays energy usage details of one or multiple entities.
- Adjustable names, colors, labels and icons
- Configurable dynamic animations adapting to power usage

*Three-phase power monitoring example:*
_Three-phase power monitoring example:_

![](.github/assets/card.gif)

Expand All @@ -34,37 +34,38 @@ Direct configuration via YAML is also available. For details see below.
## Options

| Name | Type | Requirement | Description | Default |
|-----------|--------------------|--------------|-----------------------------------------------------------------------------------------------------------------------|------------|
| --------- | ------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------- | ---------- |
| type | string | **Required** | `custom:energy-overview-card` | |
| entities | Array<PowerEntity> | **Required** | List of power entities (see below) | |
| animation | AnimationConfig | *Optional* | Animation configuration (see below) | |
| order_by | string | *Optional* | Value name of which to sort all entities. Options are: `power`, `voltage`, `current`, `frequency`, and `power_factor` | No sorting |
| animation | AnimationConfig | _Optional_ | Animation configuration (see below) | |
| order_by | string | _Optional_ | Value name of which to sort all entities. Options are: `power`, `voltage`, `current`, `frequency`, and `power_factor` | No sorting |
| title | string | _Optional_ | Title of the card | |

#### PowerEntity

| Name | Type | Requirement | Description | Default |
|----------------|-----------------|--------------|------------------------------------|----------------------------------------|
| -------------- | --------------- | ------------ | ---------------------------------- | -------------------------------------- |
| power | state entity | **Required** | State entity for power | |
| voltage | state entity | *Optional* | State entity for voltage | |
| current | state entity | *Optional* | State entity for current | |
| frequency | state entity | *Optional* | State entity for frequency | |
| power_factor | state entity | *Optional* | State entity for power_factor | |
| name | string | *Optional* | Name label | |
| icon_leading | string | *Optional* | Leading MD icon | `mdi:transmission-tower` |
| icon_trailing | string | *Optional* | Trailing MD icon | `mdi:home-lightning-bolt` |
| label_leading | string | *Optional* | Leading label | |
| label_trailing | string | *Optional* | Trailing label | |
| color | string | *Optional* | CSS color | `var(--energy-grid-consumption-color)` |
| animation | AnimationConfig | *Optional* | Overwrite for the global animation | |
| voltage | state entity | _Optional_ | State entity for voltage | |
| current | state entity | _Optional_ | State entity for current | |
| frequency | state entity | _Optional_ | State entity for frequency | |
| power_factor | state entity | _Optional_ | State entity for power_factor | |
| name | string | _Optional_ | Name label | |
| icon_leading | string | _Optional_ | Leading MD icon | `mdi:transmission-tower` |
| icon_trailing | string | _Optional_ | Trailing MD icon | `mdi:home-lightning-bolt` |
| label_leading | string | _Optional_ | Leading label | |
| label_trailing | string | _Optional_ | Trailing label | |
| color | string | _Optional_ | CSS color | `var(--energy-grid-consumption-color)` |
| animation | AnimationConfig | _Optional_ | Overwrite for the global animation | |

#### AnimationConfig

| Name | Type | Requirement | Description | Default |
|--------------|---------|-------------|-------------------------------------------------------------------|---------|
| power | number | *Optional* | Wattage level at which the animation runs at `min_duration` speed | 1000 |
| min_duration | number | *Optional* | Minimum duration of the animation at `>= power W` | 1 |
| max_duration | number | *Optional* | Maximum duration of the animation at `> 0 W` | 10 |
| inverted | boolean | *Optional* | Inverts the animation direction | false |
| ------------ | ------- | ----------- | ----------------------------------------------------------------- | ------- |
| power | number | _Optional_ | Wattage level at which the animation runs at `min_duration` speed | 1000 |
| min_duration | number | _Optional_ | Minimum duration of the animation at `>= power W` | 1 |
| max_duration | number | _Optional_ | Maximum duration of the animation at `> 0 W` | 10 |
| inverted | boolean | _Optional_ | Inverts the animation direction | false |

### Example configuration

Expand All @@ -75,18 +76,18 @@ entities:
current: sensor.a_c
voltage: sensor.a_v
power_factor: sensor.a_pf
label_leading: 'P'
label_trailing: 'L1'
icon_leading: 'mdi:transmission-tower'
icon_trailing: 'mdi:home-lightning-bolt'
color: '#488fc2'
label_leading: "P"
label_trailing: "L1"
icon_leading: "mdi:transmission-tower"
icon_trailing: "mdi:home-lightning-bolt"
color: "#488fc2"
- power: sensor.b_p
current: sensor.b_c
voltage: sensor.b_v
power_factor: sensor.b_pf
label_leading: 'P'
label_trailing: 'L2'
color: '#7dbff5'
label_leading: "P"
label_trailing: "L2"
color: "#7dbff5"
animation:
power: 100
min_duration: 2
Expand All @@ -96,9 +97,9 @@ entities:
voltage: sensor.c_v
frequency: sensor.c_fq
power_factor: sensor.c_pf
label_leading: 'P'
label_trailing: 'L3'
color: '#b1f2ff'
label_leading: "P"
label_trailing: "L3"
color: "#b1f2ff"
animation:
power: 1000
min_duration: 1
Expand All @@ -109,41 +110,31 @@ animation:
### HACS
*This repo is available for install through the HACS.*
_This repo is available for install through the HACS._
* Go to HACS → Frontend
* Use the FAB "Explore and download repositories" to search "Energy Overview Card".
- Go to HACS → Frontend
- Use the FAB "Explore and download repositories" to search "Energy Overview Card".
_or_
Click here:
[![](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=Sese-Schneider&repository=ha-energy-overview-card&category=frontend)
### Simple install
* Download and copy `energy-overview-card.js` from the
- Download and copy `energy-overview-card.js` from the
latest [release](https://github.com/Sese-Schneider/ha-energy-overview-card/releases/latest) into your `config/www`
directory.
* Add a reference to `energy-overview-card.js` as JavaScript-Module to your Lovelace dashboard via "Manage Resources". (
- Add a reference to `energy-overview-card.js` as JavaScript-Module to your Lovelace dashboard via "Manage Resources". (
Note: You have to enable advanced mode)


[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)



[commits-shield]: https://img.shields.io/github/commit-activity/y/Sese-Schneider/ha-energy-overview-card.svg?style=for-the-badge

[downloads-shield]: https://img.shields.io/github/downloads/Sese-Schneider/ha-energy-overview-card/total.svg?style=for-the-badge

[commits]: https://github.com/Sese-Schneider/ha-energy-overview-card/commits/main

[license-shield]: https://img.shields.io/github/license/Sese-Schneider/ha-energy-overview-card.svg?style=for-the-badge

[maintenance-shield]: https://img.shields.io/maintenance/yes/2023.svg?style=for-the-badge

[releases-shield]: https://img.shields.io/github/release/Sese-Schneider/ha-energy-overview-card.svg?style=for-the-badge

[releases]: https://github.com/Sese-Schneider/ha-energy-overview-card/releases
68 changes: 38 additions & 30 deletions src/energy-overview-card-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@

// https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts

import {mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus} from "@mdi/js";
import {fireEvent, LovelaceCardEditor} from "custom-card-helpers";
import {css, CSSResultGroup, html, LitElement, nothing} from "lit";
import {customElement, property, query, state} from "lit/decorators";
import {TemplateResult} from "lit/development";
import {CARD_EDITOR_NAME, CARD_NAME, ENTITY_EDITOR_NAME, NAME} from "./const";
import {EnergyOverviewConfig, EnergyOverviewEntity} from "./types";
import {EnergyOverviewEntityEditor} from "./energy-overview-entity-editor";
import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from "@mdi/js";
import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { TemplateResult } from "lit/development";
import { CARD_EDITOR_NAME, CARD_NAME, ENTITY_EDITOR_NAME, NAME } from "./const";
import { EnergyOverviewConfig, EnergyOverviewEntity } from "./types";
import { EnergyOverviewEntityEditor } from "./energy-overview-entity-editor";
import "./energy-overview-entity-editor";
import {repository} from "../package.json";
import {ANIMATION_SCHEMA, CARD_SCHEMA} from "./schemas";
import {capitalize} from "./helper/util";
import { repository } from "../package.json";
import { ANIMATION_SCHEMA, ORDER_BY_SCHEMA, TITLE_SCHEMA } from "./schemas";
import { capitalize } from "./helper/util";

@customElement(CARD_EDITOR_NAME)
export class EnergyOverviewCardEditor extends LitElement implements LovelaceCardEditor {
Expand Down Expand Up @@ -82,18 +82,18 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
}
const entities = [...this._config.entities];
entities[this._selectedCard] = ev.detail.config as EnergyOverviewEntity;
this._config = {...this._config, entities};
fireEvent(this, "config-changed", {config: this._config});
this._config = { ...this._config, entities };
fireEvent(this, "config-changed", { config: this._config });
}

_handleSelectedCard(ev) {
if (ev.target.id === "add-card") {
ev.stopPropagation();
const entities = [...this._config!.entities];
entities.push(<EnergyOverviewEntity>{});
this._config = {...this._config!, entities};
this._config = { ...this._config!, entities };
this._selectedCard = this._config!.entities.length - 1;
fireEvent(this, "config-changed", {config: this._config});
fireEvent(this, "config-changed", { config: this._config });
return;
}
this._selectedCard = parseInt(ev.detail.selected, 10);
Expand All @@ -105,16 +105,16 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
}
const entities = [...this._config.entities];
entities.splice(this._selectedCard, 1);
this._config = {...this._config, entities};
this._config = { ...this._config, entities };
this._selectedCard = Math.max(0, this._selectedCard - 1);
fireEvent(this, "config-changed", {config: this._config});
fireEvent(this, "config-changed", { config: this._config });
}

_handleMove(ev: Event) {
if (!this._config) {
return;
}
const {move} = ev.currentTarget as any;
const { move } = ev.currentTarget as any;
const source = this._selectedCard;
const target = source + move;
const entities = [...this._config.entities];
Expand All @@ -125,7 +125,7 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
entities,
};
this._selectedCard = target;
fireEvent(this, "config-changed", {config: this._config});
fireEvent(this, "config-changed", { config: this._config });
}

_computeLabel = (schema) => {
Expand All @@ -137,12 +137,12 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard

_valueChanged(ev) {
if (!this._config) return;
fireEvent(this, "config-changed", {config: {...this._config, ...ev.detail.value}});
fireEvent(this, "config-changed", { config: { ...this._config, ...ev.detail.value } });
}

_animationChanged(ev) {
if (!this._config) return;
fireEvent(this, "config-changed", {config: {...this._config, animation: ev.detail.value}});
fireEvent(this, "config-changed", { config: { ...this._config, animation: ev.detail.value } });
}

render(): TemplateResult | symbol {
Expand All @@ -162,9 +162,9 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
scrollable
@iron-activate=${this._handleSelectedCard}>
${this._config.entities.map(
(_card, i) => html`
(_card, i) => html`
<paper-tab> ${i + 1}</paper-tab> `,
)}
)}
</paper-tabs>
<paper-tabs
id="add-card"
Expand All @@ -181,23 +181,23 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
<ha-icon-button
.disabled=${selected === 0}
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_before",
)}
"ui.panel.lovelace.editor.edit_card.move_before",
)}
.path=${mdiArrowLeft}
@click=${this._handleMove}
.move=${-1}></ha-icon-button>
<ha-icon-button
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_after",
)}
"ui.panel.lovelace.editor.edit_card.move_after",
)}
.path=${mdiArrowRight}
.disabled=${selected === numcards - 1}
@click=${this._handleMove}
.move=${1}></ha-icon-button>
<ha-icon-button
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete",
)}
"ui.panel.lovelace.editor.edit_card.delete",
)}
.path=${mdiDelete}
@click=${this._handleDeleteCard}></ha-icon-button>
</div>
Expand All @@ -213,7 +213,15 @@ export class EnergyOverviewCardEditor extends LitElement implements LovelaceCard
<ha-form
.hass="${this.hass}"
.data="${this._config}"
.schema="${CARD_SCHEMA}"
.schema="${TITLE_SCHEMA}"
.computeLabel="${this._computeLabel}"
@value-changed="${this._valueChanged}">
</ha-form>
<br />
<ha-form
.hass="${this.hass}"
.data="${this._config}"
.schema="${ORDER_BY_SCHEMA}"
.computeLabel="${this._computeLabel}"
@value-changed="${this._valueChanged}">
</ha-form>
Expand Down
Loading

0 comments on commit 5abdfc2

Please sign in to comment.