Merge pull request #1239 from UI-Lovelace-Minimalist/release

Release

Author: basbruss

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml

@@ -9,6 +9,7 @@ card_battery:
     ulm_card_battery_attribute:
     ulm_card_battery_battery_state_entity_id:
     ulm_card_battery_charger_type_entity_id:
+    ulm_card_battery_charging_animation: false
     ulm_card_battery_battery_level_danger:
     ulm_card_battery_battery_level_warning:
     ulm_card_battery_color_battery_level_danger: "var(--google-red)"
@@ -52,6 +53,7 @@ card_battery:
                   if (variables.ulm_card_battery_charger_type_entity_id == null) {
                     // Check wether the battery state is charging
                     infix = variables.ulm_card_battery_battery_state_entity_id !== null &&
+                      variables.ulm_card_battery_charging_animation === false &&
                       states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging" ?
                       "-charging" : ""
                   } else {
@@ -86,6 +88,17 @@ card_battery:
                   }
                   return icon;
                 ]]]
+              extra_styles: |
+                @keyframes charge {
+                  0%, 80% { clip-path: inset(0 0 0 0); }
+                  10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%); }
+                  20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 62%, 34% 62%, 34% 100%, 100% 100%, 100% 0%); }
+                  30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 58%, 34% 58%, 34% 100%, 100% 100%, 100% 0%); }
+                  40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
+                  50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 50%, 34% 50%, 34% 100%, 100% 100%, 100% 0%); }
+                  60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 46%, 34% 46%, 34% 100%, 100% 100%, 100% 0%); }
+                  70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 40%, 34% 40%, 34% 100%, 100% 100%, 100% 0%); }
+                }
               styles:
                 icon:
                   - color: |
@@ -108,6 +121,15 @@ card_battery:
                         }
                         return color;
                       ]]]
+                  - animation: |
+                      [[[
+                        if (variables.ulm_card_battery_battery_state_entity_id !== null &&
+                          variables.ulm_card_battery_charging_animation === true &&
+                          states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging"){
+                            return "charge 3s linear infinite"
+                          }
+                        return "none"
+                      ]]]
           item2:
             card:
               type: "custom:button-card"

docs/usage/cards/card_battery.md

@@ -9,6 +9,10 @@ hide:
 
 ![example-image](../../assets/img/ulm_cards/card_battery.png){ width="500" }
 
+Charging animation if `ulm_card_battery_charging_animation` is true:
+
+<img src="https://user-images.githubusercontent.com/63370033/224753515-2dd8ca0e-42b9-4385-add9-4a1c42addaca.gif" width="475" />
+
 The `battery-card` is a slightly enhanced `generic-card`, that can indicate whether and how a device is being charged and colors the icon based on the battery level.
 
 ## Variables
@@ -20,6 +24,7 @@ The `battery-card` is a slightly enhanced `generic-card`, that can indicate whet
 | ulm_card_battery_attribute |         | :material-close: | If your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attribute's name here. E.g. if you have `sensor.livingroom_thermometer` and the attribute for your battery power is `sensor.livingroom_thermometer.attributes.battery_percent`, you fill in battery_percent here. |
 | ulm_card_battery_battery_state_entity_id |         | :material-close: | Entity that holds the battery state (charging/discharging). If provided, the Icon will display the current status. |
 | ulm_card_battery_charger_type_entity_id |         | :material-close: | Entity that holds the charger type (ac/wireless/none). This Entity replaces the need for the `ulm_card_battery_battery_state_entity_id` entity. If provided, the Icon will display the current charger type. This is only useful if you charge your devices Wireless and with cable. |
+| ulm_card_battery_charging_animation | `false` | :material-close: | Weather to show charging animation or not. If set to `true`, `ulm_card_battery_battery_state_entity_id` needs to be defined and `ulm_card_battery_charger_type_entity_id` will be ignored. |
 | ulm_card_battery_battery_level_danger |         | :material-check: | Changes the color of the Icon, if the battery level falls below the provided value. Must be higher than `ulm_card_battery_battery_level_waring` |
 | ulm_card_battery_battery_level_waring |         | :material-check: | Changes the color of the Icon, if the battery level falls below the provided value. |
 | ulm_card_battery_color_battery_level_danger | var(--google-red) | :material-close: | Color of icon if battery level is within the 'danger' zone. |