TileBoard - New dashboard for Homeassistant


Not the screensaver.js. In fact you should never change any code other than config.js and custom.css if you wish to be able to update TileBoard. Just add the code after the definition of CONFIG. Don’t forget to add flickrAlbum and flickrApiKey to CONFIG.


I’m not entire sure what you guys are trying to do but groups can either (all) be horizontal or vertical otherwise it would destroy the grid.


I cant speak for @apt but what im trying to do is stack groups in a way. Not wanting to break the grid function but give the ability to add titles.

For Example

Tile 1
Tile 2
Tile 3

Tile 1
Tile 2
Tile 3

These would all be in the same vertical column but in essence are grouped. At the moment Downstairs and Upstairs would be in separate columns.

If that makes sense @resoai


You can force all groups to stack vertically:


But this would mean that absolutely all groups on all pages would be like that. This is what I used for a HomeKit theme:


Same here with Tado thermostat. All work fine except for changing temperature. Still looking for a fix or workaround, but I might try servicecalls and or scripts if all else fails haha.


So put it after the definition of CONFIG and before where “pages:[” starts?
line 123 below:

Or does it go after the closing CONFIG brace “},” line 122 above?


Function definition goes after closing } of CONFIG.


You could make titles with text inputs. That is how I did it.


That seems like a fairly decent workaround @jimz011 … this is what I was trying to explain @resoai


I’ve noticed when my tablet has been on screensaver mode for a while and I press to deactivate it, my cameras thumbnails don’t always automatically refresh. Today when I clicked from screensaver mode my cameras timestamps displayed 12pm when it was 5pm and I had to close and reload the entire browser to get it to refresh. Do I have to issue a command to the device to tell it to reload the camera thumbs or the entire screen again when deactivating the screen saver? It doesn’t seem to happen within 5 or 10 minutes of the screensaver being active but when its been on for several hours it seems to happen more often. Just curious if anyone else has noticed this or is it something with my tablet? iPad Air 2 running latest iOS release on Safari.


Question about the id: field in the comment below. I am unable to find any id associated to the page entity. I tried adding id: to my page blocks and firing the event but no luck, what am I missing?

/* Example: Open a specific TileBoard page
 * Include a page field in the event_data from Home Assistant
 * that matches the id: of a page in the TileBoard CONFIG
  command: 'open_page',
  action: function(e) {


It is not the id, it is index of the array (starting with 0 for page 1)


We are freezing refreshing of the thumbnails while screensaver is showing because people complained that it crashed older iPads. Once you stop screensaver, thumbnails should refresh within a few mins.


@resoai I was having a think about the device tracking icon, loving the dynamic tile showing the map and the mugshot etc but being a tile its not showing a great amount of detail.

Is it possible to click on a tracking tile and bring up a popup screen (similar to the cameras) showing a bigger map and a legend showing the battery levels, charging state etc ?

Just a thought


Thanks, that worked perfectly :slight_smile:


Did someone looked at the Google Photos API to fetch images from an album and use those for the screensaver?

I’m currently using Android Daydream (Screensaver of Android) with a Google Photos album, and that works fine, but I would prefer to use Tileboard so I can add custom text over the images (basicly, the current time).


I’m trying to use custom.css to move the ‘clickable’ part of the tile to the top-left to the top-right.

here’s the part of my css file

.-theme-homekit .item-clickable {
  height: 11px !important;
  width: 11px !important;
  left: 120px !important;
  top: 11px !important;
  border-radius: 11px !important;

It looks OK with 1x1 tiles, but for wider tiles such as camera tiles, the yellow dot is too far over to the left, for exmaple on ‘landing light’ here:


Is it possible to somehow make it so the ‘.item-clickable’ class is on the right side?


Try this:

.-theme-homekit .item-clickable {
  height: 11px !important;
  width: 11px !important;
  right: 11px !important;
  top: 11px !important;
  border-radius: 11px !important;


Thanks, for some reason my browser (safari) isn’t responding to the right: 11px !important; and it looks the same as if it’s left: 11px !important;

I eventually tried some random googling and got it working by using this CSS:

  position: relative;
  float: right;
  left: -11px !important;

I must admit CSS can seem like some sort of dark art at times, but I’m just glad it’s working :smiley:


Definitely takes a little trial and error at times, glad you got it working!