From 61d440f5028daed33cf6e795f28408bf52d13fc2 Mon Sep 17 00:00:00 2001 From: Joshua Clark Date: Wed, 23 Oct 2024 21:54:38 -0600 Subject: [PATCH] floorplan - Update floorplan for new house --- lovelace/dashboards/floorplan.yaml | 46 +- www/floorplan/floorplan.css | 51 +- www/floorplan/floorplan.svg | 3334 ++++++++++++---------------- 3 files changed, 1483 insertions(+), 1948 deletions(-) mode change 100644 => 100755 www/floorplan/floorplan.svg diff --git a/lovelace/dashboards/floorplan.yaml b/lovelace/dashboards/floorplan.yaml index 868fd73e..545ddd79 100644 --- a/lovelace/dashboards/floorplan.yaml +++ b/lovelace/dashboards/floorplan.yaml @@ -16,8 +16,6 @@ decluttering_templates: - webrtc - mse stream: '[[stream]]' - dimensions: - aspect_ratio_mode: dynamic menu: style: outside buttons: @@ -46,13 +44,18 @@ decluttering_templates: live: draggable: false auto_unmute: all + lazy_unload: all preload: true + controls: + builtin: false + media_viewer: + transition_effect: slide timeline: controls: thumbnails: mode: below - media_viewer: - transition_effect: slide + dimensions: + aspect_ratio_mode: dynamic performance: profile: high @@ -218,29 +221,32 @@ views: - name: Lights entities: - light.living_room + - light.living_room_fan_light - light.front_entry - light.mud_room + - light.cold_storage - light.living_room_floor_lamp - light.living_room_lamp - light.kitchen - light.dining_room - light.hallway + - light.basement_hallway - light.family_room - light.family_room_lamp - light.stairway - light.joshua_office_shelf_led # - light.theater_room - light.main_bedroom + - light.main_bedroom_fan_light - light.main_bedroom_floor_lamp - light.ethan_bedroom - light.emma_bedroom - - light.amy_office - light.garage - light.eve - light.outside_entry - - light.outside_garage - light.outside_side - light.outside_back + - light.joshua_office tap_action: service: homeassistant.toggle state_action: @@ -249,9 +255,11 @@ views: - name: Color Lights entities: - - light.joshua_office + - light.kitchen_island + - light.amy_office - light.joshua_office_lamp - light.wled_joshua_office_desk + - light.outside_garage tap_action: service: homeassistant.toggle state_action: @@ -260,6 +268,7 @@ views: > var elements = [ `${entity.entity_id}`, + `${entity.entity_id} *`, ]; var color = 'rgb(88, 89, 89)'; @@ -287,6 +296,7 @@ views: - binary_sensor.sliding_door_contact - binary_sensor.garage_entry_window_door_is_open - binary_sensor.garage_side_door_contact + - binary_sensor.cold_storage_contact_contact # - binary_sensor.entry_closet_door_is_open # - binary_sensor.laundry_door_is_open # - binary_sensor.main_bathroom_door_is_open @@ -354,7 +364,7 @@ views: service_data: | > var floorplan = element.dataset.floorplan; - var state = ["Open", "Closing"].includes(entity.state) ? "open" : "closed"; + var state = ["Open", "Opening", "Closing"].includes(entity.state) ? "open" : "closed"; return `${floorplan} ${state}`; - name: Leak Sensors @@ -458,6 +468,7 @@ views: - media_player.cast_living_room_speaker - media_player.cast_family_room_speaker - media_player.cast_office_speaker + - media_player.samsung_soundbar - media_player.denon_avr_s760h - media_player.yamaha_rx_v679 state_action: @@ -485,8 +496,10 @@ views: - sensor.main_bedroom_temperature - sensor.emma_bedroom_temperature - sensor.ethan_bedroom_temperature + - sensor.theater_room_temperature - sensor.amy_office_temperature - sensor.joshua_office_temperature + - sensor.cold_storage_temperature - sensor.garage_multisensor_air_temperature - sensor.water_main_valve_air_temperature state_action: @@ -506,6 +519,23 @@ views: return "temp-very-high-background"; # Cameras + - entity: camera.livingroom + state_action: + service: floorplan.class_set + service_data: '${(entity.state === "recording") ? "camera-recording" : ""}' + tap_action: + action: fire-dom-event + browser_mod: + service: browser_mod.popup + data: + title: Living Room + size: fullscreen + content: + type: custom:decluttering-card + template: camera_card + variables: + - camera: camera.livingroom + - stream: livingroom - entity: camera.family_room state_action: service: floorplan.class_set diff --git a/www/floorplan/floorplan.css b/www/floorplan/floorplan.css index 5c76c357..b629c74c 100644 --- a/www/floorplan/floorplan.css +++ b/www/floorplan/floorplan.css @@ -81,6 +81,10 @@ 100% { transform: rotate(-360deg); } } +#background { + fill: transparent; +} + /* SVG shapes */ svg, svg * { @@ -204,10 +208,10 @@ g.floorplan-long-click > :not(text):hover, /* Locks */ .unlocked { - fill: #a94442 !important; + fill: var(--red-color) !important; } .locked { - fill: #d4ff2a !important; + fill: var(--lime-color) !important; } /* Motion */ @@ -234,7 +238,7 @@ g.floorplan-long-click > :not(text):hover, .camera-idle, .camera-recording { - fill: #6faece !important; + fill: var(--light-blue-color) !important; } /* Light */ @@ -245,7 +249,7 @@ g.floorplan-long-click > :not(text):hover, } .light-on, .light-on > * { - fill: #ffffa6 !important; + fill: var(--yellow-color) !important; } /* Doors / Windows */ @@ -267,7 +271,7 @@ g.floorplan-long-click > :not(text):hover, .door.open, .window-open, .slider.open > .fill { - fill: #a94442 !important; + fill: var(--red-color) !important; } .door.d-r { transform: rotate(-45deg); @@ -289,8 +293,8 @@ g.floorplan-long-click > :not(text):hover, .leak-on { animation: breathing 1s ease-out infinite normal; - stroke: #ee0000 !important; - fill: #ee0000 !important; + stroke: var(--red-color) !important; + fill: var(--red-color) !important; fill-opacity: 0.60; transition: fill 0.5s ease; stroke-opacity: 0.75 !important; @@ -299,7 +303,7 @@ g.floorplan-long-click > :not(text):hover, transform-origin: center; } .leak-off { - stroke: #28ee00 !important; + stroke: var(--blue-color) !important; transition: fill 0.5s ease; stroke-opacity: 0.75 !important; stroke-width: 2px !important; @@ -314,7 +318,7 @@ g.floorplan-long-click > :not(text):hover, animation-timing-function: linear; transform-origin: 50% 50%; transform-box: fill-box; - fill: #d4ff2a !important; + fill: var(--light-green-color) !important; } .spin-medium { animation-name: spin; @@ -323,7 +327,7 @@ g.floorplan-long-click > :not(text):hover, animation-timing-function: linear; transform-origin: 50% 50%; transform-box: fill-box; - fill: #f8f675 !important; + fill: var(--yellow-color) !important; } .spin-high { animation-name: spin; @@ -335,8 +339,8 @@ g.floorplan-long-click > :not(text):hover, fill: var(--orange-color) !important; } -.spin-low * { fill: #d4ff2a !important; } -.spin-medium * { fill: #f8f675 !important; } +.spin-low * { fill: var(--light-green-color) !important; } +.spin-medium * { fill: var(--yellow-color) !important; } .spin-high * { fill: var(--orange-color) !important; } /* Slider */ @@ -351,15 +355,6 @@ g.floorplan-long-click > :not(text):hover, .slider.down.closed { animation-name: slideDown; } .slider.down.open { animation-name: slideUp; } -/* Doorbell */ - -.doorbell-off { - fill: #c3b7f4 !important; -} -.doorbell-on { - fill: #f8d2b9 !important; -} - /* Temperature sensor */ .temp-very-low-background > tspan { @@ -383,23 +378,23 @@ g.floorplan-long-click > :not(text):hover, .device-off, .mediaplayer-off { - fill: #a94442 !important; + fill: var(--red-color) !important; } .device-on { - fill: #d4ff2a !important; + fill: var(--lime-color) !important; } .mediaplayer-on { - fill: #e5a00d !important; + fill: var(--amber-color) !important; } .mediaplayer-idle { - fill: #8aa8a7 !important; + fill: var(--blue-grey-color) !important; } .mediaplayer-standby { - fill: #53a7a4 !important; + fill: var(--light-blue-color) !important; } .mediaplayer-paused { - fill: #ffffa6 !important; + fill: var(--yellow-color) !important; } .mediaplayer-playing { - fill: #2baaa6 !important; + fill: var(--cyan-color) !important; } diff --git a/www/floorplan/floorplan.svg b/www/floorplan/floorplan.svg old mode 100644 new mode 100755 index 3c6ec6b2..3d87b207 --- a/www/floorplan/floorplan.svg +++ b/www/floorplan/floorplan.svg @@ -1,7 +1,7 @@ image/svg+xmlUTILITYOFFICEJOSH OFFICEBEDROOM 3THEATERFAMILYBATHFAMILY00°F00°F00°F00°F00°F00°FBEDROOM 2BEDROOM 1AMY OFFICEGARAGELAUNDRYKITCHENDININGLIVINGBATHBATHMAIN00°F00°F00°F00°F00°F00°F00°F00°F00.0°F00.0°F00:00 PM00:00 PM00/00/0000 + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:26.6667px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono Bold';text-align:end;text-anchor:end;fill:#757575;fill-opacity:1">00/00/0000