this is awesome. thank you! and great work!!
Any chance you could take a look and help me get going? I think im just pacing the files in the wrong dir?
I get a 404 error.
Im using a local path with ip. HA isnt exposed, i use vpn.
I was just trying to get it working first before customizing anything…as far as the tiles go.
I do use HA API in other places so I know that works. Example, when I leave my phone sends an update, that all works good.
Here is the the location of the files. Ive tried other places too, but im not concered about having it in www really since its not exposed. I appreciate any help you may be able to provide. thanks again.
da@home:/usr/share/hassio/homeassistant/www/TileBoard$ ls
config.js head.html images index.html LICENSE.md README.md scripts styles TILE_EXAMPLES.md tile.html
// This is just an example of config
// most of ids here are replaced with empty objects {}
// please make sure you use real string ids from your HA entities
// you may also rename this file to "override_config.js"
// doing so will not overwrite your config with the new one after updates
var CONFIG = {
customTheme: "transparent", //CUSTOM_THEMES.TRANSPARENT
transition: "animated_gpu",
tileSize: 150,
tileMargin: 6,
serverUrl: "http://10.1.1.60:8123",
wsUrl: "ws://10.1.1.60:8123/api/websocket",
password: "REDACTED",
events: [],
pages: [],
{
title: 'Home',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline', // home icon
head: 'head.html', // clock
groups: [
{
title: 'First group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Sun.sun state',
icon: 'mdi-weather-sunny',
value: '&sun.sun.state'
},
{
title: 'persistent_notification',
icon: 'mdi-clock-outline',
value: '&persistent_notification.notification.state'
}
]
},
{
position: [0, 1], // [x, y]
width: 1,
type: TYPES.SENSOR,
id: 'updater.updater',
sub: '@attributes.release_notes' // custom state
}
]
},
{
title: 'Second group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SLIDER,
//id: "input_number.volume",
id: {state: 50}, // replace it with real string id
state: false,
title: 'Custom slider',
subtitle: 'Example of subtitle',
slider: {
min: 0,
max: 100,
step: 2,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
}
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
//id: "switch.lights",
id: {state: 'off'}, // replace it with real string id (e.g. "switch.lights")
state: false,
title: 'Custom switch',
icons: {'off': 'mdi-volume-off', 'on': 'mdi-volume-high'}
},
]
},
{
title: '',
width: 1,
height: 3,
items: [
{
// please read README.md for more information
// this is just an example
position: [0, 0],
height: 2, // 1 for compact
//classes: ['-compact'],
type: TYPES.WEATHER,
id: {},
state: false,
sub: function () {return 'Sunny'},
fields: {
icon: 'clear-day',
iconMap: { 'clear-day': 'clear'},
summary: 'Sunny',
apparentTemperature: '15',
apparentTemperatureUnit: 'C',
temperature: '18',
temperatureUnit: 'C',
//precip: '&sensor.dark_sky_precip_1.state',
//precipIntensity: '&sensor.dark_sky_precip_intensity_1.state',
//precipIntensityUnit: '&sensor.dark_sky_precip_intensity_1.attributes.unit_of_measurement',
precipProbability: '5',
precipProbabilityUnit: '%',
windSpeed: '5',
windSpeedUnit: 'kmh',
humidity: '50',
humidityUnit: '%',
//pollen: '&sensor.pollen_count_1.state',
pressure: '1024',
pressureUnit: '', //'&sensor.dark_sky_pressure_1.attributes.unit_of_measurement',
}
}
]
}
]
},
{
title: 'Second page',
bg: 'images/bg2.png',
icon: 'mdi-numeric-2-box-outline',
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
title: 'Short instruction',
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Read',
icon: 'mdi-numeric-1-box-outline',
value: 'README.md'
},
{
title: 'Ask on forum',
icon: 'mdi-numeric-2-box-outline',
value: 'home-assistant.io'
},
{
title: 'Open an issue',
icon: 'mdi-numeric-3-box-outline',
value: 'github.com'
}
]
}
]
},
]
}
],
}