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 4a3681555..f7e0b617e 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 @@ -4,6 +4,7 @@ card_cover: template: - "icon_more_info_new" - "ulm_translation_engine" + show_last_changed: false variables: ulm_card_cover_name: "[[[ return entity.attributes.friendly_name ]]]" ulm_card_cover_display_left_right: false @@ -14,6 +15,7 @@ card_cover: ulm_card_cover_enable_slider: false ulm_card_cover_enable_horizontal: false ulm_card_cover_enable_popup: false + ulm_show_last_changed: false show_icon: false show_name: false show_label: false @@ -211,6 +213,7 @@ card_cover: return variables.ulm_translation_state; } ]]] + show_last_changed: "[[[ return variables.ulm_show_last_changed; ]]]" item2: card: type: "custom:button-card" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml index 1057737b0..21362e27e 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml @@ -12,8 +12,9 @@ card_vacuum: ulm_card_vacuum_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_vacuum_room: ulm_card_vacuum_room_icon: "[[[ return entity.attributes.icon ]]]" - ulm_card_vacuum_camera: - ulm_card_vacuum_camera_toggle: + ulm_card_vacuum_camera: "" + ulm_card_vacuum_enable_popup: false + ulm_card_vacuum_camera_toggle: false ulm_card_vacuum_light_color: > [[[ var state = entity.state.toLowerCase(); @@ -27,29 +28,37 @@ card_vacuum: } return (colors[state] || colors["default"]); ]]] - ulm_card_vacuum_camera_display: > - [[[ - if (variables?.ulm_card_vacuum_camera){ - if (variables?.ulm_card_vacuum_camera_toggle) { - if (entity.state.toLowerCase() === 'cleaning'){ - return "true"; - } - } else { - return "true"; - } - } - ]]] triggers_update: "all" styles: grid: - grid-template-areas: > [[[ - return variables.ulm_card_vacuum_camera_display ? "'item1' 'item3' 'item2'" : "'item1' 'item2'"; + let map = "'item1' 'map' 'item2'" + if(variables.ulm_card_vacuum_camera != ""){ + if(variables.ulm_card_vacuum_camera_toggle){ + if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){ + return map; + } + } else { + return map; + } + } + return "'item1' 'item2'" ]]] - grid-template-columns: "1fr" - grid-template-rows: > [[[ - return variables.ulm_card_vacuum_camera_display ? "repeat(3, min-content)" : "repeat(2, min-content)"; + let map = "repeat(3, min-content)" + if(variables.ulm_card_vacuum_camera != ""){ + if(variables.ulm_card_vacuum_camera_toggle){ + if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){ + return map; + } + } else { + return map; + } + } + return "repeat(2, min-content)" ]]] - row-gap: "12px" card: @@ -63,10 +72,20 @@ card_vacuum: } ]]] custom_fields: - item3: + map: - display: > [[[ - return variables.ulm_card_vacuum_camera_display ? "block" : "none"; + let map = "block" + if(variables.ulm_card_vacuum_camera != ""){ + if(variables.ulm_card_vacuum_camera_toggle){ + if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){ + return map; + } + } else { + return map; + } + } + return "none" ]]] custom_fields: item1: @@ -78,6 +97,17 @@ card_vacuum: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" icon: "[[[ return variables.ulm_card_vacuum_icon ]]]" + variables: > + [[[ + let vars = variables; + if(variables.ulm_card_vacuum_enable_popup) { + vars.ulm_custom_popup = { + 'template': 'popup_vacuum_map', + 'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera } + }; + } + return vars; + ]]] styles: icon: - color: > @@ -93,6 +123,17 @@ card_vacuum: card: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" + variables: > + [[[ + let vars = variables; + if(variables.ulm_card_vacuum_enable_popup) { + vars.ulm_custom_popup = { + 'template': 'popup_vacuum_map', + 'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera } + }; + } + return vars; + ]]] name: "[[[ return variables.ulm_card_vacuum_name ]]]" label: > [[[ @@ -104,6 +145,20 @@ card_vacuum: } return label; ]]] + map: + card: + type: "custom:button-card" + show_name: false + show_icon: false + show_label: false + entity: "[[[ return variables.ulm_card_vacuum_camera ]]]" + show_entity_picture: "true" + styles: + card: + - box-shadow: "none" + icon: + - border-radius: "20px" + - width: "100%" item2: card: type: "custom:button-card" @@ -126,7 +181,7 @@ card_vacuum: icon: "mdi:play" state: - operator: "template" - value: "[[[ return entity.state.toLowerCase() === 'cleaning' ]]]" + value: "[[[ return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ]]]" icon: "mdi:stop" tap_action: action: "call-service" @@ -137,7 +192,7 @@ card_vacuum: action: "call-service" service: > [[[ - return entity.state.toLowerCase() === 'cleaning' ? "vacuum.stop" : "vacuum.start"; + return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ? "vacuum.stop" : "vacuum.start"; ]]] service_data: entity_id: "[[[ return entity.entity_id ]]]" @@ -175,10 +230,3 @@ card_vacuum: service: "script.turn_on" service_data: entity_id: "[[[ return variables.ulm_card_vacuum_room ]]]" - item3: - card: - type: "picture-entity" - camera_view: "live" - entity: "[[[ return variables.ulm_card_vacuum_camera ]]]" - show_name: false - show_state: false 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 9b79addc1..1208153c7 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,6 +59,15 @@ 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: > + [[[ + if (entity.state == "unavailable"){ + return "visible" + } + return "hidden" + ]]] item2: card: type: "custom:button-card" @@ -92,10 +101,10 @@ icon_more_info_new: - padding: "6px" - margin-left: "-6px" - background-color: "rgba(0,0,0,0)" - label: - - overflow: "visible" - name: - - overflow: "visible" + # 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_header_cover.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header_cover.yaml new file mode 100644 index 000000000..f320d129d --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header_cover.yaml @@ -0,0 +1,69 @@ +--- +popup_header_cover: + template: + - "popup_button" + - "ulm_translation_engine" + label: >- + [[[ + if (entity.state !="unavailable"){ + if (typeof states[entity.entity_id].attributes.current_position === "undefined"){ + if (states[entity.entity_id].state == "closed"){ + return variables.ulm_translation_state; + } else + return variables.ulm_translation_state; + } else { + if (states[entity.entity_id].attributes.current_position == 0){ + return variables.ulm_translation_state; + } else { + return variables.ulm_translation_state + " • " + (states[entity.entity_id].attributes.current_position) + "%" ; + } + } + } else { + return variables.ulm_translation_state; + } + ]]] + 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: > + [[[ + if (typeof states[entity.entity_id].attributes.current_position === "undefined"){ + if (states[entity.entity_id].state == "closed"){ + return 'rgba(var(--color-theme),0.2)'; + } else + return 'rgba(var(--color-blue),1)' + } else { + if (states[entity.entity_id].attributes.current_position == 0){ + return 'rgba(var(--color-theme),0.2)'; + } else { + return 'rgba(var(--color-blue),1)' + } + } + ]]] + img_cell: + - left: "2px" + - background-color: > + [[[ + if (typeof states[entity.entity_id].attributes.current_position === "undefined"){ + if (states[entity.entity_id].state == "closed"){ + return 'rgba(var(--color-theme),0.05)'; + } else + return 'rgba(var(--color-blue),0.2)'; + } else { + if (states[entity.entity_id].attributes.current_position == 0){ + return 'rgba(var(--color-theme),0.05)'; + } else { + return 'rgba(var(--color-blue),0.2)'; + } + } + ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml index 5f0a19c18..c39dcbf01 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml @@ -166,7 +166,7 @@ popup_thermostat_temperature: auto: - display: > [[[ - if (entity.attributes.hvac_modes.includes("auto") && !variables.ulm_card_thermostat_preset_mode) { + if (!variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("auto")) { return "block"; } else { return "none"; @@ -175,7 +175,7 @@ popup_thermostat_temperature: heat: - display: > [[[ - if (entity.attributes.hvac_modes.includes("heat") && !variables.ulm_card_thermostat_preset_mode) { + if (!variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("heat")) { return "block"; } else { return "none"; @@ -184,7 +184,7 @@ popup_thermostat_temperature: cool: - display: > [[[ - if (entity.attributes.hvac_modes.includes("cool") && !variables.ulm_card_thermostat_preset_mode) { + if (!variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("cool") ) { return "block"; } else { return "none"; @@ -193,7 +193,7 @@ popup_thermostat_temperature: dry: - display: > [[[ - if (entity.attributes.hvac_modes.includes("dry") && !variables.ulm_card_thermostat_preset_mode) { + if ( !variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("dry")) { return "block"; } else { return "none"; @@ -202,7 +202,7 @@ popup_thermostat_temperature: fan_only: - display: > [[[ - if (entity.attributes.hvac_modes.includes("fan_only") && !variables.ulm_card_thermostat_preset_mode) { + if (!variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("fan_only")) { return "block"; } else { return "none"; @@ -211,7 +211,7 @@ popup_thermostat_temperature: heat_cool: - display: > [[[ - if (entity.attributes.hvac_modes.includes("heat_cool") && !variables.ulm_card_thermostat_preset_mode) { + if (!variables.ulm_card_thermostat_preset_mode && entity.attributes.hvac_modes.includes("heat_cool")) { return "block"; } else { return "none"; @@ -220,7 +220,7 @@ popup_thermostat_temperature: none: - display: > [[[ - if (entity.attributes.preset_modes.includes("none") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("none")) { return "block"; } else { return "none"; @@ -229,7 +229,7 @@ popup_thermostat_temperature: away: - display: > [[[ - if (entity.attributes.preset_modes.includes("away") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("away")) { return "block"; } else { return "none"; @@ -238,7 +238,7 @@ popup_thermostat_temperature: comfort: - display: > [[[ - if (entity.attributes.preset_modes.includes("comfort") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("comfort")) { return "block"; } else { return "none"; @@ -247,7 +247,7 @@ popup_thermostat_temperature: home: - display: > [[[ - if (entity.attributes.preset_modes.includes("home") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("home")) { return "block"; } else { return "none"; @@ -256,7 +256,7 @@ popup_thermostat_temperature: sleep: - display: > [[[ - if (entity.attributes.preset_modes.includes("sleep") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("sleep")) { return "block"; } else { return "none"; @@ -265,7 +265,7 @@ popup_thermostat_temperature: activity: - display: > [[[ - if (entity.attributes.preset_modes.includes("activity") && variables.ulm_card_thermostat_preset_mode) { + if (variables.ulm_card_thermostat_preset_mode && entity.attributes.preset_modes.includes("activity")) { return "block"; } else { return "none"; diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum.yaml new file mode 100644 index 000000000..18136d3e7 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum.yaml @@ -0,0 +1,12 @@ +--- +popup_vacuum: + hold_action: + action: "fire-dom-event" + browser_mod: + service: "browser_mod.popup" + data: + hide_header: true + content: + type: "custom:button-card" + template: "popup_vacuum_map" + entity: "[[[ return entity.entity_id ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum_map.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum_map.yaml new file mode 100644 index 000000000..97b3bc16c --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_vacuum_map.yaml @@ -0,0 +1,68 @@ +--- +popup_vacuum_map: + show_icon: false + show_name: false + show_label: false + show_units: false + variables: + ulm_card_vacuum_camera: "[[[ return variables.ulm_card_vacuum_camera; ]]]" + styles: + grid: + - grid-template-areas: "'header' 'content1' 'footer'" + - grid-template-rows: "16vh 56vh 14vh" + - grid-template-columns: "1fr" + card: + - background: "var(--primary-background-color)" + - box-shadow: "none" + - padding: "2%" + custom_fields: + header: + - align-self: "start" + content1: + - align-self: "center" + - justify-self: "center" + - max-width: "40vh" + footer: + - align-self: "start" + extra_styles: | + @media (max-width: 800px) { + #container { + grid-template-rows: 16vh 56vh 14vh !important; + } + custom_fields: + header: + card: + type: "custom:button-card" + template: "popup_header" + entity: "[[[ return entity.entity_id ]]]" + content1: + card: + type: "custom:vacuum-card" + entity: "[[[ return entity.entity_id ]]]" + image: "default" + compact_view: false + map: "[[[ return variables.ulm_card_vacuum_camera !='' ? variables.ulm_card_vacuum_camera : 'null'; ]]]" + card_mod: + style: | + ha-card { + box-shadow: "none" !important; + --vc-background: var(--secondary-background-color); + --vc-toolbar-background: var(--secondary-background-color); + --vc-icon-color: var(--primary-color); + --vc-toolbar-icon-color: var(--primary-color); + max-height: "56vh" !important + } + footer: + card: + type: "custom:button-card" + template: "popup_list_items" + custom_fields: + item1: + card: + type: "custom:button-card" + template: "popup_button_back" + item2: + card: + type: "custom:button-card" + template: "popup_button_power" + entity: "[[[ return entity.entity_id ]]]" diff --git a/docs/assets/img/popup_vacuum.PNG b/docs/assets/img/popup_vacuum.PNG new file mode 100644 index 000000000..f1078c0ae Binary files /dev/null and b/docs/assets/img/popup_vacuum.PNG differ diff --git a/docs/assets/img/popup_vacuum_no_camera.PNG b/docs/assets/img/popup_vacuum_no_camera.PNG new file mode 100644 index 000000000..139fc8c48 Binary files /dev/null and b/docs/assets/img/popup_vacuum_no_camera.PNG differ diff --git a/docs/usage/popups/popup_vacuum.md b/docs/usage/popups/popup_vacuum.md new file mode 100644 index 000000000..0f81fe401 --- /dev/null +++ b/docs/usage/popups/popup_vacuum.md @@ -0,0 +1,45 @@ +--- +title: Vacuum Popup +hide: + - toc +--- + + +### Vacuum popup + +![Phone](../../assets/img/popup_vacuum.PNG){ width="300" } +![Phone](../../assets/img/popup_vacuum_no_camera.PNG){ width="300" } + +#### Requirements + +This popup does not work without the following card from HACS: + +- [Vacuum Card](https://github.com/denysdovhan/vacuum-card) (download from HACS) + +##### Card compatibility + +This popup is displayed using ``popup`` and it is compatible with the following cards/chips : + +- card_vacuum + +##### How to use + +To enable this popup, add the variable ``ulm_card_vacuum_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_vacuum + entity: vacuum.garage + variables: + ulm_card_vacuum_enable_popup: true + uml_card_vacuum_camera: camera.vacuum +``` + +## Credits + +- Designed by Basbruss