⭕ Lovelace Radial Menu Element

This element is for Lovelace on Home Assistant that provides a radial menu on click for quick/space saving access to commands. Designed for picture-elements, but can be used anywhere.

Minimum Home Assistant Version

Home Assistant version 0.110.0 or higher is required as of release 1.2.0 of restriction-card

Support

Hey dude! Help me out for a couple of 🍻 or a ☕!

Installation

Use HACS or follow this guide

resources:
  url: /local/radial-menu.js
  type: module

Options

Name	Type	Requirement	Description	Default
`type`	`string`	Required	`custom:radial-menu`	`none`
`items`	`list`	Required	List of items to display in the radial. See item options	`none`
`name`	`string`	Optional	Tooltip for main menu	`Menu`
`icon`	`string`	Optional	mdi icon for main menu	`mdi:menu`
`entity_picture`	`string`	Optional	picture to display	`none`
`default_open`	`boolean`	Optional	Should the radial be expanded on first load	`false`
`default_dismiss`	`boolean`	Optional	Should the radial be dismissed on click	`true`
`entity`	`string`	Optional	Home Assistant entity ID (used for `more-info` action)	`none`
`tap_action`	`map`	Optional	Action to take on tap. See action options	`action: toggle-menu`
`hold_action`	`map`	Optional	Action to take on hold. See action options	`none`
`double_tap_action`	`map`	Optional	Action to take on double tap. See action options	`action: none`
`theme`	`string`	Optional	Card theme
`items_offset`	`number`	Optional	Distance of items from menu center	`35`

Item Options

Name	Type	Requirement	Description	Default
`card`	`string`	Optional	A whole other Lovelace card configuration to build.
`entity`	`string`	Optional	Home Assistant entity ID.	`none`
`name`	`string`	Optional	Tooltip for main menu	`Menu`
`icon`	`string`	Optional	mdi icon for main menu	`none`
`entity_picture`	`string`	Optional	picture to display	`none`
`tap_action`	`map`	Optional	Action to take on tap. See action options	`action: more-info`
`hold_action`	`map`	Optional	Action to take on hold. See action options	`none`
`double_tap_action`	`map`	Optional	Action to take on double tap. See action options	`action: none`

Action Options

Name	Type	Default	Supported options	Description
`action`	`string`	`toggle`	`more-info`, `toggle`, `call-service`, `none`, `navigate`, `url`	Action to perform
`entity`	`string`	none	Any entity id	Only valid for `action: more-info` to override the entity on which you want to call `more-info`
`navigation_path`	`string`	none	Eg: `/lovelace/0/`	Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate
`url_path`	`string`	none	Eg: `https://www.google.com`	URL to open on click when action is `url`.
`service`	`string`	none	Any service	Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service`
`service_data`	`map`	none	Any service data	Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`.
`haptic`	`string`	none	`success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection`	Haptic feedback for the Beta IOS App

Theme Variables

The following variables are available and can be set in your theme to change the appearance of the radial menu.

Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.

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

Usage

type: 'custom:radial-menu'
icon: 'mdi:home'
name: 'Home'
default_open: true
default_dismiss: false
hold_action:
  action: url
  url: https://www.home-assistant.io
items:
  - entity: light.bed_light
    icon: 'mdi:flash'
    name: Bedroom Light
    tap_action:
      action: toggle
      haptic: true
    hold_action:
      action: more-info
  - entity: alarm_control_panel.ha_alarm
    icon: 'mdi:alarm-light'
    name: Alarm Panel
    tap_action:
      action: more-info
  - icon: 'mdi:alarm'
    name: Timer
    tap_action:
      action: call-service
      service: timer.start
      service_data:
        entity_id: timer.laundry
      haptic: true
    hold_action:
      action: call-service
      service: timer.pause
      service_data:
        entity_id: timer.laundry
      haptic: true
  - entity_picture: '/local/headphones.png'
    name: Podcasts
    tap_action:
      action: navigate
      navigation_path: /lovelace/1
  - card:
      type: 'custom:button-card'
      entity: light.kitchen
      show_name: false
      styles:
        card:
          - background-color: 'rgba(0, 0, 0, 0)'
          - box-shadow: 0px 0px 0px 0px black

Troubleshooting

Inspiration taken from Creative Punch

iantrich/radial-menu