Skip to content

Commit 18dc14f

Browse files
iantrichiantrich
committed
add double_tap_action and custom card items
1 parent 82c49d8 commit 18dc14f

File tree

11 files changed

+1770
-1415
lines changed

11 files changed

+1770
-1415
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 Custom cards for Home Assistant
3+
Copyright (c) 2019 Ian Richardson
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 73 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
# ⭕ Lovelace Radial Menu Element by [@iantrich](https://www.github.com/iantrich)
1+
# ⭕ Lovelace Radial Menu Element
22

33
[![GitHub Release][releases-shield]][releases]
4-
[![GitHub Activity][commits-shield]][commits]
5-
[![custom_updater][customupdaterbadge]][customupdater]
64
[![License][license-shield]](LICENSE.md)
5+
[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
76

87
![Project Maintenance][maintenance-shield]
9-
[![BuyMeCoffee][buymecoffeebadge]][buymecoffee]
8+
[![GitHub Activity][commits-shield]][commits]
109

1110
[![Discord][discord-shield]][discord]
1211
[![Community Forum][forum-shield]][forum]
@@ -16,97 +15,93 @@
1615

1716
This element is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Assistant](https://www.home-assistant.io/) that provides a radial menu on click for quick/space saving access to commands. Designed for picture-elements, but can be used anywhere.
1817

19-
![example](example.gif)
18+
## Support
2019

21-
## Options
20+
Hey dude! Help me out for a couple of :beers: or a :coffee:!
2221

23-
| Name | Type | Requirement | Description | Default
24-
| ---- | ---- | ------- | ----------- | -------
25-
| type | string | **Required** | `custom:radial-menu` | `none`
26-
| items | list | **Required** | List of items to display in the radial | `none`
27-
| name | string | **Optional** | Tooltip for main menu | `Menu`
28-
| icon | string | **Optional** | mdi icon for main menu | `mdi:menu`
29-
| entity_picture | string | **Optional** | picture to display | `none`
30-
| default_open | boolean | **Optional** | Should the radial be expanded on first load | `false`
31-
| default_dismiss | boolean | **Optional** | Should the radial be dismissed on click | `true`
32-
| entity | string | **Optional** | Home Assistant entity ID (used for `more-info` action) | `none`
33-
| tap_action | object | **Optional** | Action to take on tap | `action: toggle-menu`
34-
| hold_action | object | **Optional** | Action to take on hold | `none`
35-
36-
37-
## Items Options
38-
39-
| Name | Type | Requirement | Description | Default
40-
| ---- | ---- | ------- | ----------- | -------
41-
| entity | string | **Optional** | Home Assistant entity ID. | `none`
42-
| name | string | **Optional** | Tooltip for main menu | `Menu`
43-
| icon | string | **Optional** | mdi icon for main menu | `none`
44-
| entity_picture | string | **Optional** | picture to display | `none`
45-
| tap_action | object | **Optional** | Action to take on tap | `action: more-info`
46-
| hold_action | object | **Optional** | Action to take on hold | `none`
22+
[![coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/zJtVxUAgH)
4723

48-
## Action Options
24+
This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Assistant](https://www.home-assistant.io/) that display a [Roku](https://www.roku.com/) remote.
4925

50-
| Name | Type | Requirement | Description | Default
51-
| ---- | ---- | ------- | ----------- | -------
52-
| action | string | **Required** | Action to perform (toggle-menu, more-info, toggle, call-service, navigate url, none) | `toggle-menu` for menu and `more-info` for items
53-
| navigation_path | string | **Optional** | Path to navigate to (e.g. /lovelace/0/) when action defined as navigate | `none`
54-
| url | string | **Optional** | URL to open on click when action is url. The URL will open in a new tab | `none`
55-
| service | string | **Optional** | Service to call (e.g. media_player.media_play_pause) when action defined as call-service | `none`
56-
| service_data | object | **Optional** | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service | `none`
57-
| haptic | string | **Optional** | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) _success, warning, failure, light, medium, heavy, selection_ | `none`
26+
![example](example.gif)
5827

5928
## Installation
6029

61-
### Step 1
62-
63-
Save [radial-menu](https://github.com/custom-cards/radial-menu/raw/master/dist/radial-menu.js) to `<config directory>/www/radial-menu.js` on your Home Assistant instanse.
64-
65-
**Example:**
30+
Use [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
6631

67-
```bash
68-
wget https://raw.githubusercontent.com/custom-cards/radial-menu/master/dist/radial-menu.js
69-
mv radial-menu.js /config/www/
32+
```yaml
33+
resources:
34+
url: /local/radial-menu.js
35+
type: module
7036
```
7137
72-
### Step 2
38+
## Options
7339
74-
Link `radial-menu` inside your `ui-lovelace.yaml` or Raw Editor in the UI Editor
40+
| Name | Type | Requirement | Description | Default |
41+
| ------------------- | --------- | ------------ | ------------------------------------------------------------------------- | --------------------- |
42+
| `type` | `string` | **Required** | `custom:radial-menu` | `none` |
43+
| `items` | `list` | **Required** | List of items to display in the radial. See [item options](#item-options) | `none` |
44+
| `name` | `string` | **Optional** | Tooltip for main menu | `Menu` |
45+
| `icon` | `string` | **Optional** | mdi icon for main menu | `mdi:menu` |
46+
| `entity_picture` | `string` | **Optional** | picture to display | `none` |
47+
| `default_open` | `boolean` | **Optional** | Should the radial be expanded on first load | `false` |
48+
| `default_dismiss` | `boolean` | **Optional** | Should the radial be dismissed on click | `true` |
49+
| `entity` | `string` | **Optional** | Home Assistant entity ID (used for `more-info` action) | `none` |
50+
| `tap_action` | `map` | **Optional** | Action to take on tap. See [action options](#action-options) | `action: toggle-menu` |
51+
| `hold_action` | `map` | **Optional** | Action to take on hold. See [action options](#action-options) | `none` |
52+
| `double_tap_action` | `map` | **Optional** | Action to take on double tap. See [action options](#action-options) | `action: none` |
53+
54+
## Item Options
55+
56+
| Name | Type | Requirement | Description | Default |
57+
| ------------------- | -------- | ------------ | ------------------------------------------------------------------- | ------------------- |
58+
| `card` | `string` | **Optional** | A whole other Lovelace card configuration to build. |
59+
| `entity` | `string` | **Optional** | Home Assistant entity ID. | `none` |
60+
| `name` | `string` | **Optional** | Tooltip for main menu | `Menu` |
61+
| `icon` | `string` | **Optional** | mdi icon for main menu | `none` |
62+
| `entity_picture` | `string` | **Optional** | picture to display | `none` |
63+
| `tap_action` | `map` | **Optional** | Action to take on tap. See [action options](#action-options) | `action: more-info` |
64+
| `hold_action` | `map` | **Optional** | Action to take on hold. See [action options](#action-options) | `none` |
65+
| `double_tap_action` | `map` | **Optional** | Action to take on double tap. See [action options](#action-options) | `action: none` |
7566

76-
```yaml
77-
resources:
78-
- url: /local/radial-menu.js
79-
type: module
80-
```
67+
## Action Options
8168

82-
### Step 3
69+
| Name | Type | Default | Supported options | Description |
70+
| ----------------- | -------- | -------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
71+
| `action` | `string` | `toggle` | `more-info`, `toggle`, `call-service`, `none`, `navigate`, `url` | Action to perform |
72+
| `entity` | `string` | none | Any entity id | **Only valid for `action: more-info`** to override the entity on which you want to call `more-info` |
73+
| `navigation_path` | `string` | none | Eg: `/lovelace/0/` | Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate |
74+
| `url_path` | `string` | none | Eg: `https://www.google.com` | URL to open on click when action is `url`. |
75+
| `service` | `string` | none | Any service | Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service` |
76+
| `service_data` | `map` | none | Any service data | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. |
77+
| `haptic` | `string` | none | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection` | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) |
8378

84-
Add a custom element in your `ui-lovelace.yaml` or in the UI Editor as a Manual Card
79+
## Usage
8580

8681
```yaml
87-
type: 'custom:radial-menu'
88-
icon: 'mdi:home'
89-
name: 'Home'
82+
type: "custom:radial-menu"
83+
icon: "mdi:home"
84+
name: "Home"
9085
default_open: true
9186
default_dismiss: false
9287
hold_action:
9388
action: url
9489
url: https://www.home-assistant.io
9590
items:
9691
- entity: light.bed_light
97-
icon: 'mdi:flash'
92+
icon: "mdi:flash"
9893
name: Bedroom Light
9994
tap_action:
10095
action: toggle
10196
haptic: true
10297
hold_action:
10398
action: more-info
10499
- entity: alarm_control_panel.ha_alarm
105-
icon: 'mdi:alarm-light'
100+
icon: "mdi:alarm-light"
106101
name: Alarm Panel
107102
tap_action:
108103
action: more-info
109-
- icon: 'mdi:alarm'
104+
- icon: "mdi:alarm"
110105
name: Timer
111106
tap_action:
112107
action: call-service
@@ -120,30 +115,36 @@ items:
120115
service_data:
121116
entity_id: timer.laundry
122117
haptic: true
123-
- entity_picture: '/local/headphones.png'
118+
- entity_picture: "/local/headphones.png"
124119
name: Podcasts
125120
tap_action:
126121
action: navigate
127122
navigation_path: /lovelace/1
123+
- card:
124+
type: "custom:button-card"
125+
entity: light.kitchen
126+
show_name: false
127+
styles:
128+
card:
129+
- background-color: "rgba(0, 0, 0, 0)"
130+
- box-shadow: 0px 0px 0px 0px black
128131
```
129132

133+
![example3](example3.png)
134+
130135
[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
131136

132137
Inspiration taken from [Creative Punch](https://codepen.io/CreativePunch/pen/lAHiu)
133138

134-
[buymecoffee]: https://www.buymeacoffee.com/iantrich
135-
[buymecoffeebadge]: https://img.shields.io/badge/buy%20me%20a%20coffee-donate-blue.svg?style=for-the-badge
136-
[commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/radial-menu.svg?style=for-the-badge
137-
[commits]: https://github.com/custom-cards/radial-menu/commits/master
138-
[customupdater]: https://github.com/custom-components/custom_updater
139-
[customupdaterbadge]: https://img.shields.io/badge/custom__updater-true-success.svg?style=for-the-badge
139+
[commits-shield]: https://img.shields.io/github/commit-activity/y/iantrich/radial-menu.svg?style=for-the-badge
140+
[commits]: https://github.com/iantrich/radial-menu/commits/master
140141
[discord]: https://discord.gg/Qa5fW2R
141142
[discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge
142143
[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge
143144
[forum]: https://community.home-assistant.io/t/lovelace-radial-menu-element/111210
144-
[license-shield]: https://img.shields.io/github/license/custom-cards/radial-menu.svg?style=for-the-badge
145+
[license-shield]: https://img.shields.io/github/license/iantrich/radial-menu.svg?style=for-the-badge
145146
[maintenance-shield]: https://img.shields.io/badge/maintainer-Ian%20Richardson%20%40iantrich-blue.svg?style=for-the-badge
146-
[releases-shield]: https://img.shields.io/github/release/custom-cards/radial-menu.svg?style=for-the-badge
147-
[releases]: https://github.com/custom-cards/radial-menu/releases
147+
[releases-shield]: https://img.shields.io/github/release/iantrich/radial-menu.svg?style=for-the-badge
148+
[releases]: https://github.com/iantrich/radial-menu/releases
148149
[twitter]: https://img.shields.io/twitter/follow/iantrich.svg?style=social
149150
[github]: https://img.shields.io/github/followers/iantrich.svg?style=social

0 commit comments

Comments
 (0)