feat: Configurable animation speed

README.md

@@ -11,14 +11,24 @@ A simple card that shows your current energy usage.
 
 [!["Buy Me A Coffee"](https://buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoffee.com/seseschneider)
 
+**Features:**
+
+- Variable amount of monitoring entities
+- Voltage, Current, Power, and Power Factor display
+- Adjustable colors, labels and icons
+- Configurable dynamic animations adapting to power usage
+
+*Three-phase power monitoring example:*
+
 ![](.github/assets/card.gif)
 
 ## Options
 
-| Name     | Type               | Requirement  | Description                        | Default |
-|----------|--------------------|--------------|------------------------------------|---------|
-| type     | string             | **Required** | `custom:energy-overview-card`      |         |
-| entities | Array<PowerEntity> | **Required** | List of power entities (see below) |         |
+| 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) |         |
 
 #### PowerEntity
 
@@ -34,6 +44,14 @@ A simple card that shows your current energy usage.
 | icon_trailing  | string       | *Optional*   | Trailing MD icon              | `mdi:home-lightning-bolt`              |
 | color          | string       | *Optional*   | CSS color                     | `var(--energy-grid-consumption-color)` |
 
+#### 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 `> 0W`.                       | 10      |
+
 ### Example configuration
 
 ```yaml
@@ -60,6 +78,10 @@ entities:
     label_leading: P
     label_trailing: C
     color: '#b1f2ff'
+animation:
+  power: 1000
+  min_duration: 1
+  max_duration: 10
 ```
 
 ## Install

src/energy-overview-card.ts

@@ -1,7 +1,10 @@
+// noinspection JSUnusedGlobalSymbols
+
 import {css, CSSResultGroup, html, LitElement, TemplateResult} from "lit";
 import {customElement, property} from "lit/decorators";
 import {HomeAssistant} from "custom-card-helpers";
 import {EnergyOverviewConfig, EnergyOverviewEntity} from "./types";
+import clamp from "./util";
 
 @customElement("energy-overview-card")
 class EnergyOverviewCard extends LitElement {
@@ -65,12 +68,21 @@ class EnergyOverviewCard extends LitElement {
       });
     });
 
+    const {animation} = this._config;
+    const min = animation?.min_duration ? animation.min_duration : 1;
+    const max = animation?.max_duration ? animation.max_duration : 10;
+    const power = animation?.power ? animation.power : 1000;
+
     return html`
 		<ha-card .header="Energy Overview">
 			${entities.map((entity) => {
-				console.log(entity);
-				const power = parseInt(entity.power, 10);
-				const animationSpeed = -0.004 * Math.min(power, 1000) + 5;
+				// a linear function which is max at x=0 and min at x=power is defined by:
+				// f(x) = (-(max-min)/power) * x + max
+				const x = parseInt(entity.power, 10);
+				const y = (-(max - min) / power) * x + max;
+				let animationSpeed: number;
+				animationSpeed = clamp(y, min, max);
+				if (animationSpeed === max) animationSpeed = 0;
 
 				return html`
 					<!--suppress CssUnresolvedCustomProperty -->
@@ -80,20 +92,22 @@ class EnergyOverviewCard extends LitElement {
 							${entity.current || entity.voltage ? html`
 									<div style="display: flex; justify-content: center; align-items: center">
 										${entity.voltage ? html`<span class="secondary">${entity.voltage}V</span>` : ``}
-										${entity.current && entity.voltage ? html`<div style="width: 8px"></div>` : ``}
+										${entity.current && entity.voltage ? html`
+											<div style="width: 8px"></div>` : ``}
 										${entity.current ? html`<span class="secondary">${entity.current}A</span>` : ``}
 									</div>`
 								: ``}
 							<span class="secondary">${entity.power}W</span>
-							${entity.power_factor ? html`<span class="secondary">${Math.round(parseFloat(entity.power_factor))}%</span>` : ``}
+							${entity.power_factor ? html`<span
+								class="secondary">${Math.round(parseFloat(entity.power_factor))}%</span>` : ``}
 						</div>
 						<div style="height: 24px; display: flex; align-items: center; justify-content: center">
 							<div class="primary" style="margin-right: 4px">${entity.label_leading}</div>
 							<div style="width: 24px; height: 24px;">
 								<ha-icon icon="${entity.icon_leading}"></ha-icon>
 							</div>
 							<div class="lines" style="flex: 1; height: 10px; box-sizing: border-box; margin: 0 8px">
-								<svg preserveAspectRatio="xMaxYMid slice"
+								<svg preserveAspectRatio="xMaxYMid slice" overflow="visible"
 								     style="width: 100%; height: 15px" viewBox="0 0 100 10"
 								     xmlns="http://www.w3.org/2000/svg">
 									<path class="grid" d="M0,5 H100" id="grid"

src/types.ts

@@ -10,8 +10,14 @@ export interface EnergyOverviewEntity {
   color?: string;
 }
 
+export interface EnergyOverviewAnimation {
+  min_duration?: number;
+  max_duration?: number;
+  power?: number;
+}
+
 export interface EnergyOverviewConfig {
   type: string;
-
   entities: Array<EnergyOverviewEntity>;
+  animation?: EnergyOverviewAnimation;
 }

src/util.ts

@@ -0,0 +1,3 @@
+export default function clamp(number, min, max) {
+  return Math.max(min, Math.min(number, max));
+}