⭕ Lovelace Radial Menu Element

Share your Projects! Dashboards & Frontend
21

Can you log an issue against the repo and include your theme? Thanks

22

:tada: Version 1.4.0 :tada:

Big shout out to @RomRider for his work on long-press and haptic on button-card. Made it really easy to add here.

  • Menu now supports tap_action and hold_action
  • Items now support hold_action
  • New action type url which allows you to open a new tab with the specified url
  • New haptic feedback support. Currently only available in the iOS beta app
1 Like
23

This is brilliant. Is there a way of adjusting the size of the card. I want to make it bigger. That would be great, then we could use it as a launching any tab view/pop-ups
Also not sure if if possible, but any chance we can hide the views/menu in the browser?

24

Version 1.4.4

New Features:

  • New double_tap_action option
  • New card option for items. You can specify a custom card to use as an item now :tada:

Breaking Change:

  • url action option renamed to url_path
3 Likes
25

is it me or does this plugin not work using the mobile app?
taping the icon doesn´t do anything for me, works on PC tho.

type: 'custom:radial-menu'
icon: 'mdi:lightbulb'
name: Lampen
default_open: false
default_dismiss: false
items:
  - entity: light.all
    name: alle Lampen
    icon: 'mdi:lightbulb'
    tap_action:
      action: toggle
      haptic: true
26

Which mobile app?

27

the official companion app. figured that it also doesn´t work usinmg safari.

28

iOS 13 changed how taps are being sent. Working on a fix. Is affecting most of my cards :frowning:

29

Here’s a cool variation:

30

Hi there! Amazing feature but is there a way how to change color and size of icons without changing theme ? Would be great.

31

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?

32

it’s not enough to just install via HACS, you have to add to your Lovelace resources as well.

34

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)

35

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.

36

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!

37

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
38

How do you add the theme variables to the radial menu config? (sorry if stupid question)

39

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!

40

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

41

Thank you very much, now it’s clearer and I’ve already put it into practice !!