From beb4ad7fca3d39c6f1d87e724d4c22c7ba32e6ae Mon Sep 17 00:00:00 2001
From: BasBruss <68892092+basbruss@users.noreply.github.com>
Date: Wed, 15 Dec 2021 11:09:01 +0100
Subject: [PATCH] Folder structure

---
 .../card_light_color.yaml                     | 350 ++++++++++++++++++
 .../card_light_icon_info.yaml                 |  98 +++++
 2 files changed, 448 insertions(+)
 create mode 100644 custom_cards/custom_card_light_color/card_light_color.yaml
 create mode 100644 custom_cards/custom_card_light_icon_info/card_light_icon_info.yaml

diff --git a/custom_cards/custom_card_light_color/card_light_color.yaml b/custom_cards/custom_card_light_color/card_light_color.yaml
new file mode 100644
index 000000000..26fc1988e
--- /dev/null
+++ b/custom_cards/custom_card_light_color/card_light_color.yaml
@@ -0,0 +1,350 @@
+card_light_color:
+  template:
+    - icon_info_light
+    - ulm_language_variables
+  variables:
+    ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_icon: 
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: template
+      value: "[[[ return entity.state == 'on' ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (states['sun.sun'].state == "below_horizon"){
+                  var color = entity.attributes.rgb_color;
+                  if (color){
+                     return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),0.1)'
+                  } 
+                }else if (states['sun.sun'].state == "above_horizon")
+                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
+              ]]]
+  styles:
+    card:
+      - border-radius: var(--border-radius)
+      - box-shadow: var(--box-shadow)
+      - padding: 12px
+  tap_action:
+    action: toggle
+
+### slider card
+card_light_slider_color:
+  template:
+    - ulm_language_variables
+  variables:
+    ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_icon: 
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: template
+      value: "[[[ return entity.state == 'on' ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (states['sun.sun'].state == "below_horizon"){
+                  var color = entity.attributes.rgb_color;
+                  if (color){
+                     return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),0.1)'
+                  } 
+                }else if (states['sun.sun'].state == "above_horizon")
+                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: '"item1" "item2"'
+      - grid-template-columns: 1fr
+      - grid-template-rows: min-content min-content
+      - row-gap: 12px
+    card:
+      - border-radius: var(--border-radius)
+      - box-shadow: var(--box-shadow)
+      - padding: 12px
+  tap_action:
+    action: toggle
+  custom_fields:
+    item1:
+      card:
+        type: 'custom:button-card'
+        entity: '[[[ return entity.entity_id ]]]'
+        variables:
+          ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
+          ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
+        template:
+          - icon_info_light
+          - auto_color
+    item2:
+      card: ## delete when you don't want the collapse function
+        type: 'custom:my-slider'
+        entity: '[[[ return entity.entity_id ]]]'
+        radius: 14px
+        height: 42px
+        mainSliderColor: >
+            [[[ 
+                var color = entity.attributes.rgb_color;
+                if (color){
+                   return 'rgba(' + entity.attributes.rgb_color + ',1)'
+                }
+                else{
+                  return 'rgba(var(--color-yellow),1)'
+                } 
+            ]]]
+        secondarySliderColor: >
+            [[[ 
+                var color = entity.attributes.rgb_color;
+                if (color){
+                   return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
+                }
+                else{
+                  return 'rgba(var(--color-yellow),0.2)';
+                } 
+            ]]]
+        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 {
+            border-radius: 14px;
+            box-shadow: none;
+          }
+
+### slider collapse card
+card_light_slider_collapse_color:
+  template: 
+    - ulm_language_variables
+  variables:
+    ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_icon: 
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: template
+      value: "[[[ return entity.state == 'on' ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (states['sun.sun'].state == "below_horizon"){
+                  var color = entity.attributes.rgb_color;
+                  if (color){
+                     return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),0.1)'
+                  } 
+                }else if (states['sun.sun'].state == "above_horizon")
+                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
+              ]]]
+        grid:
+          - row-gap: 12px
+  styles:
+    grid:
+      - grid-template-areas: '"item1" "item2"'
+      - grid-template-columns: 1fr
+      - grid-template-rows: min-content min-content
+    card:
+      - border-radius: var(--border-radius)
+      - box-shadow: var(--box-shadow)
+      - padding: 12px
+  tap_action:
+    action: toggle
+  custom_fields:
+    item1:
+      card:
+        type: 'custom:button-card'
+        entity: '[[[ return entity.entity_id ]]]'
+        variables:
+          ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
+          ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
+        template:
+          - icon_info_light
+          - auto_color
+    item2:
+      card: ## delete when you don't want the collapse function
+        type: conditional
+        conditions:
+          - entity: "[[[ return entity.entity_id ]]]"
+            state: 'on'
+        card:
+          type: 'custom:my-slider'
+          entity: '[[[ return entity.entity_id ]]]'
+          radius: 14px
+          height: 42px
+          mainSliderColor: >
+              [[[ 
+                  var color = entity.attributes.rgb_color;
+                  if (color){
+                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),1)'
+                  } 
+              ]]]
+          secondarySliderColor: >
+              [[[ 
+                  var color = entity.attributes.rgb_color;
+                  if (color){
+                     return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),0.2)';
+                  } 
+              ]]]
+          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 {
+              border-radius: 14px;
+              box-shadow: none;
+            }
+
+### internal templates
+auto_color:
+  state:
+    - value: 'on'
+      styles:
+        icon:
+          - color: >
+              [[[ 
+                  var color = entity.attributes.rgb_color;
+                  if (color != null){
+                     return 'rgba(' + entity.attributes.rgb_color + ',1)';
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),1)';
+                  } 
+              ]]]
+        label: ## delete if you want theme text-color
+          - color: >
+              [[[
+                var color = entity.attributes.rgb_color;
+                if (states['sun.sun'].state == "below_horizon"){
+                  if (color != null){
+                         return 'rgba(' + entity.attributes.rgb_color + ',1)';
+                  }else{
+                    return 'rgba(var(--color-yellow),1)';
+                  }
+                }else if (states['sun.sun'].state == "above_horizon")
+                  return 'rgba(var(--color-yellow-text),1)';
+              ]]]
+        name: ## delete if you want theme text-color
+          - color: >
+              [[[
+                var color = entity.attributes.rgb_color;
+                if (states['sun.sun'].state == "below_horizon"){
+                  if (color != null){
+                         return 'rgba(' + entity.attributes.rgb_color + ',1)';
+                  }else{
+                    return 'rgba(var(--color-yellow),1)';
+                  }
+                }else if (states['sun.sun'].state == "above_horizon")
+                  return 'rgba(var(--color-yellow-text),1)';
+              ]]]
+        img_cell:
+          - background-color: >
+              [[[ 
+                  var color = entity.attributes.rgb_color;
+                  if (color != null){
+                     return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
+                  }
+                  else{
+                    return 'rgba(var(--color-yellow),0.2)';
+                  } 
+              ]]]
+
+icon_info_light:
+  template:
+    - list_items_light
+    - ulm_language_variables
+  variables:
+    ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
+    ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-columns: min-content auto
+      - column-gap: 0px
+    card:
+      - background-color: 'rgba(0,0,0,0)'
+  tap_action:
+    action: toggle
+  hold_action:
+    action: more-info
+  custom_fields:
+    item1:
+      card:
+        type: custom:button-card
+        entity: '[[[ return entity.entity_id ]]]'
+        template: 
+          - icon
+          - auto_color
+        icon: >
+          [[[
+            var icon = 'mdi:lightbulb';
+              if (variables.ulm_card_light_icon != null){
+                var icon = variables.ulm_card_light_icon;
+              } 
+              else{
+                return icon ;
+              } 
+            return icon ;
+          ]]]
+        tap_action:
+          action: more-info
+    item2:
+      card:
+        type: custom:button-card
+        entity: '[[[ return entity.entity_id ]]]'
+        template: 
+          - icon_info
+          - auto_color
+        show_icon: false
+        label: >-
+          [[[
+            if (entity.state !='unavailable'){
+              if (entity.state =='off'){
+                return variables.ulm_off;
+              } else if (entity.state == 'on'){
+                if (entity.attributes.brightness != null){
+                  var bri = Math.round(entity.attributes.brightness / 2.55);
+                  return (bri ? bri : '0') + '%';
+                } else {
+                  return variables.ulm_on
+                }
+              }
+            } else {
+              return variables.ulm_unavailable;
+            }
+          ]]]
+        name: "[[[ return variables.ulm_card_light_name ]]]"
+        styles:
+          card:
+            - box-shadow: none
+            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
+            - padding: 6px
+            - background-color: 'rgba(0,0,0,0)'
+
+    
+  
\ No newline at end of file
diff --git a/custom_cards/custom_card_light_icon_info/card_light_icon_info.yaml b/custom_cards/custom_card_light_icon_info/card_light_icon_info.yaml
new file mode 100644
index 000000000..a7ad66c5e
--- /dev/null
+++ b/custom_cards/custom_card_light_icon_info/card_light_icon_info.yaml
@@ -0,0 +1,98 @@
+card_light_icon_info:
+  template:
+    - list_items_light
+    - ulm_language_variables
+  variables:
+    ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_icon: 
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: template
+      value: "[[[ return entity.state == 'on' ]]]"
+      styles:
+        card:
+          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
+  styles:
+    grid:
+      - grid-template-columns: min-content auto
+      - column-gap: 0px
+    card:
+      - border-radius: var(--border-radius)
+      - box-shadow: var(--box-shadow)
+      - padding: 12px
+  tap_action:
+    action: toggle
+  hold_action:
+    action: more-info
+  custom_fields:
+    item1:
+      card:
+        type: custom:button-card
+        entity: '[[[ return entity.entity_id ]]]'
+        template: 
+          - icon
+          - yellow
+        icon: >
+          [[[
+            var icon = 'mdi:lightbulb';
+              if (variables.ulm_card_light_icon != null){
+                var icon = variables.ulm_card_light_icon;
+              } 
+              else{
+                return icon ;
+              } 
+            return icon ;
+          ]]]
+        tap_action:
+          action: more-info
+    item2:
+      card:
+        type: custom:button-card
+        entity: '[[[ return entity.entity_id ]]]'
+        template: 
+          - icon_info
+        show_icon: false
+        label: >-
+          [[[
+            if (entity.state !='unavailable'){
+              if (entity.state =='off'){
+                return variables.ulm_off;
+              } else if (entity.state == 'on'){
+                if (entity.attributes.brightness != null){
+                  var bri = Math.round(entity.attributes.brightness / 2.55);
+                  return (bri ? bri : '0') + '%';
+                } else {
+                  return variables.ulm_on
+                }
+              }
+            } else {
+              return variables.ulm_unavailable;
+            }
+          ]]]
+        styles:
+          card:
+            - box-shadow: none
+            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
+            - padding: 0px
+            - background-color: 'rgba(0,0,0,0)'
+        state:
+          - styles:
+              label:
+                - color: 'rgba(var(--color-yellow-text),1)'
+              name:
+                - color: 'rgba(var(--color-yellow-text),1)'
+            value: 'on'
+
+### internal templates
+list_items_light:
+    styles:
+      card:
+        - box-shadow: none
+        - padding: 0px
+      grid:
+        - grid-template-areas: '"item1 item2"'
+        - grid-template-columns: 2fr 1fr
+        - grid-template-rows: min-content
+        - column-gap: 7px
\ No newline at end of file