Working on my first touchscreen using Tileboard for HA.
It is a bit of a pain but it looks nice so far but a bit slow on my old Atom tabletops. Works great mobile wise if you utilize VPN to access your home network.
I tried to use an editor called Atom and it reformatted the configuration file so gave up and doing it manually....it is a PITA and similar to editing a yaml file.
Here is one column, one group, left side of one page.
/*
This is an example configuration file.
COPY OR RENAME THIS FILE TO config.js.
Make sure you use real IDs from your HA entities.
*/
var CONFIG = {
customTheme: null, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
serverUrl: 'http://' + location.hostname + ':8123',
wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
//googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
//mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
debug: false, // Prints entities and state change info to the console.
pingConnection: true, //ping connection to prevent silent disconnections
// next fields are optional
events: [],
timeFormat: 12,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
onReady: function () {},
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
padding: '1px 1px 0',
fontSize: '40px'
},
right: [],
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
}
]
},
/*screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
timeout: 300, // after 5 mins of inactive
slidesTimeout: 10, // 10s for one slide
styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [
{ bg: 'images/bg1.jpeg' },
{
bg: 'images/bg2.png',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},*/
pages: [
{
title: 'Main page',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline', // home icon
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 1],
width: 2,
type: TYPES.CAMERA_THUMBNAIL,
id: 'camera.frontdoor', // using empty object for an unknown id
state: false, // disable state element
},
{
position: [0, 2],
width: 1,
height: .75,
type: TYPES.LIGHT,
title: 'Front Porch Light',
states: {
on: "On",
off: "Off"
},
id: 'light.front_door', // using empty object for an unknown id
state: false, // disable state element
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
}
},
{
position: [1, 2],
width: 1,
height: .75,
title: 'Outside Temp',
type: TYPES.SENSOR,
id: 'sensor.outside_1wire', // Assign the sensor
state: false, // hidding state
},
]
},
Here is what it looks like.