Hi,
I d’like a radial-menu on my floorplan. The menu should be placed directly in the middle of the room. I do not succeed in realizing this and am glad about every input.
I could make a floor plan with equipment on it but a radial menu does not work.
early floorplan (type: pictures-elements):
I would like to visualize this menu (type: ‘custom:radial-menu’):
Lovelace Radial Menu Element
thanks for your support
bribbon
My test “radial-menu” looks like this if it is open.
type: ‘custom:radial-menu’
How can I get two different “type” on one card?
You should be able to just add it as an element. What did you try? Share your config.
Hey,
I’doing that over the GUI Interface, because I was not able to include ui-lovelace.yaml. If I include the ui-lovelace to my config I’m getting the message “Deprecated” on the lovelace. Actually I want to do this with the editor (VSC), so I learn a lot more…
Here are my two examples. First the code of the floorplan which I realized as a picture-element.
elements:
- entity: light.buro_decke
style:
left: 36%
top: 66%
tab_action:
action: toggle
type: state-icon
- entity: media_player.radio_buro
filter: brightness(5%)
image: /local/radio.png
state_filter:
playing: brightness(100%)
style:
left: 40%
top: 66%
width: 5%
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.radio_buro
type: image
- entity: media_player.radio_kuche
filter: brightness(5%)
image: /local/radio.png
state_filter:
playing: brightness(100%)
style:
left: 45%
top: 66%
width: 5%
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.radio_kuche
type: image
- entity: weather.home
prefix: 'Aussentemperatur '
style:
left: 15%
top: 5%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sensor.rt_ac68u_kb_sec_received
style:
color: orange
left: 35%
top: 8%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sensor.rt_ac68u_kb_sec_sent
style:
color: pink
left: 35%
top: 6%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sun.sun
prefix: 'Sonnenstand '
style:
left: 70%
top: 6%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: script.1581374463208
prefix: 'Alle Lampen '
style:
left: 50%
top: 95%
tab_action:
action: call-service
service: script.1581374463208
type: state-label
image: /local/floorplan_2.png
type: picture-elements
Below is my attempt code for the radial-menu:
I want to display this menu in every room on the floorplan.
type: 'custom:radial-menu'
icon: 'mdi:dots-horizontal-circle'
name: Büro
default_open: false
default_dismiss: false
items:
- entity: media_player.radio_buro
name: Radio toggeln
icon: 'mdi:radio'
tap_action:
action: toggle
haptic: true
- entity: light.buro_decke
name: Deckenlampe
icon: 'mdi:ceiling-light'
tap_action:
action: toggle
haptic: true
thanks!
Yippee, with your tip, I just managed to do it.
I had tried several times to insert the type: 'custom:radial-menu in the picture elements card. The mistake was that I always inserted the radial menu code at the end. The code must be at the beginning, before the type: picture-elements begins, in which the rest of the floorplan & devices are located… Then it works. 
Now I can go into detail and integrate several devices into it. Thanks
-> solved
elements:
- type: 'custom:radial-menu'
name: Büro
default_dismiss: true
default_open: false
icon: 'mdi:dots-horizontal-circle'
style:
left: 36%
top: 66%
items:
- entity: media_player.radio_buro
icon: 'mdi:radio'
name: Radio
tap_action:
action: more-info
haptic: true
- entity: light.buro_decke
icon: 'mdi:ceiling-light'
name: Deckenlampe
tap_action:
action: more-info
haptic: true
- entity: switch.shelly_shsw_pm_f2fb98
name: Heizung
icon: 'mdi:radiator.png'
tap_action:
action: toggle
haptic: true
- entity: light.buro_decke
style:
left: 15%
top: 66%
tab_action:
action: toggle
type: state-icon
- entity: media_player.radio_buro
filter: brightness(5%)
image: /local/radio.png
state_filter:
playing: brightness(100%)
style:
left: 70%
top: 66%
width: 5%
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.radio_buro
type: image
- entity: media_player.radio_kuche
filter: brightness(5%)
image: /local/radio.png
state_filter:
playing: brightness(100%)
style:
left: 75%
top: 66%
width: 5%
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.radio_kuche
type: image
- entity: weather.home
prefix: 'Aussentemperatur '
style:
left: 15%
top: 5%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sensor.rt_ac68u_kb_sec_received
style:
color: orange
left: 35%
top: 8%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sensor.rt_ac68u_kb_sec_sent
style:
color: pink
left: 35%
top: 6%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: sun.sun
prefix: 'Sonnenstand '
style:
left: 70%
top: 6%
tab_action:
action: navigate
navigation_path: /lovelace/default_view
type: state-label
- entity: script.1581374463208
prefix: 'Alle Lampen '
style:
left: 50%
top: 95%
tab_action:
action: call-service
service: script.1581374463208
type: state-label
image: /local/floorplan_2.png
type: picture-elements
@iantrich - is it possible to resize the icons? I haven’t had much luck with
- type: 'custom:radial-menu'
icon: 'fas:couch'
style:
left: 15%
top: 20%
width: 10%
size: 20% #(also tried px)