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)"