TileBoard - New dashboard for Homeassistant

No, not ‘null’, just two quotes (’’).

oops sorry)
tried now as:
password: '',

getting the same:
image

That’s what it looks on my Amazon Fire 7 tablet too.

Since there is limited space on a 7 inch tablet, you might need to comment out the header on each page object like so: //head: 'head.html',

1 Like

Doh. I have a Dell XPS 13 with a 4k screen so that didn’t even occur to me. Windows defaults to 300% scaling for text so that was it. Thanks @resoai !

1 Like

If you will ever decide to use it on a smaller device i.e. 7 inch tablet you might consider commenting out the head in pages which will hide the header with clock and you will have plenty of free space

I’ve just tried it with defauls config file and it works fine like this:

 wsUrl: "ws://localhost:8123/api/websocket",
 password: null,
 events: [],

Hi thanks for sharing the code, have managed to implement a few sensors only with a few modifications. This is how it looks on my 10inch tablet.

Looks nice! I’m not the biggest fan of clock being at the bottom but it’s a personal choice. I can see that you’ve placed state values as attributes for media players which don’t show when player is off. Perhaps that could be solved with a help of a function. I’ll need to work on that.

You can fix it by adding states map as follows:

             type: TYPES.MEDIA_PLAYER,
             states: {
                on: 'On',
                off: 'Off'
             },
             showSource: true,
             state: '@attributes.media_title',

In such case dashboard will first try to get the state from the attribute and if it fails will go through the states map.

my setup so far… ive removed head but still wish i could have initial tiles further up.

The page element is aligned vertically to be in the middle. You may open main.css and adjust alignment of .page-align as follows:

.page-align {
  height: 100%;
  width: 0;
  vertical-align: top;
  display: inline-block;
  margin-left: 120px;
}
3 Likes

Can someone help me fix the display? I try to make the situation because rtl but one group exceeds the other … I tried to play it but did not help.

I’ve added a bit of code that checks for supported features, so power, mute, back and forward buttons are only shown if component supports it!

Have you tried using a negative tile position coordinate ?
position: [1, -1],

Whilst this is maybe a rtl issue it looks like a problem with a tile width or more likely a position: [x, y], coordinate causing tiles to overlap - look carefully at the config for the tile that is in the wrong place (fan), perhaps moving it way down on your screen temporarily to get its y coordinate right, and then move it back to where you want it to be. Maybe starting further left for your first tiles ?

I tried everything - did not help. I’ll raise the code you’ll take a look at?

my css
https://paste.ofcode.org/uWVvpJYETPA8d7SznQBAFa

I’m learning CSS so I probably can’t help - but could you post your config.js or override too.
(remove the top bits with password etc)

Please post your config.js and I will try to have a look this evening