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.
