Created
February 10, 2021 19:14
-
-
Save jesserockz/5e4ccab32d044c993fe70fd08ceac8da to your computer and use it in GitHub Desktop.
My floorplan
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.image-common: &image-common | |
action: none | |
hold_action: | |
action: none | |
tap_action: | |
action: none | |
type: image | |
.image-style: &image-style | |
top: 50% | |
left: 50% | |
height: 100% | |
width: 100% | |
mix-blend-mode: lighten | |
# transition: opacity 1s linear | |
title: PK | |
path: pk | |
panel: true | |
cards: | |
- type: 'custom:config-template-card' | |
variables: | |
- common: *image-common | |
style: *image-style | |
daytime: | |
entity: sensor.sunlight_pct | |
<<: *image-common | |
# state_image: | |
# above_horizon: /local/floorplan/lights/best/960x540/base-noon.png | |
# below_horizon: /local/transparent.png | |
style: *image-style | |
- { id: "light.kaya_s_light", type: "rgb", left: 50, top: 25, image: "kayas-room-light" } | |
- { id: "light.taiki_s_light", type: "rgb", left: 50, top: 53, image: "taikis-room-light" } | |
- { id: "light.master_light_1", type: "cwww", left: 15, top: 33, image: "master-lights"} | |
- { id: "light.master_light_2", type: "cwww", left: 11, top: 33, image: "master-lights"} | |
- { id: "light.lounge_light_1", type: "cwww", left: 28, top: 58, image: "lounge-north-light" } | |
- { id: "light.lounge_light_2", type: "cwww", left: 28, top: 70, image: "lounge-south-light" } | |
# - { id: "light.dining_light", type: "cwww", left: 15, top: 77, image: "dining-light" } | |
# - { id: "light.kitchen_lights", type: "binary", left: 14, top: 57, image: "kitchen-lights" } | |
# - { id: "light.hallway_west_light", type: "binary", left: 31, top: 43, image: "hallway-west-light" } | |
# - { id: "light.hallway_east_light", type: "binary", left: 50, top: 38, image: "hallway-east-light" } | |
# - { id: "light.entry_light", type: "binary", left: 40, top: 53, image: "entry-light" } | |
# - { id: "light.toilet_light", type: "binary", left: 31, top: 23, image: "toilet-light" } | |
# - { id: "light.bathroom_light", type: "binary", left: 37, top: 25, image: "bathroom-light" } | |
# - { id: "light.ensuite_light", type: "binary", left: 25, top: 21, image: "ensuite-light" } | |
# - { id: "light.master_wir_light", type: "binary", left: 24, top: 33, image: "master_wir-light" } | |
# - { id: "light.garage_light", type: "binary", left: 67, top: 40, image: "garage-light", sub_image: "garage", sub_state: "cover.garage_door" } | |
# - { id: "light.laundry_light", type: "binary", left: 60, top: 25, image: "laundry-light" } | |
- { id: "cover.garage_door", type: "cover", left: 77, top: 41 } | |
# - { id: "climate.kogan_heater", type: "state", left: 50, top: 20, icon: 'mdi:radiator' } | |
# - { id: "climate.kogan_heater", type: "label", left: 47, top: 20, attribute: 'current_temperature', suffix: ' °C'} | |
- { id: "sensor.master_room_temperature", type: "label", left: 10, top: 22 } | |
- { id: "sensor.master_room_humidity", type: "label", left: 10, top: 40 } | |
- { id: "sensor.play_kitchen_temperature", type: "label", left: 47, top: 20 } | |
- { id: "sensor.play_kitchen_humidity", type: "label", left: 53, top: 20 } | |
- { id: "person.jesse", type: "badge", left: 50, top: 75 } | |
- { id: "person.rina", type: "badge", left: 65, top: 75 } | |
- { id: "media_player.lounge_speaker", left: 34, top: 73 } | |
- { id: "media_player.lounge_tv", left: 34, top: 80 } | |
- { id: "media_player.kaya_s_room_speaker", left: 50, top: 32 } | |
- { id: "media_player.taiki_s_room_speaker", left: 45, top: 60 } | |
- { id: "binary_sensor.aarlo_motion_taiki_s_room", left: 45, top: 45 } | |
- { id: "binary_sensor.aarlo_motion_kaya_s_room", left: 45, top: 32 } | |
- { id: "binary_sensor.aarlo_motion_back_door", left: 65, top: 16, bg: "#CCCCCC" } | |
- { id: "binary_sensor.aarlo_motion_garage", left: 58, top: 60 } | |
- { id: "binary_sensor.aarlo_motion_front_flood", left: 40, top: 80 } | |
- { id: "binary_sensor.ha_dev_aarlo_motion_belle", left: 40, top: 65 } | |
- { id: "binary_sensor.ha_dev_aarlo_motion_essential", left: 3, top: 80 } | |
- { id: "binary_sensor.ha_dev_aarlo_motion_pro4", left: 30, top: 80 } | |
- { id: "binary_sensor.alarm_panel_garage_motion", left: 58, top: 55 } | |
- { id: "binary_sensor.alarm_panel_lounge_motion", left: 9, top: 86 } | |
- { id: "binary_sensor.alarm_panel_master_motion", left: 5, top: 45 } | |
- { id: "switch.alarm_panel_outside_siren", left: 82, top: 60 } | |
- { id: "sensor.garage_temperature", type: "label", left: 65, top: 41 } | |
- { id: "sensor.roof_space_temperature", type: "label", left: 90, top: 41 } | |
entities: | |
- sensor.sunlight_pct | |
- cover.garage_door | |
- light.kaya_s_light | |
- light.taiki_s_light | |
- light.master_light_1 | |
- light.master_light_2 | |
- light.lounge_light_1 | |
- light.lounge_light_2 | |
# - climate.kogan_heater | |
- sensor.master_room_temperature | |
- sensor.master_room_humidity | |
- media_player.kaya_s_room_speaker | |
- media_player.taiki_s_room_speaker | |
- media_player.lounge_speaker | |
- media_player.lounge_tv | |
- sensor.play_kitchen_temperature | |
- sensor.play_kitchen_humidity | |
- person.jesse | |
- person.rina | |
- binary_sensor.aarlo_motion_taiki_s_room | |
- binary_sensor.aarlo_motion_kaya_s_room | |
- binary_sensor.aarlo_motion_back_door | |
- binary_sensor.aarlo_motion_front_flood | |
- binary_sensor.aarlo_motion_garage | |
- binary_sensor.alarm_panel_garage_motion | |
- binary_sensor.alarm_panel_lounge_motion | |
- binary_sensor.alarm_panel_master_motion | |
# - light.kitchen_lights | |
# - light.hallway_west_light | |
# - light.hallway_east_light | |
# - light.entry_light | |
# - light.toilet_light | |
# - light.bathroom_light | |
# - light.ensuite_light | |
# - light.master_wir_light | |
# - light.ensuite_light | |
# - light.garage_light | |
# - light.laundry_light | |
card: | |
type: picture-elements | |
style: | | |
ha-card { | |
position: absolute; | |
transition: transform 0s; | |
height: initial !important; | |
} | |
# hui-state-icon-element, | |
# hui-icon-element, | |
# hui-state-label-element { | |
# transform: rotate(-90deg) !important; | |
# } | |
@media screen and (orientation:portrait) { | |
ha-card { | |
transform: translateY(-100%) rotate(90deg) scale(calc(16/9)); | |
transform-origin: bottom left; | |
max-width: 540px; | |
} | |
hui-state-icon-element, | |
hui-icon-element, | |
hui-state-badge-element { | |
transform: rotate(-90deg) translate(50%, -50%) scale(calc(9/16)) !important; | |
} | |
hui-state-label-element { | |
transform-origin: top left; | |
transform: rotate(-90deg) translate(-35%, -50%) scale(calc(9/16)) !important; | |
} | |
} | |
image: ${"/local/floorplan/lights/best/960x540/base-night-garage-" + states['cover.garage_door'].state + ".png"} | |
elements: >- | |
${ | |
var images = []; | |
var interactions = []; | |
var { daytime } = vars[0]; | |
daytime = { | |
...daytime, | |
image: `/local/floorplan/lights/best/960x540/base-noon-garage-${ states['cover.garage_door'].state }.png`, | |
style: { | |
...daytime.style, | |
opacity: states['sensor.sunlight_pct'].state / 100 | |
} | |
}; | |
var elements = [daytime]; | |
vars.slice(1).forEach(entity => { | |
var style = { ...vars[0].style }; | |
if (entity.type === 'rgb') { | |
style['filter'] = | |
"saturate(" + (states[entity.id].attributes.hs_color ? states[entity.id].attributes.hs_color[1] / 10 : 0) + ") " + | |
"hue-rotate(" + (states[entity.id].attributes.hs_color ? states[entity.id].attributes.hs_color[0] : 0) + "deg)" | |
} | |
if (entity.type === 'rgb' || entity.type === 'cwww') { | |
style['opacity'] = states[entity.id].state === 'on' ? (states[entity.id].attributes.brightness / 255) : '0' | |
} else if (entity.type == 'binary') { | |
style['opacity'] = states[entity.id].state === 'on' ? 1 : 0 | |
} | |
if (entity.type === 'binary' || entity.type === 'rgb' || entity.type === 'cwww') { | |
var image; | |
if (entity.sub_image) { | |
image = `/local/floorplan/lights/best/960x540/${ entity.image }-${ entity.sub_image }-${ states[entity.sub_state].state }.png` | |
} else { | |
image = `/local/floorplan/lights/best/960x540/${ entity.image }.png` | |
} | |
images.push({ | |
...vars[0].common, | |
entity: entity.id, | |
image, | |
style | |
}); | |
} | |
var icon_style = { | |
left: `${ entity.left }%`, | |
top: `${ entity.top }%`, | |
}; | |
if (entity.bg) { | |
icon_style['background'] = `${entity.bg};`; | |
icon_style['border-radius'] = "50%;"; | |
console.log("Setting background"); | |
} | |
switch (entity.type) { | |
case 'state': | |
interactions.push({ | |
entity: entity.id, | |
type: 'state-icon', | |
icon: entity.icon, | |
style: icon_style, | |
tap_action: { | |
action: 'more-info' | |
} | |
}) | |
break; | |
case 'label': | |
interactions.push({ | |
entity: entity.id, | |
type: 'state-label', | |
style: icon_style, | |
attribute: entity.attribute, | |
suffix: entity.suffix, | |
}) | |
break; | |
case 'badge': | |
interactions.push({ | |
entity: entity.id, | |
type: 'state-badge', | |
style: icon_style, | |
}) | |
break; | |
case 'rgb': | |
case 'cwww': | |
interactions.push({ | |
entity: entity.id, | |
type: 'state-icon', | |
style: icon_style, | |
tap_action: { | |
action: 'toggle' | |
} | |
}) | |
break; | |
default: | |
interactions.push({ | |
entity: entity.id, | |
type: 'state-icon', | |
style: icon_style, | |
tap_action: { | |
action: 'more-info' | |
} | |
}) | |
} | |
}); | |
[...elements, ...images, ...interactions] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment