TileBoard - New dashboard for Homeassistant

resoai · December 29, 2018, 11:05am

Grafana + IFRAME tile will allow you to display graphs. I have not tried it myself since I’m not a fan of graphs on dashboards but I have seen people do that in this thread.

radinsky · December 30, 2018, 9:18am

Of course, but for further, could you please use the forum search, I can guarantee you will find a lot of interesting stuff)

fversteegen · December 30, 2018, 7:59pm

Finally decided to start with Tileboard and I love it

Am now trying to figure out how to do dynamic colouring of the tiles. I want to change the colour of a sensor tile depending on its value. Did anyone manage to do something similar yet?

resoai · December 30, 2018, 9:26pm

radinsky · December 31, 2018, 10:35am

Is there any way to change the font size from customStyle individually for title, subtitle and entity item icon?

resoai · December 31, 2018, 1:28pm

You can define custom CSS in custom.css file and specify it via classes:[] of that tile. Please remember that it is an array.

Torbenan · December 31, 2018, 1:52pm

I use this to control light i the living room.

The “bars” are scenes, which is used 99% of the time. I would like to have a visual indication of, which is the active scene, by changing the background picture to aversion with yellow bars.
My plan is to

create input_boolean for each tile.
each Tile should run a script, which turn on the scene and update the input_boolean
in the Tile define the background by a JavaScript function.

My issue is to write the function. Below is the only piece of JS I have ever written.

This is used to define the background picture in a device tracker tile, whether the person is home or not home and it works perfect.

So any thoughts on how I could do the same for my sceenes would be appreciated

Torbenan · December 31, 2018, 2:13pm

Hi
This is an example I’ve added to main.css (I should have placed it in custom.css)

.item.-on.-door_entry .item-entity–icon {
color: red!important;
}

It changes the color of the MDI to red, when a window is open and white for closed…

resoai · December 31, 2018, 2:15pm

Something like this should do the trick:

customStyles: function(item, entity){
   return {
      'backgroundColor': entity.state === 'on' ? '#ff0000' : '#ffff00'
   }
 }

Torbenan · December 31, 2018, 2:24pm

Thanks
not sure, if this is going to work. As I understand it, this entity is defined by the ‘id’, as I’m using a script tile, and the script is only on for a second. I would like the entity to be an input_bolean, so the backgroundColor remains change until a different tag is press.

resoai · December 31, 2018, 3:09pm

Than… you use an input_boolean. I’m not sure what exactly your question is than.

Torbenan · December 31, 2018, 3:23pm

Let me try to formulate it in a different way.
In Script Tile I want to set the background based on an “entity”. Not the entity of the script, but on a different entity, which is a input_boolean.

resoai · December 31, 2018, 3:50pm

customStyles: function(item, entity){
   return {
      'backgroundColor': this.states['XXX'].state === 'on' ? '#ff0000' : '#ffff00'
   }
 }

HypnoToad · December 31, 2018, 3:52pm

Hi thanks for posting this about how to fix the page top margin with each page.

I was getting an extra 15px at top of each page before but with this added it works perfectly

resoai · December 31, 2018, 4:17pm

The page element is aligned vertically to be in the middle. You can adjust alignment of .page-align as follows:

vertical-align: top;

dalaigh · January 1, 2019, 10:42pm

Hi. I’m really hoping someone can help me with this. I’m fairly new to HA and Tileboard but I’ve managed to make some progress. I’m getting stuck on displaying values from uk_transport on my tileboard. I’ve successfully gotten it working on the HA panel but I’m not sure which values to use for the tile. I simply want to show the next train (estimated)

My current (not working) code is

{
                 position: [0, 4],
                 height: 2,
                 width: 2,
                 title: 'Trains',
                 id: {},
                 type: TYPES.TEXT_LIST,
                 state: false,
                 list: [
                    {
                       title: 'Next train to East Croydon',
                       icon: 'mdi-office-building',
                       value: '&sensor.group.train_group.attributes.next_trains_estimated'
                    }
                 ]
               }

And from my states panel in HA

Entity: group.train_group
State: unknown
Attributes: entity_id: sensor.next_train_to_ecr,sensor.next_train_status,sensor.next_trains_estimated,sensor.next_trains_origin,sensor.next_trains_platform,sensor.next_trains_scheduled,sensor.next_trains_operator
order: 1
friendly_name: Trains

Any help would be greatly appreciated. Ideally providing me with the fixed code if possible so I can learn from it!
Thanks!

HypnoToad · January 1, 2019, 11:24pm

Thanks, I’ve added this to my ‘custom.css’

.page-align {
  vertical-align: top;
}

And using it instead on overriding margin values, it’s working great

EDIT:
@ dalaigh
looks like
value: '&sensor.group.train_group.attributes.next_trains_estimated'

could be the issue, you may need to find the entity attributes outside of the group

dalaigh · January 2, 2019, 2:18am

Thanks HypnoToad. I’m still struggling. I’m not a programmer (more of a UI guy who can hack a bit). I’ve found the entity outside of the group but it’s just echoing the variable(?) rather than the value with this:

                       {
                           title: 'Next train to East Croydon',
                           icon: 'mdi-office-building',
                           value: '&sensor.next_train_to_ecr.attributes.next_trains[0]'
                        }

I get

How do I format the variable?

boggiano · January 2, 2019, 10:23am

Try:

&sensor.next_train_to_ecr.attributes.next_trains[0].state

radinsky · January 2, 2019, 11:25am

I will very appreciate some basic example for the css classes of the tile…

Thanks!