TileBoard

This is a simple yet highly customizable dashboard for Home Assistant. The main goal of this project was to create a simple dashboard with an easy way to edit and add functionality with minimum knowledge of javascript and html. Should you have any ideas or questions please post them on the home-assistant forum or create an issue on github.

Links

• Discussion on Home Assistant Community
• Demo Video

Screenshots

How to use

There are a couple of alternative ways of running TileBoard. The options are listed in the recommended order. First being the easiest and the most user friendly.

Run as a Home Assistant addon

By far the easiest option that also provides auto-update through Home Assistant Supervisor.

Installation instructions: refer to https://github.com/resoai/TileBoard-addon/blob/main/README.md#installation

Check the instructions within the addon on how to edit and customize the configuration.

Run within a standalone server through Docker

Runs a standalone local HTTP server, independently from the Home Assistant itself.

Setup instructions: refer to https://github.com/resoai/TileBoard/blob/master/docker/README.md

Run within the public Home Assistant www directory

1. Download the latest release zip file (
   Tileboard.zip
   ) from https://github.com/resoai/TileBoard/releases and unpack to a directory of your choice. (Alternatively you can checkout the repo and build the app manually. Check CONTRIBUTING for more info.)
2. In chosen directory rename
   config.example.js
   to
   config.js
   and adjust it for your needs
3. Optionally create an empty
   styles/custom.css
   file. Everything will work without it but there will be a network request error logged in the console which can be annoying to some.
4. Create a directory called
   tileboard
   inside
   www
   directory in HA's config path and copy all unpacked files there.
5. TileBoard will be available at
   http://HASS_IP:8123/local/tileboard/index.html
   and will prompt you for your login credentials after restarting Home Assistant.

!!!WARNING!!!

Files served from the

folder (

/local/

url), aren't protected by the Home Assistant authentication. Files stored in this folder, if the URL is known, can be accessed by anybody without authentication. Please make sure that your HA instance is not exposed via Internet or at least that long-lived token is not hardcoded in the config.

Configure

will initialize a global CONFIG object. If you want to have several config files, you can create another one next to

config.js

and name it for example

bedroom.js

. The specific config will be available at

http://HASS_IP:8123/local/tileboard/index.html?config=bedroom

.

This config object has the following fields:

Pages

Page object can have the following fields:

Tile Groups

We divide tiles (cells) into groups on every page. Group object can have the following fields:

Tiles

Tile Object. Click here for some real-life examples

Every anonymous function will call with context

At the moment following entity types have been implemented:

Example of slider config used for LIGHT:

Supported weather fields

@/& Prefixes

As you may notice that we use @/& prefixes to get a value inside objects (entities). @ is relative to the current entity (@attributes.friendly_name) and & is for global (&sensor.kitchen_temp.state). This may not work everywhere, but you may give it a go. Read more in our wiki article.

Events

Events can be fired from Home Assistant to control TileBoard. Useful for automation to do things like opening a camera view if it detects motion, or turning the screen off on a tablet at night or when everyone leaves.

Events in HomeAssistant must be fired with

as the event type, and a

command

included in the event data.

Example to fire an event in a Home Assistant automation. This example will make 'TileBoard' return to page 0 when a specific

state change from

off

to

on

. Tip: The page number is determinate by the order of the pages in your TileBoard

CONFIG

file, the first one is

0

.

Notifications

TileBoard has built-in support for toast notification popups in the lower right corner. To set them up, add the following to

in

CONFIG

:

Example to fire a notification in a Home Assistant automation. This example will fire a persistent red notification on TileBoard when a specific

state change from

on

to

off

.

• Tip: To remove the persistent notification, resend the same one (or another one) with the same
  id:
  with the
  lifetime: 1
  added at the end of the
  event_data
  .*

: Notification ID. Sending multiple notifications with the same

id

will overwrite each other.

: Type of notification (for style purposes). Valid types are

error

,

info

,

success

,

warning

: Length of time (in seconds) for the notification to persist before automatically dismissing. Leave a lifetime out of the event_data for persistent messages.

Custom CSS Styles

Several classes are added to each tile depending on the type of tile and state. Custom CSS styles can be applied by creating a

file in the

styles

directory. Tip: If no style is applied after adding the file, make sure to disable cache in the browser as it may cache the previous empty

custom.css

file for a while.

Tablet and mobile configuration

For the tablet configuration use

custom theme and reduce padding. For the mobiles check out wiki article.

License

MIT License