- Garbage and recycling resizing and redesign

- New app for scene selection - Update the design of the weather app and add warning - Add the temperature in the house map directly and update design
avenger11 · Aug 7, 2023 · c1d9044 · c1d9044
1 parent e57f638
commit c1d9044
Show file tree

Hide file tree

Showing 50 changed files with 2,555 additions and 749 deletions.
diff --git a/.HA_VERSION b/.HA_VERSION
@@ -1 +1 @@
-2023.4.6
+2023.7.3
diff --git a/button_card_templates/climate_switch.yaml b/button_card_templates/climate_switch.yaml
@@ -0,0 +1,140 @@
+################################################################################
+## Normal switch template
+################################################################################
+
+climate_switch:
+  show_state: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - value: 'on'
+      styles:
+        card:
+          - background: white
+  styles:
+    card:
+      - border-radius: 20px
+      - border-width: 0px
+      - width: 70px
+      - height: 70px
+      - background: var(--custom-ha-card-background-revert)
+
+    custom_fields:
+      icon:
+        - position: absolute
+        - height: 50px
+        - width: 50px
+        - fill: rgb(255,255,255)
+
+  style: |
+    #container {
+      display: flex !important;
+      justify-content: center !important;
+    }
+  variables:
+    state: > #send the state to the svg icon
+      [[[ return !entity || entity.state; ]]]
+
+################################################################################
+# These switch template use a clip path to be transparent
+################################################################################
+climate_switch_invert:
+  show_state: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    card:
+      - border-radius: 0px
+      - border-width: 0px
+      - width: fit-content
+      - height: 170px
+      - background: transparent
+      - margin-top: -50px
+      - margin-left: -4px
+      - margin-right: -4px
+    custom_fields:
+      icon:
+        - position: absolute
+        - height: 50px
+        - width: 50px
+      button:
+        - position: absolute
+        - border-radius: 20px
+        - border-width: 0px
+        - width: 70px
+        - height: 70px
+        - background: rgba(0,0,0,0)
+
+      background_cut:
+        - background: var(--custom-ha-card-background-revert)
+        - width: 90px
+        - height: 170px
+        - clip-path: polygon(0px 0px, 0px calc(100% - 0px), calc(100% - 0px) calc(100% - 0px), calc(100% - 0px) 0px, 0px 0px, calc(50% - -35px) calc(50% - -15px), calc(50% - -35px) calc(50% - -15px), calc(50% - -34.737px) calc(50% - -18.233px), calc(50% - -33.976px) calc(50% - -21.304px), calc(50% - -32.759px) calc(50% - -24.171px), calc(50% - -31.128px) calc(50% - -26.792px), calc(50% - -29.125px) calc(50% - -29.125px), calc(50% - -26.792px) calc(50% - -31.128px), calc(50% - -24.171px) calc(50% - -32.759px), calc(50% - -21.304px) calc(50% - -33.976px), calc(50% - -18.233px) calc(50% - -34.737px), calc(50% - -15px) calc(50% - -35px), calc(50% - 15px) calc(50% - -35px), calc(50% - 15px) calc(50% - -35px), calc(50% - 18.233px) calc(50% - -34.737px), calc(50% - 21.304px) calc(50% - -33.976px), calc(50% - 24.171px) calc(50% - -32.759px), calc(50% - 26.792px) calc(50% - -31.128px), calc(50% - 29.125px) calc(50% - -29.125px), calc(50% - 31.128px) calc(50% - -26.792px), calc(50% - 32.759px) calc(50% - -24.171px), calc(50% - 33.976px) calc(50% - -21.304px), calc(50% - 34.737px) calc(50% - -18.233px), calc(50% - 35px) calc(50% - -15px), calc(50% - 35px) calc(50% - 15px), calc(50% - 35px) calc(50% - 15px), calc(50% - 34.737px) calc(50% - 18.233px), calc(50% - 33.976px) calc(50% - 21.304px), calc(50% - 32.759px) calc(50% - 24.171px), calc(50% - 31.128px) calc(50% - 26.792px), calc(50% - 29.125px) calc(50% - 29.125px), calc(50% - 26.792px) calc(50% - 31.128px), calc(50% - 24.171px) calc(50% - 32.759px), calc(50% - 21.304px) calc(50% - 33.976px), calc(50% - 18.233px) calc(50% - 34.737px), calc(50% - 15px) calc(50% - 35px), calc(50% - -15px) calc(50% - 35px), calc(50% - -15px) calc(50% - 35px), calc(50% - -18.233px) calc(50% - 34.737px), calc(50% - -21.304px) calc(50% - 33.976px), calc(50% - -24.171px) calc(50% - 32.759px), calc(50% - -26.792px) calc(50% - 31.128px), calc(50% - -29.125px) calc(50% - 29.125px), calc(50% - -31.128px) calc(50% - 26.792px), calc(50% - -32.759px) calc(50% - 24.171px), calc(50% - -33.976px) calc(50% - 21.304px), calc(50% - -34.737px) calc(50% - 18.233px), calc(50% - -35px) calc(50% - 15px), calc(50% - -35px) calc(50% - -15px))
+  style: |
+    #container {
+      display: flex !important;
+      justify-content: center !important;
+    }
+  custom_fields:
+    background_cut: ""
+    button: ""
+  variables:
+    state: > #send the state to the svg icon
+      [[[ return !entity || entity.state; ]]]
+
+################################################################################
+# Temperatur Low Arrow switch template
+################################################################################
+
+climate_switch_arrow_temp_low:
+  show_state: false
+  show_icon: false
+  show_label: false
+  show_name: false
+  styles:
+    card:
+      - width: 70px
+      - height: 70px
+      - background: rgba(0,0,0,0)
+      - border-width: 0px
+      - border-radius: 50%
+
+    custom_fields:
+      icon:
+        - position: absolute
+        - height: 40px
+        - width: 40px
+        - fill: orange
+  style: |
+    #container {
+      display: flex !important;
+      justify-content: center !important;
+    }
+
+
+climate_switch_arrow_temp_high:
+  show_state: false
+  show_icon: false
+  show_label: false
+  show_name: false
+  styles:
+    card:
+      - width: 70px
+      - height: 70px
+      - background: rgba(0,0,0,0)
+      - border-width: 0px
+      - border-radius: 50%
+
+    custom_fields:
+      icon:
+        - position: absolute
+        - height: 40px
+        - width: 40px
+        - fill: rgb(0,122,255)
+  style: |
+    #container {
+      display: flex !important;
+      justify-content: center !important;
+    }
diff --git a/button_card_templates/garbage.yaml b/button_card_templates/garbage.yaml
@@ -1,37 +1,35 @@
 garbage:
   show_name: true
   show_label: true
-  aspect_ratio: 1/1
+  #aspect_ratio: 1/1
   styles:
     card:
       #- width: 176.5px
       #- height: 176.5px
-      - padding: 15px
-      - border-radius: 20px
+      - padding: 1.2vw 0.8vw 1.2vw 0.8vw
+      - border-radius: 1.5vw
       - box-shadow: var(--custom-ha-card-box-shadow)
     grid:
-      - grid-template-areas: '"i" "n" "l"'
-      - grid-template-columns: 1fr
-      - grid-template-rows: 1fr min-content min-content
+      - grid-template-areas: '"i n" "i l"'
+      - grid-template-columns: none
+      - grid-template-rows: 1fr 1fr
     name:
       - justify-self: start
-      - font-size: 22px 
+      - font-size: 1.2vw
       - font-weight: 600
       - color: var(--custom-ha-card-text-color-primary)
-      - padding-bottom: 3px
+      - align-self: end
     img_cell:
       - justify-content: center
       - align-items: center
-      - margin-bottom: 0.5vw
-      - size: 60px
       - background: var(--custom-ha-card-background-revert)
-      - border-radius: 10px
-      - width: 5.5vw
-      - height: 5.5vw
+      - border-radius: 1.75vw
+      - width: 3.5vw
+      - height: 3.5vw
       - place-self: start
     label:
       - justify-self: start
-      - font-size: 14px
+      - font-size: 1vw
       - font-weight: 600
       - color: var(--custom-ha-card-text-color-secondary)
       - padding-bottom: 5px
@@ -43,6 +41,7 @@ garbage:
       styles:
         img_cell:
           - background: 'rgb(90,201,186)'
+          - animation: blink 2s ease infinite
         name:
           - color: black
         label:
@@ -55,6 +54,7 @@ garbage:
       styles:
         img_cell:
           - background: 'rgb(90,201,186)'
+          - animation: blink 2s ease infinite
         name:
           - color: black
         label:
@@ -65,9 +65,9 @@ garbage:
           - color: black
   label: >
     [[[
-      if (entity.state == 0) return 'Sortir bac ce matin';
-      if (entity.state == 1) return 'Sortir le bac ce soir';
-      else return 'Passe dans '+ entity.attributes.days + ' jours';
+      if (entity.state == 0) return 'Ce matin';
+      if (entity.state == 1) return 'Ce soir';
+      else return 'Dans '+ entity.attributes.days + ' jours';
     ]]]
   style: |
     ha-card {

diff --git a/button_card_templates/house_map_-_temp_hum.yaml b/button_card_templates/house_map_-_temp_hum.yaml
@@ -0,0 +1,85 @@
+house_map_-_temp_hum:
+    show_state: false
+    show_icon: false
+    show_name: false
+    show_label: false
+    styles:
+      card:
+        - padding: 0.4vw 
+        - border-radius: 1.8vw 
+        - background: var(--custom-map-card-control-background-off)
+        - box-shadow: var(--custom-ha-card-box-shadow)
+        - border-width: 0px
+
+      grid:
+        - grid-template-areas: |
+            "icon temp"
+            "icon2 hum"
+        - grid-template-columns: 3vw auto
+        - grid-template-row: auto auto
+        - grid-gap: 0.3vw
+
+      custom_fields:
+        icon:
+          - background: var(--custom-ha-card-background-revert)
+          - border-radius: 50%
+          - width: 2vw
+          - height: 2vw
+          - padding: 0.4vw
+        icon2:
+          - background: var(--custom-ha-card-background-revert)
+          - border-radius: 50%
+          - width: 2vw
+          - height: 2vw
+          - padding: 0.4vw
+        temp:
+          - font-size: 1.3vw
+          - font-weight: 500
+          - color: var(--custom-ha-card-text-color-primary)
+          - justify-self: start
+        hum:
+          - font-size: 1.3vw
+          - font-weight: 500
+          - color: var(--custom-ha-card-text-color-primary)
+          - justify-self: start  
+    custom_fields:
+      temp: >
+        [[[
+          return Math.round( variables.entity_temp * 10 | 0) / 10 + '°';
+        ]]]
+      hum: >
+        [[[
+          return Math.round( variables.entity_hum | 0) + '%';
+        ]]]
+      icon: >
+          <svg viewBox="0 0 28 28" >
+            <style>
+              .primary {
+                fill: var(--custom-topbar-icon-color-primary);
+              }
+              .secondary {
+                fill: var(--custom-topbar-icon-color-secondary);
+              }
+            </style>
+            <path class="secondary" d="M12.4169 27.3998C15.9417 27.3998 18.7966 24.5563 18.7966 21.0294C18.7966 19.2081 18.0658 17.62 16.6638 16.3333C16.4219 16.1106 16.3654 15.9763 16.3676 15.6332V5.29468C16.3676 2.7407 14.7633 1 12.4169 1C10.0409 1 8.43117 2.7407 8.43117 5.29468V15.6332C8.43117 15.9763 8.38641 16.1127 8.13492 16.3333C6.73406 17.6095 6 19.2081 6 21.0294C6 24.5563 8.86664 27.3998 12.4169 27.3998ZM12.4169 25.3968C9.98249 25.3968 8.02639 23.4194 8.02639 21.0041C8.02639 19.5203 8.72202 18.2214 9.95788 17.3957C10.319 17.1538 10.4576 16.9396 10.4576 16.4612V5.3671C10.4576 3.96718 11.2556 3.02428 12.4169 3.02428C13.5506 3.02428 14.3487 3.96718 14.3487 5.3671V16.4612C14.3487 16.9396 14.4893 17.1538 14.8483 17.3957C16.0842 18.2214 16.7819 19.5203 16.7819 21.0041C16.7819 23.4194 14.8162 25.3968 12.4169 25.3968Z" />
+            <path class="secondary" d="M18.6002 5.55812H21.1748C21.6061 5.55812 21.8979 5.23117 21.8979 4.8468C21.8979 4.46031 21.6061 4.13336 21.1748 4.13336H18.6002C18.169 4.13336 17.8772 4.46031 17.8772 4.8468C17.8772 5.23117 18.169 5.55812 18.6002 5.55812ZM18.6002 8.81524H21.1748C21.6061 8.81524 21.8979 8.48828 21.8979 8.1018C21.8979 7.71532 21.6061 7.39047 21.1748 7.39047H18.6002C18.169 7.39047 17.8772 7.71532 17.8772 8.1018C17.8772 8.48828 18.169 8.81524 18.6002 8.81524ZM18.6002 12.0829H21.1748C21.6061 12.0829 21.8979 11.7559 21.8979 11.3694C21.8979 10.9851 21.6061 10.6485 21.1748 10.6485H18.6002C18.169 10.6485 17.8772 10.9851 17.8772 11.3694C17.8772 11.7559 18.169 12.0829 18.6002 12.0829ZM18.6002 15.3505H21.1748C21.6061 15.3505 21.8979 15.0236 21.8979 14.6371C21.8979 14.2431 21.6061 13.9162 21.1748 13.9162H18.6002C18.169 13.9162 17.8772 14.2431 17.8772 14.6371C17.8772 15.0236 18.169 15.3505 18.6002 15.3505Z" />
+            <path class="primary" d="M12.4031 23.8148C13.9586 23.8148 15.2116 22.5618 15.2116 20.9945C15.2116 19.9056 14.5968 19.0117 13.7029 18.5259C13.3321 18.3266 13.2032 18.186 13.2032 17.6181V11.3718C13.2032 10.8072 12.8442 10.4481 12.4031 10.4481C11.9545 10.4481 11.6029 10.8072 11.6029 11.3718V17.6181C11.6029 18.186 11.4761 18.3266 11.1032 18.5259C10.2114 19.0117 9.59668 19.9056 9.59668 20.9945C9.59668 22.5618 10.8496 23.8148 12.4031 23.8148Z" />
+          </svg>
+      icon2: >
+          <svg viewBox="0 0 28 28">
+            <style>
+              .primary {
+                fill: var(--custom-topbar-icon-color-primary);
+              }
+              .secondary {
+                fill: var(--custom-topbar-icon-color-secondary);
+              }
+            </style>
+            <path class="primary" d="M21.2742 25.2731C24.1436 25.2731 26.44 23.0332 26.44 20.2223C26.44 18.6736 25.6678 17.1525 25.004 15.9145L22.3544 10.9765C22.1106 10.5167 21.7403 10.306 21.2742 10.306C20.7963 10.306 20.4281 10.5188 20.1843 10.9786L17.5443 15.9145C16.8806 17.1525 16.1179 18.6736 16.1179 20.2223C16.1179 23.0332 18.4047 25.2731 21.2742 25.2731Z" />
+            <path class="secondary" d="M5.88112 11.1368C11.174 11.1368 13.9814 6.71883 18.8409 6.71883C19.9746 6.71883 20.9667 6.97242 22.1367 7.64156C22.6891 7.94812 23.2338 7.75852 23.5263 7.34367C23.872 6.84586 23.7925 6.12868 23.0814 5.71032C21.7446 4.94228 20.3578 4.57056 18.8409 4.57056C13.4615 4.57056 10.6734 8.99064 5.88112 8.99064C4.73784 8.99064 3.74573 8.73493 2.57573 8.06579C2.0212 7.75712 1.4744 7.95095 1.18612 8.37962C0.861751 8.87743 0.931592 9.59039 1.63307 9.99914C2.96784 10.7651 4.35464 11.1368 5.88112 11.1368ZM5.89284 17.4298C10.4301 17.4298 13.1957 14.0646 17.0639 13.2708C17.4904 12.4634 17.9266 11.6773 18.3532 10.872C13.188 11.1687 10.5681 15.2815 5.89284 15.2815C4.74956 15.2815 3.75956 15.0162 2.58744 14.347C2.04252 14.0384 1.48612 14.2322 1.20956 14.6609C0.875579 15.1587 0.943311 15.8716 1.64479 16.2804C2.97956 17.0463 4.37596 17.4298 5.89284 17.4298ZM5.88112 23.711C9.37589 23.711 11.8178 21.7115 14.5129 20.4405C14.4269 19.7878 14.5612 18.8051 14.8059 18.0082C11.7267 19.279 9.33136 21.5627 5.88112 21.5627C4.73784 21.5627 3.74573 21.307 2.57573 20.6283C2.0212 20.3196 1.4744 20.5134 1.18612 20.9421C0.861751 21.4399 0.931592 22.1625 1.63307 22.5616C2.96784 23.3372 4.35464 23.711 5.88112 23.711Z" />
+          </svg>
+    style: |
+      ha-card {
+
+                
+      }   
diff --git a/button_card_templates/house_map_-_temperature_switch.yaml b/button_card_templates/house_map_-_temperature_switch.yaml
@@ -0,0 +1,28 @@
+house_map_temperature_switch:
+
+  show_state: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  size: 60%
+  tap_action:
+    action: toggle
+  styles:
+    grid:
+      - grid-template-areas: | 
+          "icon"
+    card:
+      - width: 4vw
+      - height: 4vw
+      - borderRadius: 1vw
+      - border-width: 0px
+      - background-color: >
+          [[[ return (entity.state === 'on' ) ? 'var(--custom-map-card-control-background-on)' : 'var(--custom-map-card-control-background-off)'; ]]]
+      - box-shadow: var(--custom-ha-card-box-shadow)
+    custom_fields:
+      icon:
+        - height: 2.5vw
+        - width: 2.5vw
+        - top: 50%
+        - left: 50%
+        - margin: auto