diff --git a/custom_components/ui_lovelace_minimalist/lovelace/translations/default.yaml b/custom_components/ui_lovelace_minimalist/lovelace/translations/default.yaml index fc7cfaeb8..f201de847 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/translations/default.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/translations/default.yaml @@ -8,6 +8,9 @@ ulm_translation_engine: ulm_translation_scenes: "[[[ return hass.resources[hass['language']]['ui.dialogs.quick-bar.commands.reload.scene']; ]]]" ulm_translation_source: "[[[ return hass.resources[hass['language']]['ui.card.media_player.source']; ]]]" ulm_translation_history: "[[[ return hass.resources[hass['language']]['ui.dialogs.more_info_control.history']; ]]]" + ulm_translation_close_cover: "[[[ return hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.close_cover']; ]]]" + ulm_translation_stop_cover: "[[[ return hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.stop_cover']; ]]]" + ulm_translation_open_cover: "[[[ return hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.open_cover']; ]]]" ulm_translation_hour: > [[[ var number = hass.resources[hass['language']]["ui.duration.hour"]; diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml index 5b7bbbda0..bd9b1322f 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml @@ -43,7 +43,7 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return 'media_player.media_play_pause'; } return variables.ulm_card_tap_service; @@ -58,7 +58,7 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return { 'entity_id': entity.entity_id }; @@ -74,8 +74,7 @@ ulm_actions_card: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -161,7 +160,7 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return 'media_player.media_play_pause'; } return variables.ulm_card_hold_service; @@ -176,7 +175,7 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return { 'entity_id': entity.entity_id }; @@ -192,8 +191,7 @@ ulm_actions_card: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -279,7 +277,7 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return 'media_player.media_play_pause'; } return variables.ulm_card_double_tap_service; @@ -294,7 +292,7 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - if(entity.entity_id.startsWith("media_player.")){ + if((entity != null) && entity.entity_id.startsWith("media_player.")){ return { 'entity_id': entity.entity_id }; @@ -310,8 +308,7 @@ ulm_actions_card: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml index b6e367def..e4832e43d 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml @@ -74,8 +74,7 @@ ulm_actions_icon: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -191,8 +190,7 @@ ulm_actions_icon: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -256,7 +254,7 @@ ulm_actions_icon: if (domain == "media_player" && action == 'toggle'){ action = 'call-service'; } - if (action == 'popup' && (variables.ulm_card_light_enable_popup || variables.ulm_card_media_player_enable_popup || variables.ulm_card_thermostat_enable_popup) ){ + if (action == 'popup' && (variables.ulm_card_light_enable_popup || variables.ulm_card_media_player_enable_popup || variables.ulm_card_thermostat_enable_popup || variables.ulm_card_cover_enable_popup)){ action = 'fire-dom-event' } @@ -313,8 +311,7 @@ ulm_actions_icon: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml index dfacb70e8..f05528bf4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml @@ -63,7 +63,6 @@ ulm_actions_name: 'entity_id': entity.entity_id }; } - } return variables.ulm_name_tap_service_data; ]]] browser_mod: @@ -75,8 +74,7 @@ ulm_actions_name: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -193,8 +191,7 @@ ulm_actions_name: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | @@ -311,8 +308,7 @@ ulm_actions_name: --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; + --popup-min-width: 1000px; card_mod: style: ha-dialog$: | diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/2-line_cards/card_graph.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/2-line_cards/card_graph.yaml index 5ecfd6e63..f8b5acd8e 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/2-line_cards/card_graph.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/2-line_cards/card_graph.yaml @@ -12,6 +12,7 @@ card_graph: ulm_card_graph_hours: 24 ulm_card_graph_type: "fill" ulm_card_graph_points: "0.5" + ulm_card_graph_group_by: "interval" triggers_update: "all" custom_fields: item1: @@ -51,6 +52,7 @@ card_graph: fill: "[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]" hours_to_show: "[[[ return variables.ulm_card_graph_hours; ]]]" points_per_hour: "[[[ return variables.ulm_card_graph_points; ]]]" + group_by: "[[[ return variables.ulm_card_graph_group_by; ]]]" style: | ha-card { box-shadow: none; diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml index 4c355ec54..4a3681555 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml @@ -89,6 +89,16 @@ card_cover: card: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" + variables: > + [[[ + let vars = variables; + if(variables.ulm_card_cover_enable_popup) { + vars.ulm_custom_popup = { + 'template': 'popup_cover' + }; + } + return vars; + ]]] icon: | [[[ var icon = "mdi:help-circle"; @@ -101,7 +111,7 @@ card_cover: } else if (variables.ulm_card_cover_gate){ var icon = "mdi:gate"; } else - var icon = "mdi:window-shutter"; + var icon = "mdi:roller-shade-closed"; } else if (variables.ulm_card_curtain_display_collapse_expand){ var icon = "mdi:curtains"; @@ -110,7 +120,7 @@ card_cover: } else if (variables.ulm_card_cover_gate){ var icon = "mdi:gate-open"; }else - var icon = "mdi:window-shutter-open"; + var icon = "mdi:roller-shade"; } else { if (states[entity.entity_id].attributes.current_position == 0){ if (variables.ulm_card_curtain_display_collapse_expand){ @@ -120,7 +130,7 @@ card_cover: } else if(variables.ulm_card_cover_gate){ var icon = "mdi:gate"; } else - var icon = "mdi:window-shutter"; + var icon = "mdi:roller-shade-closed"; } else if (variables.ulm_card_curtain_display_collapse_expand){ var icon = "mdi:curtains"; @@ -130,7 +140,7 @@ card_cover: var icon = "mdi:gate-open"; } else - var icon = "mdi:window-shutter-open"; + var icon = "mdi:roller-shade"; } return icon ; ]]] @@ -171,6 +181,16 @@ card_cover: card: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" + variables: > + [[[ + let vars = variables; + if(variables.ulm_card_cover_enable_popup) { + vars.ulm_custom_popup = { + 'template': 'popup_cover' + }; + } + return vars; + ]]] name: "[[[ return variables.ulm_card_cover_name ]]]" label: >- [[[ @@ -201,7 +221,27 @@ card_cover: type: "custom:button-card" template: "widget_icon" state: - - value: "closed" + - operator: "template" + value: > + [[[ + return entity.attributes.current_position == "0"; + ]]] + styles: + icon: + - color: "rgba(var(--color-theme),0.4)" + - operator: "template" + value: > + [[[ + return entity.state == "closing"; + ]]] + styles: + icon: + - color: "rgba(var(--color-theme),0.4)" + - operator: "template" + value: > + [[[ + return entity.state == "opening"; + ]]] styles: icon: - color: "rgba(var(--color-theme),0.4)" @@ -229,13 +269,33 @@ card_cover: service: "cover.stop_cover" service_data: entity_id: "[[[ return entity.entity_id ]]]" - icon: "mdi:pause" + icon: "mdi:stop" item3: card: type: "custom:button-card" template: "widget_icon" state: - - value: "open" + - operator: "template" + value: > + [[[ + return entity.attributes.current_position == "100"; + ]]] + styles: + icon: + - color: "rgba(var(--color-theme),0.4)" + - operator: "template" + value: > + [[[ + return entity.state == "closing"; + ]]] + styles: + icon: + - color: "rgba(var(--color-theme),0.4)" + - operator: "template" + value: > + [[[ + return entity.state == "opening"; + ]]] styles: icon: - color: "rgba(var(--color-theme),0.4)" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_media_player.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_media_player.yaml index 561d7f8ed..66b3a06ec 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_media_player.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_media_player.yaml @@ -55,7 +55,6 @@ card_media_player: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" - padding: "12px" - - background-blend-mode: "multiply" - background: | [[[ return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_person.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_person.yaml index 47da16c65..983a4c882 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_person.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_person.yaml @@ -7,8 +7,6 @@ card_person: variables: ulm_card_person_use_entity_picture: false ulm_card_person_icon: "mdi:face-man" - ulm_card_person_zone1: "" - ulm_card_person_zone2: "" ulm_address: "" triggers_update: "all" tap_action: @@ -18,19 +16,23 @@ card_person: show_name: true label: > [[[ + var eta = "" + if (variables.ulm_card_person_eta && states[variables.ulm_card_person_entity].state != 'home'){ + eta = " | " + states[variables.ulm_card_person_eta].state + " "+states[variables.ulm_card_person_eta].attributes.unit_of_measurement; + } if (variables.ulm_address){ - return states[variables.ulm_address].state - } else { - let state = states[variables.ulm_card_person_entity].state; - let option = ["home", "not_home", "unavailable", "unknown"] - return (option.includes(state)) ? variables.ulm_translation_state : (states["zone."+state]?.attributes?.friendly_name || state) + return states[variables.ulm_address].state + eta } + let state = states[variables.ulm_card_person_entity].state; + let option = ["home", "not_home", "unavailable", "unknown"] + return (option.includes(state)) ? variables.ulm_translation_state + eta : state + eta ]]] name: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]" entity: "[[[ return variables.ulm_card_person_entity; ]]]" icon: "[[[ return variables.ulm_card_person_icon; ]]]" show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]" - entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ? states[variables.ulm_card_person_entity].attributes.entity_picture\ + entity_picture: + "[[[ return variables.ulm_card_person_use_entity_picture ? states[variables.ulm_card_person_entity].attributes.entity_picture\ \ : null ]]]" styles: icon: @@ -58,20 +60,41 @@ card_person: [[[ return (states[variables.ulm_card_person_entity].state !== 'home') ? "rgba(var(--color-green),1)" : "rgba(var(--color-blue),1)"; ]]] + info: + - position: "absolute" + - right: "6px" + - top: "6px" + - width: "25px" + - height: "25px" custom_fields: notification: > [[[ - if (states[variables.ulm_card_person_entity].state !== 'home') { - if (states[variables.ulm_card_person_zone1]?.attributes?.persons.includes(variables.ulm_card_person_entity)) { - var icon = states[variables.ulm_card_person_zone1].attributes.icon !== null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle' - return ''; - } else if (states[variables.ulm_card_person_zone2]?.attributes?.persons.includes(variables.ulm_card_person_entity)) { - var icon = states[variables.ulm_card_person_zone2].attributes.icon !== null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle' - return ''; - } else { - return ''; - } + if (states[variables.ulm_card_person_entity].state == 'home') { + return ''; } else { - return ''; + for (let st in states) { + if (st.startsWith("zone.")) { + if (states[st]?.attributes?.persons.includes(variables.ulm_card_person_entity)) { + var icon = states[st].attributes.icon !== null ? states[st].attributes.icon : 'mdi:help-circle'; + return ''; + } + } + } + } + return ''; + ]]] + info: | + [[[ + if(variables.ulm_card_person_battery){ + const battery = Math.round(states[variables.ulm_card_person_battery].state/1); + const radius = 20.5; const circumference = radius * 2 * Math.PI; + return ` + + ${battery}%`; } ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_alert.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_alert.yaml index 7a8ff49f9..3731e4b1b 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_alert.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_alert.yaml @@ -7,7 +7,14 @@ icon_alert: show_name: false state: - operator: "template" - value: "[[[ if (entity.state == 'unavailable' || entity.state == 'on'){ return true; } ]]]" + value: > + [[[ + var check_state = 'on'; + if (variables.ulm_icon_alert_invert_state) { + check_state = 'off'; + } + if (entity.state == 'unavailable' || entity.state == check_state){ return true; } + ]]] styles: icon: - color: "rgba(var(--color-blue),1)" @@ -54,7 +61,11 @@ icon_alert: custom_fields: notification: > [[[ - if (entity.state =="unavailable" || entity.state == "on"){ + var check_state = 'on'; + if (variables.ulm_icon_alert_invert_state) { + check_state = 'off'; + } + if (entity.state == "unavailable" || entity.state == check_state){ return `` } ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_info_alert.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_info_alert.yaml index 108a53b09..6903f3b67 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_info_alert.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_info_alert.yaml @@ -8,7 +8,14 @@ icon_info_alert: show_name: true state: - operator: "template" - value: "[[[ if (entity.state == 'unavailable' || entity.state == 'on'){ return true; } ]]]" + value: > + [[[ + var check_state = 'on'; + if (variables.ulm_icon_alert_invert_state) { + check_state = 'off'; + } + if (entity.state == 'unavailable' || entity.state == check_state){ return true; } + ]]] styles: icon: - color: "rgba(var(--color-blue),1)" @@ -75,7 +82,11 @@ icon_info_alert: custom_fields: notification: > [[[ - if (entity.state =="unavailable" || entity.state == "on"){ + var check_state = 'on'; + if (variables.ulm_icon_alert_invert_state) { + check_state = 'off'; + } + if (entity.state == "unavailable" || entity.state == check_state){ return `` } ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_alert.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_alert.yaml index 7fc2628c8..da2ed80c4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_alert.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_alert.yaml @@ -43,6 +43,7 @@ icon_more_info_alert: variables: ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]" ulm_input_select: "[[[ return variables.ulm_input_select; ]]]" + ulm_icon_alert_invert_state: "[[[ return variables.ulm_icon_alert_invert_state; ]]]" ulm_icon_tap_action: "[[[ return variables.ulm_icon_tap_action; ]]]" ulm_icon_tap_haptic: "[[[ return variables.ulm_icon_tap_haptic; ]]]" ulm_icon_tap_navigate_path: "[[[ return variables.ulm_icon_tap_navigate_path; ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_new.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_new.yaml index c6f799ea8..9b79addc1 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_new.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/internal_templates/icon_more_info_new.yaml @@ -59,9 +59,6 @@ icon_more_info_new: ulm_icon_double_tap_service: "[[[ return variables.ulm_icon_double_tap_service; ]]]" ulm_icon_double_tap_service_data: "[[[ return variables.ulm_icon_double_tap_service_data]]]" ulm_custom_popup: "[[[ return variables.ulm_custom_popup; ]]]" - styles: - card: - - overflow: "visible" item2: card: type: "custom:button-card" @@ -91,9 +88,14 @@ icon_more_info_new: ulm_custom_popup: "[[[ return variables.ulm_custom_popup; ]]]" styles: card: + - overflow: "visible" - padding: "6px" - margin-left: "-6px" - background-color: "rgba(0,0,0,0)" + label: + - overflow: "visible" + name: + - overflow: "visible" custom_fields: notification: - display: "none" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml index 3e7759903..1cf654624 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml @@ -13,7 +13,6 @@ popup_button: - box-shadow: "none" - border-radius: "none" - padding: "12px" - - overflow: "visible" icon: - color: "var(--primary-color)" img_cell: @@ -28,4 +27,6 @@ popup_button: - font-weight: "bold" - font-size: "14px" - margin-top: "12px" - - overflow: "visible" + - white-space: "initial" + - text-overflow: "initial" + - overflow: "initial" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_close.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_close.yaml new file mode 100644 index 000000000..d2e6b8649 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_close.yaml @@ -0,0 +1,4 @@ +--- +popup_button_cover_close: + template: "ulm_translation_engine" + name: "[[[ return variables.ulm_translation_close_cover; ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_open.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_open.yaml new file mode 100644 index 000000000..eb0d6f20b --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_open.yaml @@ -0,0 +1,4 @@ +--- +popup_button_cover_open: + template: "ulm_translation_engine" + name: "[[[ return variables.ulm_translation_open_cover; ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_stop.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_stop.yaml new file mode 100644 index 000000000..a9e7cbd3d --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_cover_stop.yaml @@ -0,0 +1,4 @@ +--- +popup_button_cover_stop: + template: "ulm_translation_engine" + name: "[[[ return variables.ulm_translation_stop_cover; ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header_light.yaml new file mode 100644 index 000000000..a7bf3147b --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header_light.yaml @@ -0,0 +1,54 @@ +--- +popup_header_light: + template: + - "popup_button" + - "ulm_translation_engine" + label: |- + [[[ + if (entity.state == 'off') { + return variables.ulm_translation_state; + } else { + return variables.ulm_translation_state + ' • ' + Math.round(states[entity.entity_id].attributes.brightness / 2.55) + '%'; + } + ]]] + show_name: true + show_label: true + styles: + grid: + - grid-template-areas: "'i' 'n' 'l'" + - grid-template-columns: "auto" + - grid-template-rows: "min-content min-content min-content" + label: + - justify-self: "center" + - font-weight: "bold" + - font-size: "12px" + - filter: "opacity(40%)" + icon: + - color: > + [[[ + var color = entity.attributes.rgb_color; + if(entity.state == "on"){ + if(color){ + return "rgba(" + color + ",1)"; + } else { + return "rgba(var(--color-yellow),1)"; + } + } else { + return "var(--color-theme)"; + } + ]]] + img_cell: + - left: "2px" + - background-color: > + [[[ + var color = entity.attributes.rgb_color; + if(entity.state == "on"){ + if(color){ + return "rgba(" + color + ",0.2)"; + } else { + return "rgba(var(--color-yellow),0.2)"; + } + } else { + return "var(--card-background-color)"; + } + ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_cover.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_cover.yaml new file mode 100644 index 000000000..5b26a7602 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_cover.yaml @@ -0,0 +1,185 @@ +--- +popup_cover: + show_icon: false + show_name: false + show_label: false + show_units: false + styles: + grid: + - grid-template-areas: "'header' 'content1' 'footer'" + - grid-template-rows: "16vh 56vh 14vh" + - grid-template-columns: "1fr" + - column-gap: "30px" + card: + - background: "var(--primary-background-color)" + - box-shadow: "none" + - padding: "0%" + custom_fields: + header: + - align-self: "center" + - margin-bottom: "4px" + content1: + - align-self: "center" + - margin-top: "-6px" + buttons: + - display: "none" + footer: + - align-self: "absolute" + - margin-top: "12px" + extra_styles: | + @media (max-width: 800px) { + #container { + grid-template-areas: "header" "content1" "buttons" "footer" !important; + grid-template-rows: 16vh 52vh 14vh 14vh !important; + grid-template-columns: 1fr !important; + } + #buttons { + display: block !important; + align-self: start !important; + } + #content2 { + display: none !important; + } + } + custom_fields: + header: + card: + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + template: "popup_header_cover" + content1: + card: + type: "custom:my-slider-v2" + entity: "[[[ return entity.entity_id ]]]" + allowTapping: true + vertical: true + flipped: true + styles: + card: + - height: "280px" + - width: "100px" + - box-shadow: "none" + - background: "none" + container: + - border: "2px solid white" + - border-radius: "14px" + - Height: "280px" + - width: "100px" + - box-shadow: "none" + progress: + - background: "rgba(var(--color-theme),0.9)" + track: + - background: "rgba(var(--color-theme),0.09)" + thumb: + - width: "40px" + - height: "5px" + - background: "white" + - position: "center" + - margin-right: "30px" + - margin-left: "30px" + - border-radius: "0px 0px 10px 10px" + card_mod: + style: + .: | + :host { + display: flex; + justify-content: center; + align-items: center; + background: none; + } + buttons: + card: + type: "custom:button-card" + template: "list_3_items" + styles: + card: + - background: "none" + grid: + - align-items: "initial" + custom_fields: + item1: + card: + icon: "mdi:arrow-down" + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + template: + - "popup_button" + - "popup_button_cover_close" + styles: + img_cell: + - background-color: > + [[[ + if (entity.state === "closing"){ + return "rgba(var(--color-theme),0.2)" + } + if (entity.state === "opening"){ + return "rgba(var(--color-theme),0.2)" + } + if (entity.attributes.current_position == "100"){ + return "var(--card-background-color)" + } else { + return "var(--card-background-color)" + } + ]]] + tap_action: + action: "call-service" + service: "cover.close_cover" + service_data: + entity_id: "[[[ return entity.entity_id ]]]" + item2: + card: + icon: "mdi:stop" + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + template: + - "popup_button" + - "popup_button_cover_stop" + tap_action: + action: "call-service" + service: "cover.stop_cover" + service_data: + entity_id: "[[[ return entity.entity_id ]]]" + item3: + card: + icon: "mdi:arrow-up" + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + template: + - "popup_button" + - "popup_button_cover_open" + styles: + img_cell: + - background-color: > + [[[ + if (entity.state === "closing"){ + return "rgba(var(--color-theme),0.2)" + } + if (entity.state === "opening"){ + return "rgba(var(--color-theme),0.2)" + } + if (entity.attributes.current_position == "100"){ + return "rgba(var(--color-theme),0.2)" + } else { + return "var(--card-background-color)" + } + ]]] + tap_action: + action: "call-service" + service: "cover.open_cover" + service_data: + entity_id: "[[[ return entity.entity_id ]]]" + footer: + card: + type: "custom:button-card" + template: "popup_list_items" + custom_fields: + item1: + card: + type: "custom:button-card" + template: "popup_button_back" + entity: "[[[ return entity.entity_id ]]]" + item2: + card: + type: "custom:button-card" + template: "popup_button_power" + entity: "[[[ return entity.entity_id ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml index e40796452..b3c1f9786 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml @@ -44,10 +44,11 @@ popup_light_brightness: card: - background: "var(--primary-background-color)" - box-shadow: "none" - - padding: "0% 2% 2% 2%" + - padding: "0%" custom_fields: header: - - align-self: "start" + - align-self: "center" + - margin-bottom: "4px" content1: - align-self: "center" - display: > @@ -81,8 +82,8 @@ popup_light_brightness: buttons: - display: "none" footer: - - align-self: "start" - - margin-top: "25px" + - align-self: "absolute" + - margin-top: "12px" extra_styles: | @media (max-width: 800px) { #container { @@ -105,7 +106,7 @@ popup_light_brightness: header: card: type: "custom:button-card" - template: "popup_header" + template: "popup_header_light" entity: "[[[ return entity.entity_id ]]]" content1: card: @@ -218,8 +219,16 @@ popup_light_brightness: styles: card: - background: "none" - - overflow: "visible" + - margin-left: > + [[[ + var color_temp_modes = ["color_temp"]; + if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) { + return "0px"; + } + return "6px"; + ]]] grid: + - align-items: "initial" - grid-template-areas: > [[[ var areas = []; @@ -250,7 +259,7 @@ popup_light_brightness: columns.push("1fr"); } if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) { - columns.push("2fr"); + columns.push("1fr"); } return columns.join(" "); ]]] @@ -272,7 +281,6 @@ popup_light_brightness: - "popup_button_color_temp" styles: card: - - overflow: "visible" - display: > [[[ var color_temp_modes = ["color_temp"]; diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml index 4e2272d72..ae500503a 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml @@ -39,6 +39,15 @@ popup_light_color: styles: card: - background: "none" + - overflow: "visible" + - margin-left: > + [[[ + var color_temp_modes = ["color_temp"]; + if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) { + return "0px"; + } + return "6px"; + ]]] custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml index c21cd5da0..76dfda8e6 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml @@ -37,8 +37,18 @@ popup_light_color_temp: type: "custom:button-card" template: "list_3_items" styles: + grid: + - align-items: "initial" card: - background: "none" + - margin-left: > + [[[ + var color_temp_modes = ["color_temp"]; + if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) { + return "0px"; + } + return "6px"; + ]]] custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml index fcf648b6e..4803c81cf 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml @@ -34,6 +34,8 @@ popup_power_outlet_history: styles: card: - background: "none" + grid: + - align-items: "initial" custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml index 799bd0469..22cb15a87 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml @@ -112,6 +112,8 @@ popup_power_outlet_stats: styles: card: - background: "none" + grid: + - align-items: "initial" custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml index 3e75efcc1..8d0590f44 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml @@ -6,24 +6,6 @@ popup_weather: service: "browser_mod.popup" data: hide_header: true - style: | - --popup-background-color: var(--primary-background-color); - --popup-border-radius: 20px; - --popup-padding-x: 24px; - --popup-padding-y: 20px; - --popup-max-width: auto - --popup-min-width: 800px; - card_mod: - style: - ha-dialog$: | - @media (max-width: 800px){ - div.mdc-dialog__container { - --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-width: 100vw; - --mdc-dialog-min-height: 100%; - --ha-dialog-border-radius: 0px; - } - } content: type: "custom:button-card" template: "popup_weather_forecast" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml index ce86857a8..5f85edd18 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml @@ -37,7 +37,7 @@ popup_weather_forecast: @media (max-width: 800px) { #container { grid-template-areas: "header" "content1" "buttons" "footer" !important; - grid-template-rows: 14vh 56vh 13vh 13vh !important; + grid-template-rows: 10vh 56vh 13vh 13vh !important; grid-template-columns: 1fr !important; } #buttons { @@ -172,6 +172,8 @@ popup_weather_forecast: styles: card: - background: "none" + grid: + - align-items: "initial" custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml index 76f5dad41..fcc072596 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml @@ -15,7 +15,7 @@ popup_weather_radar: @media (max-width: 800px) { #container { grid-template-areas: "header" "content2" "buttons" "footer" !important; - grid-template-rows: 14vh 56vh 13vh 13vh !important; + grid-template-rows: 10vh 56vh 13vh 13vh !important; grid-template-columns: 1fr !important; } #buttons { @@ -33,6 +33,8 @@ popup_weather_radar: styles: card: - background: "none" + grid: + - align-items: "initial" custom_fields: item1: card: diff --git a/docs/assets/img/popup_cover.png b/docs/assets/img/popup_cover.png new file mode 100644 index 000000000..39b316c55 Binary files /dev/null and b/docs/assets/img/popup_cover.png differ diff --git a/docs/usage/cards/card_binary_sensor_alert.md b/docs/usage/cards/card_binary_sensor_alert.md index 619026fff..4ab03f5a7 100644 --- a/docs/usage/cards/card_binary_sensor_alert.md +++ b/docs/usage/cards/card_binary_sensor_alert.md @@ -19,6 +19,7 @@ The `binary-sensor-card` is to show the state (on/off, open/close, etc.) of a bi | ulm_show_last_changed | | :material-close: | `true` or `false` | | ulm_card_binary_sensor_alert_name | | :material-close: | Set custom Name | | ulm_card_binary_sensor_alert_icon | | :material-close: | Set custom Icon | +| ulm_icon_alert_invert_state | false | :material-close: | Invert the alert state logic so an alert is shown when the sensor is "off" | !!! Warning "⚠️ Breaking Change `v1.0.1`" diff --git a/docs/usage/cards/card_graph.md b/docs/usage/cards/card_graph.md index 30d524a98..f3658f64b 100644 --- a/docs/usage/cards/card_graph.md +++ b/docs/usage/cards/card_graph.md @@ -25,6 +25,7 @@ The `card_graph` shows an entity with the actual state and a *min-graph-card* in | ulm_card_graph_type | fill | :material-close: | This is to change the appearance of the graph. Default is fill, but line, bar are valid options. | | ulm_card_graph_hours | 24 | :material-close: | How much time should the graph cover, default is 24 hours. | | ulm_card_graph_points | 0.5 | :material-close: | Specify amount of data points the graph should display for each hour. A larger number results in a more detailed graph. | +| ulm_card_graph_group_by | interval | :material-close: | Specify type of grouping of data, dynamic interval, date or hour. | ## Usage @@ -40,6 +41,7 @@ The `card_graph` shows an entity with the actual state and a *min-graph-card* in ulm_card_graph_entity2: sensor.bedgroom_temperature ulm_card_graph_type: fill ulm_card_graph_hours: 24 + ulm_card_graph_group_by: interval ``` ??? note "Template Code" diff --git a/docs/usage/cards/card_person.md b/docs/usage/cards/card_person.md index f70726ad1..df3d6ae77 100644 --- a/docs/usage/cards/card_person.md +++ b/docs/usage/cards/card_person.md @@ -19,8 +19,8 @@ The `card_person` shows if a person is `home` or `not_home`. If you have setup o | ulm_card_person_entity | | :material-check: | The person entity | | ulm_card_person_use_entity_picture | | :material-close: | If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. | | ulm_card_person_icon | mdi:face-man | :material-close: | Sets the icon to display if entity picture not shown. | -| ulm_card_person_zone1 | | :material-close: | Set another zone (beside "home") to use for the card. You can set up two zones besides "home". | -| ulm_card_person_zone2 | | :material-close: | Set another zone (beside "home") to use for the card. You can set up two zones besides "home". | +| ulm_card_person_battery | | :material-close: | Battery sensor shown in the upper right corner | +| ulm_card_person_eta | | :material-close: | Sensor with ETA info from integrations like: [Waze](https://www.home-assistant.io/integrations/waze_travel_time/), [Google](https://www.home-assistant.io/integrations/google_travel_time/) and [HERE](https://www.home-assistant.io/integrations/here_travel_time/) | | ulm_address | | :material-close: | Show an address as label, add an entity with a geo location | ## Usage @@ -33,8 +33,8 @@ The `card_person` shows if a person is `home` or `not_home`. If you have setup o ulm_card_person_entity: person.username ulm_card_person_use_entity_picture: true ulm_card_person_icon: mdi:face-woman - ulm_card_person_zone1: zone.work - ulm_card_person_zone2: zone.school + ulm_card_person_battery: sensor.battery_iphone + ulm_card_person_eta: sensor.waze_travel_time_person ulm_address: sensor.s10_mike_gegeocodeerde_locatie ``` diff --git a/docs/usage/popups/popup_cover.md b/docs/usage/popups/popup_cover.md new file mode 100644 index 000000000..9075f8859 --- /dev/null +++ b/docs/usage/popups/popup_cover.md @@ -0,0 +1,37 @@ +--- +title: Cover Popup +hide: + - toc +--- + + +### Thermostat popup + +![Phone](../../assets/img/popup_cover.png){ width="500" } + +##### Card compatibility + +This popup is displayed using ``popup`` and it is compatible with the following cards/chips : + +- card_cover + +##### How to use + +To enable this popup, add the variable ``ulm_card_cover_enable_popup`` and set to ``true``. + +!!! warning + This is a different approach as the other `popup_cards` use. + +For example : + +```yaml +- type: "custom:button-card" + template: card_cover + entity: climate.garage + variables: + ulm_card_cover_enable_popup: true +``` + +## Credits + +- Designed by AndyVRD