TileBoard - New dashboard for Homeassistant

[Jonde]

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?

Spotify Playlist Player

Hi folks, This is a player that can play selected playlist on a specified source using the spotify component. [image] This is inspired by the @Bob_NL 's Chromecast Radio station and player selection. And is in large just a modified version of the code found here. https://community.home-assistant.io/t/chromecast-radio-with-station-and-player-selection/12732 NOTE: Currently the spotify component can have some issues with source list remembering, so the source selection can be funky at times. …

[JoRoCoBo]

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

var GROUP_WIDTH = 3;
var GROUP_MARGIN = 5;
var TILE_MARGIN = 4;
var TILE_SIZE = getTileSize(GROUP_WIDTH, TILE_MARGIN, GROUP_MARGIN);
var TRANSITION = TRANSITIONS.SIMPLE;
var CUSTOM_THEME = CUSTOM_THEMES.MOBILE;

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

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

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

[Jonde]

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!

[apt (Ade Thompson)]

@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.

[resoai (Alexey)]

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.

[apt (Ade Thompson)]

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

Miflora and Hassos (HASS.io)

I do not know the answer to your question but it seems a bit over complicated to use hassos for this. Just install something like dietpi and this. Works perfectly.

[resoai (Alexey)]

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;
}

2. 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.

[J_IO_B]

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'],

[adamlaakso1]

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

[JoRoCoBo]

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.

[aidbish (Adrian)]

@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

[JoRoCoBo]

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

[JoRoCoBo]

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

[aidbish (Adrian)]

like i said, nothing flash

[resoai (Alexey)]

In all fairness you made it look like Hadashboard.

[aidbish (Adrian)]

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

[JoRoCoBo]

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

[Jonde]

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

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

[J_IO_B]

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.

[Jonde]

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