add climate fan_mode buttons

matt8707 · Jan 2, 2023 · 3bda332 · 3bda332
1 parent 17a2ea4
commit 3bda332
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 43 deletions.
diff --git a/button_card_templates/climate.yaml b/button_card_templates/climate.yaml
@@ -0,0 +1,56 @@
+climate_base:
+  show_icon: false
+  styles:
+    name:
+      - padding: 12px 13px
+      - font-size: 0.8em
+      - font-weight: 600
+    card:
+      - border-radius: 10px
+
+climate_fan_mode:
+  show_icon: false
+  variables:
+    fan_mode: false
+  tap_action:
+    action: call-service
+    service: climate.set_fan_mode
+    service_data:
+      entity_id: >
+        [[[
+          return !entity || entity.entity_id;
+        ]]]
+      fan_mode: >
+        [[[
+          return variables.fan_mode;
+        ]]]
+  styles:
+    card:
+      - background-color: >
+          [[[
+            return !entity || entity.attributes.fan_mode === variables.fan_mode ? "rgba(158, 158, 158, 0.2)" : "rgba(189, 189, 189, 0.05)";
+          ]]]
+  template:
+    - climate_base
+
+climate_swing_mode:
+  tap_action:
+    action: call-service
+    service: climate.set_swing_mode
+    service_data:
+      entity_id: >
+        [[[
+          return !entity || entity.entity_id;
+        ]]]
+      swing_mode: >
+        [[[
+          return !entity || entity.attributes.swing_mode === 'off' ? 'on' : 'off';
+        ]]]
+  styles:
+    card:
+      - background-color: >
+          [[[
+            return !entity || entity.attributes.swing_mode === "on" ? "rgba(158, 158, 158, 0.2)" : "rgba(189, 189, 189, 0.05)";
+          ]]]
+  template:
+    - climate_base
diff --git a/popup/sovrum_klimat.yaml b/popup/sovrum_klimat.yaml
@@ -23,11 +23,42 @@ browser_mod:
               - type: entities
                 card_mod:
                   class: content
-                  style: |
-                    #states {
-                      padding-top: 1.2em;
-                      padding-bottom: 0em;
-                    }
+                  style:
+                    .: |
+                      #states {
+                        padding-top: 1.2em;
+                        padding-bottom: 0em;
+                      }
+                    hui-horizontal-stack-card$: |
+                      h1 {
+                        font-size: 15px !important;
+                        font-weight: 600 !important;
+                        padding: 5px 0 4px 9px !important;
+                        letter-spacing: 0.01em !important;
+                      }
+
+                      :host {
+                        --climate-margin: 6.5px;
+                      }
+
+                      #root {
+                        padding: 2px 0px 10px 8px !important;
+                      }
+
+                      #root > *:nth-child(1) {
+                        margin-right: var(--climate-margin) !important;
+                      }
+
+                      #root > *:nth-child(2),
+                      #root > *:nth-child(3) {
+                        margin: 0px var(--climate-margin) !important;
+                      }
+
+                      #root > *:nth-child(4) {
+                        margin-left: var(--climate-margin) !important;
+                        margin-right: -1px !important;
+                      }
+
                 entities:
 
                   - type: custom:mushroom-climate-card
@@ -56,45 +87,42 @@ browser_mod:
                     card_mod:
                       style: |
                         mushroom-card {
-                          margin: -18px -13px -8px -4px;
+                          margin: -18px -13px -8px -4px
+                        }
 
-                  - type: custom:more-info-card
-                    entity: climate.ac
-                    card_mod:
-                      style:
-                        # hide everything but ha-select
-                        $: |
-                          h1 {
-                            display: none !important;
-                          }
-                        .: |
-                          h1 {
-                            display: none !important;
-                          }
-                          .card-content {
-                            padding: 0.3em 0 0.6em 0.6em;
-                          }
-                        state-card-climate$: |
-                          div {
-                            display: none !important;
-                          }
-                        more-info-climate$:
-                          .: |
-                            .container-temperature, .container-hvac_modes {
-                              display: none;
-                            }
-                          ha-select:
-                            $:
-                              # no icon so reduce label inset
-                              .: |
-                                .mdc-floating-label {
-                                  inset-inline-start: 4px !important;
-                                }
-                              # fix transparent menu background color
-                              mwc-menu$: |
-                                mwc-list {
-                                  background: var(--card-background-color);
-                                }
+                  - type: custom:hui-horizontal-stack-card
+                    title: Fläktläge
+                    cards:
+
+                      - type: custom:button-card
+                        entity: climate.ac
+                        name: Låg
+                        variables:
+                          fan_mode: low
+                        template:
+                          - climate_fan_mode
+
+                      - type: custom:button-card
+                        entity: climate.ac
+                        name: Med
+                        variables:
+                          fan_mode: medium
+                        template:
+                          - climate_fan_mode
+
+                      - type: custom:button-card
+                        entity: climate.ac
+                        name: Hög
+                        variables:
+                          fan_mode: high
+                        template:
+                          - climate_fan_mode
+
+                      - type: custom:button-card
+                        entity: climate.ac
+                        name: Svep
+                        template:
+                          - climate_swing_mode
 
                   - entity: sensor.broadlink_temperature
                     name: Rumstemperatur