Skip to content
This repository was archived by the owner on Dec 31, 2025. It is now read-only.
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions docs/docs/installation/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand Down Expand Up @@ -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.

Expand All @@ -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"
Expand All @@ -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.
12 changes: 7 additions & 5 deletions docs/docs/installation/downloads.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
```
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/installation/uninstall.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/usage/cards/hc_fan_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/usage/cards/hc_glance_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.**

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/usage/cards/hc_header_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/usage/cards/hc_light_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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).
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).
10 changes: 5 additions & 5 deletions docs/docs/usage/cards/hc_media_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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`. |
8 changes: 4 additions & 4 deletions docs/docs/usage/cards/hc_navigation_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -24,8 +24,8 @@ This card is also used for the security card. Use the tabs beneath to switch bet
entity: <entity for label>
icon: <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
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/usage/cards/hc_scene_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/usage/cards/hc_security_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/usage/cards/hc_weather_card.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions docs/docs/usage/cards/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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:** <span class="entry-type-ha"></span> Home Assistant Entry - <span class="entry-type-hacasa"></span> HaCasa variable
10 changes: 5 additions & 5 deletions docs/docs/usage/first-page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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.

Expand Down