diff --git a/custom_cards/custom_card_paddy_welcome/custom_card_paddy_welcome.yaml b/custom_cards/custom_card_paddy_welcome/custom_card_paddy_welcome.yaml index 456436315..7bc39030b 100644 --- a/custom_cards/custom_card_paddy_welcome/custom_card_paddy_welcome.yaml +++ b/custom_cards/custom_card_paddy_welcome/custom_card_paddy_welcome.yaml @@ -1,5 +1,7 @@ --- custom_card_paddy_welcome: + template: + - "ulm_language_variables" show_icon: false show_name: false show_label: false @@ -45,6 +47,8 @@ custom_card_paddy_welcome: } custom_card_paddy_welcome_with_weather: + template: + - "ulm_language_variables" show_icon: false show_name: false show_label: false @@ -127,6 +131,8 @@ custom_card_paddy_welcome_with_weather: } custom_card_paddy_welcome_with_news: + template: + - "ulm_language_variables" show_icon: false show_name: false show_label: false diff --git a/custom_components/ui_lovelace_minimalist/base.py b/custom_components/ui_lovelace_minimalist/base.py index d0d69097a..f80263a8c 100644 --- a/custom_components/ui_lovelace_minimalist/base.py +++ b/custom_components/ui_lovelace_minimalist/base.py @@ -26,6 +26,9 @@ class UlmConfiguration: sidepanel_enabled: bool = DEFAULT_SIDEPANEL_ENABLED sidepanel_icon: str = DEFAULT_SIDEPANEL_ICON sidepanel_title: str = DEFAULT_SIDEPANEL_TITLE + adaptive_ui_enabled: bool = DEFAULT_SIDEPANEL_ENABLED + adaptive_ui_icon: str = DEFAULT_SIDEPANEL_ICON + adaptive_ui_title: str = DEFAULT_SIDEPANEL_TITLE theme_path: str = DEFAULT_THEME_PATH theme: str = DEFAULT_THEME plugin_path: str = "www/community/" diff --git a/custom_components/ui_lovelace_minimalist/config_flow.py b/custom_components/ui_lovelace_minimalist/config_flow.py index 11340f798..c21268a45 100644 --- a/custom_components/ui_lovelace_minimalist/config_flow.py +++ b/custom_components/ui_lovelace_minimalist/config_flow.py @@ -13,6 +13,9 @@ CONF_INCLUDE_OTHER_CARDS, CONF_LANGUAGE, CONF_LANGUAGES, + CONF_SIDEPANEL_ADV_ENABLED, + CONF_SIDEPANEL_ADV_ICON, + CONF_SIDEPANEL_ADV_TITLE, CONF_SIDEPANEL_ENABLED, CONF_SIDEPANEL_ICON, CONF_SIDEPANEL_TITLE, @@ -54,6 +57,18 @@ def ulm_config_option_schema(options: dict = {}) -> dict: CONF_SIDEPANEL_ICON, default=options.get(CONF_SIDEPANEL_ICON, DEFAULT_SIDEPANEL_ICON), ): str, + vol.Optional( + CONF_SIDEPANEL_ADV_ENABLED, + default=options.get(CONF_SIDEPANEL_ADV_ENABLED, DEFAULT_SIDEPANEL_ENABLED), + ): bool, + vol.Optional( + CONF_SIDEPANEL_ADV_TITLE, + default=options.get(CONF_SIDEPANEL_ADV_TITLE, DEFAULT_SIDEPANEL_TITLE), + ): str, + vol.Optional( + CONF_SIDEPANEL_ADV_ICON, + default=options.get(CONF_SIDEPANEL_ADV_ICON, DEFAULT_SIDEPANEL_ICON), + ): str, vol.Optional( CONF_THEME, default=options.get(CONF_THEME, DEFAULT_THEME) ): vol.In(CONF_THEME_OPTIONS), diff --git a/custom_components/ui_lovelace_minimalist/configure.py b/custom_components/ui_lovelace_minimalist/configure.py index 34409a8a8..1d58fd0c0 100644 --- a/custom_components/ui_lovelace_minimalist/configure.py +++ b/custom_components/ui_lovelace_minimalist/configure.py @@ -56,13 +56,27 @@ def configure_cards(hass: HomeAssistant, ulm: UlmBase): language = LANGUAGES[ulm.configuration.language] # Copy example dashboard file over to user config dir if not exists - if not os.path.exists(hass.config.path(f"{DOMAIN}/dashboard/ui-lovelace.yaml")): - shutil.copy2( - hass.config.path( - f"custom_components/{DOMAIN}/lovelace/ui-lovelace.yaml" - ), - hass.config.path(f"{DOMAIN}/dashboard/ui-lovelace.yaml"), - ) + if ulm.configuration.sidepanel_enabled: + if not os.path.exists( + hass.config.path(f"{DOMAIN}/dashboard/ui-lovelace.yaml") + ): + shutil.copy2( + hass.config.path( + f"custom_components/{DOMAIN}/lovelace/ui-lovelace.yaml" + ), + hass.config.path(f"{DOMAIN}/dashboard/ui-lovelace.yaml"), + ) + # Copy adaptive dashboard if not exists and is selected as option + if ulm.configuration.adaptive_ui_enabled: + if not os.path.exists( + hass.config.path(f"{DOMAIN}/dashboard/adaptive-dash") + ): + shutil.copytree( + hass.config.path( + f"custom_components/{DOMAIN}/lovelace/adaptive-dash" + ), + hass.config.path(f"{DOMAIN}/dashboard/adaptive-dash"), + ) # Copy chosen language file over to config dir shutil.copy2( hass.config.path( diff --git a/custom_components/ui_lovelace_minimalist/const.py b/custom_components/ui_lovelace_minimalist/const.py index 2badd1cad..7f2a0ba6b 100644 --- a/custom_components/ui_lovelace_minimalist/const.py +++ b/custom_components/ui_lovelace_minimalist/const.py @@ -31,6 +31,9 @@ CONF_SIDEPANEL_ENABLED = "sidepanel_enabled" CONF_SIDEPANEL_TITLE = "sidepanel_title" CONF_SIDEPANEL_ICON = "sidepanel_icon" +CONF_SIDEPANEL_ADV_ENABLED = "adaptive_ui_enabled" +CONF_SIDEPANEL_ADV_TITLE = "adaptive_ui_title" +CONF_SIDEPANEL_ADV_ICON = "adaptive_ui_icon" CONF_THEME = "theme" CONF_THEME_PATH = "theme_path" CONF_THEME_OPTIONS = [ diff --git a/custom_components/ui_lovelace_minimalist/load_dashboard.py b/custom_components/ui_lovelace_minimalist/load_dashboard.py index 2e2a5ad43..ce50ac188 100644 --- a/custom_components/ui_lovelace_minimalist/load_dashboard.py +++ b/custom_components/ui_lovelace_minimalist/load_dashboard.py @@ -27,6 +27,15 @@ def load_dashboard(hass: HomeAssistant, ulm: UlmBase): "require_admin": False, } + adv_dashboard_url = "adaptive-dash" + adv_dashboard_config = { + "mode": "yaml", + "icon": ulm.configuration.adaptive_ui_icon, + "title": ulm.configuration.adaptive_ui_title, + "filename": "ui_lovelace_minimalist/dashboard/adaptive-dash/adaptive-ui.yaml", + "show_in_sidebar": True, + "require_admin": False, + } # Optoinal override can be done with config_flow? # if not dashboard_url in hass.data["lovelace"]["dashboards"]: if ulm.configuration.sidepanel_enabled: @@ -38,3 +47,13 @@ def load_dashboard(hass: HomeAssistant, ulm: UlmBase): else: if dashboard_url in hass.data["lovelace"]["dashboards"]: async_remove_panel(hass, "ui-lovelace-minimalist") + + if ulm.configuration.adaptive_ui_enabled: + hass.data["lovelace"]["dashboards"][adv_dashboard_url] = LovelaceYAML( + hass, adv_dashboard_url, adv_dashboard_config + ) + + _register_panel(hass, adv_dashboard_url, "yaml", adv_dashboard_config, True) + else: + if adv_dashboard_url in hass.data["lovelace"]["dashboards"]: + async_remove_panel(hass, "adaptive-dash") diff --git a/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/adaptive-ui.yaml b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/adaptive-ui.yaml new file mode 100644 index 000000000..2fd0decad --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/adaptive-ui.yaml @@ -0,0 +1,40 @@ +--- +button_card_templates: !include_dir_merge_named "../../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/" + +title: "UI Lovelace Minimalist" +theme: "minimalist-desktop" +background: "var(--background-image)" +views: + - type: "custom:grid-layout" + title: "home" + icon: "mdi:home" + path: "0" + layout: + grid-template-columns: "1fr 1fr" + grid-template-rows: "min-content" + grid-template-areas: | + "main popup" + mediaquery: + "(max-width: 1100px), (orientation: portrait)": + grid-template-columns: "100%" + grid-template-areas: "main" + cards: + - !include "views/main.yaml" + - !include "popup/popup.yaml" + + - type: "custom:grid-layout" + title: "Livingroom" + icon: "mdi:sofa" + path: "Livingroom" + layout: + grid-template-columns: "1fr 1fr" + grid-template-rows: "min-content" + grid-template-areas: | + "livingroom popup" + mediaquery: + "(max-width: 1100px), (orientation: portrait)": + grid-template-columns: "100%" + grid-template-areas: "livingroom" + cards: + - !include "views/livingroom.yaml" + - !include "popup/popup.yaml" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/popup/popup.yaml b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/popup/popup.yaml new file mode 100644 index 000000000..ed6320fac --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/popup/popup.yaml @@ -0,0 +1,169 @@ +--- +type: "custom:state-switch" +view_layout: + grid-area: "popup" + show: + # only show when screen-width is larger than 1100px + mediaquery: "(min-width: 1100px)" +# add your input_select +entity: +default: "default" +transition: "slide-down" +transition_time: 500 +# options set in the input_select +states: + # Devices + ## Lights + # light 1: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 2: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 3: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 4: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 5: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 6: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 7: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 8: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 9: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # light 10: + # type: "custom:button-card" + # template: "popup_light_brightness" + # variables: + # ulm_popup_light_entity: + # + ### Mediaplayers + # mediaplayer 1: + # type: "custom:button-card" + # template: "popup_media_player_infos" + # variables: + # ulm_popup_media_player_entity: + # mediaplayer 2: + # type: "custom:button-card" + # template: "popup_media_player_infos" + # variables: + # ulm_popup_media_player_entity: + # mediaplayer 3: + # type: "custom:button-card" + # template: "popup_media_player_infos" + # variables: + # ulm_popup_media_player_entity: + # mediaplayer 4: + # type: "custom:button-card" + # template: "popup_media_player_infos" + # variables: + # ulm_popup_media_player_entity: + # mediaplayer 5: + # type: "custom:button-card" + # template: "popup_media_player_infos" + # variables: + # ulm_popup_media_player_entity: + # + ### Thermostats + # climate 1: + # type: "custom:button-card" + # template: "popup_thermostat_temperature" + # variables: + # ulm_popup_thermostat_entity: + # climate 2: + # type: "custom:button-card" + # template: "popup_thermostat_temperature" + # variables: + # ulm_popup_thermostat_entity: + # climate 3: + # type: "custom:button-card" + # template: "popup_thermostat_temperature" + # variables: + # ulm_popup_thermostat_entity: + # climate 4: + # type: "custom:button-card" + # template: "popup_thermostat_temperature" + # variables: + # ulm_popup_thermostat_entity: + # climate 5: + # type: "custom:button-card" + # template: "popup_thermostat_temperature" + # variables: + # ulm_popup_thermostat_entity: + # + ### Power + # power 1: + # type: "custom:button-card" + # template: "popup_power_outlet_stats" + # variables: + # ulm_popup_power_outlet_entity: + # ulm_popup_power_outlet_sensor1: + # ulm_popup_power_outlet_sensor2: + # ulm_popup_power_outlet_graph_sensor: + # power 2: + # type: "custom:button-card" + # template: "popup_power_outlet_stats" + # variables: + # ulm_popup_power_outlet_entity: + # ulm_popup_power_outlet_sensor1: + # ulm_popup_power_outlet_sensor2: + # ulm_popup_power_outlet_graph_sensor: + # power 3: + # type: "custom:button-card" + # template: "popup_power_outlet_stats" + # variables: + # ulm_popup_power_outlet_entity: + # ulm_popup_power_outlet_sensor1: + # ulm_popup_power_outlet_sensor2: + # ulm_popup_power_outlet_graph_sensor: + # power 4: + # type: "custom:button-card" + # template: "popup_power_outlet_stats" + # variables: + # ulm_popup_power_outlet_entity: + # ulm_popup_power_outlet_sensor1: + # ulm_popup_power_outlet_sensor2: + # ulm_popup_power_outlet_graph_sensor: + # power 5: + # type: "custom:button-card" + # template: "popup_power_outlet_stats" + # variables: + # ulm_popup_power_outlet_entity: + # ulm_popup_power_outlet_sensor1: + # ulm_popup_power_outlet_sensor2: + # ulm_popup_power_outlet_graph_sensor: + + ## Rooms + livingroom: !include "../views/livingroom.yaml" + # bedroom: !include "../views/bedroom.yaml" + # bathroom: !include "../views/bathroom.yaml" + # garage: !include "../views/garage.yaml" + # lights: !include "../views/lights.yaml" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/livingroom.yaml b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/livingroom.yaml new file mode 100644 index 000000000..2f2509629 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/livingroom.yaml @@ -0,0 +1,89 @@ +--- +type: "custom:layout-card" +layout_type: "custom:grid-layout" +layout: + grid-template-rows: "min-content" + grid-template-columns: "1fr 1fr 1fr" + grid-template-areas: > + "title1 title1 title1" + "card1 card1 card1" + "card2 card3 card4" + "card5 card6 ." + "card7 card8 card9" + "card10 card11 card12" + "card13 card14 card15" + "card16 card17 card18" + mediaquery: + # Mobile + "(max-width: 800px)": + grid-template-columns: "1fr 1fr" + grid-template-areas: | + "title1 title1" + "card1 card1" + "card2 card3" + "card4 card5" + "card6 card7" + "card8 card9" + "card10 card11" + "card12 card13" + "card14 card15" + "card16 card17" + "card18 card19" +view_layout: + grid-area: "livingroom" +cards: + - view_layout: + grid-area: "title1" + type: "custom:button-card" + template: "card_title" + name: "Some title" + label: "grid-area: title1" + + - view_layout: + grid-area: "title2" + type: "custom:button-card" + template: "card_title" + name: "Some title" + label: "grid-area: title2" + + - view_layout: + grid-area: "card1" + type: "custom:button-card" + template: "card_title" + name: "Put here your
first card" + label: "grid-area: card1" + + - view_layout: + grid-area: "card2" + type: "custom:button-card" + template: "card_title" + name: "Put here your
second card" + label: "grid-area: card2" + + - view_layout: + grid-area: "card3" + type: "custom:button-card" + template: "card_title" + name: "Put here your
third card" + label: "grid-area: card3" + + - view_layout: + grid-area: "card4" + type: "custom:button-card" + template: "card_title" + name: "Put here your
fourth card" + label: "grid-area: card4" + + - view_layout: + grid-area: "card5" + type: "custom:button-card" + template: "card_title" + name: "Put here your
fifth card" + label: "grid-area: card5" + + - view_layout: + grid-area: "card6" + type: "custom:button-card" + template: "card_title" + name: "Put here your
sixth card" + label: "grid-area: card6" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/main.yaml b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/main.yaml new file mode 100644 index 000000000..597280765 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/adaptive-dash/views/main.yaml @@ -0,0 +1,105 @@ +--- +type: "custom:layout-card" +layout_type: "custom:grid-layout" +layout: + # Tablet portrait + grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr" + grid-template-areas: | + "text text text weather weather weather" + "welcome welcome welcome welcome welcome welcome" + "title1 title1 title1 title1 title1 title1" + "card1 card1 card2 card2 card3 card3" + "title2 title2 title2 title2 title2 title2" + "card4 card4 card5 card5 card6 card6" + mediaquery: + # Mobile + "(max-width: 800px)": + grid-template-columns: "1fr 1fr" + grid-template-areas: | + "welcome welcome" + "person person" + "title1 title1" + "card1 card2" + "card3 card4" + "title2 title2" + "card5 card6" + "card7 card8" +view_layout: + grid-area: "main" +cards: + - view_layout: + grid-area: "text" + type: "custom:button-card" + template: "card_title" + name: "This is the adaptive
dashboard provided by
UI Minimalist" + label: "Find instructions to add
cards on the wiki" + + - view_layout: + grid-area: "weather" + type: "custom:button-card" + template: "card_title" + name: "This could be your
weather card" + label: "grid-area: weather" + + - view_layout: + grid-area: "welcome" + type: "custom:button-card" + template: "card_title" + name: "This could be your
welcome/scenes card" + label: "grid-area: welcome" + + - view_layout: + grid-area: "title1" + type: "custom:button-card" + template: "card_title" + name: "Some title" + label: "grid-area: title1" + + - view_layout: + grid-area: "title2" + type: "custom:button-card" + template: "card_title" + name: "Some title" + label: "grid-area: title2" + + - view_layout: + grid-area: "card1" + type: "custom:button-card" + template: "card_title" + name: "Put here your
first card" + label: "grid-area: card1" + + - view_layout: + grid-area: "card2" + type: "custom:button-card" + template: "card_title" + name: "Put here your
second card" + label: "grid-area: card2" + + - view_layout: + grid-area: "card3" + type: "custom:button-card" + template: "card_title" + name: "Put here your
third card" + label: "grid-area: card3" + + - view_layout: + grid-area: "card4" + type: "custom:button-card" + template: "card_title" + name: "Put here your
fourth card" + label: "grid-area: card4" + + - view_layout: + grid-area: "card5" + type: "custom:button-card" + template: "card_title" + name: "Put here your
fifth card" + label: "grid-area: card5" + + - view_layout: + grid-area: "card6" + type: "custom:button-card" + template: "card_title" + name: "Put here your
sixth card" + label: "grid-area: card6" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml index 5c4eaeceb..85d197da9 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml @@ -4,6 +4,12 @@ card_battery: template: - "icon_info_bg" - "ulm_language_variables" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" tap_action: action: "more-info" variables: @@ -69,6 +75,7 @@ card_battery: const battery_level = variables.ulm_card_battery_attribute !== null ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] : states[entity.entity_id].state; + return battery_level + "%"; if(battery_level == "unknown") { return variables.ulm_unavailable; } else diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml index ca5d73a8e..7319890d7 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml @@ -6,3 +6,9 @@ card_binary_sensor: - "blue" name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]" show_last_changed: true + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml index f50a9b80c..441fc20b7 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml @@ -5,3 +5,9 @@ card_binary_sensor_alert: - "icon_info_alert" name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]" show_last_changed: true + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml index 3fe29f869..3e73d1f7a 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml @@ -4,6 +4,12 @@ card_generic: template: - "icon_info_bg" - "ulm_language_variables" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" label: > [[[ var unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : "" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml index 9a3ca0a9b..d746c025b 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml @@ -4,6 +4,12 @@ card_generic_swap: template: - "icon_info_bg" - "ulm_language_variables" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" label: > [[[ var unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : "" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml index c6a7ba07c..0dbc06b66 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml @@ -5,6 +5,12 @@ card_input_boolean: - "icon_info_bg" - "ulm_language_variables" - "blue" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]" label: > [[[ diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml index 9d40d21a4..52f3bcff5 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml @@ -20,6 +20,12 @@ card_light: show_label: false tap_action: action: "toggle" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -124,6 +130,12 @@ card_light: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" icon: "[[[ return variables.ulm_card_light_icon ]]]" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -177,6 +189,12 @@ card_light: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" name: "[[[ return variables.ulm_card_light_name ]]]" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ 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 2642c642f..6fea84529 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 @@ -17,6 +17,12 @@ card_media_player: show_icon: false show_name: false show_label: false + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -111,6 +117,12 @@ card_media_player: - "icon_info_bg" - "ulm_language_variables" entity: "[[[ return entity.entity_id ]]]" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -242,6 +254,12 @@ card_media_player: card: type: "custom:button-card" template: "list_3_items" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml index d85bb2822..5c9610775 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml @@ -8,6 +8,12 @@ card_power_outlet: variables: ulm_card_power_outlet_consumption_sensor: triggers_update: "all" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" label: |- [[[ if (entity.state === "on" && variables.ulm_card_power_outlet_consumption_sensor !== null) { diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml index bd935a825..ce4765127 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml @@ -10,6 +10,12 @@ card_room: show_name: true show_label: true size: "45%" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" aspect_ratio: "1/1" label: |- [[[ diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_thermostat.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_thermostat.yaml index 53ee4f782..8339c54b2 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_thermostat.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_thermostat.yaml @@ -17,6 +17,12 @@ card_thermostat: show_icon: false show_name: false show_label: false + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -171,6 +177,12 @@ card_thermostat: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" icon: "[[[ return variables.ulm_card_thermostat_icon ]]]" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" hold_action: action: > [[[ @@ -216,6 +228,12 @@ card_thermostat: type: "custom:button-card" entity: "[[[ return entity.entity_id ]]]" name: "[[[ return variables.ulm_card_thermostat_name ]]]" + double_tap_action: + action: "call-service" + service: "input_select.select_option" + service_data: + option: "[[[ return variables.ulm_input_select_option ]]]" + entity_id: "[[[ return variables.ulm_input_select ]]]" tap_action: action: "call-service" service: > diff --git a/custom_components/ui_lovelace_minimalist/translations/cs.json b/custom_components/ui_lovelace_minimalist/translations/cs.json index a6a8b10fe..3d262d4aa 100644 --- a/custom_components/ui_lovelace_minimalist/translations/cs.json +++ b/custom_components/ui_lovelace_minimalist/translations/cs.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Zobrazit v postranním panelu", "sidepanel_icon": "Ikona v postranním panel", "sidepanel_title": "Název v postranním panelu", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Motiv", "include_other_cards": "Do zdrojů zahrnout vlastní karty, na kterých závisí tato integrace." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Zobrazit v postranním panelu", "sidepanel_icon": "Ikona v postranním panel", "sidepanel_title": "Název v postranním panelu", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Motiv", "include_other_cards": "Do zdrojů zahrnout vlastní karty, na kterých závisí tato integrace." } diff --git a/custom_components/ui_lovelace_minimalist/translations/de.json b/custom_components/ui_lovelace_minimalist/translations/de.json index 84bc3abfb..fb585175b 100644 --- a/custom_components/ui_lovelace_minimalist/translations/de.json +++ b/custom_components/ui_lovelace_minimalist/translations/de.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Erstellung eines Eintrages in der Seitenleiste aktivieren.", "sidepanel_icon": "Icon Seitenleiste", "sidepanel_title": "Titel Seitenleiste", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Thema", "include_other_cards": "Individuelle Karten, die für die Nutzung benötigt werden, ebenfalls laden." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Erstellung eines Eintrages in der Seitenleiste aktivieren.", "sidepanel_icon": "Icon Seitenleiste", "sidepanel_title": "Titel Seitenleiste", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Thema", "include_other_cards": "Individuelle Karten, die für die Nutzung benötigt werden, ebenfalls laden." } diff --git a/custom_components/ui_lovelace_minimalist/translations/en.json b/custom_components/ui_lovelace_minimalist/translations/en.json index 97d0efbf7..5ba492ed3 100644 --- a/custom_components/ui_lovelace_minimalist/translations/en.json +++ b/custom_components/ui_lovelace_minimalist/translations/en.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Enable creation of a Dashboard entry in the Side panel.", "sidepanel_icon": "Side panel icon", "sidepanel_title": "Side panel title", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Theme", "include_other_cards": "Include custom card resources it's depending on." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Enable creation of a Dashboard entry in the Side panel.", "sidepanel_icon": "Side panel icon", "sidepanel_title": "Side panel title", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Theme", "include_other_cards": "Include custom card resources it's depending on." } diff --git a/custom_components/ui_lovelace_minimalist/translations/it.json b/custom_components/ui_lovelace_minimalist/translations/it.json index 5b65f14b0..569950531 100644 --- a/custom_components/ui_lovelace_minimalist/translations/it.json +++ b/custom_components/ui_lovelace_minimalist/translations/it.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Abilita la creazione di una nuova Dashboard nel Pannello Laterale.", "sidepanel_icon": "Icona Pannello Laterale", "sidepanel_title": "Titolo Pannello Laterale", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Tema", "include_other_cards": "Inlcudere le risorse da cui dipendono le card personalizzate." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Abilita la creazione di una nuova Dashboard nel Pannello Laterale.", "sidepanel_icon": "Icona Pannello Laterale", "sidepanel_title": "Titolo Pannello Laterale", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Tema", "include_other_cards": "Inlcudere le risorse da cui dipendono le card personalizzate." } diff --git a/custom_components/ui_lovelace_minimalist/translations/nl.json b/custom_components/ui_lovelace_minimalist/translations/nl.json new file mode 100644 index 000000000..0749a56c0 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/translations/nl.json @@ -0,0 +1,49 @@ +{ + "title": "UI Lovelace Minimalist", + "config": { + "step": { + "user": { + "title": "UI Lovelace Minimalist Instellingen", + "description": "", + "data": { + "language": "Taal", + "sidepanel_enabled": "Een Dashboard aan de zijbalk toevoegen", + "sidepanel_icon": "Dashboard icon", + "sidepanel_title": "Dashboard titel", + "adaptive_ui_enabled": "Een adaptive Dashboard aan de zijbalk toevoegen", + "adaptive_ui_title": "adaptive dashboard titel", + "adaptive_ui_icon": "adaptive dashboard icon", + "theme": "Thema", + "include_other_cards": "'Frontend' repositories toevoegen die nodig zijn" + } + } + }, + "abort": { + "single_instance_allowed": "Enkel een installatie van UI Lovelace Minimalist is toegestaan.", + "not_setup": "UI Lovelace Minimalist is niet juist ingesteld." + } + }, + "options": { + "step": { + "user": { + "title": "UI Lovelace Minimalist Instellingen", + "description": "", + "data": { + "language": "Taal", + "sidepanel_enabled": "Een Dashboard aan de zijbalk toevoegen", + "sidepanel_icon": "Dashboard icon", + "sidepanel_title": "Dashboard titel", + "adaptive_ui_enabled": "Een adaptive Dashboard aan de zijbalk toevoegen", + "adaptive_ui_title": "adaptive dashboard titel", + "adaptive_ui_icon": "adaptive dashboard icon", + "theme": "Thema", + "include_other_cards": "'Frontend' repositories toevoegen die nodig zijn" + } + } + }, + "abort": { + "single_instance_allowed": "Enkel een installatie van UI Lovelace Minimalist is toegestaan.", + "not_setup": "UI Lovelace Minimalist is niet juist ingesteld." + } + } +} diff --git a/custom_components/ui_lovelace_minimalist/translations/pl.json b/custom_components/ui_lovelace_minimalist/translations/pl.json index 90a85dab8..b52209f32 100644 --- a/custom_components/ui_lovelace_minimalist/translations/pl.json +++ b/custom_components/ui_lovelace_minimalist/translations/pl.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Utwórz nowy Dashboard w panelu bocznym.", "sidepanel_icon": "Ikona w panelu bocznym", "sidepanel_title": "Tytuł w panelu bocznym", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Motyw", "include_other_cards": "Dołącz zasoby wymagane przez niestandardowe karty." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Utwórz nowy Dashboard w panelu bocznym.", "sidepanel_icon": "Ikona w panelu bocznym", "sidepanel_title": "Tytuł w panelu bocznym", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Motyw", "include_other_cards": "Dołącz zasoby wymagane przez niestandardowe karty." } diff --git a/custom_components/ui_lovelace_minimalist/translations/ru.json b/custom_components/ui_lovelace_minimalist/translations/ru.json index c42f9999f..adcaef333 100644 --- a/custom_components/ui_lovelace_minimalist/translations/ru.json +++ b/custom_components/ui_lovelace_minimalist/translations/ru.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Создайте новую Панель инструментов на боковой панели.", "sidepanel_icon": "Значок боковой панели", "sidepanel_title": "Название боковой панели", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Тема", "include_other_cards": "Включите ресурсы, необходимые для пользовательских карт." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Создайте новую Панель инструментов на боковой панели.", "sidepanel_icon": "Значок боковой панели", "sidepanel_title": "Название боковой панели", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Тема", "include_other_cards": "Включите ресурсы, необходимые для пользовательских карт." } diff --git a/custom_components/ui_lovelace_minimalist/translations/sk.json b/custom_components/ui_lovelace_minimalist/translations/sk.json index 95308e05d..d6371463c 100644 --- a/custom_components/ui_lovelace_minimalist/translations/sk.json +++ b/custom_components/ui_lovelace_minimalist/translations/sk.json @@ -10,6 +10,9 @@ "sidepanel_enabled": "Zobraziť v postrannom paneli", "sidepanel_icon": "Ikona v postrannom paneli", "sidepanel_title": "Názov v postrannom paneli", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Téma", "include_other_cards": "Do zdrojov zahrnúť vlastné karty potrebné pre túto integráciu." } @@ -30,6 +33,9 @@ "sidepanel_enabled": "Zobraziť v postrannom paneli", "sidepanel_icon": "Ikona v postrannom paneli", "sidepanel_title": "Názov v postrannom paneli", + "adaptive_ui_enabled": "Enable adaptive Dashboard with popup splitview", + "adaptive_ui_title": "adaptive panel title", + "adaptive_ui_icon": "adaptive panel icon", "theme": "Téma", "include_other_cards": "Do zdrojov zahrnúť vlastné karty potrebné pre túto integráciu." } diff --git a/docs/assets/img/setup/hacs_adaptive_dashboard.png b/docs/assets/img/setup/hacs_adaptive_dashboard.png new file mode 100644 index 000000000..5958d977b Binary files /dev/null and b/docs/assets/img/setup/hacs_adaptive_dashboard.png differ diff --git a/docs/assets/img/setup/minimalist_adaptive_dash.gif b/docs/assets/img/setup/minimalist_adaptive_dash.gif new file mode 100644 index 000000000..88f382a40 Binary files /dev/null and b/docs/assets/img/setup/minimalist_adaptive_dash.gif differ diff --git a/docs/setup/adaptive_dash.md b/docs/setup/adaptive_dash.md new file mode 100644 index 000000000..16dbb250d --- /dev/null +++ b/docs/setup/adaptive_dash.md @@ -0,0 +1,281 @@ +--- +title: Adaptive Dashboard +hide: + - toc +--- + +![Minimalist_adaptive_dashboard](../assets/img/setup/minimalist_adaptive_dash.gif) + +## Add Adaptive Dashboard + +To get full use of your Minimalist themed HA you need to setup some more custom_components (see requirements below).
+This dashboard automatically changes based on the device/screen size your are using. You can also alter the cards showing on the right-side by double-tapping a card. (Steps to configure this are described below) + +### Additional Requirements + +This dashboard make extensive use of `state-switch` and `layout-card`. These are available through HACS or as manual install from Github. + +| Additional lovelace resources | +| ----------------------------------------------------------------------- | +| [`layout-card`](https://github.com/thomasloven/lovelace-layout-card) | +| [`state-switch`](https://github.com/thomasloven/lovelace-state-switch) | + +!!! warning "Warning" + For now the `state-switch` works only with version `v1.9.3` or below! + +You need also configure an `input_select` with options for each popup_card and view you have configured. This `input_select` controls the cards showing on the right-side of the screen when in fullscreen mode. + +!!! note "Popups" + + Not all device types do have Minimalist UI themed popups. + Currently supported devices are: `lights`, `mediaplayers`, `thermostats`, `sensors`. + +You can setup an `input_select` either via the GUI or in YAML. + +```yaml +# Example configuration.yaml entry +input_select: + minimalist_ui_switch: + name: Select popup/view + options: + - light 1 + - light 2 + - mediaplayer 1 + - mediaplayer 2 + - climate 1 + - climate 2 + - power 1 + - power 2 + - livingroom +``` + +## Setup + +To enable the adaptive dashboard you need to select the right option in the integration configuration menu. + +![hacs_adaptive_dashboard](../assets/img/setup/hacs_adaptive_dashboard.png){ width="300" } + +Once setup you should see another dashboard in your sidebar. This dashboard is filled with `card_title` template cards as placeholders. + +We have also added a folder with all needed files to customizing your new dashboard: + +```yaml +config +└── ui_lovelace_minimalist + ├── custom_cards + └── dashboard + └── ui-lovelace.yaml + └── adaptive-dash + └── adaptive-ui.yaml + └── popup + └── popup.yaml + └── views + └── livingroom.yaml + └── main.yaml +``` + +## Customizing + +The best place to start adding your personal cards is in `adaptive-dash/views/main.yaml`. + +!!! tip "Grid-Layout" + + All files use CSS grids. By giving each card an own grid-area we can control there place in the dashboard. For more information on how `grid-areas` do work check this [amazing guide](https://css-tricks.com/snippets/css/complete-guide-grid/). + +When you are familiar with CSS grids you can start to alter the `grid-template-areas` to your personal perference. + +### Adding Cards + +You can assign cards to a certain `grid-area` by adding this to your card configuration. We already have put in this config for some cards and titles. + +```yaml +view_layout: + grid-area: "card1" +``` + +To put card_light to the area: `card1`; you have to paste in the code as in your normal Minimalist UI dashboard on the place of the placeholder. + +```yaml +# Placeholder for card1 in main.yaml +- view_layout: + grid-area: "card1" + type: "custom:button-card" + template: "card_title" + name: "Put here your
first card" + label: "grid-area: card1" +``` + +```yaml +# Example of a card_light assiged to area card1 +- view_layout: + grid-area: "card1" + type: "custom:button-card" + template: "card_light" + entity: "light.your_light" + variables: + ulm_card_light_enable_color: true + ulm_card_light_enable_slider: true + ulm_card_light_enable_popup: true +``` + +Do this for all placeholders. You can always use less cards by deleting placeholders or add more cards by adding new areas under the `grid-template-areas`. + +### Adding popups on the right-side + +All cards on the right-side are configured in `adaptive-dash/popup/popup.yaml`. + +We preconfigured multiple popups for different types of devices. In `popup.yaml` you only have to complete the information in the variables part. The `light 1`, `mediaplayer 1`, `livingroom` parts in the code refer to the options you have configuered in your `input_select`. Make sure they are spelled the same. ([see documentation on `state-switch`](https://github.com/thomasloven/lovelace-state-switch)) + +Follow this part to add a card to an option of your `input_select`: +To add a light popup to your first light card you just have to add the corresponding entity: + +```yaml +type: custom:state-switch +view_layout: + grid-area: popup + show: + mediaquery: "(min-width: 1100px)" +entity: input_select.minimalist_ui # put your input_select here +default: default +transition: slide-down +transition_time: 500 +states: + ## Lights + light 1: + type: "custom:button-card" + template: "popup_light_brightness" + variables: + ulm_popup_light_entity: "" +``` + +You can also add any other card by copying its yaml code in without the hypen `(-)` + +```yaml +states: + ## Lights + light 1: + type: "custom:button-card" + template: "popup_light_brightness" + variables: + ulm_popup_light_entity: "" + card 1: + type: "custom:button-card" + template: "" +``` + +!!! note "Important!" + + All options(devices) need its own config in `popup.yaml`! + +!!! warning "Warning" + + Delete all entries you don't use in `popup.yaml`. If not this can fill your dev-console with unwanted errors. + +To switch between popups we need to go back to `adaptive-dash/views/main.yaml`. Here we have to add two variables to the cards we want to show a popup off. After adding these variables the cards need to be double_tapped to change popups. + +```yaml +variables: + ulm_input_select_option: light 1 + ulm_input_select: input_select.minimalist_ui_switch +``` + +Eventually the `card_light` we did configure should be like this: + +```yaml +- view_layout: + grid-area: "card1" + type: "custom:button-card" + template: "card_light" + entity: "light.your_light" + variables: + ulm_card_light_enable_color: true + ulm_card_light_enable_slider: true + ulm_card_light_enable_popup: true + ulm_input_select_option: light 1 + ulm_input_select: input_select.minimalist_ui_switch +``` + +From here you can duplicate the steps for each card. +!!! note "Supported" + + All cards working with official popups and the card_room support these variables. The name is uniform between all supported cards. + +### Setup more views + +We already made a file for a second view: `adaptive-dash/views/livingroom.yaml`. You can make as many views as you want by duplicating and alter the views files. + +To make the new view visible you have to add some entry to `adaptive-dash/adaptive-ui.yaml`. You only have to change the name of the room/view to the new entry. + +??? note "Add an extra view example (click to open)" + + ```yaml + title: "UI Lovelace Minimalist" + theme: "minimalist-desktop" + background: "var(--background-image)" + views: + - type: "custom:grid-layout" + title: "home" + icon: "mdi:home" + path: "0" + layout: + grid-template-columns: "1fr 1fr" + grid-template-rows: "min-content" + grid-template-areas: | + "main popup" + mediaquery: + "(max-width: 1100px), (orientation: portrait)": + grid-template-columns: "100%" + grid-template-areas: "main" + cards: + - !include "views/main.yaml" + - !include "popup/popup.yaml" + + - type: "custom:grid-layout" + title: "Livingroom" + icon: "mdi:sofa" + path: "Livingroom" + layout: + grid-template-columns: "1fr 1fr" + grid-template-rows: "min-content" + grid-template-areas: | + "livingroom popup" + mediaquery: + "(max-width: 1100px), (orientation: portrait)": + grid-template-columns: "100%" + grid-template-areas: "livingroom" + cards: + - !include "views/livingroom.yaml" + - !include "popup/popup.yaml" + + - type: "custom:grid-layout" + title: "New View" + icon: "mdi:flower" + path: "New View" + layout: + grid-template-columns: "1fr 1fr" + grid-template-rows: "min-content" + grid-template-areas: | + "new_view popup" + mediaquery: + "(max-width: 1100px), (orientation: portrait)": + grid-template-columns: "100%" + grid-template-areas: "newview" + cards: + - !include "views/newview.yaml" + - !include "popup/popup.yaml" + ``` + +You can also show room views as a popup. To configure this add a `!include` entry in the popup.yaml file. As example we configured `livingroom` already. Make sure this is also an option in your `input_select`. + +```yaml +# Add livingroom popup to popup.yaml +livingroom: !include "../views/livingroom.yaml" +``` + +Also add the two variables to the corresponding card_room: + +```yaml +variables: + ulm_input_select_option: livingroom + ulm_input_select: input_select.minimalist_ui_switch +``` diff --git a/mkdocs.yml b/mkdocs.yml index 481839af0..7f7b7250d 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -17,6 +17,7 @@ nav: - Configuration: "setup/configuration.md" - Customizing: "setup/customizing.md" - Custom cards: "setup/custom_cards.md" + - Adaptive Dashboard: "setup/adaptive_dash.md" - "... | usage/**/*.md" - Development: - Card Style Guide: "development/card_style_guide.md"