TileBoard - New dashboard for Homeassistant

Is there any way to adjust the size of tiles etc automatically so it would be possible to use this theme on tablet, phone and conmputer etc?

And also would it be possible to build something like this Spotify playlist player that is mentioned in this post?

Hi @Jonde, this is the code from @resoai.

var GROUP_WIDTH = 3;
var TILE_MARGIN = 4;

function getTileSize(tileCount, tileMargin, groupMargin) {
  var width = window.innerWidth ||
    document.documentElement.clientWidth ||

  width -= groupMargin * 2 + tileMargin * (tileCount - 1);

  return +(width / tileCount).toFixed(1);

Thanks. Need to take a look at that. It did not work on PC since all the tiles became waaay too small but I will check it out with better time!

@resoai what are you thoughts on adding a timeout for pages so it returns back to a ‘main page’ after a time of inactivity? Similar to the HADashboard feature.

In all fairness this seems very wrong and goes against expected UI behaviour. We do have door entry which can be opened automatically via the event which has a timeout so it closes after certain time.

There is certainly a way to do this with TileBoard since this is simply an HTML page. I will spend some time next week and will probably expose openPage function so it would become available outside the scope and maybe create a few events which can be listened to.

1 Like

Similar setup. I initially thought about Hassio but then went with DietPi and a script as mentioned here:

Sorry, I was trying to respond from my phone previously. Here is what you should do:

  1. Add following to custom.css file:
.-sensor-small-text .item-entity--value {
  font-size: 10px;
  1. Add following to your tile which needs small text for value:
classes: ['-sensor-small-text'],

Please feel free to adjust 10px to whatever feels right.


Worked a treat thanks @resoai! If anybody else comes looking to achieve the same this is what I ended up with.

Custom CSS

.-sensor-small-text .item-entity--value {
  font-size: 100%;
  white-space: initial;
  line-height: 100%;

.-sensor-small-text .item-entity {
  height: 100%

Tile Line

classes: ['-sensor-small-text'],


1 Like

No, I have a Russound MCA88x 8 zone home controller. Those tiles allow me to independently turn on zones, adjust volume and select any of my 8 sources. Since my unit has the built in streamer for Spotify, my main tile let’s me play any of my playlists. Works a dream

Don’t tell me the colours are awful, I know. I’ve been using TileBoard as a chance to learn about JavaScript/CSS/AngularJS and it’s been quite enjoyable. Here’s one of my experimental screens. The Temperature tiles change color depending on temperature which is why the Garage tile is blue. Ok, next up, learn some good taste.


@JoRoCoBo Nice work. Same here, mine probably looks like a dogs dinner (i’m no graphic artist) but its functional and works really well on an old tablet compared to HAdashboard, which it struggled with

Agreed, I’m enjoying the simplicity of the TileBoard solution and the instant gratification of CSS.

Another screen shot - nothing special here, but I’d be interested to see what you’re all coming up with so I can ‘borrow’ some ideas :slight_smile:

like i said, nothing flash

1 Like

In all fairness you made it look like Hadashboard.

1 Like

i did, it was to replace it on an old tablet that wouldnt run well anymore, with this is runs fast again. Wife has used this layout it for a while and WAF is important

1 Like

Yes, it’s hard to get flash with doors and windows.

I still have problems with resolutions. I have Amazon Kindle Fire HD 10" and the tiles are not fitting screen properly. The left and right header are coming on top of tiles and if I make tiles smaller the clock and weather are coming even more on top of the tiles :confused:

My theme is “null” so no custom themes and mobile theme is not really fitting for tablet on landscape mode.

I adjusted the config to fit my Fire 10s and 7s i can post up my adjustments when i’m home later if it will help? Both use the same config and look great. Looks really bad in a browser but that’s not my use-case so i don’t care.


Please do that, I think it might help a lot!