From fb09ce6188a3152e1e94d9a772404a21f447be63 Mon Sep 17 00:00:00 2001
From: darthsandmann <kai@wnsrt.de>
Date: Sat, 30 Jul 2022 15:18:05 +0200
Subject: [PATCH] UI Minimalist Custom Cards

---
 .../custom_cards/card_light_colorpick.yaml    | 118 +++++++++
 .../custom_cards/custom_card_httpedo13.yaml   |  39 +++
 .../custom_cards/custom_card_scenes.yaml      | 243 ++++++++++++++++++
 3 files changed, 400 insertions(+)
 create mode 100644 ui_lovelace_minimalist/custom_cards/card_light_colorpick.yaml
 create mode 100644 ui_lovelace_minimalist/custom_cards/custom_card_httpedo13.yaml
 create mode 100644 ui_lovelace_minimalist/custom_cards/custom_card_scenes.yaml

diff --git a/ui_lovelace_minimalist/custom_cards/card_light_colorpick.yaml b/ui_lovelace_minimalist/custom_cards/card_light_colorpick.yaml
new file mode 100644
index 0000000..cfed384
--- /dev/null
+++ b/ui_lovelace_minimalist/custom_cards/card_light_colorpick.yaml
@@ -0,0 +1,118 @@
+---
+card_light_colorpick:
+  template:
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_light_colorpick_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_colorpick_transition: 1
+  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))"
+        grid:
+          - row-gap: "12px"
+  styles:
+    grid:
+      - grid-template-areas: |
+          "item1 item2"
+          "item3 item3"
+      - grid-template-columns: "1fr 1fr"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "yellow_slider"
+        entity: "[[[ return entity.entity_id ]]]"
+        label: >-
+          [[[
+            var label = variables.ulm_translation_state
+            if (entity.attributes.brightness != null && entity.state == 'on'){
+              var bri = Math.round(entity.attributes.brightness / 2.55);
+              var label = (bri ? bri : "0") + "%";
+            }
+            return label;
+          ]]]
+        name: "[[[ return variables.ulm_card_light_slider_horizontal_name ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)"
+            - padding: "0px"
+    item2:
+      card:
+        type: "custom:my-slider"
+        entity: "[[[ return entity.entity_id ]]]"
+        radius: "14px"
+        height: "42px"
+        mainSliderColor: "rgba(var(--color-yellow),1)"
+        secondarySliderColor: "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;
+          }
+    item3:
+      card:
+        type: "conditional"
+        conditions:
+          - entity: "[[[ return entity.entity_id ]]]"
+            state: "on"
+        card:
+          type: "custom:rgb-light-card"
+          entity: "[[[ return entity.entity_id ]]]"
+          justify: "around"
+          colors:
+            - rgb_color:
+                - 255
+                - 255
+                - 255
+              icon_color: "rgba(255, 255, 255, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
+            - rgb_color:
+                - 245
+                - 68
+                - 54
+              icon_color: "rgba(245, 68, 54, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
+            - rgb_color:
+                - 51
+                - 102
+                - 204
+              icon_color: "rgba(51, 102, 204, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
+            - rgb_color:
+                - 51
+                - 204
+                - 51
+              icon_color: "rgba(51, 204, 51, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
+            - rgb_color:
+                - 255
+                - 0
+                - 255
+              icon_color: "rgba(255, 0, 255, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
+            - rgb_color:
+                - 0
+                - 255
+                - 255
+              icon_color: "rgba(0, 255, 255, 0.8)"
+              transition: "[[[ return variables.ulm_card_light_colorpick_transition; ]]]"
diff --git a/ui_lovelace_minimalist/custom_cards/custom_card_httpedo13.yaml b/ui_lovelace_minimalist/custom_cards/custom_card_httpedo13.yaml
new file mode 100644
index 0000000..3aa77f4
--- /dev/null
+++ b/ui_lovelace_minimalist/custom_cards/custom_card_httpedo13.yaml
@@ -0,0 +1,39 @@
+---
+custom_card_httpedo13_sun:
+  show_icon: false
+  show_name: false
+  show_label: false
+  variables:
+    darkMode: "[[[ return hass.themes.darkMode; ]]]"
+    language: "[[[ return hass.language; ]]]"
+    showAzimuth: false
+    showElevation: false
+    timeFormat: "24h"
+    title:
+  tap-action:
+    action: "none"
+  styles:
+    grid:
+      - grid-template-areas: "'item1'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:sun-card"
+        darkMode: "[[[ return variables.darkMode; ]]]"
+        language: "[[[ return variables.language; ]]]"
+        showAzimuth: "[[[ return variables.showAzimuth; ]]]"
+        showElevation: "[[[ return variables.showElevation; ]]]"
+        timeFormat: "[[[ return variables.timeFormat; ]]]"
+        title: "[[[ return variables.title; ]]]"
+        card_mod:
+        style: |
+          ha-card.type-custom-sun-card {
+            border-radius: 14px;
+            box-shadow: none;
+          }
diff --git a/ui_lovelace_minimalist/custom_cards/custom_card_scenes.yaml b/ui_lovelace_minimalist/custom_cards/custom_card_scenes.yaml
new file mode 100644
index 0000000..d316b54
--- /dev/null
+++ b/ui_lovelace_minimalist/custom_cards/custom_card_scenes.yaml
@@ -0,0 +1,243 @@
+---
+card_scenes:
+  show_icon: false
+  show_name: false
+  show_label: false
+  variables:
+    entity_1:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_2:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_3:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_4:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_5:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+  styles:
+    grid:
+      - grid-template-areas: "'item1 item2 item3 item4 item5'"
+      - grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
+      - grid-template-rows: "min-content"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_1.entity_id ]]]"
+        icon: "[[[ return variables.entity_1.icon ]]]"
+        name: "[[[ return variables.entity_1.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_1.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_1.bg_color ]]]"
+        tap_action:
+          action: "call-service"
+          service: |
+            [[[
+              let domain = variables.entity_1.entity_id.substr(0, variables.entity_1.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          service_data:
+            entity_id: "[[[ return variables.entity_1.entity_id ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_2.entity_id ]]]"
+        icon: "[[[ return variables.entity_2.icon ]]]"
+        name: "[[[ return variables.entity_2.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_2.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_2.bg_color ]]]"
+        tap_action:
+          action: "call-service"
+          service: |
+            [[[
+              let domain = variables.entity_2.entity_id.substr(0, variables.entity_2.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          service_data:
+            entity_id: "[[[ return variables.entity_2.entity_id ]]]"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_3.entity_id ]]]"
+        icon: "[[[ return variables.entity_3.icon ]]]"
+        name: "[[[ return variables.entity_3.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_3.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_3.bg_color ]]]"
+        tap_action:
+          action: "call-service"
+          service: |
+            [[[
+              let domain = variables.entity_3.entity_id.substr(0, variables.entity_3.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          service_data:
+            entity_id: "[[[ return variables.entity_3.entity_id ]]]"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_4.entity_id ]]]"
+        icon: "[[[ return variables.entity_4.icon ]]]"
+        name: "[[[ return variables.entity_4.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_4.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_4.bg_color ]]]"
+        tap_action:
+          action: "call-service"
+          service: |
+            [[[
+              let domain = variables.entity_4.entity_id.substr(0, variables.entity_4.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          service_data:
+            entity_id: "[[[ return variables.entity_4.entity_id ]]]"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_5.entity_id ]]]"
+        icon: "[[[ return variables.entity_5.icon ]]]"
+        name: "[[[ return variables.entity_5.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_5.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_5.bg_color ]]]"
+        tap_action:
+          action: "call-service"
+          service: |
+            [[[
+              let domain = variables.entity_5.entity_id.substr(0, variables.entity_5.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          service_data:
+            entity_id: "[[[ return variables.entity_5.entity_id ]]]"
+
+card_scenes_pill:
+  show_icon: true
+  show_label: false
+  show_name: true
+  variables:
+    color_icon: "gray"
+    color_bg: "gray"
+  styles:
+    grid:
+      - grid-template-areas: "'i' 'n'"
+      - grid-template-columns: "min-content"
+      - grid-template-rows: "1fr 1fr"
+      - row-gap: "12px"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - box-shadow: "none"
+      - padding: "5px"
+      - box-shadow: >
+          [[[
+            if (hass.themes.darkMode){
+              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+            } else {
+              return "var(--box-shadow)";
+            }
+          ]]]
+      - border-radius: "50px"
+      - place-self: "center"
+      - width: "52px"
+      - height: "84px"
+    icon:
+      - color: >
+          [[[
+            var color = [variables.color_icon];
+            if (color == "gray"){
+              var color = "rgba(var(--color-theme),0.20)";
+            } else if(color == "yellow"){
+              var color = "rgba(var(--color-yellow),1)";
+            } else if(color == "blue"){
+              var color = "rgba(var(--color-blue),1)";
+            } else if(color == "purple"){
+              var color = "rgba(var(--color-purple),1)";
+            } else if(color == "green"){
+              var color = "rgba(var(--color-green),1)";
+            } else if(color == "red"){
+              var color = "rgba(var(--color-red),1)";
+            }
+            return color;
+          ]]]
+    img_cell:
+      - background-color: >
+          [[[
+            var color = [variables.color_bg];
+            if (color == "gray"){
+              var color = "rgba(var(--color-theme),0.05)";
+            } else if(color == "yellow"){
+              var color = "rgba(var(--color-yellow),0.20)";
+            } else if(color == "blue"){
+              var color = "rgba(var(--color-blue),0.20)";
+            } else if(color == "purple"){
+              var color = "rgba(var(--color-purple),0.20)";
+            } else if(color == "green"){
+              var color = "rgba(var(--color-green),0.20)";
+            } else if(color == "red"){
+              var color = "rgba(var(--color-red),0.20)";
+            }
+            return color;
+          ]]]
+      - border-radius: "50%"
+      - width: "42px"
+      - height: "42px"
+    name:
+      - font-weight: "bold"
+      - font-size: "9.5px"
+      - width: "33px"
+      - padding-bottom: "7px"
+    state:
+      - color: "rgba(var(--color-theme),0.9)"
+  color: "var(--google-grey)"