I have made a floor plan and am happy with it. Now I want the status of the alarm system to be visible right at the bottom of the floor plan. Now I’ve done that with Colton YYZ. But, now i cant get it to work on the floorplan. can someone teach me how to add another card between the existing yaml code? When I do this now the icon simply does not appear.
en hieronder de code van de floorplan:
kiosk_mode:
hide_header: true
views:
- title: Floorplan
type: panel
path: first
badges: []
cards:
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/map/3D/Basis.png
panel: true
elements:
- type: image
entity: light.verlichting_gang_beneden_ikea_light_2
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.hs_color
?
states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.hs_color[0]
: 0) + "deg)"}
opacity: >-
${states[‘light.verlichting_gang_beneden_ikea_light_2’].state
=== 'on' ?
(states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.brightness
/ 255) : '0'}
state_image:
'on': /local/map/3D/bg-halletje.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.keukenblad
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.keukenblad’].attributes.hs_color ?
states[‘light.keukenblad’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.keukenblad’].state === 'on' ?
(states[‘light.keukenblad’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-keukenblad2.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.hal
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" + (states[‘light.hal’].attributes.hs_color
? states[‘light.hal’].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states[‘light.hal’].state === 'on' ?
(states[‘light.hal’].attributes.brightness / 255) : '0'}
state_image:
'on': /local/map/3D/bg-hal-vide.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.keuken_raam
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.keuken_raam’].attributes.hs_color ?
states[‘light.keuken_raam’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.keuken_raam’].state === 'on' ?
(states[‘light.keuken_raam’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-keukenverlichting-raam.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.woonkamer
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.woonkamer’].attributes.hs_color ?
states[‘light.woonkamer’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.woonkamer’].state === 'on' ?
(states[‘light.woonkamer’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-woonkamer.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.eethoek
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.eethoek’].attributes.hs_color ?
states[‘light.eethoek’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.eethoek’].state === 'on' ?
(states[‘light.eethoek’].attributes.brightness / 255) : '0'}
state_image:
'on': /local/map/3D/bg-eetkamer.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: switch.switch_wc_beneden_switch
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘switch.switch_wc_beneden_switch’].attributes.hs_color
?
states[‘switch.switch_wc_beneden_switch’].attributes.hs_color[0]
: 0) + "deg)"}
opacity: >-
${states[‘switch.switch_wc_beneden_switch’].state === 'on' ?
(states[‘switch.switch_wc_beneden_switch’].attributes.brightness
/ 255) : '0'}
state_image:
'on': /local/map/3D/bg-wclamp.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.hal_bg_licht
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.hal_bg_licht’].attributes.hs_color ?
states[‘light.hal_bg_licht’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.hal_bg_licht’].state === 'on' ?
(states[‘light.hal_bg_licht’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-bg-hala8.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: scene.alle_verlichting_uit
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" + (states[‘scene.alle_verlichting_uit
’].attributes.hs_color ? states[‘scene.alle_verlichting_uit
’].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states[‘scene.alle_verlichting_uit’].state === 'on' ?
(states[‘scene.alle_verlichting_uit’].attributes.brightness
/ 255) : '0'}
state_image:
'on': /local/map/3D/bg-alleverlichtinguit.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: light.staande_lamp_licht
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.staande_lamp_licht’].attributes.hs_color ?
states[‘light.staande_lamp_licht’].attributes.hs_color[0] :
0) + "deg)"}
opacity: >-
${states[‘light.staande_lamp_licht’].state === 'on' ?
(states[‘light.staande_lamp_licht’].attributes.brightness /
255) : '0'}
state_image:
'on': /local/map/3D/bg-staandelamp.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: scene.nachtstand
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘scene.nachtstand’].attributes.hs_color ?
states[‘light.staande_lamp_licht’].attributes.hs_color[0] :
0) + "deg)"}
opacity: >-
${states[‘scene.nachtstand’].state === 'on' ?
(states[‘scene.nachtstand’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-nachtstand.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: cover.gordijnen_raambekleding
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘cover.gordijnen_raambekleding’].attributes.hs_color
?
states[‘cover.gordijnen_raambekleding’].attributes.hs_color[0]
: 0) + "deg)"}
opacity: >-
${states[‘cover.gordijnen_raambekleding’].state === 'on' ?
(states[‘cover.gordijnen_raambekleding’].attributes.brightness
/ 255) : '0'}
state_image:
'on': /local/map/3D/bg-gordijnen-100.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: image
entity: scene.nachtstand
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘scene.nachtstand’].attributes.hs_color ?
states[‘light.staande_lamp_licht’].attributes.hs_color[0] :
0) + "deg)"}
opacity: >-
${states[‘scene.nachtstand’].state === 'on' ?
(states[‘scene.nachtstand’].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/map/3D/bg-nachtstand.png
'off': /local/map/3D/Basis.png
tap_action:
action: none
- type: state-icon
entity: light.verlichting_gang_beneden_ikea_light_2
style:
top: 32%
left: 29%
opacity: 0
'--mdc-icon-size': 180px
tap_action:
action: toggle
- type: state-icon
entity: light.keukenblad
style:
left: 25%
top: 65%
opacity: 0
'--mdc-icon-size': 180px
tap_action:
action: toggle
- type: state-icon
entity: light.hal
style:
left: 45%
top: 45%
opacity: 0
'--mdc-icon-size': 180px
tap_action:
action: toggle
- type: state-icon
entity: light.keuken_raam
style:
left: 13%
top: 61%
opacity: 0
'--mdc-icon-size': 140px
tap_action:
action: toggle
- type: state-icon
entity: light.woonkamer
style:
left: 73%
top: 37%
opacity: 0
'--mdc-icon-size': 140px
tap_action:
action: toggle
- type: state-icon
entity: light.eethoek
style:
left: 56%
top: 57%
opacity: 0
'--mdc-icon-size': 140px
tap_action:
action: toggle
- type: state-icon
entity: switch.switch_wc_beneden_switch
style:
left: 32%
top: 50%
opacity: 0
'--mdc-icon-size': 60px
tap_action:
action: toggle
- type: state-icon
entity: light.hal_bg_licht
style:
left: 47%
top: 35%
opacity: 0
'--mdc-icon-size': 60px
tap_action:
action: toggle
- type: state-icon
entity: light.staande_lamp_licht
style:
left: 88%
top: 54%
opacity: 0
'--mdc-icon-size': 60px
tap_action:
action: toggle
- type: state-icon
entity: scene.alle_verlichting_uit
style:
left: 15%
top: 24%
opacity: 0
'--mdc-icon-size': 60px
tap_action:
action: toggle
- type: service-button
title: NIGHT
service: script.nachtstand
style:
top: 13%
left: 11%
opacity: 0
tap_action:
action: toggle
- type: icon
title: Voordeur deurbel
icon: mdi:cctv
entity: camera.deurbel_vloeiend
style:
top: 21%
left: 11%
opacity: 0
'--mdc-icon-size': 55px
- type: state-icon
entity: cover.gordijnen_raambekleding
style:
left: 20%
top: 16%
width: 30%
opacity: 0
'--mdc-icon-size': 50px
tap_action:
action: toggle
- type: service-button
title: DAYST
service: script.alarm_uitschakelen
style:
top: 8%
left: 16%
opacity: 0
'--mdc-text-size': 50px
tap_action:
action: toggle
visible:
- user: xxx
layout: {}
En hieronder de code van het icon:
type: picture-elements
elements:
- type: image
image: null
entity: alarm_control_panel.nachtstand
name: Alarm System Status
style:
left: 50%
top: 55%
width: 50%
state_image:
armed_home: /local/map/3D/shield/red.gif
disarmed: /local/map/3D/shield/white.png
image: /local/map/3D/shield/trans.png
dark_mode_image: /local/map/3D/shield/white.png
Can anyone tell me what to do and how?
thank you!
