From 14e2856b24e1054b34ffecda4f0ccb2f1038bfa3 Mon Sep 17 00:00:00 2001 From: Giorgio Ravera Date: Tue, 10 Jan 2023 00:03:06 +0100 Subject: [PATCH] Redesigned main lovelace page with mushroom and custom layout --- .storage/lovelace | 778 ++++++++++++++++++++++++---------------------- 1 file changed, 404 insertions(+), 374 deletions(-) diff --git a/.storage/lovelace b/.storage/lovelace index 95f6e3bb..e558e248 100644 --- a/.storage/lovelace +++ b/.storage/lovelace @@ -7,362 +7,464 @@ "title": "Panoramica", "views": [ { + "theme": "Backend-selected", "icon": "mdi:home", "id": "main", "title": "Principale", "path": "main", - "badges": [ - { - "entity": "person.giorgio" - }, - { - "entity": "person.laura" - }, - { - "entity": "device_tracker.ff590mr_device_tracker" - }, - { - "entity": "sensor.time" - }, - { - "entity": "binary_sensor.porta_casa_contact" - }, - { - "entity": "binary_sensor.home_mode" - }, - { - "entity": "binary_sensor.guard_mode" - }, - { - "entity": "binary_sensor.speech_notifications" - }, - { - "entity": "binary_sensor.alarms" - }, - { - "entity": "binary_sensor.central_heating" - }, - { - "entity": "sensor.shelly_em_channel_1_power" - }, - { - "entity": "sensor.temperatura_balcone_temperature" - }, - { - "entity": "sensor.temperatura_veranda_temperature" - } - ], + "type": "custom:grid-layout", + "badges": [], "cards": [ { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_cucina" - }, - { - "entity": "cover.tapparella_cucina" - }, - { - "entity": "climate.cucina" - }, - { - "entity": "media_player.google_home" - } - ], - "entity": "light.luce_cucina", - "state_image": { - "off": "/local/images/rooms/cucina_off.jpg", - "on": "/local/images/rooms/cucina_on.jpg" - }, - "title": "Cucina", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_sala" - }, - { - "entity": "light.luce_divano" - }, - { - "entity": "cover.tapparella_sala" - }, - { - "entity": "climate.sala" - }, - { - "entity": "media_player.sony_bravia_tv" - } - ], - "entity": "group.lights_livingroom", - "state_image": { - "off": "/local/images/rooms/sala_off.jpg", - "on": "/local/images/rooms/sala_on.jpg" - }, - "title": "Sala", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_corridoio" - } - ], - "entity": "light.luce_corridoio", - "state_image": { - "off": "/local/images/rooms/corridoio_off.jpg", - "on": "/local/images/rooms/corridoio_on.jpg" - }, - "title": "Corridoio", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_bagno" - }, - { - "entity": "light.luce_specchio" - }, - { - "entity": "climate.bagno" - } - ], - "entity": "light.luci_bagno", - "state_image": { - "off": "/local/images/rooms/bagno_off.jpg", - "on": "/local/images/rooms/bagno_on.jpg" - }, - "title": "Bagno", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_studio" - }, - { - "entity": "cover.tapparella_studio" - }, - { - "entity": "climate.studio" - } - ], - "entity": "light.luce_studio", - "state_image": { - "off": "/local/images/rooms/studio_off.jpg", - "on": "/local/images/rooms/studio_on.jpg" - }, - "title": "Studio", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_camera" - }, - { - "entity": "cover.tapparella_camera" - }, - { - "entity": "climate.camera" - }, - { - "entity": "media_player.tv_camera" - } - ], - "entity": "light.luce_camera", - "state_image": { - "off": "/local/images/rooms/camera_off.jpg", - "on": "/local/images/rooms/camera_on.jpg" - }, - "title": "Camera", - "type": "picture-glance" - }, - { - "aspect_ratio": "0%", - "entities": [ - { - "entity": "light.luce_balcone" - } - ], - "entity": "light.luce_balcone", - "state_image": { - "off": "/local/images/rooms/balcone_off.jpg", - "on": "/local/images/rooms/balcone_on.jpg" - }, - "title": "Balcone", - "type": "picture-glance" + "type": "custom:badge-card", + "badges": [ + "person.giorgio", + "person.laura", + "device_tracker.ff590mr_device_tracker", + "sensor.time", + "binary_sensor.porta_casa_contact", + "binary_sensor.home_mode", + "binary_sensor.guard_mode", + "binary_sensor.speech_notifications", + "binary_sensor.alarms", + "binary_sensor.central_heating", + "sensor.shelly_em_channel_1_power", + "sensor.temperatura_balcone_temperature", + "sensor.temperatura_veranda_temperature" + ] }, { - "entities": [ - { - "entity": "input_boolean.home_mode_day" - }, + "title": "Stanze", + "type": "custom:layout-card", + "template": "template_grid_layout", + "cards": [ { - "entity": "input_boolean.home_mode_night" + "type": "picture-glance", + "aspect_ratio": "0%", + "entities": [ + { + "entity": "light.luce_corridoio" + } + ], + "entity": "light.luce_corridoio", + "state_image": { + "off": "/local/images/rooms/corridoio_off.jpg", + "on": "/local/images/rooms/corridoio_on.jpg" + }, + "title": "Corridoio", + "view_layout": { + "grid-area": "first" + } }, { - "entity": "input_boolean.home_mode_away" + "type": "picture-glance", + "aspect_ratio": "0%", + "entities": [ + { + "entity": "light.luce_cucina" + }, + { + "entity": "cover.tapparella_cucina" + }, + { + "entity": "climate.cucina" + }, + { + "entity": "media_player.google_home" + } + ], + "entity": "light.luce_cucina", + "state_image": { + "off": "/local/images/rooms/cucina_off.jpg", + "on": "/local/images/rooms/cucina_on.jpg" + }, + "title": "Cucina", + "view_layout": { + "grid-area": "second" + } }, { - "entity": "input_boolean.guard_mode" - } - ], - "show_header_toggle": false, - "title": "Modalità Casa", - "type": "entities" - }, - { - "cards": [ - { + "type": "picture-glance", + "aspect_ratio": "0%", "entities": [ { - "entity": "script.speech_status" + "entity": "light.luce_sala" }, { - "entity": "script.homeassistant_restart" + "entity": "light.luce_divano" }, { - "entity": "automation.risveglio_giorgio" + "entity": "cover.tapparella_sala" }, { - "entity": "select.netatmo_casa_ravera_testa" + "entity": "climate.sala" + }, + { + "entity": "media_player.sony_bravia_tv" } ], - "show_header_toggle": false, - "title": "Controlli Vari", - "type": "entities" + "entity": "group.lights_livingroom", + "state_image": { + "off": "/local/images/rooms/sala_off.jpg", + "on": "/local/images/rooms/sala_on.jpg" + }, + "title": "Sala", + "view_layout": { + "grid-area": "third" + } }, { + "type": "picture-glance", + "aspect_ratio": "0%", "entities": [ - "group.alarms", - "group.update", - "binary_sensor.ff590mr_engine_light_warning", - "binary_sensor.ff590mr_warning_brakefluid", - "binary_sensor.ff590mr_warning_washwater", - "binary_sensor.ff590mr_warning_coolantlevellow" - ], - "state_filter": [ - "on" + { + "entity": "light.luce_bagno" + }, + { + "entity": "light.luce_specchio" + }, + { + "entity": "climate.bagno" + } ], - "title": "Eventi da Segnalare", - "type": "entity-filter" + "entity": "light.luci_bagno", + "state_image": { + "off": "/local/images/rooms/bagno_off.jpg", + "on": "/local/images/rooms/bagno_on.jpg" + }, + "title": "Bagno", + "view_layout": { + "grid-area": "fourth" + } }, { + "type": "picture-glance", + "aspect_ratio": "0%", "entities": [ { - "entity": "input_datetime.away_mode_end" + "entity": "light.luce_studio" + }, + { + "entity": "cover.tapparella_studio" + }, + { + "entity": "climate.studio" } ], - "show_header_toggle": false, - "title": "Eventi", - "type": "entities" - } - ], - "type": "vertical-stack" - }, - { - "type": "custom:mini-graph-card", - "entities": [ - "sensor.shelly_em_channel_1_power" - ], - "hours_to_show": 24, - "points_per_hour": 120, - "line_width": 3, - "color_thresholds": [ - { - "value": 0, - "color": "#00ff00" + "entity": "light.luce_studio", + "state_image": { + "off": "/local/images/rooms/studio_off.jpg", + "on": "/local/images/rooms/studio_on.jpg" + }, + "title": "Studio", + "view_layout": { + "grid-area": "fifth" + } }, { - "value": 1500, - "color": "#c0392b" + "type": "picture-glance", + "aspect_ratio": "0%", + "entities": [ + { + "entity": "light.luce_camera" + }, + { + "entity": "cover.tapparella_camera" + }, + { + "entity": "climate.camera" + }, + { + "entity": "media_player.tv_camera" + } + ], + "entity": "light.luce_camera", + "state_image": { + "off": "/local/images/rooms/camera_off.jpg", + "on": "/local/images/rooms/camera_on.jpg" + }, + "title": "Camera", + "view_layout": { + "grid-area": "sixth" + } }, { - "value": 2500, - "color": "#c0392b" + "type": "picture-glance", + "aspect_ratio": "0%", + "entities": [ + { + "entity": "light.luce_balcone" + } + ], + "entity": "light.luce_balcone", + "state_image": { + "off": "/local/images/rooms/balcone_off.jpg", + "on": "/local/images/rooms/balcone_on.jpg" + }, + "title": "Balcone", + "view_layout": { + "grid-area": "seventh" + } } ], - "decimals": 0, - "hour24": true + "layout": { + "grid-template-columns": "33% 33% 33%", + "grid-template-rows": "auto", + "grid-template-areas": "\"first second third\"\n\"fourth fifth sixth\"\n\"seventh eighth nineth\"\n\"tenth eleventh twelfth\"\n", + "mediaquery": { + "(max-width: 600px)": { + "grid-template-columns": "100%", + "grid-template-areas": "\"first\"\n\"second\"\n\"third\"\n\"fourth\"\n\"fifth\" \n\"sixth\"\n\"seventh\"\n\"eighth\"\n\"nineth\"\n\"tenth\"\n\"eleventh\"\n\"twelfth\"\n" + }, + "(max-width: 1200px)": { + "grid-template-columns": "50% 50%", + "grid-template-areas": "\"first second\"\n\"third fourth\"\n\"fifth sixth\"\n\"seventh eighth\"\n\"nineth tenth\"\n\"eleventh twelfth\"\n" + } + } + } }, { - "type": "horizontal-stack", + "type": "custom:layout-card", + "layout_type": "custom:grid-layout", "cards": [ { - "type": "custom:mini-graph-card", - "entities": [ + "type": "vertical-stack", + "view_layout": { + "grid-area": "first" + }, + "cards": [ { - "entity": "sensor.temperatura_balcone_temperature", - "name": "Balcone" + "type": "custom:mushroom-title-card", + "title": "Grafici" + }, + { + "type": "custom:mini-graph-card", + "view_layout": { + "grid-area": "second" + }, + "entities": [ + "sensor.shelly_em_channel_1_power" + ], + "hours_to_show": 24, + "points_per_hour": 120, + "line_width": 3, + "color_thresholds": [ + { + "value": 0, + "color": "#00ff00" + }, + { + "value": 1500, + "color": "#c0392b" + }, + { + "value": 2500, + "color": "#c0392b" + } + ], + "decimals": 0, + "hour24": true + }, + { + "type": "horizontal-stack", + "cards": [ + { + "type": "custom:mini-graph-card", + "entities": [ + { + "entity": "sensor.temperatura_balcone_temperature", + "name": "Balcone" + } + ], + "name": "Balcone", + "hours_to_show": 24, + "points_per_hour": 1, + "show": { + "name": true, + "state": true + }, + "line_width": 5, + "color_thresholds": [ + { + "value": 16, + "color": "#4a90e2" + }, + { + "value": 19, + "color": "#ffbd00" + }, + { + "value": 23, + "color": "#ee7c3a" + } + ], + "hour24": true, + "decimals": 0 + }, + { + "type": "custom:mini-graph-card", + "entities": [ + { + "entity": "sensor.temperatura_veranda_temperature", + "name": "Veranda" + } + ], + "name": "Veranda", + "hours_to_show": 24, + "points_per_hour": 1, + "show": { + "name": true, + "state": true + }, + "line_width": 5, + "color_thresholds": [ + { + "value": 16, + "color": "#4a90e2" + }, + { + "value": 19, + "color": "#ffbd00" + }, + { + "value": 23, + "color": "#ee7c3a" + } + ], + "hour24": true, + "decimals": 0 + } + ] } - ], - "name": "Balcone", - "hours_to_show": 24, - "points_per_hour": 1, - "show": { - "name": true, - "state": true + ] + }, + { + "type": "vertical-stack", + "view_layout": { + "grid-area": "second" }, - "line_width": 5, - "color_thresholds": [ + "cards": [ { - "value": 16, - "color": "#4a90e2" + "type": "custom:mushroom-title-card", + "title": "Modalità Casa" }, { - "value": 19, - "color": "#ffbd00" + "type": "horizontal-stack", + "cards": [ + { + "type": "custom:mushroom-entity-card", + "entity": "input_boolean.home_mode_day", + "tap_action": { + "action": "toggle" + }, + "layout": "vertical" + }, + { + "type": "custom:mushroom-entity-card", + "entity": "input_boolean.home_mode_night", + "tap_action": { + "action": "toggle" + }, + "layout": "vertical" + } + ] }, { - "value": 23, - "color": "#ee7c3a" + "type": "horizontal-stack", + "cards": [ + { + "type": "custom:mushroom-entity-card", + "entity": "input_boolean.home_mode_away", + "tap_action": { + "action": "toggle" + }, + "layout": "vertical" + }, + { + "type": "custom:mushroom-entity-card", + "entity": "input_boolean.guard_mode", + "tap_action": { + "action": "toggle" + }, + "layout": "vertical", + "name": "Guardia" + } + ] } - ], - "hour24": true, - "decimals": 0 + ] }, { - "type": "custom:mini-graph-card", - "entities": [ + "type": "vertical-stack", + "cards": [ { - "entity": "sensor.temperatura_veranda_temperature", - "name": "Veranda" - } - ], - "name": "Veranda", - "hours_to_show": 24, - "points_per_hour": 1, - "show": { - "name": true, - "state": true - }, - "line_width": 5, - "color_thresholds": [ + "type": "custom:mushroom-title-card", + "title": "Controlli Vari" + }, { - "value": 16, - "color": "#4a90e2" + "type": "entities", + "show_header_toggle": false, + "entities": [ + { + "entity": "script.speech_status" + }, + { + "entity": "script.homeassistant_restart" + }, + { + "entity": "automation.risveglio_giorgio" + }, + { + "entity": "select.netatmo_casa_ravera_testa" + } + ] }, { - "value": 19, - "color": "#ffbd00" + "type": "entity-filter", + "title": "Eventi da Segnalare", + "entities": [ + "group.alarms", + "group.update", + "binary_sensor.ff590mr_engine_light_warning", + "binary_sensor.ff590mr_warning_brakefluid", + "binary_sensor.ff590mr_warning_washwater", + "binary_sensor.ff590mr_warning_coolantlevellow" + ], + "state_filter": [ + "on" + ], + "show_empty": false }, { - "value": 23, - "color": "#ee7c3a" + "type": "entities", + "title": "Eventi", + "show_header_toggle": false, + "entities": [ + { + "entity": "input_datetime.away_mode_end" + } + ] } ], - "hour24": true, - "decimals": 0 + "view_layout": { + "grid-area": "third" + } } - ] + ], + "layout": { + "grid-template-columns": "33% 33% 33%", + "grid-template-rows": "auto", + "grid-template-areas": "\"first second third\"\n\"fourth fifth sixth\"\n\"seventh eighth nineth\"\n\"tenth eleventh twelfth\"\n", + "mediaquery": { + "(max-width: 600px)": { + "grid-template-columns": "100%", + "grid-template-areas": "\"first\"\n\"second\"\n\"third\"\n\"fourth\"\n\"fifth\" \n\"sixth\"\n\"seventh\"\n\"eighth\"\n\"nineth\"\n\"tenth\"\n\"eleventh\"\n\"twelfth\"\n" + }, + "(max-width: 1200px)": { + "grid-template-columns": "50% 50%", + "grid-template-areas": "\"first second\"\n\"third fourth\"\n\"fifth sixth\"\n\"seventh eighth\"\n\"nineth tenth\"\n\"eleventh twelfth\"\n" + } + } + } } ] }, @@ -1571,33 +1673,9 @@ "type": "vertical-stack", "cards": [ { - "type": "custom:button-card", - "name": "Meteo", - "label": "Shelly", - "layout": "name_state", - "show_state": false, - "show_name": true, - "show_label": false, - "show_icon": false, - "show_entity_picture": false, - "styles": { - "card": [ - { - "background-color": "transparent" - }, - { - "box-shadow": "0px 0px 0px 0px." - } - ], - "entity_picture": [ - { - "width": "15%" - } - ] - }, - "view_layout": { - "grid-area": "header" - } + "type": "custom:mushroom-title-card", + "title": "Meteo", + "alignment": "center" }, { "type": "weather-forecast", @@ -1614,33 +1692,9 @@ "type": "vertical-stack", "cards": [ { - "type": "custom:button-card", - "name": "Temperatura Interna", - "label": "Shelly", - "layout": "name_state", - "show_state": false, - "show_name": true, - "show_label": false, - "show_icon": false, - "show_entity_picture": false, - "styles": { - "card": [ - { - "background-color": "transparent" - }, - { - "box-shadow": "0px 0px 0px 0px." - } - ], - "entity_picture": [ - { - "width": "15%" - } - ] - }, - "view_layout": { - "grid-area": "header" - } + "type": "custom:mushroom-title-card", + "title": "Temperatura Interna", + "alignment": "center" }, { "type": "horizontal-stack", @@ -1828,33 +1882,9 @@ "type": "vertical-stack", "cards": [ { - "type": "custom:button-card", - "name": "Temperatura Esterna", - "label": "Shelly", - "layout": "name_state", - "show_state": false, - "show_name": true, - "show_label": false, - "show_icon": false, - "show_entity_picture": false, - "styles": { - "card": [ - { - "background-color": "transparent" - }, - { - "box-shadow": "0px 0px 0px 0px." - } - ], - "entity_picture": [ - { - "width": "15%" - } - ] - }, - "view_layout": { - "grid-area": "header" - } + "type": "custom:mushroom-title-card", + "title": "Temperatura Esterna", + "alignment": "center" }, { "type": "horizontal-stack", -- 2.47.3