TileBoard - New dashboard for Homeassistant

[J_IO_B]

I don’t think I’m proficient enough in CSS to add it for just that sensor. Also after playing in chrome dev console I think if I do manage to do it the text will not be wrapped to form a block and will still disappear out of view.

@apt I just came to start adding my plants I like your solution.

[apt (Ade Thompson)]

It works well in Tileboard. Are you using MiFlora too? what solution are you using to obtain the data?

[J_IO_B]

Yes using MiFlora, I’m using a bluetooth USB into my server which has been bulletproof for a long time. I recently put a couple outside to see if they withstand the British elements. These were sending intermittently so I made a plant gateway with a pi-zero and put it closer. So far so good. What solution do you use?

[J_IO_B]

Hi @resoai, thanks again for the reply.

This still only changes the sensor title the sensor data itself seems to still use a class called.

.item-entity--value

I’m probably overlooking the obvious here.

[atomic10]

Loving this new dashboard - had it configured in an afternoon!
Thanks for sharing with us all.
Random question - is it possible to control the URL of an iframe with custom tiles?
I have tried to reference the iframe with any method I know, but had no success.

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