diff --git a/README.md b/README.md index 5fc1d105..d270e47f 100644 --- a/README.md +++ b/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 diff --git a/src/config.ts b/src/config.ts index 4f3f07cd..5ed3018f 100644 --- a/src/config.ts +++ b/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, diff --git a/src/styles.css b/src/styles.css index 3183d172..52b28d10 100755 --- a/src/styles.css +++ b/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; } diff --git a/src/types.ts b/src/types.ts index 0ae8b5cb..d3b7ee4c 100644 --- a/src/types.ts +++ b/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; diff --git a/src/vacuum-card.ts b/src/vacuum-card.ts index 4f536f8d..d9d5e8a0 100755 --- a/src/vacuum-card.ts +++ b/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`