Add possibility to disable animation

README.md

@@ -114,6 +114,7 @@ Here is what every option means:
 | `map`            | `string`  | Optional     | An entity_id within the `camera` domain, for streaming live vacuum map.                                   |
 | `map_refresh`    | `integer` | `5`          | Update interval for map camera in seconds                                                                 |
 | `image`          | `string`  | `default`    | Path to image of your vacuum cleaner. Better to have `png` or `svg`.                                      |
+| `animated`       | `boolean` | `true   `    | Animate the image when cleaning or returning to base.                                                     |
 | `show_name`      | `boolean` | `true`       | Show friendly name of the vacuum.                                                                         |
 | `show_status`    | `boolean` | `true`       | Show status of the vacuum.                                                                                |
 | `show_toolbar`   | `boolean` | `true`       | Show toolbar with actions.                                                                                |
@@ -201,7 +202,9 @@ I've added some animations for this card to make it alive. Animations are applie
 
 |              Cleaning               |                Docking                |
 | :---------------------------------: | :-----------------------------------: |
-| ![Cleaning anumation][cleaning-gif] | ![Returning anumation][returning-gif] |
+| ![Cleaning animation][cleaning-gif] | ![Returning animation][returning-gif] |
+
+This can be disabled by using the "animated" attribute.
 
 ## Supported languages
 

src/config.ts

@@ -23,6 +23,7 @@ export default function buildConfig(
     map: config.map ?? '',
     map_refresh: config.map_refresh ?? 5,
     image: config.image ?? 'default',
+    animated: config.animated ?? true,
     show_name: config.show_name ?? true,
     show_status: config.show_status ?? true,
     show_toolbar: config.show_toolbar ?? true,

src/styles.css

@@ -178,16 +178,16 @@ ha-card {
   filter: brightness(0.9);
 }
 
-.vacuum.on,
-.vacuum.cleaning,
-.vacuum.auto,
-.vacuum.spot,
-.vacuum.edge,
-.vacuum.single_room {
+.vacuum.animated.on,
+.vacuum.animated.cleaning,
+.vacuum.animated.auto,
+.vacuum.animated.spot,
+.vacuum.animated.edge,
+.vacuum.animated.single_room {
   animation: cleaning 5s linear infinite;
 }
 
-.vacuum.returning {
+.vacuum.animated.returning {
   animation: returning 2s linear infinite;
 }
 

src/types.ts

@@ -66,6 +66,7 @@ export interface VacuumCardConfig {
   map: string;
   map_refresh: number;
   image: string;
+  animated: boolean;
   show_name: boolean;
   show_status: boolean;
   show_toolbar: boolean;

src/vacuum-card.ts

@@ -335,10 +335,11 @@ export class VacuumCard extends LitElement {
 
     const src =
       this.config.image === 'default' ? DEFAULT_IMAGE : this.config.image;
+    const animated = this.config.animated ? ' animated' : '';
 
     return html`
       <img
-        class="vacuum ${state}"
+        class="vacuum ${state}${animated}"
         src="${src}"
         @click="${() => this.handleMore()}"
       />