2023-03-26 19:00:59 -04:00
# Mushroom dashboard strategy
2023-06-14 07:29:18 +02:00
[![hacs][hacsBadge]][hacsUrl]
[![release][releaseBadge]][releaseUrl]
2023-03-26 19:00:59 -04:00
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
2023-06-14 07:29:18 +02:00
## What is Mushroom dashboard strategy?
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
Mushroom dashboard strategy provides a strategy for Home assistant to automatically create a dashboard using Mushroom
cards, the area configuration and entity configuration.
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
My goal is to propose a way to create powerful dashboards without the need of spending hours manually creating them.
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
**Note:** This is my first javascript code and GitHub repository. Any recommendations are always welcome.
2023-03-28 01:48:41 -04:00
2023-03-26 19:00:59 -04:00
### Features
2023-06-14 07:29:18 +02:00
- 🛠 Automatically create dashboard with 3 lines of yaml.
- 😍 Built-in Views for device-specific controls.
- 🎨 Many options to customize to fit your needs.
2023-03-26 19:00:59 -04:00
2023-03-28 01:40:59 -04:00
## Installation
2023-06-14 07:29:18 +02:00
### Prerequisites
2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02:00
You need to install these cards before using this strategy:
- [Mushroom cards][mushroomUrl]
- [Mini graph card][mini-graphUrl]
- [Web RTC][webRtcUrl]
2023-03-28 01:23:26 -04:00
2023-03-26 19:00:59 -04:00
### HACS
2023-06-14 07:29:18 +02:00
Mushroom dashboard strategy is available in [HACS][hacsUrl] (Home Assistant Community Store).
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
1. Install HACS if you don't have it already.
2. Open HACS in Home Assistant.
3. Go to the "Frontend" section.
4. Click the button with the "+" icon
5. Search for "Mushroom dashboard" and install.
2023-03-26 19:00:59 -04:00
### Manual
2023-06-14 07:29:18 +02: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.
2023-06-14 07:29:18 +02:00
3. Add a reference to `mushroom-strategy.js` in Dashboard.
There are two ways 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` .
2023-03-26 19:00:59 -04:00
**Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
2023-06-14 07:29:18 +02:00
- **Using YAML:** Add following code to the `lovelace` section.
2023-03-26 19:00:59 -04:00
```yaml
resources:
- url: /local/mushroom-strategy.js
type: module
```
## Usage
2023-06-14 07:29:18 +02:00
All the rounded cards can be configured using the Dashboard UI editor.
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
1. In the UI of the dashboard, click the 3 dots in the top right corner.
2023-03-26 19:00:59 -04:00
2. Click _Edit Dashboard_ .
3. Click 3 dots again
4. Click `Raw configuration editor`
2023-06-14 07:29:18 +02:00
5. Add the following lines:
2023-03-26 19:00:59 -04:00
```yaml
strategy:
type: custom:mushroom-strategy
2023-06-14 07:29:18 +02:00
views: [ ]
2023-03-26 19:00:59 -04:00
```
2023-03-28 01:40:59 -04:00
### Hidding specific entities
2023-06-14 07:29:18 +02:00
When creating this dashboard for the first time, you probably have many entities that you don't want to see.
2023-03-28 01:40:59 -04:00
2023-06-14 07:29:18 +02:00
You can easily hide these entities by holding the entity > Click the `cog icon` in the top right corner of the popup >
Click `Advanced settings` > Set `entity status` to `hidden` .
The view should update when the page is refreshed.
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
2023-06-14 07:29:18 +02:00
You can easily 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 in 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 the advanced settings of that entity.
2023-03-28 01:40:59 -04:00
2023-06-14 07:29:18 +02:00
If you created an entity in your `configuration.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-06-14 07:29:18 +02:00
You can set strategy options to further customize the dashboard.
By default, all views are enabled which include lights, fans, covers, switches, climates and cameras. All chips are also
enabled which count the number of devices on for the platforms light, fan, cover and climate. It also auto-selects a
weather entity for the weather chip.
The options available are:
2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02:00
| Name | Type | Default | Description |
|:---------------------|:--------------------------|:--------------------------------------------------------|:--------------------------------------------------------------------|
| `areas` | object (optional) | unset | One or more areas in a list, see [areas object ](#area-object ). |
| `entity_config` | array of cards (optional) | unset | Card definition for an entity, see [entity config ](#entity-config ). |
| `views` | object (optional) | All default views | See available [Pre-built views ](#pre-built-views ). |
| `chips` | object | All count chips enabled with auto selected weather card | See [chips ](#chips ). |
| `quick_access_cards` | array of cards (optional) | unset | List of cards to show between welcome card and rooms cards. |
| `extra_cards` | array of cards (optional | unset | List of cards to show below room cards. |
| `extra_views` | array of views (optional) | unset | List of views to add to the dashboard. |
| `domains` | object (optional) | All supported domains | See [Supported domains ](#supported-domains ). |
#### Example
2023-03-28 13:09:59 -04:00
```yaml
strategy:
type: custom:mushroom-strategy
options:
areas:
2023-06-14 07:29:18 +02:00
family_room_id:
name: Family Room
2023-03-28 13:09:59 -04:00
icon: mdi:sofa
icon_color: green
2023-06-14 07:29:18 +02:00
views: [ ]
2023-03-28 13:09:59 -04:00
```
2023-06-14 07:29:18 +02:00
2023-03-28 01:23:26 -04:00
### Area Object
2023-03-28 00:21:34 -04:00
2023-06-14 07:29:18 +02: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.
| Name | Type | Default | Description |
|:----------------------|:------------------|:---------------|:------------------------------------------------------------------------------------------------------------------------------------|
| `name` | string | N.A. | The name of the area. |
| `icon` | string (optional) | unset or empty | Icon to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `icon_color` | string (optional) | unset or empty | Icon color to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `primary` | string (optional) | unset or empty | Primary info to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `secondary` | string (optional) | unset or empty | Secondary info to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `badge_icon` | string (optional) | unset or empty | Badge icon to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `badge_color` | string (optional) | unset or empty | Badge icon color to render. May contain [templates ](https://www.home-assistant.io/docs/configuration/templating/ ). |
| `picture` | string (optional) | unset or empty | 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) | unset or empty | 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` `array` | unset or empty | 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. |
| `hidden` | boolean | false | Set to `true` to exclude the area from the dashboard and views. |
| `order` | number | Infinity | Ordering position of the area in the list of available areas. |
| `extra_cards` | array of cards | unset or empty | A list of cards to show on the top of the area subview. |
*) `more-info` `toggle` `call-service` `navigate` `url` `none`
2023-03-28 00:21:34 -04:00
#### 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:
2023-06-14 07:29:18 +02:00
family_room_id:
name: Family Room
icon: mdi:television
icon_color: green
order: 1
extra_cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.family_room_temperature
icon: mdi:thermometer
icon_color: pink
alignment: center
kitchen_id:
name: Kitchen
icon: mdi:silverware-fork-knife
icon_color: red
order: 2
garage_id:
hidden: true
views: [ ]
2023-03-28 00:21:34 -04:00
```
2023-06-14 07:29:18 +02:00
#### Undisclosed Area
The strategy has a special area, named `undisclosed` .
This area is enabled by default and includes the entities that aren't linked to any Home Assistant area.
The area can be configured like any other area as described above.
To exclude this area from the dashboard and views, set its property `hidden` to `true` .
2023-03-28 13:09:59 -04:00
### Entity Config
2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02: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
2023-06-14 07:29:18 +02:00
2023-03-28 01:23:26 -04:00
```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
2023-06-14 07:29:18 +02:00
views: [ ]
2023-03-28 01:23:26 -04:00
```
### Pre-built views
2023-04-04 12:46:59 -04:00

2023-06-14 07:29:18 +02:00
Mushroom strategy includes pre-built views to control/view specific domains.
Only devices that are in an area as defined in `areas` are shown.
If `areas` is undefined then the devices of all areas are shown.
By default, all pre-built views below are shown:
2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02:00
| Available views | type | Description |
|:----------------|:--------|:-----------------------------------------------------------------------------|
| `light` | object* | View to control all lights and lights of each area. |
| `fan` | object* | View to control all fans and fans of each area. |
| `cover` | object* | View to control all covers and covers of each area. |
| `switch` | object* | View to control all switches and switches of each area. |
| `climate` | object* | View to control climate devices such as thermostats. Seperated by each area. |
| `camera` | object* | View to show all cameras using WebRTC cards. Seperated by each area. |
*) See [View Options ](#view-options ).
#### View Options
For each of the pre-built views, the following options are available:
| name | type | description |
|:---------|:--------|:----------------------------------------------------------------------------------------------|
| `title` | string | Title of the view in the navigation bar. (Shown when no icon is defined or hovering above it. |
| `icon` | string | Icon of the view in the navigation bar. |
| `order` | string | Ordering position of the view in the navigation bar. |
| `hidden` | boolean | Set to `true` to exclude the view from the dashboard |
2023-03-28 01:23:26 -04:00
#### Example
```yaml
2023-04-10 16:06:36 -04:00
strategy:
type: custom:mushroom-strategy
options:
views:
2023-06-14 07:29:18 +02:00
light:
order: 0
title: illumination
switch:
order: 1
hidden: true
icon: mdi:toggle-switch
views: [ ]
2023-03-28 01:23:26 -04:00
```
2023-06-14 07:29:18 +02:00
### Supported domains
The following domains are supported and enabled by default:
2023-04-04 12:46:59 -04:00
2023-06-14 07:29:18 +02:00
* light
* fan
* cover
* switch
* camera
* climate
* media_player
* sensor
* binary_sensor
* default (Miscellaneous)
For these domains, the following options are supported:
| Option | type | Description |
|:---------------|:--------|:---------------------------------------------------------------------------|
| `title` | string | Title of the domain in a view. |
| `showControls` | boolean | Weather to show controls int a view, to switch all entities of the domain. |
| `hidden` | boolean | Set to `true` to exclude the view from the dashboard. |
| `order` | number | Ordering position of the domain entities in a view. |
### Chips
2023-04-04 12:46:59 -04:00

2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02:00
Mushroom strategy has chips that indicate the number of devices which are active for a specific domain.
Only devices of an area as defined in `areas` are counted.
If `areas` is not defined then the devices in all areas are counted.
By default, all chips are enabled.
You can manually configure a weather entity-id to use, and there's also an option to add
more [Mushroom Chips][mushroom-chipsUrl] using `extra_chips` .
**Note: To hide the weather chip, you should hide or disable the entity itself.**
2023-03-28 01:23:26 -04:00
2023-06-14 07:29:18 +02:00
| Available chips | type | Description |
|:-----------------|:------------------|:---------------------------------------------------------------------------------------------------------------|
| `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 navigates to climates view. |
| `weather_entity` | string (optional) | Entity ID for the weather chip to use, accepts `weather.` only. |
| `extra_chips` | array (optional) | List of extra chips to display, see [Mushroom Chips][mushroom-chipsUrl]. |
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:
2023-06-14 07:29:18 +02:00
light:
title: illumination
switches:
hidden: true
icon: mdi:toggle-switch
2023-03-28 01:23:26 -04:00
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:
2023-06-14 07:29:18 +02:00
family_room_id:
name: Family Room
2023-03-28 01:23:26 -04:00
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
2023-06-14 07:29:18 +02:00
kitchen_id:
name: Kitchen
2023-03-28 01:23:26 -04:00
icon: mdi:silverware-fork-knife
icon_color: red
2023-06-14 07:29:18 +02:00
master_bedroom_id:
name: Master Bedroom
2023-03-28 01:23:26 -04:00
icon: mdi:bed-king
icon_color: blue
2023-06-14 07:29:18 +02:00
abias_bedroom_id:
name: Abia's Bedroom
2023-03-28 01:23:26 -04:00
icon: mdi:flower-tulip
icon_color: green
2023-06-14 07:29:18 +02:00
aalians_bedroom_id:
name: Aalian's Bedroom
2023-03-28 01:23:26 -04:00
icon: mdi:rocket-launch
icon_color: yellow
2023-06-14 07:29:18 +02:00
rohaans_bedroom_id:
name: Rohaan's Bedroom
2023-03-28 01:23:26 -04:00
icon: mdi:controller
icon_color: red
2023-06-14 07:29:18 +02:00
hallway_id:
name: Hallway
living_room_id:
name: Living Room
2023-03-28 01:23:26 -04:00
icon: mdi:sofa
2023-06-14 07:29:18 +02:00
front_door_id:
name: Front Door
2023-03-28 01:23:26 -04:00
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
2023-06-14 07:29:18 +02:00
badges: [ ]
2023-03-28 01:23:26 -04:00
cards:
- type: markdown
content: I am cool
```
2023-03-26 19:00:59 -04:00
## Credits
2023-06-14 07:29:18 +02:00
* The cards used are from [Mushroom][mushroomUrl], [Mini graph card][mini-graphUrl] and [WebRTC][webRtcUrl]
* Took inspiration from [Balloob battery strategy][balloobBatteryUrl]
## Contributors
* [DigiLive ](https://github.com/DigiLive )
<!-- Badges References -->
[hacsBadge]: https://img.shields.io/badge/HACS-Default-41BDF5.svg
2023-06-24 10:19:43 +02:00
[releaseBadge]: https://img.shields.io/github/v/release/AalianKhan/mushroom-strategy?include_prereleases
2023-06-14 07:29:18 +02:00
<!-- Other References -->
[hacsUrl]: https://hacs.xyz
[releaseUrl]: https://github.com/AalianKhan/mushroom-strategy/releases
[mushroomUrl]: https://github.com/piitaya/lovelace-mushroom
[mushroom-chipsUrl]: https://github.com/piitaya/lovelace-mushroom/blob/main/docs/cards/chips.md
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
[mini-graphUrl]: https://github.com/kalkih/mini-graph-card
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
[webRtcUrl]: https://github.com/AlexxIT/WebRTC
2023-03-26 19:00:59 -04:00
2023-06-14 07:29:18 +02:00
[balloobBatteryUrl]: https://gist.github.com/balloob/4a70c83287ddba4e9085cb578ffb161f
2023-03-26 19:00:59 -04:00