⭕ Lovelace Radial Menu Element

pedolsky · May 21, 2021, 12:22pm

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

Raiders · February 22, 2022, 12:43pm

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

gabrielmiranda · March 10, 2022, 11:51pm

Same problem here. Is it deprecated? .

pedolsky · March 11, 2022, 6:38am

I don’t know because I don’t use radial-menu anymore. Feel free to raise an issue against.

arcsi42 · March 13, 2022, 9:08pm

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.

Sergeantpup · July 16, 2022, 6:09pm

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

Kelvin · October 31, 2022, 6:41pm

How do you update this with your javascript?

Sergeantpup · January 21, 2023, 8:44pm

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.

pressurejetsolutions · January 6, 2024, 1:23pm

8 line from bottom
remove - card: and down
then it will work

pressurejetsolutions · January 6, 2024, 1:27pm

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
  - 
      type: 'custom:button-card'
      entity: light.garderobe
      icon: 'mdi:hanger'
      show_name: true
      styles:
        card:
          - background-color: black
          - color: white