diff --git a/docs/docs/installation/configuration.md b/docs/docs/installation/configuration.md index de96f9d..8029406 100644 --- a/docs/docs/installation/configuration.md +++ b/docs/docs/installation/configuration.md @@ -12,7 +12,7 @@ Now that we have downloaded and placed the files, its time to do some configurat ## Load the Theme 1. Open your `configuration.yaml` file. This file is located in the root of your Home Assistant instance. -2. Add the following code to the top of your file to load frontend themes. This is a part of Home Assistant itself and not HaCasa's. Place it underneath `default_config:` if you have that. +2. Add the following code to the top of your file to load frontend themes if it is not already present. This is a part of Home Assistant itself and not HaCasa's. Place it underneath `default_config:` if you have that. ```yaml @@ -21,7 +21,7 @@ Now that we have downloaded and placed the files, its time to do some configurat themes: !include_dir_merge_named themes ``` -4. Add the next part of code also to the `configration.yaml` to enable YAML mode for the new dashboard: +3. Add the next part of code also to the `configuration.yaml` to enable YAML mode for the new dashboard: ```yaml lovelace: @@ -49,7 +49,8 @@ Now that we have downloaded and placed the files, its time to do some configurat show_in_sidebar: true filename: "dashboard/HaCasa/main.yaml" ``` -As you can see, we load the needed intergrations and add a new dashboard called HaCasa and because we set the `mode` to `storage` (underneath `lovelace`), we don't remove any other dashboards you created with UI. +Do not forget to replace _/**hacsfiles**/_ with your local path to the HACS files (_for example: /www/community/_). +As you can see, we load the needed integrations and add a new dashboard called HaCasa and because we set the `mode` to `storage` (underneath `lovelace`), we don't remove any other dashboards you created with UI. 3. Save the file and **Restart** Home Assistant. @@ -75,7 +76,7 @@ We have two teams available by default. The gold (and original) one and the new cards: - type: custom:button-card template: hc_header_card - entity: weather.buienradar + entity: weather.buienradar # Need https://www.home-assistant.io/integrations/buienradar/ to display weather, or replace with your local weather integration - type: custom:button-card template: hc_title_card name: "Welcome Home" @@ -88,7 +89,7 @@ We have two teams available by default. The gold (and original) one and the new 1. Open your Home Assistant webpage. 2. Navigate to the new HaCasa dashboard. -3. Verify that the header card, alarm card and scene card are displayed correctly like the image below (based on peachy theme): +3. Verify that the header card and welcome card are displayed correctly like the image below (based on peachy theme): ![Example view Light](/img/other/example_view_light.jpeg#light-mode-only)![Example view Dark](/img/other/example_view_light.jpeg#dark-mode-only) If everything works as expected, you are ready to start customizing your dashboard πŸŽ‰! Explore the cards section in the menu for more options. diff --git a/docs/docs/installation/downloads.md b/docs/docs/installation/downloads.md index b4d2f10..1c987f3 100644 --- a/docs/docs/installation/downloads.md +++ b/docs/docs/installation/downloads.md @@ -15,8 +15,8 @@ But don't worry, we'll guide you through it πŸ˜„ Ensure you have the following: - A running [Home Assistant](https://www.home-assistant.io/) instance. -- Basic knowledge of Home Assistant like chaning your `configuration.yaml` file. -- Preferrably [HACS](https://hacs.xyz) installed which is needed for installing the cards. +- Basic knowledge of Home Assistant like changing your `configuration.yaml` file. +- Preferably [HACS](https://hacs.xyz) installed which is needed for installing the cards. - You have access to your config folder of HA. It doesn’t matter which way this is. You will need this to upload and change files in your configuration. ## Backup Your Home Assistant @@ -65,14 +65,16 @@ dashboard/ β”‚ └── example: 00-default_view.yaml └── main.yaml themes/ -└── hacasa/ +└── HaCasa/ β”œβ”€β”€ hacasa-gold.yaml - └── hacasa-peachy.yaml + └── hacasa-peach.yaml www/ └── images/ - β”œβ”€β”€ idle-media.gif + β”œβ”€β”€ music/ + β”‚ └── idle-media.gif └── weather/ β”œβ”€β”€ sunny.svg + β”œβ”€β”€ ... └── bg-sunny.svg configuration.yaml ``` diff --git a/docs/docs/installation/uninstall.md b/docs/docs/installation/uninstall.md index 3f1cca8..8df293d 100644 --- a/docs/docs/installation/uninstall.md +++ b/docs/docs/installation/uninstall.md @@ -9,7 +9,7 @@ nav_order: 1.5 In some rare cases, you might want to uninstall the theme. Well, here are the instructions for that! -1. Go to the root folder of your Home Assistant and remove the folder `dashboard` or, if you have multiple dashboards, remove the `HaCasa` folder inside of there. +1. Go to the root folder of your Home Assistant and remove the folder `dashboard` or, if you have multiple dashboards, remove the `HaCasa` folder inside there. 2. Remove, underneath the `themes` folder the `HaCasa` folder. 3. Remove the `custom_icons` folder. 4. Remove the `hacasa_img` folder inside `www`. diff --git a/docs/docs/usage/cards/hc_fan_card.md b/docs/docs/usage/cards/hc_fan_card.md index 5d020ef..31194ce 100644 --- a/docs/docs/usage/cards/hc_fan_card.md +++ b/docs/docs/usage/cards/hc_fan_card.md @@ -7,7 +7,7 @@ parent: Cards # Fan Card -With the `hc_fan_card` you can control your fan. It has the option to add a oscillation button and a slider to set the speed. The fan icon has a little spinning animation. +With the `hc_fan_card` you can control your fan. It has the option to add an oscillation button and a slider to set the speed. The fan icon has a little spinning animation. ![Climate Card Light](../../../assets/images/cards/hc_fan_card/fancard_light.png) diff --git a/docs/docs/usage/cards/hc_glance_card.md b/docs/docs/usage/cards/hc_glance_card.md index ec213e6..8352f05 100644 --- a/docs/docs/usage/cards/hc_glance_card.md +++ b/docs/docs/usage/cards/hc_glance_card.md @@ -8,7 +8,7 @@ parent: Cards # Glance Card The `hc_glance_card` is used to display a summary of your entities. It's configured to show the state of the entity and the icon. -You can add minimun 1 and maximum 3 entities. The card will automatically adjust the placement of the entities. +You can add minimum 1 and maximum 3 entities. The card will automatically adjust the placement of the entities. **Note: The card will show the name you have given the entity. If you want to change the name, you must do this in the entity configuration from HA self.** diff --git a/docs/docs/usage/cards/hc_header_card.md b/docs/docs/usage/cards/hc_header_card.md index f46c01c..3086052 100644 --- a/docs/docs/usage/cards/hc_header_card.md +++ b/docs/docs/usage/cards/hc_header_card.md @@ -7,7 +7,7 @@ parent: Cards The `hc_header_card` is used on top of your dashboard. -The header card will always show the weather conditions and the date. Its possible to hide the air quality and person when you don't use that variable. +The header card will always show the weather conditions and the date. It's possible to hide the air quality and person when you don't use that variable. ![Header Card Light](../../../assets/images/cards/hc_header_card/headercard_light.png) diff --git a/docs/docs/usage/cards/hc_light_card.md b/docs/docs/usage/cards/hc_light_card.md index 6c351d7..39ae9c3 100644 --- a/docs/docs/usage/cards/hc_light_card.md +++ b/docs/docs/usage/cards/hc_light_card.md @@ -5,7 +5,7 @@ parent: Cards --- # Light Card -The `hc_light_card` is used to turn on and off a light. You have the option to show or hide the bightness slider. +The `hc_light_card` is used to turn on and off a light. You have the option to show or hide the brightness slider. ![light Card Light](../../../assets/images/cards/hc_light_card/lightcard_light.png) @@ -34,4 +34,4 @@ The `hc_light_card` is used to turn on and off a light. You have the option to s More explanation about how some things are working. ### Brightness and slider -The slider and brightness will only show if the light entity emmits a brightness attribute. If not, then the slider won't be visible, even if you have `enable_slider: true` and the brightness percentage will just be the state of the light (on/off). \ No newline at end of file +The slider and brightness will only show if the light entity emits a brightness attribute. If not, then the slider won't be visible, even if you have `enable_slider: true` and the brightness percentage will just be the state of the light (on/off). \ No newline at end of file diff --git a/docs/docs/usage/cards/hc_media_card.md b/docs/docs/usage/cards/hc_media_card.md index e340fea..cf76126 100644 --- a/docs/docs/usage/cards/hc_media_card.md +++ b/docs/docs/usage/cards/hc_media_card.md @@ -7,7 +7,7 @@ parent: Cards # Media Card -**The hc_media_card is not fully done yet. It can be used, but lacks some features like selecting the player. Its just a simple card to control the music at this moment.** +**The hc_media_card is not fully done yet. It can be used, but lacks some features like selecting the player. It's just a simple card to control the music at this moment.** With the `hc_media_card` you can control your media. It can show the album art as background and the buttons provide to control the media. @@ -23,7 +23,7 @@ With the `hc_media_card` you can control your media. It can show the album art a ## Variables -| Variable | Default | Required | Description| -|----------|---------|----------|------------| -| show_background_art | true | No | If true, the background will show the album art. If nothing is payhing, a animated GIF will play. | -| background_color | var(--color-purple) | No | The color will be used for the background if `hc_show_background_art` if `false`. | +| Variable | Default | Required | Description | +|----------|---------|----------|---------------------------------------------------------------------------------------------------| +| show_background_art | true | No | If true, the background will show the album art. If nothing is playing, a animated GIF will play. | +| background_color | var(--color-purple) | No | The color will be used for the background if `hc_show_background_art` if `false`. | diff --git a/docs/docs/usage/cards/hc_navigation_card.md b/docs/docs/usage/cards/hc_navigation_card.md index 0058d7c..a0064d5 100644 --- a/docs/docs/usage/cards/hc_navigation_card.md +++ b/docs/docs/usage/cards/hc_navigation_card.md @@ -7,9 +7,9 @@ parent: Cards # Navigation Card -**This card is not fully developed and has a more advanced configuration for determining the color based on the state. Any questions or issues can be asked in the [Discord server](https://discord.gg/7yt64Tf) or at [Github](https://discord.gg/7yt64Tf).** +**This card is not fully developed and has a more advanced configuration for determining the color based on the state. Any questions or issues can be asked in the [Discord server](https://discord.gg/7yt64Tf) or at [GitHub](https://discord.gg/7yt64Tf).** -The `hc_navigation_card` can be used to navigate to certain pages in your dashboard. Although, because HaCasa is so versitile, you can also use this card as a action card without navigation or give it another hold action. +The `hc_navigation_card` can be used to navigate to certain pages in your dashboard. Although, because HaCasa is so versatile, you can also use this card as an action card without navigation or give it another hold action. ![Navigation Card Light](../../../assets/images/cards/hc_navigation_card/navigationcard_light.png) @@ -24,8 +24,8 @@ This card is also used for the security card. Use the tabs beneath to switch bet entity: icon: variables: - label_prefix: 'On - ' # Prefix can by anything but the state of the entity will be added after it. - color: var(--color-orange) # color of the card when the state underneath is met (in this case, higher then 0) + label_prefix: 'On - ' # Prefix can be anything but the state of the entity will be added after it. + color: var(--color-orange) # color of the card when the state underneath is met (in this case, higher than 0) state: - value: 0 # Can also be 'on' operator: '>' # if value above is 'on', remove this line diff --git a/docs/docs/usage/cards/hc_scene_card.md b/docs/docs/usage/cards/hc_scene_card.md index 9f27e7c..ab72069 100644 --- a/docs/docs/usage/cards/hc_scene_card.md +++ b/docs/docs/usage/cards/hc_scene_card.md @@ -14,9 +14,9 @@ Adds the scenes card. It switches between the scenes you selected. For now, it h ## Usage ### Input selector needed -This card used a input selector to determine which scene is active. It does this based on the name of your scene. Its important that the options you add to the input selector have the same name as the name you give in the card. +This card used an input selector to determine which scene is active. It does this based on the name of your scene. Its important that the options you add to the input selector have the same name as the name you give in the card. -You'll also need a automation to change the scene when the input selector changes. +You'll also need an automation to change the scene when the input selector changes. There are a lot of guides online on how to do this. diff --git a/docs/docs/usage/cards/hc_security_card.md b/docs/docs/usage/cards/hc_security_card.md index d3d2ef5..402d19d 100644 --- a/docs/docs/usage/cards/hc_security_card.md +++ b/docs/docs/usage/cards/hc_security_card.md @@ -7,7 +7,7 @@ parent: Cards # Security Card -The `hc_security_card` is used for enabling or disabling your alarm. It's configured to set the `Arm Away`, `Arm Home` or `Disarmed`. When the alarm is triggered, the card will turn to red and the icon will flash constatly. +The `hc_security_card` is used for enabling or disabling your alarm. It's configured to set the `Arm Away`, `Arm Home` or `Disarmed`. When the alarm is triggered, the card will turn to red and the icon will flash constantly. ![Security Card Light](../../../assets/images/cards/hc_security_card/securitycard_light.png) diff --git a/docs/docs/usage/cards/hc_weather_card.md b/docs/docs/usage/cards/hc_weather_card.md index f2c100f..b86631f 100644 --- a/docs/docs/usage/cards/hc_weather_card.md +++ b/docs/docs/usage/cards/hc_weather_card.md @@ -54,7 +54,7 @@ Before you can use this card, you need to have a custom sensor that gets the for Now, you should have a new sensor called `sensor.weather_entity_forecast` which you can use as entity in this card. -**Note:** If you want to use another weather provider like Buienradar or Accuweather, just replace `weather.home` with your desired intergration. +**Note:** If you want to use another weather provider like Buienradar or Accuweather, just replace `weather.home` with your desired integration. ### View code diff --git a/docs/docs/usage/cards/index.md b/docs/docs/usage/cards/index.md index 8a4acaf..7a9bb56 100644 --- a/docs/docs/usage/cards/index.md +++ b/docs/docs/usage/cards/index.md @@ -10,7 +10,7 @@ We made HaCasa easy to use but you need to know a few basics. {: .fs-6 .fw-300 } ## Variables and entries -All of the cards are using the default entries from Home Assistant and variables set in the template cards from HaCasa. Almost most of the cards require at least one of them and sometimes both. +All the cards are using the default entries from Home Assistant and variables set in the template cards from HaCasa. Almost most of the cards require at least one of them and sometimes both. For example, the light cards requires you to add a `light entity` which you can enter through the `entity:` entry. @@ -31,7 +31,7 @@ It is also possible to change the name of the light by giving the `name:` entry, ``` ![Light Button Default](../../../assets/images/lightbutton-name.png) -With variables, you can change certain aspects in the card, eg. enabling the slider +With variables, you can change certain aspects in the card, e.g. enabling the slider ```yaml - type: custom:button-card @@ -43,6 +43,6 @@ With variables, you can change certain aspects in the card, eg. enabling the sli ``` ![Light Button Default](../../../assets/images/lightbutton-slider.png) -Every card you will see on this documentation page have all the needed and optional variables described. Based on round color, you can see if its a Home Assistant default Entry or a variable from HaCasa. +Every card you will see on this documentation page have all the needed and optional variables described. Based on round color, you can see if it's a Home Assistant default Entry or a variable from HaCasa. **Legend:** Home Assistant Entry - HaCasa variable \ No newline at end of file diff --git a/docs/docs/usage/first-page.md b/docs/docs/usage/first-page.md index 6d3de35..32dbb65 100644 --- a/docs/docs/usage/first-page.md +++ b/docs/docs/usage/first-page.md @@ -9,9 +9,9 @@ nav_order: 2.1 Now, the most exciting part begins. Creating your first page. Actually we're going to edit your first page since you had to create a page while installing HaCasa. There are 2 ways to go. -You can create multiple views for different types like lights, security, switches or livingroom, bathroom and bedroom OR you can put everything on one page. Either way, HaCasa will work just fine so its totally up to you. +You can create multiple views for different types like lights, security, switches or living room, bathroom and bedroom OR you can put everything on one page. Either way, HaCasa will work just fine so its totally up to you. -If you want to use multiple views remember that the file order of the views will determain which view comes first. So for example `01-home.yaml` will be shown first and `02-lights.yaml` second. Just give your files a logical name. +If you want to use multiple views remember that the file order of the views will determine which view comes first. So for example `01-home.yaml` will be shown first and `02-lights.yaml` second. Just give your files a logical name. ## Adding cards to the view @@ -33,7 +33,7 @@ Like mentioned in the installation, you need to be able to edit your files. Ther cards: - type: custom:button-card template: hc_header_card - entity: weather.buienradar + entity: weather.buienradar # Need https://www.home-assistant.io/integrations/buienradar/ to display weather, or replace with your local weather integration - type: custom:button-card template: hc_title_card name: "Welcome Home" @@ -44,7 +44,7 @@ From here on out, we can add some cards. 3. **Add a card** - Adding a card is really easy. For example we are going to add a light button. You just grab this code: + Adding a card is really easy. For example, we are going to add a light button. You just grab this code: ```yaml - type: custom:button-card @@ -60,7 +60,7 @@ Now to see the change you made just go to your dashboard in Home Assistant, pres ## Explanation -So we just added a card, and it works! Great, but how? And why? Well, HaCasa uses something called `templates` which is a part of the `custom:button-card` intergration. Practically what happends is that we already created all the cards you will see later on and the only thing you have to do, is show them on the dashboard with that piece of code you added. +So we just added a card, and it works! Great, but how? And why? Well, HaCasa uses something called `templates` which is a part of the `custom:button-card` integration. Practically what happened is that we already created all the cards you will see later on and the only thing you have to do, is show them on the dashboard with that piece of code you added. Every card we create uses the `name`,`label` and `entity` values from HA itself. We use those values to fill our information we want to show by default without you thinking about it.