TileBoard - New dashboard for Homeassistant

What is the value of this? Is it a date like you mentioned above? Or is it an integer/number?

It shows a date. 14
the return object type is a date.

How do you want it displayed?

Well dd-mm-yyyy would be fine in this case. But have an other case i like to see hh-mm dd-mm-yyyy

Hey, is there anywhere i can find working examples of full “config.js” files?
im quite new and the readme is helpful but some real life working config files, would really help me to understand whats happening and where im going wrong!

@jimz011 documented his configuration here: https://github.com/jimz011/Tileboard-unedited, screenshots here: Lovelace by Jimzz011 (HA 0.91.x compatible) *DEPRECATED

@sro1705 try something like:

var d = new Date( this.states[ "sensor.rova_bio" ].state );
return d.toLocaleTimeString() + " " + d.toLocaleDateString();

you may not have to do the this.states[…] thing. Most of the function calls include (item,entity) arguments so you could just use entity.state, ex:

       customStyles: function (item, entity) {
          if (entity.state !== 'Home') {
              return {
                  'opacity': 0.8,
                  'filter': 'grayscale()',
          } else {
              return {
                  'opacity': 1,
                  'filter': '',

The config.example.js file is also a working example. You can rename that config.js and then add a new tile of your own, a light tile for example, and then you are on your way.

@diggerdanh : ive tried the following but returns invalid date

title: 'Afval',
icon: 'mdi-recycle',    
value: function () {
 	var d = new Date([ "&sensor.rova_bio" ].state );
  	return d.toLocaleTimeString() + " " + d.toLocaleDateString();  

try var d = new Date( this.states[ "sensor.rova_bio" ].state );

Hey all, I have learned a bunch here, am very much loving my wall mounted tablet running TileBoard, and very much appreciate the time and effort @resoai has put into TileBoard. I decided I wanted to give back a little so I took on perhaps the most requested feature - adding an RGB color picker for lights. Alexey accepted the PR and the functionality is now in place along with updated info in the readme docs and updated pics in the tiles example doc.

If you have a color changing light that has an rgb_color attribute and add the option colorpicker: true to its light tile definition you will see a new option on the longpress screen, along with any sliders you have defined like this:

If you click the color box you will then see this:

Currently this only updates the rgb_color attribute for the light so the light must support that value. I only have one color changing light to test with and what I have implemented works fine with it. Pull down the latest code and give it a try. Let me know if you run into any issues or have any suggestions here: https://github.com/resoai/TileBoard/issues



that did the trick… thank you :slight_smile:

1 Like

Firstly this is such a great front end and I am loving the how good it looks.

Having followed all of the documentation and great advice I have managed to create an event triggered movement on the camera. Using the scripts provided I have managed to get it to move Tileboard to the camera page.

The only problem I have is I can not get it to switch the screen saver off. I am using old iPad mini(s) with an app called kiosk pro lite.

I have this defined in my events in config.js

command: ‘screen_on’,
action: function(e) {
if (typeof fully !== undefined) {

The call from HA is defined as below

  • alias: ‘Motion Detection Outside’
    • entity_id: binary_sensor.frontsensor_line_crossing
      from: ‘off’
      platform: state
      to: ‘on’

    • event: tileboard
      command: ‘screen_on’

    • event: tileboard
      page: 2
      command: ‘open_page’

Any help appreciated.

The code you are using is for fully kiosk. Kiosk pro lite is a different app.

First of all thank you so much for your awesome work @resoai! This is amazing!

I have (maybe) a stupid question :).

My current board looks like this (only light panel)…

                 position: [0, 0],
                 title: 'Arbeitszimmer',
                 id: 'light.office_light',
                 type: TYPES.LIGHT,
                 states: {
                    on: "An",
                    off: "Aus"
                 icons: {
                    on: "mdi-lightbulb-on",
                    off: "mdi-lightbulb-outline",
                 sliders: [
                       title: 'Helligkeit',
                       field: 'valuer',
                       id: 'input_number.office_dimmer',
                       max: 100,
                       min: 10,
                       step: 10,
                       request: {
                          type: "call_service",
                          domain: "input_number",
                          service: "set_value",
                          field: "value"

As you can see I have a light entity and the dim function is made with a RFXtrx input_number…
It calls a shell script (using some python code) to trigger the RFXtrx with something like this:

"echo -ne '\x0a\x14\x03\x03\x00\x86\x13\x01\x02\x00\x00' > /dev/ttyUSB0"

How to implement the input_number into the light component (for the long press function)?

Thanks and best regards

Let’s see if anyone can help me on this.

I have tried to configure the sensor type SENSOR_ICON but the ICON does not shows up. What I’m doing wrong?

                 position: [0, 2],
                 width: 0.80,
                 type: TYPES.SENSOR_ICON,
                 id: "sensor.movement",
                 title: 'Living',
                 subtitle: 'Movimiento 1',
                 states: {
                    on: "Movement Detected",
                    off: "Normal"
                 icons: {'off': 'mdi-human-male', 'on': 'mdi-walk'},


Thank you very much for your help!!!

Forget it. I was adding the wrong sensor!!! Apologies!

Anyone have an idea on how to make an iFrame pop out fullscreen as the camera tiles do?

There is POPUP_IFRAME tile for it.

Glorious, thank you for the help and fantastic project!