diff --git a/Home.md b/Home.md index 52cbd14..1f35a9d 100644 --- a/Home.md +++ b/Home.md @@ -2,83 +2,110 @@ ## Prerequisites -You need to install these cards before using this strategy: +Mushroom dashboard strategy and dependencies are available in [HACS][hacsUrl] (Home Assistant Community Store). +Install HACS if you don't have it already. +For assistance, you can follow the [HACS Installation Guide](https://hacs.xyz/docs/setup/prerequisites). + +You need to install the following HACS integrations before you can use this strategy. +Open the links below and follow the installation instructions or use the badges to open the HACS repository at your Home +Assistant instance directly. - [Mushroom cards][mushroomUrl] -- [Mini graph card][mini-graphUrl] -## HACs + [![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsMushroomUrl] -Mushroom dashboard strategy is available in [HACs][hacsUrl] (Home Assistant Community Store). +- [Mini graph card][miniGraphUrl] -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. + [![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsMiniGraphUrl] + +## HACS + +Click the badge below. + +[![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsStrategyUrl] + +or ... + +1. Open HACS in Home Assistant. +2. Go to the "Frontend" section. +3. Click the button with the `+` icon. +4. Search for "Mushroom dashboard" and install. ## Manual - 1. Download `mushroom-strategy.js` file from the [`dist`](https://github.com/AalianKhan/mushroom-strategy/tree/main/dist) directory. -2. Put `mushroom-strategy.js` file into your `config/www` folder. + +2. Save this file into your `config/www` folder. + 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`. - **Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_ - - **Using YAML:** Add the following code to the `lovelace` section. - ```yaml - resources: - - url: /local/mushroom-strategy.js - type: module - ``` + +>[!NOTE] +>If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_. + + 1. **Using UI:**: Click the badge... + + [![Open your Home Assistant instance and show your dashboard resources.][resourcesBadge]][resourcesUrl ] + + or... + + - Go to _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ + to `/local/mushroom-strategy.js` → Set _Resource type_ to `JavaScript Module`. + + 2. **Using YAML:** Add the following code to the `lovelace` section. + ```yaml + resources: + - url: /local/mushroom-strategy.js + type: module + ``` + # Basic Setup + To add Mushroom Strategy to a dashboard: 1. In the UI of the dashboard, click the three dots in the top right corner. 2. Click _Edit Dashboard_. -3. Click 3 dots again -4. Click `Raw configuration editor` +3. Click 3 dots again. +4. Click `Raw configuration editor`. 5. Add the following lines: + ```yaml + strategy: + type: custom:mushroom-strategy + views: [] + ``` -```yaml -strategy: - type: custom:mushroom-strategy -views: [] +>[!NOTE] +>You may see the following error: + +``` + Error loading the dashboard strategy: + Error: Timeout waiting for strategy + element ||-strategy-mushroom-strategy to + be registered ``` -> [!NOTE] -> You may see the following error -``` -Error loading the dashboard strategy: - Error: Timeout waiting for strategy - element ||-strategy-mushroom-strategy to - be registered -``` -This is mainly because of cache or HACs didn't create a reference. -Try clearing the cache on your browser and redownloading from HACs. +This is mainly because of cache or HACS didn't create a reference. +Try clearing the cache on your browser and re-downloading from HACS. -If it still doesn't work, you will have to add a reference to -mushroom-strategy.js in the Dashboard. There are two ways to do that: +If it still doesn't work, please consult guide +[How to solve: Error loading the dashboard strategy](https://github.com/AalianKhan/mushroom-strategy/discussions/90). -- Using UI: - Settings → Dashboards → More Options icon (3 dots) → Resources → Add Resource → - Set Url to `/hacsfiles/mushroom-strategy/mushroom-strategy.js` - Set Resourcetype to `JavaScript-module`. + - Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile +[hacsUrl]: https://hacs.xyz -- Using YAML: - Add following code to lovelace section. -```yaml - resources: - - url: /hacsfiles/mushroom-strategy/mushroom-strategy.js - type: module -``` +[hacsBadge]: https://my.home-assistant.io/badges/hacs_repository.svg -Use `/local/mushroom-strategy.js` as url if you followed the manual installation instructions. +[resourcesBadge]: https://my.home-assistant.io/badges/lovelace_resources.svg + +[resourcesUrl]: https://my.home-assistant.io/redirect/lovelace_resources [mushroomUrl]: https://github.com/piitaya/lovelace-mushroom -[mini-graphUrl]: https://github.com/kalkih/mini-graph-card -[hacsUrl]: https://hacs.xyz \ No newline at end of file + +[hacsMushroomUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=piitaya&repository=lovelace-mushroom&category=frontend + +[miniGraphUrl]: https://github.com/kalkih/mini-graph-card + +[hacsMiniGraphUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=kalkih&repository=mini-graph-card&category=frontend + +[hacsStrategyUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=AalianKhan&repository=mushroom-strategy&category=frontend