By the way, maybe this example could help you, which I used for testing during the development. It should give you a number of ideas. I hope it works without the items on your side.
Use the attached SVG
and this yaml
config:
embedSvg: true
embedSvgFlashing: true
embeddedSvgActions:
AZ_main_light_slider:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: F2_Office_Main_Light
stateItems:
- F2_Office_Main_Light
stateOffAsStyleClass: sz_main_light_buttonLine:buttonLine_toOff,
sz_main_light_roundedButton:roundedButton_toOff
stateOnAsStyleClass: sz_main_light_buttonLine:buttonLine_toOn,
sz_main_light_roundedButton:roundedButton_toOn
AZ_main_light_state_info_text:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
stateItems:
- F2_Office_Main_Light
stateOffColor: "#00FFFF"
stateOnColor: "#FFFF00"
Sofa:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: F2_Office_Main_Light
stateItems:
- F2_Office_Main_Light
stateOnColor: "#0000FF"
useProxyElementForState: true
andrea:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
invertStateOpacity: false
stateAsOpacity: true
stateItems:
- AndreasPhone
stateMinOpacity: "0.2"
useProxyElementForState: false
aussentemperatur_text:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
useDisplayState: true
stateItems:
- garten_temperature
az-main-lightbulb:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: F2_Office_Main_Light
stateAsOpacity: false
stateItems:
- F2_Office_Main_Light
stateOnColor: "#00FF00"
useProxyElementForState: true
az-main-lightbulb2:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: F2_Office_Desk_Light
stateAsOpacity: true
stateItems:
- F2_Office_Desk_Light
useProxyElementForState: true
az-nano-triangles:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: AZ_Govee_Light_Strip_Power
az_balkon_tuer_group:
actionCommand: ON
actionCommandAlt: OFF
invertStateOpacity: false
stateAsOpacity: true
stateItems:
- AZTuerSensor
useProxyElementForState: true
az_fenster_seite_group_l:
actionCommand: ON
actionCommandAlt: OFF
stateAsOpacity: true
stateItems:
- AZ_Fenster_Seite_OpenClose
useProxyElementForState: true
az_fenster_seite_group_r:
actionCommand: ON
actionCommandAlt: OFF
stateAsOpacity: true
stateItems:
- AZ_Fenster_Seite_OpenClose
useProxyElementForState: true
az_nano_duck:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: AZNano_Theduck
az_nano_triangles:
action: group
actionCommand: ON
actionCommandAlt: OFF
actionGroupPopupItem: NanoleafAZTriangles
az_neon_strip:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: AZ_Govee_Light_Strip_Power
stateAsOpacity: false
stateItems:
- AZ_Govee_Light_Strip_Power
- AZ_Govee_Schreibtisch_Light_Strip_Color
stateOnColor: "=(items.AZ_Govee_Light_Strip_Power.state==='ON') ?
items.AZ_Govee_Schreibtisch_Light_Strip_Color.state: '#aaaaaa'"
useProxyElementForState: true
az_seite_rollladen:
invertStateOpacity: true
stateAsOpacity: true
stateItems:
- F2_Office_shutter_side
call_jonas:
actionCommand: ON
actionCommandAlt: OFF
stateItems:
- TestTrigger2
stateOnAsStyleClass: jonas_astro_animate:animate
jonas:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
stateAsOpacity: true
stateItems:
- JonasPhone3_Online
stateMinOpacity: "0.2"
stefan:
actionCommand: ON
actionCommandAlt: OFF
stateAsOpacity: true
stateItems:
- StefansPhone2
stateMinOpacity: "0.2"
fixedType: canvas
imageUrl: /static/Obergeschoss-fixed.svg
label: Obergeschoss (fixed)
layoutType: fixed
screenWidth: 1300
sidebar: true
style:
background-color: black
blocks: []
masonry: []
grid: []
canvas: []