TileBoard - New dashboard for Homeassistant


customStyles is for CSS. I’m not really sure what you are trying to do but, tileSize: XX controls cell size of the tile (1x1) and entitySize: ENTITY_SIZES.SMALL controls the size of the entity icon within the tile. Both options can be defined both globaly and for each page individually.


Please update the code and simply do not define sliders and that should do the trick.


Works great, thanks!


Hi there, I know this is an old post, but I’m using a 7 inch tablet and I’d like to do exactly this, but I’m having trouble finding the right place/file to comment out the header data. Could you point me in the right direction?



if anyone has the same problem, I managed to solve the issue by forcing the tablet to keep up with wifi and CPU even when screen is off (it’s part of the setting of Fully browser). Works great now so the issue was indeed the tablet disconnecting when the screen was off. Thanks a lot.


Great work on this! I got it setup tonight, was using HADashboard and it seemed heavy for what it did.

I still have a lot to figure out, but a few thoughts. With a light component, if you hold it, are you supposed to be able to move the slider? I cannot, it’s more of a status indicator.

Also with Alarm panel, any thought on making a full page just for the alarm touch panel, fill the screen, for those that use the Alarm function? Would be a great default screen. Also, the keyboard isn’t in the normal Alarm form, starting with 1,2,3, etc…, it seems backwards, and it would be good to have the letters there as well. With the tablet, if you had 30 seconds to disarm, and didn’t know where to find the button, might be hard, and then as a popup, it doesn’t fill screen, still hard to hit on a 10" tablet…

Still playing around, but like it better than HADashboard so far, will probably kill that container this weekend and switch wall tablets to this…

I just need to be a more creative person on layout, but I will get there


Thank you. You need to make sure you define both sliders in light control to match the attributes and service call names of your light.

As for the alarm panel, you can customize css to make buttons and actual popup bigger.


Is it possible to completely disable header?
I mean, even I disable the header there’s still the space/padding is left at top…


Create custom.css file and set whatever margins and paddings you desire.


It’s not about margins and padding, that what align it correct


.page-align {
  vertical-align: top !IMPORTANT;


I’m trying to build a TileBoard, which shows the traffic by showing a number o web cams.
Can this be done by using an iframe? My code only shows a black Tile.

position: [0, 4],
id: {},
width: 3,
height: 3,
refresh: 10000, // 10 seconds
url: ‘http://webcam.trafikken.dk/webcam/Langebro_Cam1.jpg


You can do it both with iframe or camera tile. I’ve tried the code and it works, I can see the image and it refreshes every 10 seconds. Can right-click in that tile and and inspect it?


With the climate tile, is it possible to swap the positions of the current temperature and set temperature?


just re-pinging this, in case you missed it @resoai… thanks!


I guess this is the reason why the iframe isn’t working
Mixed Content: The page at ‘https://xxxxxxxx.duckdns.org:8123/local/tileboard/index.html’ was loaded over HTTPS, but requested an insecure resource ‘http://webcam.trafikken.dk/webcam/Langebro_Cam1.jpg’. This request has been blocked; the content must be served over HTTPS

Can this be handled in any way.

I checked the camera tile. How do I enter this URL?


Not sure what I’m doing wrong.


I’m not sure what syntax error Is there but I’ve redone the config file multiple times.


Hello all,
has anyone experienced js errors when attempting to load tileboard.

I am receiving the following errors and don’t know how to resolve them. any assistance is greatly appreciated.


Hello, is anyone using this with hassio?

When I try and access the tileboard by going to the link:


My browser gets redirected to:


and a page saying:

"Unable to connect

Firefox can’t establish a connection to the server at localhost:8123"

Do I need to change something in my config.js file?

here’s the top of my config file:

var CONFIG = {
   transition: TRANSITIONS.SIMPLE, //ANIMATED or SIMPLE (better perfomance)
   // transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
   entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
   tileSize: 150,
   tileMargin: 6,
   // serverUrl: "http://localhost:8123",
   // wsUrl: "ws://localhost:8123/api/websocket",
   serverUrl: 'http://hassio.local:8123',
   wsUrl: 'ws://hassio.local:8123/api/websocket',
   authToken: null, // optional: make an long live token and put it here
   //googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
   // debug: false, // Prints entities and state change info to the console.
   debug: true, // Prints entities and state change info to the console.

   // next fields are optional
   events: [],
   timeFormat: 24,
   menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
   hideScrollbar: false, // horizontal scrollbar

I’ve cut out the header and pages part in order not to clutter the forum

EDIT: I’ve fixed it now, it seems I have to use ‘incognito mode’ in my browser for it to work.


Sometimes I get timeout on getting camera picture, can you tell me can I suppress the error notifications?