TileBoard - New dashboard for Homeassistant

Thanks for the reply. It gives a good start. I’ll try to apply this to a text _list and let you know how it goes.

Was a little work but I made it. I had to create a template sensor to change the state attributes and the icon base on the state into my configuration.yaml. Then I just use this sensor for the list into the tileboard config file . Thanks for your help though :slight_smile:

Use a custom.css file in styles folder.Use your browser’s inspect element feature to find the css element. Stick that in your file.

As an example:

.-theme-winphone .item-entity.-select .item-entity--value,
.-theme-homekit .item-entity.-select .item-entity--value,
.-theme-mobile .item-entity.-select .item-entity--value,
.-theme-compact .item-entity.-select .item-entity--value {
  font-size: 20px;
}

I’ve been searching for hours to find out why my slider doesn’t work, but I didn’t get the solution. I have a slider for the brightness of Philips Hue lights group. When I change the slider it works, but it doesn’t save the brightness. It just changes back to default (which is the min brightness). Anyone who can help me fix this? I have the following code:

EDIT:
I have fixed it, was because of an error in another item. Second (noob)question I have is, what is the fastest way to check the dashboard after you’ve updated. Now I open an incognito-tab and login again, is there a faster way?

Fastest way to see updates varies by system in my experience.
On windows the fastest is Edge. Just hit F5. Firefox updated and now won’t work for me, chrome is the same. I have to use private browsing to get the page to open in either browser. Is this something to do with hassio??

Linux I use chromium and can hard refresh with shift and f5.
Android I use opera and have to clear the cookies/cache to see changes

1 Like

I created a dynamic list that shows what lights are on in my house. It took me awhile to figure out since I’m a javascript novice, but hopefully it helps someone else.

position: [2, 3],
title: "Lights On",
height: 1,
width: 3,
id: "group.all_lights",
type: TYPES.TEXT_LIST,
state: false,
list: [1, 2, 3, 4].map(function (id) {
  return {
    title: function (item, entity) {
      var list = [];
      var entities = this.parseFieldValue('&group.all_lights.attributes.entity_id', item, entity);
      entities = entities.split(',');
      for (var i in entities) {
        var entity_state = this.parseFieldValue('&' + entities[i] + '.state', item, entity)
        if (entity_state == 'on') {
          list.push(this.parseFieldValue('&' + entities[i] + '.attributes.friendly_name', item, entity));
        }
      }
      return list[id-1];
    },
    value: function (item, entity) {
       var list = [];
       var entities = this.parseFieldValue('&group.all_lights.attributes.entity_id', item, entity);
       entities = entities.split(',');
       for (var i in entities) {
         var entity_state = this.parseFieldValue('&' + entities[i] + '.state', item, entity)
         if (entity_state == 'on') {
           list.push(this.parseFieldValue('&' + entities[i] + '.attributes.friendly_name', item, entity));
         }
       }
       return list[id+3];
     }
})
2 Likes

I’ve setup a compact 1 tile weather card and I got an idea. I’m wondering if this is possible. On my main page, I would like to show 4 different weather tiles of upcoming forecast. Let say it’s the morning, is it possible that the first tile will forecast the afternoon, 2nd one evening, 3rd night and 4th next morning? And that would change depending of the time of day so if we’re in the evening, the first tile would change to night forecast, 2nd next morning, and so on.
Thanks for your help!

I have found with chrome you have to clear your browser history then refresh for the updates to show. Not sure why but it works.

1 Like

Hello all in the HA community, this is actual my first post or reply or what ever you call it. I’ve been messing around with tileboard for about 2 weeks, I finally got everything up and running and I wanted to know if I can put multiple id’s in the light tile and how would I do that? Let me explain, in my living room I have a floor lamp and a table lamp I want to have 1 tile to control both of them.

You would need to create a group in HA and define the id of that group for the tile i.e. group.lounge_lights.

Hello,

First of all thanks a lot for TileBoard, I really like it.
I have it running on a tablet with Fully kiosk on android. I also have a motion sensor which sends command to turn on or off the screen of the tablet based on detected motion.
I notice that, when the tablet screen has been off for a while and turns on after motion is detected, the state of the tiles is not correct and the tiles are not responding as they should. I usually have to refresh the page for it to get back to a clean state (or switch to a different menu page and come back to the menu page I was on).

I know I can do an automated refresh of the page when the screen comes on using Fully, but I find it annoying to have the page reload each time the tablet turns on.
Has anyone else has seen this behaviour? Anything I should look at to solve the problem ?

Is the tablet disconnecting wifi maybe? This is certainly not the behaviour I am experiencing. Also, there is an auto-reconnect for cases when HA crashes or restarts i.e. websocket gets closed.

Thanks for taking the time to answer.
Wifi disconnection could be a reason true. I’ll check that.
is the auto-reconnect activated by default or do I need to activate it via some configuration parameters ?

Yes, it is.

Is there a way to disable long press on light tiles? I don’t necessarily want sliders on all my light tiles so it would be nice to disable long press.

does the same customStyles: {‘iconSize’: ‘XXpx’} apply to icon size? made a page of tiles width 2 height 2

Hi Mr. @resoai, does TibeBoard will affect the performace very much? I have an ipad mini with safari, when scrolling I can feel it lags a little bit, but very smooth when on PC’s.
The lag is not that much. What causing the lag? Thanks

Is there a way to dynamically populate a CUSTOM_HTML block with a sensor value e.g.? I want to put a few sensor values on my screensaver, but putting this.parseFieldValue doesn’t work.

TileBoard is just an HTML page. What exactly is lagging? If you are talking about page transitions than you could simply disable them:

transition: TRANSITIONS.SIMPLE