How To: All-in-one Home Assistant and Touch Panel for less than $150

By default, Home Assistant has a built in web server.  To utilize it, you simply need to create a folder for the directory.  To do this:

Connect to your Pi via SSH

Navigate to the root directory

cd /

Navigate to the Home Assistant directory

cd usr/share/hassio/homeassistant

Create a new directory ‘www’

sudo mkdir www

Open up new directory by navigating to it like before

cd www

Clone directory (https://github.com/resoai/TileBoard)

sudo git clone https://github.com/resoai/TileBoard tileboard

Navigate to new tileboard directory

cd tileboard

Duplicate and rename example config

sudo cp config.example.js config.js

Reboot raspberry pi to initiate new web server

sudo reboot

Now that we have Tileboard installed, it’s time to make some basic configuration changes to ensure it can connect to our Home Assistant.  To start, wait a few minutes after your last reboot and navigate back to the Home Assistant front-end
http://raspberrypi:8123

(note: if after a 5 minute wait, you still can’t connect and/or your touch screen isn’t booting to the desktop, simply unplug and plug back in your pi.  There’s a chance it had an issue compiling the new build)

First we need to create a long-lived access token for Tileboard to use.  Navigate to your name on the right side

Scroll to the bottom and create a new token.  Name it tileboard.  Copy it to notepad and leave it on your clipboard for the next step.

Navigate to Configurator on the left.

This is now a full text editor for your Home Assistant.  You will need this to expand upon your configuration.yaml file, as most devices and automations are added this way.

Click the folder in the top left to open your folder structure

If you want to poke around, you can see your configuration.yaml, which is the core of Home Assistant.  You can also see automations and various other files that you will learn as you dig deeper. 

For now, scroll down to “www” and open that, then open your new “tileboard” and click on “config.js”.

This will open the configuration file for tileboard.  You can click outside of the directory to close it and see the config file.

We are going to make some small changes to get it connected to our Home Assistant.  Later on we’ll adjust the actual buttons, but for now we’ll just do basic config settings.

Start by adding your Auth Token from before.  Replace

authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)

with

authToken: "YOUR_TOKEN",

DON’T FORGET THE COMMA

Next we’re going to adjust the visuals to fit our 7in touch panel.  This includes entitySize, tileSize, and scaling down our header.

First, sizes.  Replace:

entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,

with

entitySize: ENTITY_SIZES.SMALL, //SMALL, BIG are available
tileSize: 70,

Next, scale down the header. We do this by changing the padding (space around the text). Here is the header by default

header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
      styles: {
         padding: '30px 130px 0',
         fontSize: '28px'
      },
      right: [],
      left: [
         {
            type: HEADER_ITEMS.DATETIME,
            dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
         }
      ]
   },

The only thing we need to edit is the padding, so update the padding setting to

padding: '5px 15px 10px',

You can also add a screensaver by uncommenting it out.  You do this by deleting the “/*” in 

/*screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration

and the “*/” at the end of the block:

},/*

Once you delete these, the color will change from the block to show that it is enabled. The resulting block should look like this:

screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
      timeout: 300, // after 5 mins of inactive
      slidesTimeout: 10, // 10s for one slide
      styles: { fontSize: '40px' },
      leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
      slides: [
         { bg: 'images/bg1.jpeg' },
         {
            bg: 'images/bg2.png',
            rightTop: [ // put text to the 2nd slide
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: 'Welcome to the TileBoard',
                  styles: { fontSize: '40px' }
               }
            ]
         },
         { bg: 'images/bg3.jpg' }
      ]
   },

Hit the SAVE button on the top right.

Your base configuration is done!  You won’t be able to control anything quite yet, but you can now test your panel.  If you take a look through some of the settings, you’ll see some changes you may want to make like the theme and timeFormat.  I used Transparent for my theme.

Now that you’ve told Tileboard where to look, you can test it out by visiting it from the same computer you were using to configure it.  Create a new tab and visit

http://raspberrypi:8123/local/tileboard/index.html

You should see your new touch panel! 

It’s going to look funny, but that’s okay.  Now we know it works!  Don’t worry about the updater error, we’ll be removing that section later on.  You’ll be able to use this to preview your touchpanel without having to actually restart it.

Using your touchpanel, open a browser and test the link.  Also, test the following link to ensure it is running locally:

http://localhost:8123/local/tileboard/index.html

This is the link we will be using on the touchpanel to ensure local stability.