TileBoard - New dashboard for Homeassistant

Editing the custom.css file in styles folder is the easiest method
That is where I have taken the example from

Hi Guys,
Since dark sky doesn’t accept new registration anymore, one cannot use the WEATHER_LIST example in TILE_EXAMPLES.md. I found help in this thread: https://github.com/resoai/TileBoard/issues/315

I still didn’t complete the icon list but here’s what I ended up for my list object:

list: [0,1,2,3,4].map(function (id) {
   return {
      date: function () {
         var d = new Date(Date.now() + (id+1) * 24 * 60 * 60 * 1000);
         return d.toString().split(' ').slice(1, 3).join(' ');
      },
      icon: function() {
         var sensor = this.states['weather.home'];
         return sensor.attributes.forecast[id].condition;
      },
      primary: function() {
         var sensor = this.states['weather.home'];
         var forecast = sensor.attributes.forecast[id].temperature + " C";
         
         return forecast;
      },
      secondary: function() {
         var sensor = this.states['weather.home'];
         var wind = sensor.attributes.forecast[id].wind_speed + " kmh";
         
         return wind;
      },
   }
})

Firstly,
I LOVE this add on. I was wondering if there was a way to change the look/layout of the TYPES.WEATHER card. I just want to remove some line gaps to make it more compact.
eg:

Humidity & Windspeed
-LINE GAP-
Feels like TEMP

Thanks!

That’ll change the look for all of the icons - I just want it done on one or two.

The trick then is to use a different icon from within the mdi options

Do you have an example - because I’m not getting it right.

So I have a sesnor icon setup within my config,js

{ position: [3,1.25], type: TYPES.SENSOR_ICON, id: ‘sensor.bin_collection’, icon: ‘mdi-trash-can’, width: 2, height: 3},

Then in the custom.css I have the following based on what the sensor state is

.item.-brown_bin.-sensor_icon .item-entity--icon {
  color: brown;
}
.item.-green_bin.-sensor_icon .item-entity--icon {
  color: green;
}
.item.-black_bin.-sensor_icon .item-entity--icon {
  color: black;
}

hi guys

Need any help for my custom.css because i don’t know if it possible.

i have setup my window states on a text field. if a window is open it have state = ON, is it possible to change the Text&Value to another Color?

with this i have red Text&Value forever, but i need to set it only if it’s ON

.item-entity-container .item-list--value,
.item-entity-container .item-list--name
{
	color: red;
}

Thank you for a quick reply if it possible and how i can change my css for my needs…Thank you !!

Thanks - the above I understand - what I’m not getting is how your icon setup ties back to your custom.css - how does it set to use brown/green/black?

I’ve tried setting using various combination in the CLASSES property of the tile - but it doesn’t seem to work. (the only thing I’ve managed to change is the Tile font size)

I have an sensor setup within HA and its value changes based on my bin collection
This is defined as a sensor_icon within tileboard
When its value is brown_bin it changes color to brown
when its value is black_bin it changes to black
when its value is green_bin it changes to green

You could try this and see if it works - I am only just teaching myself css

.item.-on.item-entity-container .item-list--value,
.item.-on.item-entity-container .item-list--name
{
	color: red;
}
.item.-off.item-entity-container .item-list--value,
.item.-off.item-entity-container .item-list--name
{
	color: green;
}

Thanks - I think I’m calling it quits - I still don’t get how the config.js file and the custom.css themes link up for changing attributes of individial tiles, I’ll look for an alternitve. It shouldn’t be this difficult to change an individial icons colour. :rofl:

Thank you traverst

this i have also try, but the item.-on not working on entity-container, if i put this css it show me the default color = white

Dont think you can change a single line/item in a text list based on its value
You would need a separate tile using icon instead for each item

Correct,i dont need to change the color only for 1 line,it can be for all lines so if value is = off it change the color of the name and value in text field to red. I also try to set it on the tile itself with customstyles and then with if value === off and return,but seems that this function not working on the text.list tile?

Is there a way to make it show more_info when long pressed? I am using a switch tile and when I long press it, it says “No history data found”

I am using it for a group and would like it to display the switches when long pressed.

{
   position: [0, 0],
   type: TYPES.SWITCH,
   id: 'group.scentsy',
   title: 'Scentsys',
   subtitle: '',
   states: {
      on: "On",
      off: "Off"
   },
   icons: {
      on: "mdi-spa",
      off: "mdi-spa-outline",
   }

Hello @andrew.vint, how are you?
I’ve been reading the messages and saw that you had a problem like the one I have, I opened a popup block with other switches on them. Can you do it? If so, could you share?

Thanks

Quick question about adding HLS video to tileboard, is it possible to add HLS streams directly as there is less latency, or does it have to be a camera from HA?

hi resoai

Sorry, but i try to add the Doorentry Event that shows the camera (that i have already setup on HASS) if i fire event on hassio : command: open_doorentry.

i thin i made any mistake on my config, i have add the variable at the Top of the config BEVORE var Config, is that right? and then i have add the event. if i fire the event on Hassio i have following in the Log:

The websocket command 'camera_thumbnail' has been deprecated.

10:50:00 PM – Camera (WARNING) - message first occurred at 1:26:00 PM and shows up 8166 times

the camera itself on a CAMERA_THUMBNAIL works.

Hope you can help me, because i have spend so much time right now and i don’t find a solution.

Thank you very much !

fonio

This is simply a warning. HA is deprecating camera_thumbnail which will stop working in one of the next updates.

1 Like