TileBoard - New dashboard for Homeassistant

SimplyGardner · June 6, 2019, 10:25pm

Wow @cgarwood - you always make the best edits! Would love to see this make its way into the official code.

ricreis394 · June 7, 2019, 4:26pm

@resoai so, didn’t exist any way to work around?

As you can see below, HA UI automatically translates those values to local language. I thought Tileboard was able to do something similar.

resoai · June 7, 2019, 4:51pm

We can only display what we get via API.

g3ppy · June 8, 2019, 9:11am

Thanks for this code. trying to make it happen but I can’t get it to work though, it tells me at the end }) there is a ‘;’ missing, and I can’t figure out what I’m dong wrong with it.

TrickerZ · June 8, 2019, 10:26pm

post your config and I’ll see if I can figure out where it’s missing.

fewyn · June 9, 2019, 5:44pm

So I’ve just recently gotten started with home automation and tileboard in specific I’ve already got it working on a spare tablet I use when i’m in the house but I’ve run into a problem with my forecast tile specifically.

It’s aligning extending the text way past the block and for the life of me I can’t figure out how to fix it. Any assistance?

Here’s the code I’m using: https://pastebin.com/PeVw08ak

tman75 · June 9, 2019, 10:35pm

Try adding this to your custom.css.

.weather-list--secondary {
  white-space: normal;
    width: 200px;
}

fewyn · June 9, 2019, 11:48pm

That worked perfectly, thank you!

Hans_van_der_Drift · June 10, 2019, 12:05am

I have 3 tablets in my home. If I wanted to have a different Tileboard UI for each would that mean making a new folder with everything in it and just point to the index file in there? Or is there a more simple way?

eg

apop · June 10, 2019, 3:26am

That’s one option, but you could also adapt this approach and have multiple configs in your config.js file: https://github.com/resoai/TileBoard/wiki/Mobile-configuration#how-do-i-divide-configs-on-mobile-and-non-mobile

radinsky · June 10, 2019, 7:51am

I have different index.html for each of the clients like index_living.html index_hall.html and js files for each of them as well living.js hall.js.
In html files just set to use those js files instead of default index.js

giuseppeg88 · June 10, 2019, 11:01am

Hi, did you have completed this panel? If so, can you please indicate how I can reproduce it?
Thanks!

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",
   },