feat: Allow to invert animation direction

README.md

@@ -60,11 +60,12 @@ Direct configuration via YAML is also available. For details see below.
 
 #### 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      |
+| 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   |
 
 ### Example configuration
 

src/energy-overview-card.ts

@@ -160,7 +160,7 @@ export class EnergyOverviewCard extends LitElement {
         label_leading: entity.label_leading ? entity.label_leading : '',
         icon_trailing: entity.icon_trailing ? entity.icon_trailing : ICON_TRAILING_DEFAULT,
         icon_leading: entity.icon_leading ? entity.icon_leading : ICON_LEADING_DEFAULT,
-        animation: entity.animation ?? this._config?.animation,
+        animation: {...this._config?.animation, ...entity.animation}, // only overwrite set fields
       });
     });
 
@@ -199,12 +199,15 @@ export class EnergyOverviewCard extends LitElement {
 				// 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 = power;
-				const isNegative = x < 0;
 				const y = (-(animMax - animMin) / animPower) * Math.abs(x) + animMax;
 				let animationSpeed: number;
 				animationSpeed = clamp(y, animMin, animMax);
 				if (animationSpeed === animMax) animationSpeed = 0;
 
+				const inverted = animationSpeed > 0 // do not invert animation stop
+					? (animation?.inverted ?? false) !== (x < 0) // Invert for animation.inverted XOR below 0
+					: false;
+
 				return html`
 					<!--suppress CssUnresolvedCustomProperty -->
 					<div class="entity entity-${i}"
@@ -253,7 +256,7 @@ export class EnergyOverviewCard extends LitElement {
 									      vector-effect="non-scaling-stroke"></path>
 									<circle class="grid" r="1"
 									        vector-effect="non-scaling-stroke">
-										<animateMotion keyTimes="0;1" keyPoints="${isNegative ? `1;0` : `0;1`}"
+										<animateMotion keyTimes="0;1" keyPoints="${inverted ? `1;0` : `0;1`}"
 										               calcMode="linear" dur="${animationSpeed}s"
 										               repeatCount="indefinite">
 											<mpath xlink:href="#grid"></mpath>

src/schemas.ts

@@ -23,6 +23,7 @@ export const ANIMATION_SCHEMA = [
       },
     ],
   },
+  {name: "inverted", label: "Animation Direction Inverted", selector: {boolean: {}}},
 ];
 
 export const ENTITY_DATA_SCHEMA = [

src/types.ts

@@ -2,6 +2,7 @@ export interface EnergyOverviewAnimation {
   min_duration?: number;
   max_duration?: number;
   power?: number;
+  inverted?: boolean;
 }
 
 export interface EnergyOverviewEntity {