Your first page

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.

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.

Adding cards to the view

Before you start
Like mentioned in the installation, you need to be able to edit your files. There are a few editors out there, like Visual Studio Code. Its up to you to configure the connection.

Note: YAML is very sensitive for indentation. Make sure everything you do, has the right indentation.

Open your view file

In the guides, we asked you to create a view file called 00-default-view.yaml. Open that file and notice that on top, you have these default lines or something similar:

 title: Home
 path: "home"
 icon: fapro:house-fill
 cards:
     - type: vertical-stack
       cards:
         - type: custom:button-card
           template: hc_header_card
           entity: weather.buienradar
         - type: custom:button-card
           template: hc_title_card
           name: "Welcome Home"
           label: "What are you up to"

From here on out, we can add some cards.

Add a card

Adding a card is really easy. For example we are going to add a light button. You just grab this code:
```
      - type: custom:button-card
        template: hc_light_card
        entity: <your light entity>
```
and paste it underneath the last bit of code label: "what are you up to" already in the 00-default-view.yaml file as shown in step 2.
Refresh the page

Now to see the change you made just go to your dashboard in Home Assistant, press the 3 dots in the right corner and press refresh. That it!

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.

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.

Variables

Many cards are customizable by setting variables. With those variables you can set different colors or enable / disable things, like a slider. In our template list, you can see the different variables that are available for each card.