2023-03-26 19:00:59 -04:00
# Mushroom dashboard strategy
[![hacs][hacs-badge]][hacs-url]
[![release][release-badge]][release-url]
2023-04-04 12:46:59 -04:00
2023-03-28 12:55:49 -04:00
2023-03-26 19:00:59 -04:00
2023-03-27 18:20:42 -04:00
2023-03-26 19:00:59 -04:00
## What is Mushroom dashboard strategy ?
Mushroom dashboard strategy provides a strategy for Home assistant to automatically create a dashboard using Mushroom cards, the area configuration and entity configuration.
My goal is to propose a way to create powerful dashaboards without the need of spending hours manualy creating them.
2023-03-28 01:56:30 -04:00
**Note:** This is my first javascript code and github repository. Any recomendations are always welcome
2023-03-28 01:48:41 -04:00
2023-03-26 19:00:59 -04:00
### Features
- 🛠 Automatically create dashboard with 3 lines of yaml
- 😍 Built-in Views for device specific controls
- 🎨 Many options to customize to your needs
2023-03-28 01:40:59 -04:00
## Installation
### Preresquisites
2023-03-28 01:23:26 -04:00
You need to install these cards first before using this strategy
- [Mushroom cards][mushroom]
- [Mini graph card][mini-graph]
- [Web RTC][webrtc]
2023-03-26 19:00:59 -04:00
### HACS
Mushroom dashboard strategy is available in [HACS][hacs] (Home Assistant Community Store).
1. Install HACS if you don't have it already
2. Open HACS in Home Assistant
3. Go to "Frontend" section
2023-03-28 11:48:02 -04:00
4. Click 3 dots on top right and custom repository
5. Add `https://github.com/AalianKhan/mushroom-strategy` with catagory `Lovelace`
5. Search for "Mushroom strategy" and install
2023-03-26 19:00:59 -04:00
### Manual
2023-03-28 01:56:30 -04:00
1. Download `mushroom-strategy.js` file from the [`dist` ](https://github.com/AalianKhan/mushroom-strategy/tree/main/dist ) directory.
2023-03-26 19:00:59 -04:00
2. Put `mushroom-strategy.js` file into your `config/www` folder.
3. Add reference to `mushroom-strategy.js` in Dashboard. There's two way to do that:
- **Using UI:** _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ as `/local/mushroom-strategy.js` → Set _Resource type_ as `JavaScript Module` .
**Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
- **Using YAML:** Add following code to `lovelace` section.
```yaml
resources:
- url: /local/mushroom-strategy.js
type: module
```
## Usage
All the Rounded cards can be configured using Dashboard UI editor.
1. In Dashboard UI, click 3 dots in top right corner.
2. Click _Edit Dashboard_ .
3. Click 3 dots again
4. Click `Raw configuration editor`
5. Add these lines
```yaml
strategy:
type: custom:mushroom-strategy
views: []
```
2023-03-28 01:40:59 -04:00
### Hidding specific entities
When first creating this dashboard, you probably have many entities that you don't want to see.
2023-03-28 13:09:59 -04:00
You can easily hide these entities by holding the entity > Click the `cog icon` at the top right corner of the popup > Click `Advanced settings` > Set `entity status` to `hidden` . Refresh the page and it should update
2023-03-28 01:40:59 -04:00
2023-03-28 01:49:40 -04:00
2023-03-28 01:40:59 -04:00
### Adding devices to areas
You can easiy add devices to an area by going to `Settings` found at the bottom of the sidebar > Click `Devices and integration` > Select the integration of your device > Click the device you wish to add > Click the `pencil icon` found at the top right corner > Enter an area in area field. You can also set an entity of that device to a different area by going to advanced settings of that entity.
2023-03-28 01:45:17 -04:00
If you created a entity in your `configuratation.yaml` you may need to enter a `unique_id` first before you set an area to it. See [docs ](https://www.home-assistant.io/faq/unique_id/ )
2023-03-28 01:40:59 -04:00
2023-03-28 00:21:34 -04:00
## Strategy options
2023-04-04 12:24:37 -04:00
You can set strategy options to further customize the dashboard. It has the following available options
2023-03-28 00:21:34 -04:00
2023-04-04 02:26:33 -04:00
| Name | Type | Default | Description |
|:---------------------|:-----------------------|:--------------------------------------------------------|:-----------------------------------------------------------------------------------------|
| `areas` | list | Optional | One or more areas in a list, see [areas object ](#area-object ) |
| `entity_config` | list of cards | Optional | Card defination for an entity, see [entity config ](#entity-config ) |
| `views` | object | All views enabled | Setting which pre-built views to show, see available [Pre-built views ](#pre-built-views ) |
2023-04-04 12:46:59 -04:00
| `chips` | object | All count chips enabled with auto selected weather card | See [chips ](#chips ) |
2023-04-04 02:26:33 -04:00
| `quick_access_cards` | list of cards | Optional | List of cards to show between welcome card and rooms cards |
| `extra_cards` | list of cards | Optional | List of cards to show below room cards |
| `extra_views` | list of view | Optional | List of views to add to the dashboard |
2023-03-28 01:23:26 -04:00
2023-03-28 13:09:59 -04:00
#### Example
```yaml
strategy:
type: custom:mushroom-strategy
options:
areas:
- name: Family Room
icon: mdi:sofa
icon_color: green
views: []
```
2023-03-28 01:23:26 -04:00
### Area Object
2023-03-28 00:21:34 -04:00
2023-03-28 01:23:26 -04:00
The area object includes all options from the template mushroom card and `extra_cards` which is a list of cards to show at the top of the area subview. The order of defination is used to sort the rooms and pre-built views
2023-03-28 00:21:34 -04:00
| Name | Type | Default | Description |
| :-------------------- | :-------------- | :---------- | :---------------------------------------------------------------------------------------------------------------------------------- |
2023-03-28 01:23:26 -04:00
| `name` | string | Required | The name of the area |
2023-03-28 00:21:34 -04:00
| `icon` | string | Optional | Icon to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `icon_color` | string | Optional | Icon color to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `primary` | string | Optional | Primary info to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `secondary` | string | Optional | Secondary info to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `badge_icon` | string | Optional | Badge icon to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `badge_color` | string | Optional | Badge icon color to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `picture` | string | Optional | Picture to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `multiline_secondary` | boolean | `false` | Enables support for multiline text for the secondary info. |
| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported |
| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
| `tap_action` | action | `none` | Home assistant action to perform on tap |
| `hold_action` | action | `none` | Home assistant action to perform on hold |
| `entity_id` | `string` `list` | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities. |
| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
| `extra_cards` | list of cards | Optional | A list of cards to show on the top of the area subview |
#### Example
2023-03-28 01:23:26 -04:00
2023-03-28 00:21:34 -04:00
```yaml
2023-04-10 16:06:36 -04:00
strategy:
type: custom:mushroom-strategy
options:
areas:
- name: Family Room
icon: mdi:television
icon_color: green
extra_cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.family_room_temperature
icon: mdi:thermometer
icon_color: pink
alignment: center
- name: Kitchen
icon: mdi:silverware-fork-knife
icon_color: red
views: []
2023-03-28 00:21:34 -04:00
```
2023-03-28 13:09:59 -04:00
### Entity Config
2023-03-28 01:23:26 -04:00
2023-03-28 13:09:59 -04:00
The `entity_config` essentially enables you to give a specific entity any card you wish.
2023-03-28 01:23:26 -04:00
#### Example
```yaml
2023-04-10 16:06:36 -04:00
strategy:
type: custom:mushroom-strategy
options:
entity_config:
- entity: fan.master_bedroom_fan
type: custom:mushroom-fan-card
views: []
2023-03-28 01:23:26 -04:00
```
### Pre-built views
2023-04-04 12:46:59 -04:00
Mushroom strategy includes pre-built views to control/view specific domains. Only the devices that are in an area defined in `areas` are shown. If `areas` is not defined then devices in all areas are shown. By default, all views are shown
2023-03-28 01:23:26 -04:00
2023-04-04 12:24:37 -04:00
| Available views | type | Description |
2023-03-28 01:23:26 -04:00
|:----------------|:-----|:------------|
| `lights` | boolean | View to control all lights and lights of each area |
| `fans` | boolean | View to control all fans and fans of each area |
| `covers` | boolean | View to control all covers and covers of each area |
| `switches` | boolean | View to control all switches and switches of each area |
2023-05-20 04:19:39 -06:00
| `climates` | boolean | View to control climate devices such as thermostats. Seperated by each area |
2023-03-28 01:23:26 -04:00
| `cameras` | boolean | View to show all cameras using WebRTC cards. Seperated by each area |
#### Example
```yaml
2023-04-10 16:06:36 -04:00
strategy:
type: custom:mushroom-strategy
options:
views:
lights: true
switches: true
covers: false
cameras: true
2023-05-20 04:19:39 -06:00
climates: false
2023-04-10 16:06:36 -04:00
views: []
2023-03-28 01:23:26 -04:00
```
2023-04-04 12:46:59 -04:00
### Chips
2023-03-28 01:23:26 -04:00
2023-04-04 12:46:59 -04:00
Mushroom strategy has chips that count the number of devices active for a specific domain. Only the devices that are defined in `areas` are counted. if `areas` is not defined then devices in all areas are counted. By default, all chips are enabled. You can also manually configure a weather entity to use. There is also an option to add more [Mushroom Chips][mushroom-chips] using `extra_chips`
##### Note: setting the status to hidden for the unwanted weather entity is recomended
2023-03-28 01:23:26 -04:00
2023-04-04 12:24:37 -04:00
| Available chips | type | Description |
2023-04-04 02:26:33 -04:00
|:----------------|:--------|:------------------------------------------------------------------------------------------------------------------|
| `light_count` | Boolean | Chip to display the number of lights on, tapping turns off all lights, holding navigates to lights view |
| `fan_count` | Boolean | Chip to display the number of fans on, tapping turns off all fans, holding navigates to fans view |
| `cover_count` | Boolean | Chip to display the number of covers not closed, tapping navigates to covers view |
| `switch_count` | Boolean | Chip to display the number of switches on, tapping turns off all switches, holding navigates to switches view |
| `climate_count` | Boolean | Chip to display the number of climate not off, tapping naviagetes to climates view |
| `weather_entity` | Entity ID | Entity ID for the weather chip to use, accepts `weather.` only |
| `extra_chips` | List | List of extra chips to display, see [Mushroom Chips][mushroom-chips] |
2023-03-28 01:23:26 -04:00
#### Example
```yaml
2023-04-10 16:06:36 -04:00
strategy:
type: custom:mushroom-strategy
options:
chips:
climate_count: false
cover_count: false
weather_entity: weather.forecast_home
extra_chips:
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: entity
entity: lock.front_door
icon_color: red
content_info: none
tap_action:
action: toggle
2023-03-28 01:23:26 -04:00
```
## Full Example
```yaml
strategy:
type: custom:mushroom-strategy
options:
views:
lights: true
switches: true
covers: false
cameras: true
thermostats: false
chips:
2023-04-04 02:26:33 -04:00
weather_entity: weather.forecast_home
2023-03-28 01:23:26 -04:00
climate_count: false
cover_count: false
2023-04-04 02:26:33 -04:00
extra_chips:
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: entity
entity: lock.front_door
icon_color: red
content_info: none
icon: ''
use_entity_picture: false
tap_action:
action: toggle
- type: conditional
conditions:
- entity: cover.garage_door
state_not: closed
chip:
type: entity
entity: cover.garage_door
icon_color: red
content_info: none
tap_action:
action: toggle
2023-03-28 01:23:26 -04:00
areas:
- name: Family Room
icon: mdi:television
icon_color: green
extra_cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.family_room_temperature
icon: mdi:thermometer
icon_color: pink
alignment: center
- name: Kitchen
icon: mdi:silverware-fork-knife
icon_color: red
- name: Master Bedroom
icon: mdi:bed-king
icon_color: blue
- name: Abia's Bedroom
icon: mdi:flower-tulip
icon_color: green
- name: Aalian's Bedroom
icon: mdi:rocket-launch
icon_color: yellow
- name: Rohaan's Bedroom
icon: mdi:controller
icon_color: red
- name: Hallway
- name: Living Room
icon: mdi:sofa
- name: Front Door
icon: mdi:door-closed
entity_config:
- entity: fan.master_bedroom_fan
type: custom:mushroom-fan-card
quick_access_cards:
- type: custom:mushroom-title-card
title: Security
- type: custom:mushroom-cover-card
entity: cover.garage_door
show_buttons_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.front_door
- type: custom:mushroom-entity-card
entity: sensor.front_door_lock_battery
name: Battery
extra_cards:
- type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
entity: vacuum.robot_vacuum
vacuum_platform: default
extra_views:
- theme: Backend-selected
title: cool view
path: cool-view
icon: mdi:emoticon-cool
badges: []
cards:
- type: markdown
content: I am cool
```
2023-03-28 00:21:34 -04:00
2023-03-26 19:00:59 -04:00
## Credits
* The cards used are from [Mushroom][mushroom], [Mini graph card][mini-graph] and [Web RTC][webrtc]
* Took inspiration from [Balloob battery strategy][balloobBattery]
<!-- Badges -->
[hacs-url]: https://github.com/hacs/integration
2023-03-28 11:42:06 -04:00
[hacs-badge]: https://img.shields.io/badge/HACS-Custom-41BDF5.svg
2023-03-26 19:00:59 -04:00
[release-badge]: https://img.shields.io/github/v/release/lovelace-rounded/ui?style=flat-square
[downloads-badge]: https://img.shields.io/github/downloads/lovelace-rounded/ui/total?style=flat-square
[build-badge]: https://img.shields.io/github/actions/workflow/status/lovelace-rounded/ui/build.yml?branch=main& style=flat-square
<!-- References -->
[home-assistant]: https://www.home-assistant.io/
[home-assitant-theme-docs]: https://www.home-assistant.io/integrations/frontend/#defining -themes
[hacs]: https://hacs.xyz
[mushroom]: https://github.com/piitaya/lovelace-mushroom
2023-04-04 02:26:33 -04:00
[mushroom-chips]: https://github.com/piitaya/lovelace-mushroom/blob/main/docs/cards/chips.md
2023-03-26 19:00:59 -04:00
[mini-graph]: https://github.com/kalkih/mini-graph-card
[webrtc]: https://github.com/AlexxIT/WebRTC
[balloobBattery]: https://gist.github.com/balloob/4a70c83287ddba4e9085cb578ffb161f
[release-url]: https://github.com/AalianKhan/mushroom-strategy/releases
