TileBoard - New dashboard for Homeassistant

danielgroenbek · June 10, 2019, 2:30pm

Hi

The Tileboard looks awesome, so I also wanted to give it a go. Followed the instructions but get the issue that Tileboard is not loaded. URL redirection is sending me to: http://LOCALIP:8123/auth/authorize?client_id=...etc etc… and then later a time out page.

Isn’t this an authentication issue?
The browser seem to be connected but hangs for a while.

(edited) Suddenly it gives me this error message.

Can you help me?

ps. I have modified the serverurl, wsurl and, passwordtype and password according to guide.

glyn · June 10, 2019, 2:40pm

Hi, I think I moved onto something else before completing this but it did seem to work. It was based on the following Node Red dashboard flow:

https://flows.nodered.org/flow/3b031629c8450d2098dd3183ccf84be4

danielgroenbek · June 10, 2019, 5:15pm

Update. As i thought this was an identification issue i thought I would add HA username above the password line, which resulted in I could access the UI, but will errors.

Checked the config file and saw line 20 was the password line… ??

I deleted the username line again, and the first problem came back with time out page.

I’m confused here. Any good advice out there?

apop · June 10, 2019, 5:39pm

You shouldn’t be putting a username or password into your config.js file, just a serverUrl, wsUrl, and optional long-lived access token (authtoken). Are you just looking at the readme and the config.example.js file to start your config from? Do you have the latest version from GitHub? I see the Wiki has some outdated references in the Getting Started section, I would disregard that page for now as it needs to be updated and the readme should spell everything out for you.

If you’re still having trouble, feel free to anonymize your config.js file and share it here.

danielgroenbek · June 10, 2019, 5:53pm

I apologize. I inserted a wrong ip:-(
Such a newbie…

All good.

resoai · June 10, 2019, 10:19pm

Put this into config.js

function loadScript(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url + '?cache=' + Math.random(), false);
  req.onreadystatechange = function(){
     if (req.readyState === 4) {
        var s = document.createElement('script');
        s.appendChild(document.createTextNode(req.responseText));
        document.head.appendChild(s);
     }
  };
  req.send(null);
}

var conf = location.search.match(/config=([\w\d_-]+)/);
conf = conf ? conf[1] : 'default'
loadScript('includes/' + conf + '.js');

Create includes directory in the root of your TileBoard directory and store configs for each of your dashboard in there. By default it would load default.js and you can specify any other ones in the query string like so:

http://hassio/local/tileboard/index.html?config=tablet

The above example will load tablet.js from includes directory.

radinsky · June 11, 2019, 8:31am

Yes, very nice and elegant solution!

sturgeo · June 11, 2019, 2:07pm

Does anyone have a solution to Philips hue lights showing as unavailable?
I’ve added the “unavailable” state as below but when the light is unavailable the icon opacity and controls appear as if the light is on. I’ve played around with customStyles but have only managed to set the opacity of the entire tile.

   states: {
  on: "On",
  off: "Off",
  unavailable: "Off"
   },
   icons: {
  on: "mdi-ceiling-light",
  off: "mdi-ceiling-light",
  unavailable: "mdi-ceiling-light",
   },

radinsky · June 12, 2019, 9:16am

how does it look when you turn it on (from lovelace for example)?
how does it look in lovelace/dev panel?

g3ppy · June 12, 2019, 9:35am

Thanks TrickerZ,

here is my code snippet, it is part of a groups section in my config.js. It gives me an error on the last code line })

{ // list of lights on
position: [0, 2],
title: “Verlichting aan”,
height: 1,
width: 3,
id: “group.all_lights”,
type: TYPES.TEXT_LIST,
state: false,
list: [1, 2, 3, 4].map(function (id) {
return {
title: function (item, entity) {
var list = [];
var entities = this.parseFieldValue(’&group.all_lights.attributes.entity_id’, item, entity);
entities = entities.split(’,’);
for (var i in entities) {
var entity_state = this.parseFieldValue(’&’ + entities[i] + ‘.state’, item, entity)
if (entity_state == ‘on’) {
list.push(this.parseFieldValue(’&’ + entities[i] + ‘.attributes.friendly_name’, item, entity));
}
}
return list[id-1];
},
value: function (item, entity) {
var list = [];
var entities = this.parseFieldValue(’&group.all_lights.attributes.entity_id’, item, entity);
entities = entities.split(’,’);
for (var i in entities) {
var entity_state = this.parseFieldValue(’&’ + entities[i] + ‘.state’, item, entity)
if (entity_state == ‘on’) {
list.push(this.parseFieldValue(’&’ + entities[i] + ‘.attributes.friendly_name’, item, entity));
}
}
return list[id+3];
}
}) // here is where I get an error : missing ;
}, // end list of lights

sturgeo · June 12, 2019, 9:38am

It shows as gray within a lovelace panel, clicking on it has no effect.
Within dev-states its state is “unavailable”
Thanks

radinsky · June 12, 2019, 10:24am

If so, there’s nothing related to tileboard, you need to fix it first in Homeassistant and then expose to tileboard.

TrickerZ · June 12, 2019, 2:04pm

it looks like you have an extra } after the return list[id+3];

g3ppy · June 12, 2019, 4:40pm

Thanks for pointing me in the right direction, but removing the } after return list[id+3]; did not work. When I added an extra } before the line with }) it did the trick. Looks like the code was missing a closing } for the return{ statement.

Thanks for sharing your code.

TrickerZ · June 12, 2019, 9:50pm

Yeah, my code doesn’t have the leading and trailing braces. Glad you got it working. Just as a note, this will work for up to 8 lights being on. For more, you’d have to add 5, 6, 7… to the list.

sturgeo · June 13, 2019, 11:22am

Is it possible to override .item.-off.-sensor_icon .item-entity--icon, within a customStyles: function?
I want to be able to set the opacity on the mdi icon when its state is off.

{
  position: [3, 1],
  type: TYPES.SENSOR_ICON,
  id: 'input_boolean.black_bin',
  title: 'Bin Week',
  state: false,
  icons: {
      on: "mdi-dump-truck",
      off: "mdi-recycle",
   },
  },

This switches between two icons depending on the bin collection. It would also allow me to dim the mdi icon when a light has a state of unavailable.

donnib · June 17, 2019, 11:27am

Is it possible to do floor plan or overlayed images with button on them like in lovelace ?

ricreis394 · June 20, 2019, 5:02pm

I’m trying to use a camera tile but unfortunately when open to fullscreen the stream flickers

I commented in an opened issue

diggerdanh · June 20, 2019, 5:24pm

What do you have for the refresh setting for the camera tile? I have 10000 (ms so 10 seconds) and I do not experience the issue that you demonstrate. Perhaps you can try adjusting the setting to see if you get different results.

ricreis394 · June 20, 2019, 7:05pm

I’m using 1500ms, now I understand that’s the problem. The connection with the camera slow and using a lower refresh rate makes it flicker.
Anyway, I activated stream: in Home assistant, so that it just streams like rtsp:// protocol but I think TileBoard isn’t working that way right?