TileBoard - New dashboard for Homeassistant

agreed, I’m moving from HADashboard to TileBoard/Lovelace for a small touchscreen (7" 600x1024). It’s just matter of making the tiles bigger.

for instance with hadashboard, this is the customized light widget I’m using
l

and now the one I’m using with TileBoard
ll

1 Like

Ok so I just got the mjpeg stream in Tileboard working! The stream is working perfectly other than ONE bug: the stream timeouts and disappears after 10 seconds or so. A refresh will get it back. Rinse and repeat, every 5 to 10 seconds the stream will disappear and turn black. Why is this happening? It’s not the mjpeg that is bugging as accessing the mjpeg stream directly from my browser works fine. Any ideas? This is the code:

{
                 position: [0, 0],
                 width: 4,
                 height: 3,
                 type: TYPES.CAMERA,
                 id: {},
                 bgSize: 'contain',
                 // width: 2,
                 state: false,
                 fullscreen: {
                    type: TYPES.CAMERA,
                    refresh: 10000,
                    filter: function (item, entity) {
                       return "http://192.168.0.54:8889"; },
                    refresh: 1500, // can be number in milliseconds
                    bgSize: 'contain'
                 },
                 refresh: 1000,
                 filter: function (item, entity) {
                    return "http://192.168.0.54:8889";
                 }

              }

Hi Mr @resoai, would you please consider adding floorplan support? Thanks

Comment out or remove the refresh lines. You don’t need the refresh with mjpeg since it’s already a continuous stream of images. You also have refresh entered twice in fullscreen :{}

That did it! This is great, got multiple camera streams going right into Tileboard. Thanks so much!

nevermind, I’ve created a new SENSORS_LIST type, using a table a bit like the WEATHER_LIST.

I guess a new generic type could be created, a TABLE_LIST with custom columns. that could easily replace WEATHER_LIST in the end.

I only install homeassistant under ubuntu , can you guide me where dose the www directory locate in ?
thanks !

$HOME/.homeassistant/www if it doesn’t exist you have to create it and restart home-assistant, see https://github.com/resoai/TileBoard/blob/master/README.md

I have a question about triggering events in Tileboard from HA. The documentation isn’t that clear about how to exactly fire events from HA in JSON, since HA sends it in JSON. It might be obvious to coders but not so much to non-coders and beginners. So given that HA only fires events in JSON and the examples provided are in Javascript, let’s say I have a page with cameras and I put id: 'cams' in the page config. What should the code be from HA Events? I have tried this without success:

{ "data": "{      command: 'open_page',      action: function(e) {        window.openPage(CONFIG.pages[e.cams]);      }    }" }

What is the correct way to trigger the event so that I can switch Tileboard to a specific page? Is the formatting correct? I have this in my cameras page code just in case:

{
     title: 'Cameras',
     id: 'cams',
     bg: 'images/bg2.png',
     icon: 'mdi-cctv',
     hideScrollbar: true,
     groups: [
1 Like

You can try doing something like this:

{
      command: 'open_page',
      action: function(e) {
        var page = CONFIG.pages.filter(function(obj) {
          return obj.id == e.id;
        });
        window.openPage(page[0]);
      }
}

You would probably want to get rid of refresh if you are using mjpeg stream.

Ok, do I need to replace the id value in your code with whatever page id I have (in my case, ‘cams’)?

Additionally, for JSON, is the syntax using {“data”:"{your code}"} correct as well to trigger the event properly from within Home Assistant? Probably useful to update this in the documentation as well if this is correct.

Really? So how do you use other apps on your phone? HA’s UI is just an HTML version of the very same material design UI being used throughout the whole phone.

the only reason i see for big buttons (dashboard buttons are bigger) is to make them more usable.
on my PC i dont need that, i need that on smaller screens. the HA ui on its own is not bad. but on the phone there are 2 many small elements near one another.

on a pc (or big screen, i just want to have more info, not less)

I’m sorry, I don’t fully understand the {“data”:"{your code}"} bit. The way you specify it in HA is:

    - event: tileboard
      event_data:
        command: open_page
        id: cams 

I guess it is personal preference and we are lucky we have a choice :slight_smile:

1 Like

In HA if you go to dev-events, you can fire events using JSON. Additionally this is how I’d do it in node-red as well, so it would be good to know. So I’m wondering how to trigger the event from within HA, if that makes sense.

The javascript code you just provided, where does that go exactly? In config.js? And then how does one trigger it from dev-event within HA?

The code I have provided goes to config.js. As you can see all it does it filters pages and finds one with a specific id.

The way you fire it from HA script or automation is:

    - event: tileboard
      event_data:
        command: open_page
        id: cams 

I am not at my PC at the moment but specifying the same thing via dev-tools should be as follows:

{  
   "event_type":"tileboard",
   "data":{  
      "command":"open_page",
      "id":"cams"
   }
}

I like the oversized -/+ controls. Would you mind sharing the changes you made? Thanks.

This works great!! Thank you for the pointers. Just made it so a doorbell ring will switch the Tileboard tablets instantly to the camera view. Works great and is actually VERY handy. Cheers :slight_smile: