Hi there! Amazing feature but is there a way how to change color and size of icons without changing theme ? Would be great.
I am struggling with getting this to work, I installed via HACS, and tried this super-basic config to test;
- cards:
- type: history-graph
entities:
- sensor.kontor_ovn_timer
hours_to_show: 24
refresh_interval: 0
- type: "custom:radial-menu"
items:
- entity: light.do_ltak
But i get the error message: “Custom element doesn’t exist: radial-menu.”
Any tips on how to troubleshoot?
it’s not enough to just install via HACS, you have to add to your Lovelace resources as well.
I am pretty sure i have done this, I usually do, and all the other custom cards i have installed work, but is there a way to double check if it has been done? (there is no “add to lovelace”-option if i go into the plugin in HACS)
I tried turning of YAML-mode. Added the card there, and it worked, then i copied the code verbatim from the raw config-editor. And turned on ymal-mode again, now it doesn’t work again. Any tips? This confuses me.
- type: 'custom:radial-menu'
items:
- entity: light.kjellerstue_dlbord
icon: 'mdi:flash'
- entity: light.kjellerstue_dlbakvegg
icon: 'mdi:flash'
EDIT:
Turns out you have to add resources manually when using yaml-mode, but not when not using yaml-mode, so that solved it. (So iantrich was right, I just though you added it by choosing “add to lovelace” when installing via HACS), I haven’t done this with the other custom cards though, so who know why they work in yaml-mode.
If I have an existing button card can I wire up the tap action on that to popup this radial menu element?
My ui looks like this
and I would like to be able to tap one of the square button cards that is wired up to an input_select. I would like to be able to change the selection using this radial menu.
thanks!
Version 1.6.0 Released with Theme variables:
| name | Default | Description |
|---|---|---|
radial-icon-size |
24px |
icon size |
radial-menu-button-color |
primary-color |
Menu color |
radial-menu-item-color |
primary-color |
Item color |
How do you add the theme variables to the radial menu config? (sorry if stupid question)
Could someone please explain how do I increase the size of the icons? I asked the developer and he just answered me with this link “https://www.home-assistant.io/integrations/frontend/” but I really couldn’t figure out how to do that …
Thanks in advance!
That link describes how to use themes. You use the theme variable for the icon size in your theme to adjust the size --radial-icon-size: 16px
Thank you very much, now it’s clearer and I’ve already put it into practice !!
Wonderful idea!
But: Did I dismiss something? Everytime I am trying to add a custom:button-card the radial menu implodes and gives me a blank card. Here‘s my code:
type: 'custom:radial-menu'
icon: 'mdi:castle'
default_dismiss: false
items:
- entity: alarm_control_panel.ha_alarm
icon: 'mdi:alarm-light'
name: Alarm Panel
tap_action:
action: more-info
- entity: group.wohnzimmer
icon: 'mdi:sofa'
tap_action:
action: more-info
- entity: group.lounge
icon: 'mdi:beach'
tap_action:
action: more-info
- card:
type: 'custom:button-card'
entity: light.garderobe
icon: 'mdi:hanger'
show_name: true
styles:
card:
- background-color: black
- color: white
1 Like
I’ve been trying to find a way to reduce the circle the of icons. The circle appears too large around the fan icon.
- type: custom:radial-menu
icon: null
name: Fan
default_open: false
default_dismiss: true
hold_action:
action: url
url: https://www.home-assistant.io
style:
left: 77%
top: 58%
'--radial-menu-button-color': blue
'--radial-menu-item-color': red
items:
- icon: mdi:numeric-0-circle-outline
name: 'Off'
tap_action:
action: call-service
service: fan.set_speed
service_data:
speed: 'off'
entity_id: fan.sonoff_10009951b8
radial-menu-item-color: black
haptic: true
- icon: mdi:numeric-1-circle-outline
name: Low Speed
tap_action:
action: call-service
service: fan.set_speed
service_data:
speed: low
entity_id: fan.sonoff_10009951b8
haptic: true
- icon: mdi:numeric-2-circle-outline
name: Medium Speed
tap_action:
action: call-service
service: fan.set_speed
service_data:
speed: medium
entity_id: fan.sonoff_10009951b8
haptic: true
- icon: mdi:numeric-3-circle-outline
name: High Speed
tap_action:
action: call-service
service: fan.set_speed
service_data:
speed: high
entity_id: fan.sonoff_10009951b8
haptic: true
Same problem here. Is it deprecated? .
I don’t know because I don’t use radial-menu anymore. Feel free to raise an issue against.
I think I wanted to change the same thing, the pop-up icons appeared too far from the menu center on a phone screen, so I made a small change to the code and is working for me so far. I opened a PR to the main repo, but in the meantime you could download the updated javascript from my fork at: https://github.com/arcsi42/radial-menu/releases/tag/1.6.1-dev and then add a new items_offset to your config.
Hello,
I can’t seem to get the items_offset to work and I’ve tried it in a bunch of different places. Am I doing this right? From the readme, 35 is default and this shouldn’t be a hard change. I am on 1.60
type: custom:radial-menu
icon: mdi:table-chair
name: Dining Room
default_open: true
default_dismiss: true
items_offset: 5
hold_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.dining_room_lights
haptic: true
style:
radial-menu-button-color: blue
radial-menu-item-color: red
items:
- entity: light.dining_room_lights
icon: phu:bulb-group-sultan-lightstrip
name: All
tap_action:
action: toggle
haptic: true
hold_action:
action: more-info
- entity: light.dining_room_lamps
icon: mdi:lamp
name: Lamps
tap_action:
action: toggle
haptic: true
hold_action:
action: more-info
- entity: light.dining_room_accent_lights
icon: phu:bulb-group-lightstrip
name: Accent Lights
tap_action:
action: toggle
haptic: true
hold_action:
action: more-info
styles: null
- entity: light.dining_room_recessed_lights
icon: mdi:light-recessed
name: Recessed Lights
tap_action:
action: toggle
haptic: true
hold_action:
action: more-info
How do you update this with your javascript?
Is there a way to make the entity picture larger like you can with the icons?
Say the menu had 5 entity pictures in it. How do I make those bigger? I’ve already made this a panel card.
8 line from bottom
remove - card: and down
then it will work