TileBoard - New dashboard for Homeassistant

I went ahead and opened a PR for it. It seems to me that keeping pace with the current version makes more sense than leaving it “broken” for compatibility. Also, the changes were in 0.96, not 0.98, so it’s been a couple months already.

@inxaos @athua, this PR needs a bit more logic added to it before it should be implemented in the TileBoard code. I placed some comments on GitHub.

Not exactly what you are looking for, but I’ve done this:

2019-09-05_10-32-46

Here’s the code.

{
   position: [2.1, 1.5],
   width: 0.5,
   height: 0.5,
   classes: ['-temp'],
   title: '',
   id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
   type: TYPES.TEXT_LIST,
   state: 'Crawl Space',
   list: [
      {
         icon: 'mdi-thermometer',
         value: '&sensor.crawl_space_temp.state' + ' °F',
      },
      {
         icon: 'mdi-water',
         value: '&sensor.crawl_space_humidity.state' + ' %'
      }
   ]
},

Then in custom.css:

.-temp .item-entity--value {
  font-size: 16px;
}

.-temp .item-state {
  font-size: 10px;
  padding: 1px;
  right: 0px;
  width: 97%;
  border-radius: 8px 8px 0px 0px;
}

.-temp .item-list--item {
  margin-left: 2px;
}

.-temp .item-list--name, .-temp .item-list--value {
  display: contents;
}

.-temp .item-list--name .mdi {
  margin-right: 0px;
}

.-temp .item-entity-container {
  margin-top: 20px;
}
2 Likes

thankyou, that’s really nice!

1 Like

Hello guys,

after a few minutes turning off my iPad, my HA banning my IP address because of wrong token… My ha is exposed to the internet, so setting a static token is not recommended ?!

Any ideas ?

Thanks

Hello,

I’m trying show a placeholder image in the tile when an entity is unavailable, has anyone done this?

Hi @resoai
What is this used for? Does it auto find the correct Index file?
Also where in config file should it be place please.

Thanks for help

Is it possible to run this on an external webserver ? As auth not working and I get error 403 after a few minutes…

The code you quoted should allow you to use multiple layout files for different devices.

I’m currently trying something similar with seperate portrait and landscape views but so far it only adjusts when Tileboard is closed and reopened. I’m still learning JS

Hi @HypnoToad. Thanks for your reply. I am still learning also. At the moment I have setup different Config and Index.html files and it works fine. Would be nice to have one lot of fine and auto adjust. Cheers

Take a look at post #2420 in the thread by @resoai here:

It shows how to have a single HTML file and multiple JS files, allowing one JS file per layout/device.

I’ve tried to make my config auto adjust depending on device screen size by using code like this

if (document.documentElement.clientWidth < 400) {
  loadScript('layouts/phone.js');
}

for example

EDIT: I see that’s the post you quoted as well! :smiley: The forum ruining the fomatting on quoted posts isn’t helping here.

The extra JS files need to go in the includes folder.

How I can get a state from other entity inside the function?
The use case is pretty easy -> I want to change bg color of my script tile depending of other entity (switch).
I don’t understand how I can get the switch entity state inside the customStyles function, that’s what i tried:

            {
               position: [0, 0],
               height: 2,
               width: 2,
               type: TYPES.SCRIPT,

               id: 'script.salon_climate_toggle',
               title: 'AC',
               subtitle: 'Salon',
               icons: {
                  on: "mdi-spin-slow mdi-fan",
                  off: "mdi-fan",
               },
              state: '&switch.ac.state',
              customStyles: function(item, entity){
              var ac = "&switch.ac.state";
           
               if ( acstate == 'on') {
                  return {'backgroundColor': '#A53846'};
      			   }
      			   else {
      			      return {'backgroundColor': '#875259'};
      			   }
      	     }

Try this

              var ac =(this.states['switch.ac'].state);
1 Like

perfect, working like a charm, thanks!

No problem :slight_smile: Nice to know it works OK

can you share your custom theme?? i love it!!

Hi all. I just started using Tileboard and hope I can configure a nice interface for a wall mounted touch panel. I just configured HEADER_ITEMS.WEATHER to show some basic weather information in the header. Now I was wondered if it is possible (or easily to accomplish) to show a detailed weather information popup when clicking on this item? Anyone?

If you know JS well then yes it’s possible - however if you are only using the given example tiles and if you have limited JS experience then a popup isn’t easily doable.

It would be a nice thing to have. It may be worth looking how the camera fullscreen popup works, you may be able to work from that. :slight_smile:

Actually I should be able to do that as I’m a software developer with some JavaScript experience however I hoped that someone already did something like that and would save me some time :grin:.

But it looks like I will have to dig in and get to know the design and figure out how to compile the less files, etc. Is this somewhere explained?

You could have a group or page which contains the detailed weather info, and you could make it so it goes to that page when the header is touched/clicked,

For tinkering, the github wiki is worth a look if you’ve not seen it already, but most of the more advanced info on how to tinker with it in this 2000+ post forum thread. :frowning:

I’ve tinkered with it a little, it uses the ‘Angular’ JS framework, so if you’re familiar with JS frameworks, then it may be easier. You don’t really need to compile the less files as far as I know, I think they are CSS related.

FWIW I’m still working out a good way to do landscape and portrait layouts that automatically change based on device orientation, I have it somewhat working but only by reloading the entire page when orientation changes:

window.onorientationchange = function(scriptTag, head) { 
  window.location.reload();
}

This is more of a dirty hack right now, I’m looking at how to get it to only reload the ‘CONFIG’ var.