Skip to content
⭕ Radial Menu Element
TypeScript JavaScript
Branch: master
Clone or download
Latest commit e781740 Nov 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.devcontainer add devcontainer and cleanup build Nov 7, 2019
.github
src
.eslintrc.js add devcontainer and cleanup build Nov 7, 2019
.gitignore remove /dist Nov 11, 2019
.prettierrc.js
LICENSE
README.md Update README.md Nov 6, 2019
example.gif Initial Apr 14, 2019
example2.gif Update gif Apr 14, 2019
example3.png
hacs.json add double_tap_action and custom card items Nov 4, 2019
package.json
rollup.config.dev.js
rollup.config.js add devcontainer and cleanup build Nov 7, 2019
tsconfig.json
yarn.lock add devcontainer and cleanup build Nov 7, 2019

README.md

⭕ Lovelace Radial Menu Element

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

Discord Community Forum

Twitter Github

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.

Support

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

coffee

example

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

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

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

example3

Troubleshooting

Inspiration taken from Creative Punch

You can’t perform that action at this time.