Merge pull request #34 from saxel/dev

Add custom card custom_card_saxel_fan
UI-Lovelace-Minimalist · Dec 12, 2021 · 484fe73 · 484fe73
2 parents 1764199 + 56dacac
commit 484fe73
Show file tree

Hide file tree

Showing 4 changed files with 270 additions and 0 deletions.
diff --git a/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml b/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml
@@ -0,0 +1,166 @@
+custom_card_saxel_fan:
+  template:
+    - custom_card_saxel_fan_common
+    - blue
+  variables:
+    mainSliderColor: rgba(var(--color-blue),1)
+    secondarySliderColor: rgba(var(--color-blue),0.2)
+  custom_fields:
+    button:
+      card:
+        card:
+          template:
+            - '[[[ return entity.state === "on" && entity.attributes[variables.oscillate_attribute] ? "blue" : "widget_icon"]]]'
+
+custom_card_saxel_fan_blue:
+  template:
+    - custom_card_saxel_fan_common
+    - custom_template_saxel_blue
+  variables:
+    mainSliderColor: rgba(250, 250, 250,1)
+    secondarySliderColor: rgba(250,250,250,0.2)
+  custom_fields:
+    button:
+      card:
+        card:
+          template:
+            - widget_icon
+          state:
+            - operator: template
+              value: '[[[ return entity.state === "on" && entity.attributes[variables.oscillate_attribute]; ]]]'
+              styles:
+                card:
+                  - background-color: 'rgba(250, 250, 250, 1)'
+                icon:
+                  - color: 'rgba(61, 90, 254, 1)'
+                label:
+                  - color: 'rgba(250, 250, 250, 1)'
+                name:
+                  - color: 'rgba(250, 250, 250, 1)'
+                img_cell:
+                  - background-color: 'rgba(250, 250, 250, 0.2)'
+            - operator: template
+              value: '[[[ return entity.state === "on" && !entity.attributes[variables.oscillate_attribute]; ]]]'
+              styles:
+                card:
+                  - background-color: 'rgba(61, 90, 254, 1)'
+                icon:
+                  - color: 'rgba(250, 250, 250, 1)'
+                label:
+                  - color: 'rgba(250, 250, 250, 1)'
+                name:
+                  - color: 'rgba(250, 250, 250, 1)'
+                img_cell:
+                  - background-color: 'rgba(250, 250, 250, 0.2)'
+
+
+# Common template, don't use
+custom_card_saxel_fan_common:
+  variables:
+    collapsable: true  # true/false
+    mainSliderColor:
+    secondarySliderColor:
+    oscillate_attribute: oscillate
+  template:
+    - ulm_language_variables
+    - icon_info_bg
+  label: |-
+    [[[
+      if (entity.state === 'on') {
+        return `${entity.attributes.percentage}%`;
+      } else if (entity.state === 'off') {
+        return variables.ulm_off;
+      } else if (entity.state === 'unavailable') {
+        return variables.ulm_unavailable;
+      } else {
+        return entity.state;
+      }
+    ]]]
+  styles:
+    grid:
+      - grid-template-areas: '"i n n" "i l l" "slider slider button"'
+      - grid-template-columns: min-content 2fr 1fr
+      - grid-template-rows: min-content min-content min-content
+    custom_fields:
+      slider:
+        - margin-top: |-
+            [[[
+              if (!variables.collapsable) {
+                return "12px";
+              } else {
+                return entity.state === "on" ? "12px" : "0px";
+              }
+            ]]]
+      button:
+        - margin: |-
+            [[[
+              if (!variables.collapsable) {
+                return "12px 0px 0px 12px";
+              } else {
+                return entity.state === "on" ? "12px 0px 0px 12px" : "0px";
+              }
+            ]]]
+  custom_fields:
+    slider:
+      card:
+        type: conditional
+        conditions:
+          - entity: "[[[ return entity.entity_id ]]]"
+            state: "[[[ return variables.collapsable ? 'on' : entity.state; ]]]"
+        card:
+          type: 'custom:my-slider'
+          entity: '[[[ return entity.entity_id ]]]'
+          radius: 14px
+          height: 42px
+          mainSliderColor: '[[[return variables.mainSliderColor]]]'
+          secondarySliderColor: '[[[return variables.secondarySliderColor]]]'
+          mainSliderColorOff: rgba(var(--color-theme),0.05)
+          secondarySliderColorOff: rgba(var(--color-theme),0.05)
+          thumbHorizontalPadding: '0px'
+          thumbVerticalPadding: '0px'
+          thumbWidth: 0px
+          card_mod:
+            style: |-
+              ha-card {
+                box-shadow: none;
+                border-radius: 14px;
+                background-color: #3d5afe02;
+              }
+    button:
+      card:
+        type: conditional
+        conditions:
+          - entity: "[[[ return entity.entity_id ]]]"
+            state: "[[[ return variables.collapsable ? 'on' : entity.state; ]]]"
+        card:
+          type: 'custom:button-card'
+          icon: 'mdi:rotate-3d-variant'
+          entity: '[[[ return entity.entity_id ]]]'
+          tap_action:
+            action: call-service
+            service: fan.oscillate
+            service_data:
+              entity_id: '[[[ return entity.entity_id; ]]]'
+              oscillating: '[[[ return !entity.attributes[variables.oscillate_attribute] ]]]'
+          template:
+            - widget_icon
+          state:
+            - value: 'off'
+              styles:
+                icon:
+                  - color: 'rgba(var(--color-theme),0.2)'
+
+custom_template_saxel_blue:
+  state:
+    - value: 'on'
+      styles:
+        card:
+          - background-color: 'rgba(61, 90, 254, 1)'
+        icon:
+          - color: 'rgba(250, 250, 250, 1)'
+        label:
+          - color: 'rgba(250, 250, 250, 1)'
+        name:
+          - color: 'rgba(250, 250, 250, 1)'
+        img_cell:
+          - background-color: 'rgba(250, 250, 250, 0.2)'
diff --git a/custom_cards/custom_card_saxel_fan/dark_theme.png b/custom_cards/custom_card_saxel_fan/dark_theme.png
diff --git a/custom_cards/custom_card_saxel_fan/light_theme.png b/custom_cards/custom_card_saxel_fan/light_theme.png
diff --git a/custom_cards/custom_card_saxel_fan/readme.md b/custom_cards/custom_card_saxel_fan/readme.md
@@ -0,0 +1,104 @@
+# Custom-card "Fan"
+This is a _custom card_ to control a fan. It allows you to turn on/off the fan, adjusting the fan speed with a slider, and turn on/off oscillation. Two styles are available:
+
+| Template                   | Description                                                              |
+|----------------------------|--------------------------------------------------------------------------|
+| custom_card_saxel_fan      | Follows the standard theme of _UI-Lovelace-Minimalist_                   |
+| custom_card_saxel_fan_blue | Card is theme based when the fan is __OFF__, Blue when the fan is __ON__ |
+
+#### Light theme
+![Light theme](./light_theme.png)
+
+#### Dark theme
+![Dark theme](./dark_theme.png)
+
+## Credits
+Author: saxel - 2021
+Version: 1.0.0
+
+## Changelog
+<details>
+  <summary>1.0.0</summary>
+  Initial release
+</details>
+
+## Requirements
+This card needs the following to function correctly:
+<table>
+  <tr>
+    <th>Component / card</th>
+    <th>Required</th>
+    <th>Note</th>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/AnthonMS/my-cards">My Cards</a></td>
+    <td>yes</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/thomasloven/lovelace-card-mod">Card Mod</a></td>
+    <td>yes</td>
+    <td></td>
+  </tr>
+</table>
+
+## Installation
+Copy the folder `custom_card_saxel_fan` to `config/minimalist-templates/`
+
+## Usage
+
+#### Standard
+```yaml
+- type: custom:button-card
+  template: custom_card_saxel_fan_blue
+  entity: fan.smart_fan
+  name: Fan
+  variables:
+    collapsable: false
+    oscillate_attribute: oscillate
+```
+
+#### Blue
+```yaml
+- type: custom:button-card
+  template: custom_card_saxel_fan
+  entity: fan.smart_fan
+  name: Fan
+  variables:
+    collapsable: true
+    oscillate_attribute: oscillate
+```
+
+## Variables
+<table>
+  <tr>
+    <th>Variable</th>
+    <th>Example</th>
+    <th>Required</th>
+    <th>Explanation</th>
+  </tr>
+  <tr>
+    <td>entity</td>
+    <td>fan.smart_fan</td>
+    <td>yes</td>
+    <td>Fan entity</td>
+  </tr>
+  <tr>
+    <td>name</td>
+    <td>Fan</td>
+    <td>no</td>
+    <td>Name to show. If not specified the attribute <i>friendly_name</i> is shown instead</td>
+  </tr>
+  <tr>
+    <td>collapsable</td>
+    <td>true</td>
+    <td>no</td>
+    <td>true/false if the fan speed row should collapse when the fan is turned off. Default: true</td>
+  </tr>
+  <tr>
+    <td>oscillate_attribute</td>
+    <td>oscillate</td>
+    <td>no</td>
+    <td>Name of the oscillate attribute of the fan entity. Default: oscillate</td>
+  </tr>
+</table>