TileBoard - New dashboard for Homeassistant


ah, I see. This didn’t work for me on my older iPad 3 (so now I use a kiosk browser). But that could have been the problem (guided access can block some stuff too, however I do not know exactly what).

But indeed the sliders which resoai talks about are needed for it to work.



Here are my climate tiles, below is my current setup:

                 position: [0, 2],
                 width: 2,
                 height: 1.5,
                 type: TYPES.CLIMATE,
                 unit: 'C',
                 id: 'climate.kleine_kamer',
                 state: function (item, entity) {
                    return 'Current '
                       + entity.attributes.current_temperature
                       + entity.attributes.unit_of_measurement;

I removed the state lines in my current setup as I don’t have the unit_of_measurement attribute in my climate settings (so it doesn’t show). I don’t know what I have done wrong though. It looks very similar (if not almost exactly the same) to the example config.

Thank you for your time.


Could you please also post state dump for that entity (from HA’s dev tools)?


Do you mean this?

current_temperature: 21.2
min_temp: 5
max_temp: 25
temperature: 22
target_temp_step: 0.1
current_humidity: 48
operation_mode: Off
operation_list: Manual,Timer,Tado mode,Smart schedule,Off
friendly_name: Woonkamer
supported_features: 129


This looks fine to me. Did you try clicking on + - with a mouse? Did that work?


Yeah, I have tried with the mouse (as I test stuff on my PC first). I have tested it on my iPad 3 and iPhone X as well. Nothing happens. It’s like no actions are assigned to the +/- buttons except for turning the operation_mode from “any” to “tado_mode” (it always does this when it is turned on via Wifi/Internet so it is the normal operation mode). So for now it just works as an ON switch (only ON). I can press the text to change the operation mode though.


I think I know why it doesn’t work. The log gives me this whenever I raise/lower the temperature via Lovelace (or old UI, they both give the same result):

2019-02-09 04:19:28 INFO (SyncWorker_6) [root] Sending control command: KEY
2019-02-09 04:19:30 INFO (SyncWorker_7) [homeassistant.components.climate.tado] Obtained current and target temperature. Tado thermostat active
2019-02-09 04:19:30 INFO (SyncWorker_7) [homeassistant.components.climate.tado] Switching mytado.com to TADO_MODE mode for zone Woonkamer

And this is what happens when I lower/raise the temperature in TileBoard:

2019-02-09 04:31:55 INFO (SyncWorker_28) [homeassistant.components.climate.tado] Switching mytado.com to TADO_MODE mode for zone Woonkamer
2019-02-09 04:31:55 INFO (SyncWorker_28) [homeassistant.components.tado] Querying mytado.com for zone 1 Kleine Kamer
2019-02-09 04:31:56 INFO (SyncWorker_28) [homeassistant.components.tado] Querying mytado.com for zone 2 Woonkamer
2019-02-09 04:31:56 INFO (SyncWorker_28) [homeassistant.components.tado] Querying mytado.com for device 284167 Schings Home


Got it working now, was my config thanks though!


Setup events per the docs and was able to get the Notify component working without issue. Trying to call the other predefined events “screen_off” & “screen_on” but I’m getting the following JS console error:

    main.js:1813 ReferenceError: fully is not defined
        at Object.action (config.js:44)
        at callFunction (main.js:1674)
        at main.js:1790
        at Array.forEach (<anonymous>)
        at triggerEvents (main.js:1786)
        at handleEvent (main.js:1810)
        at handleMessage (main.js:1796)
        at main.js:1634
        at api.js:187

Also when attempting to play a sound via Home Assistant fire event:

    "command": "play_sound",
    "sound_url": "https://www.soundjay.com/button/beep-01a.mp3"

Getting following DOM error:

app.js:243 Uncaught (in promise) DOMException
playSound @ app.js:243
action @ config.js:51
callFunction @ main.js:1674
(anonymous) @ main.js:1790
triggerEvents @ main.js:1786
handleEvent @ main.js:1810
handleMessage @ main.js:1796
(anonymous) @ main.js:1634
(anonymous) @ api.js:187
setTimeout (async)
(anonymous) @ api.js:187
$Api._fire @ api.js:186
$Api._handleMessage @ api.js:207
(anonymous) @ api.js:173


ReferenceError: fully is not defined Which obviously means that you are not running running it via Fully Kiosk Browser. You are also not showing your event handling functions…


That fixed it ryanb33 thanks very much


Hi … been playing about with this for a few days now and I have to say I am really liking it, however though not new to being a tinkerer I am fairly novice when it comes to programming.

I have a touch screen panel fitted into my wall connected to an rpi3 which is used to display my efforts so far … below is a screen grab.

Now there are a couple of questions I have and was wondering if anyone knows the answers and how to do it;

  1. The tiles are centred on the screen, can the alignment be changed so they are at the top rather than the middle ?

  2. I understand the concept of the groups, and the position thereof. However can you stack groups ? For example underneath the group I have for people I want to put another group underneath titled ‘Heating’ and have the controls and info for my Nest Thermostat there.

  3. the popup screen for my camera takes up the whole page as its expecting a landscape display, can this be changed to be more in line with the size of the pop up and if so how do I do that. Screenshot below to explain

There was me thinking the physical install would be the hard but, how wrong was I lol … below is it fitted in the wall, wife says its overkill but hey … go large or go home

Thanks in advance for any help, i am happy to share anything when I am done if anyone looking for whatever assistance I can provide.



Right I have managed to fix a couple of items …

  1. to move the icons to the top of the page I made the following changes to the main.css file, I had to add the top: 200px; line as without it the icons were sitting on top of the header.

.group {
display: inline-block;
font-size: 0;
vertical-align: top;
top: 200px;
margin: 35px 50px 35px 15px;
position: relative;

  1. Still dont know how to do this

  2. Again some changes to the main.css file, the camera-popup-container height value was set to 100%, I changed this to be a specific value in px

.door-entry-popup-container {
background: #111;
height: 580px;
width: 100%;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
position: relative;

Loads of things I would like to do with this, just need to keep myself on the path of getting the basics right before i go off in a number of tangents lol.

Quick couple questions, has anybody used TileBoard with a Nest Thermostat ? also I have the full darky sky summary allocated to the list section of the weather widget, does anyone know how to wrap the text rather than having it clipped ?


  1. Alignment can be adjusted via custom.css however I really don’t understand why you would choose to have the screen vertical rather than horizontal

  2. Groups can either be all horizontal or all vertical otherwise it would just not be possible to have a grid which TileBoard is practically based on

  3. No. Popup for cameras are full screen by default. Once again, I really don’t understand why you mount your screen vertically :slight_smile:

I like the frame and size which reminds me of the hassle I had to go through doing mine (18.4 inch ASUS Touchscreen monitor)



@resoai ultimately the decision to mount it vertical was driven by the location, I wanted it sunk into the wall and when I cut the wall open in the hall there was a couple of studs in. I didn’t want to start cutting away at support beams but I definitely wanted it flush mount so this was the compromise to install it between the beams.

In retrospect I actually really like the picture frame portrait look, just looks like its another picture hanging up in the wall …. suppose all these things would boil down to personal preference in the end.

Either way though, loving the way TileBoard is shaping up on it.


There is definitely a way to make it work with vertical alignment with a bit of CSS knowledge however it will break a lot of things which have been designed for horizontal alignment.

The purpose of TileBoard was to make a dashboard which is 100% customisable and hackable which does require some JS and CSS knowledge.


Is there anyway to randomize the screensaver options instead of it always shown in the same order? I see the JS function that grabs the images, but I’m not proficient enough in JS to merge the objects back randomly.

in file: scripts/controllers/screensaver.js
snippet starts at line 45:

      if(!slide._styles) {
         slide._styles = {
            backgroundImage: 'url(' + slide.bg + ')'

         if(slide.styles) {
            slide._styles = mergeObjects(slide._styles, slide.styles)

      return slide._styles;


You can define array of images for screensaver in the order you need and assign it to the config. You can even do crazy stuff like getting list of images from Flickr album:

    if (CONFIG.screensaver && CONFIG.flickrApiKey) {
    var url = 'https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos'
            + '&photoset_id=' + CONFIG.flickrAlbum + '&api_key=' + CONFIG.flickrApiKey + '&format=json&nojsoncallback=1';
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function() {
        if (req.readyState === 4) {
            var res = JSON.parse(req.responseText);
            if (res.photoset) res.photoset.photo.forEach(function(p) {
                    bg: 'https://farm' + p.farm + '.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '_h.jpg'


I have been using TileBoard on my Fire Tablets for a while now I have overcame most of the nuisances with the non rootable Fire Tablets. Iv managed to switch the screen on and off the instead of dimming and a few other bits. But performance has always been an issue.

This morning I switched off transitional animation and its like a whole different experience! If anybody is using a Fire tab with performance issues and hasn’t done so already switch transitions to simple instead of animated. I feel stupid for waiting until now to try this.