Show Thuisbord in Home Assistant

Do you already have a tablet with Home Assistant on the wall? Then Thuisbord can appear in one of its dashboards: as a page of its own, or as a card among your other cards. For this there is a version of Thuisbord that is only the screen, at this address:

https://web.thuisbord.app/screen/

This version opens straight as a screen. First it shows a pairing code; as soon as the screen is paired, you see your energy, tasks, shopping and calendar. Signing in and the phone app are not available there: you set everything up with the Thuisbord app on your phone. Other dashboards that can show a web page work the same way.

Thuisbord gets no access to Home Assistant this way: Home Assistant only shows the page. Thuisbord does not receive meter readings through it either; how that works is in Connecting the meter with Home Assistant.

What you need#

• Home Assistant, with a dashboard you can edit.
• A tablet or other device that shows that dashboard.
• The Thuisbord app on your phone, to pair the screen.

The card that shows a web page is called Webpage; it used to be called the iframe card.

A dashboard of its own for Thuisbord#

For a tablet that shows only Thuisbord. Thuisbord then fills the whole screen and has its own entry in the Home Assistant sidebar.

1. Go to Settings › Dashboards and choose Add dashboard.

2. Choose Webpage.

3. Paste Thuisbord's address into URL and choose Next:

   text

   https://web.thuisbord.app/screen/
   

4. Enter a name under Title, for example Thuisbord. Leave Add to sidebar on and choose Create.

5. Open the new dashboard on the tablet, from the sidebar. Thuisbord shows a pairing code: pair the screen as described below.

Thuisbord in a dashboard you already have#

Put Thuisbord in a view of its own with the layout Panel (single card). The card then fills the whole view.

1. Open the dashboard and, at the top right, choose Edit dashboard, the pencil. If you first see the Edit dashboard dialog, choose Take control in the three-dots menu. Home Assistant then no longer updates that dashboard by itself. If you do not want that, make a dashboard of its own as above.

2. At the top, next to the names of the views, choose the + button.

3. Enter a name under Title, for example Thuisbord. Under Layout, choose Panel (single card) and choose Save.

4. In the new view, at the bottom right, choose Add card.

5. Choose By card, search for Webpage and choose that card.

6. Paste Thuisbord's address into URL:

   text

   https://web.thuisbord.app/screen/
   

   Aspect ratio may stay empty: in a view with Panel (single card) the card fills the whole view. Choose Save.

7. At the top right, choose Done.

Prefer the card's code editor? Then the card looks like this:

type: iframe
url: https://web.thuisbord.app/screen/

As a card among other cards#

You can also put the Webpage card in a view with another layout, among your other cards. Thuisbord is made for a whole screen, so give the card room. In the layout Sections (default) you set its size on the card's Layout tab. In the other layouts you do that with Aspect ratio, for example 16:9.

Pair every device once#

Every device that shows the dashboard is a screen of its own to Thuisbord. You pair it once, like any other screen:

1. Open the dashboard with Thuisbord on the tablet. You see Pair this screen, with a Pairing code of six characters. Below it you see until when the code is valid.
2. Open the Thuisbord app on your phone and go to Settings › Screens › Pair a screen.
3. Enter the six characters in Code on the screen. If you like, give the screen a name under Name of the screen, for example Hall tablet. Tap Pair.
4. As soon as the screen is paired, the code disappears and the dashboard shows your screen.

A pairing code is valid for 10 minutes. If it expires before you enter it, the screen shows a new one by itself.

If you show the same dashboard on two tablets, you pair each of them separately. There are two reasons:

• Every screen has a key of its own. If you lose a tablet, you unpair just that one. The other screens keep working.
• A browser keeps a page in a dashboard apart. What the browser stores for Thuisbord in a dashboard is separate from what it stores when you simply open the address. If you already paired the tablet by opening the address in the browser on its own, Thuisbord in Home Assistant still asks for a new code.

If you also open the dashboard on your phone, for example in the Home Assistant app, Thuisbord shows a pairing code there too. Pair only the devices you use as a screen; on your phone you have the Thuisbord app.

There is more about pairing in Pairing a screen.

Rename or unpair#

On your phone, Settings › Screens lists every paired screen under Paired screens, with when it was last seen. A screen in Home Assistant without a name is called Screen in a browser there.

• With Rename you give the screen a name, so you can tell the tablets apart.
• With Unpair you disconnect the screen. It then no longer shows your household's data, but a new pairing code.

A pairing code on the screen again#

Some browsers clear what a page in a dashboard has stored after a while, especially Safari on an iPad. Thuisbord then no longer knows that the screen was paired and shows a new pairing code. Pair the screen again, as above. If the old screen is still listed under Paired screens, unpair it with Unpair.

Tips for a tablet on the wall#

• Let Thuisbord fill the whole screen, with a dashboard of its own or a view with the layout Panel (single card).
• Hide the Home Assistant sidebar. On the tablet, open your profile in Home Assistant, at the bottom of the sidebar. Choose This browser, or This mobile app in the Home Assistant app, and turn on Always hide the sidebar.
• Let the tablet open Thuisbord straight away. Home Assistant advises giving a wall tablet a user of its own. Then, in that user's profile, under Appearance, choose the dashboard with Thuisbord at Dashboard.
• Keep the screen on. Keep the tablet on its charger and, in the tablet's settings, turn off that the screen goes off after a while.