@resoai With the new 0.90 release fully supporting camera streams (I tested it in my browser and it works great) would you consider updating Tileboard to fully support this streaming too?
Would be awesome to be able to fully stream a video camera without using the MJPEG workaround 
To be honest I’ve no knowledge of how HLS streams work and I have no means to even test it.
Well since it’s integrated natively now, wouldn’t that make things easier? I can just click on the standard generic camera that is setup now and it will stream instantly in the browser. Seems completely natively integrated, wouldn’t that make it easier to implement it in TileBoard?
also I can try to help and test it. I got both MJPEG stream working and the new native streaming works absolutely fine as well.
I’d love to see support for the new stream component, I assume we just need to connect to the endpoint, i.e. the HLS stream (obviously will require browser support).
…obviously this would need to be exposed to the API first.
This looks great ! I really wish I can do something like this in the US with distance Matrix. Sadly “.state” is now showing the duration instead of delay status
Well done bro. Thanks for your great efforts
Quick question, how easy is it to disable the Toast Error notifications in the bottom right?
I have a TP link entity that likes to disappear from Homeassistant when the Wifi signal is weak, and Tileboard gives me an error message every time I switch pages.
You can add ignoreErrors: true to the root of CONFIG
Thanks I’ve added it to my config and it seems to be working as intended.
Also I’ll have a look into HLS streaming, there may be a simple say of doing it if a modern browser is used.
Hi there, sorry for bothering and the stupid question.
So I have downloaded the latest from your git repository, went into config folder of my Hass.io and created a www folder. Within www folder I have added tailboard folder, and within that folder I have added all the files downloaded from the git.
Renamed config.example.js to config.js, cleared my browser cache, but when I go to http://localhost:8123/local/tileboard/index.html I get an error 404: not found.
Sorry for the stupid question, my first day using Hass.io and am running it on a dev environment first to play around with and get familiar with it all.
Thanks in advance!
Restart HA.
Wauw… that simple… Thanks buddy for the quick response! keep it up 
Hello. I have been using HA for about a month now and happened upon TileBoard a week or so ago after looking for a good, lightweight front end to run on a wall mounted tablet. My whole reason for using HA was to find an easy way for my wife to control the various bulbs and switches (and future sensors and cameras) we have collected without needing several different apps on her phone. A wall mounted tablet gives her single place to control everything. BTW, I picked up an Amazon Fire 8 this past weekend (on sale for $49) and I am running Fully Kiosk on it.
@resoai this is awesome Alexey. I am a web dev but mostly backend stuff and the front end stuff I have done is React. I have not worked with angular before but am starting to get there now. However, I am amazed at how much can just be done with the config file. My goal is to do everything I need there or custom.css without touching the other things, but I am starting to need to branch beyond that with the things I am trying to do.
I have learned a ton both from the project readme and this thread, nearly everything I wanted to do was discussed. I hope to share some things I have learned.
I am looking forward to your take on splitting out some of the config into multiple files @resoai. I have tried a few things but none of them were very clean. I was able to separate out my tile definitions from their usage. I define all my tile entities above the setting of the config variable, something like this:
tiles = {};
tiles.family_room_table_lamp: {
width: 1,
type: TYPES.SWITCH,
id: "light.table_lamp",
states: {
on: "On",
off: "Off"
},
... etc ...
}
along with this function:
function buildTile( position, tileDefinition ){
var tile = angular.copy( tileDefinition );
tile.position = position;
return tile;
}
and then use them like this as items in a group:
groups: [ {
// Primary Lights & Switches
title: '',
width: 2,
height: 3,
items: [
buildTile( [0, 0], tiles.family_room_table_lamp ),
buildTile( [1, 0], tiles.room_basement_mediaroom ),
buildTile( [0, 1], tiles.room_basement_storage ),
buildTile( [1, 1], tiles.familyroom_spaceheater )
]
},
This allows me to use the same tiles in multiple places but only have to type out the definition for them once. Currently I am only applying the position they are used it, but the same approach could be used for width or any other property for that matter.
Initially I tried using the spread operator (which is much cleaner), which worked great on any browser on my laptop but did not work on FireOS because the core browser component is uses is older. So I had to adopt the buildTile function. Basically, the spread operator just splats all the property from the object after the […]. Here is an example of that in case any of you all can use it:
groups: [ {
// Primary Lights & Switches
title: '',
width: 2,
height: 3,
items: [
{ position: [0, 0], ...tiles.family_room_table_lamp },
{ position: [1, 0], ...tiles.room_basement_mediaroom },
{ position: [0, 1], ...tiles.room_basement_storage },
{ position: [1, 1], ...tiles.familyroom_spaceheater }
]
},
Hopefully that gives some of you ideas on how to clean up your config file. I hope to contribute more in the future.
Does anybody know why I keep getting logged out on tileboard?
Nice work, that’s a nice way to be able to reuse tiles as objects, I’ve been looking to clean up my config also as I have different tileboards for different devices. I’ll have to try making a tiles array.
Up until now I’ve had each tile as a static object, for example
const GARAGE_LIGHT_A = {
position: [0, 1],
type: TYPES.SWITCH,
id: 'light.garage_light_1',
title: 'Light 1',
subtitle: 'Garage',
states: {
on: 'On',
off: 'Off'
},
icon: 'mdi-lightbulb'
}
then I just have GARAGE_LIGHT_A in my group object, but being able to add the positions in after is so much nicer.
Finally, my camera stream popout seems to have stopped working, I have 2 camera streams and both camera thumbnails work in the tile but the popout has no image at all.
Is there an easy way to disable the camera popout? could I somehow overwrite the ng-click class for camera tiles only?
I have everything in a tiles object but unlike the example I gave they are grouped like:
tiles: {
lights: {
family_room_table_lamp: { ... etc ... }
family_room_standing_lamp: { etc }
},
switches: { etc },
device_trackers: { etc },
weather: { etc }
}
so I can reference them like tiles.weather.forecast
Nice, having objects within objects is a nice touch.
I’ve found you can expand your build tile function to also be able to adjust the size of the tile too:
function buildTileBig (position, tileDefinition, width, height) {
var tile = angular.copy(tileDefinition);
tile.position = position;
tile.width = width;
tile.height = height;
return tile;
}
This was I’m able to re-use a camera tile for example to be different sizes on different pages, and to use it you just add the width and height values after the tile object name:
buildTileBig( [0, 1], ALL_TILES.CAMS.BACK, 3, 2),
will make a 3x2 sizes camera tile at position 0,1
I still use buildTile for 1 x 1 sized tiles.
You are on the right track! But what happens when you want to be able to set another property? You either create another function or add another property to the existing function’s arguments list.
This is a little more generic and future-proof:
function buildTile( tileDefinition, options ){
var tile = angular.copy( tileDefinition );
Object.keys( options ).forEach( k => {
tile[ k ] = options[ k ]
} );
return tile;
}
Basically you just pass in an options object with whatever properties you want set on the tile. The function just loops through the properties on options and and then sets the value to a property of the same name on the tile created from the definition. The usage looks like:
buildTile( tiles.lights.room_mediaroom, { position: [0, 0] } ),
buildTile( tiles.lights.room_kitchen, { position: [0, 1], title: "Hello World", width: 2 } ),
// or for a bit more readability
buildTile(
tiles.lights.room_kitchen,
{
position: [0, 1],
title: "Hello World",
width: 2
}
),
With this we are getting back to the crux of how tileboard works except now you can define your defaults for a tile.
Yes this is basically what it does already… if you have just one thing to reuse why not put that in a variable and reuse it in the default tile builder?
I understand what your trying to simplify but to be honest this does not