Yes it’s stored directly in the www folder.
I’m happy to help out with a cover tile as I have a few running at the moment.
I’m planning to investigate a possibility of running it as a custom panel which would not require exposing the password and shall have other goodies.
Sorry, how do I do that?
Nice work will need to check this out later and add it to my HA
@resoai This is a great project, it feels like the natural evolution of HADashboard (which I started to use a couple times but then abandoned because it was too much work to maintain). This is less complicated, lighter weight, easier to configure. Thank you for creating it and I hope the asks and issues reported by the community haven’t gotten overwhelming too quickly 
I’m sure you’ve thought about this, and it’s certainly aways off, but the way you’ve designed the configuration data structure would lend itself very well to a GUI configurator for this one day. It would be (relatively) straightforward to define a JSON schema for each object/object type, and create a configuration-driven administrative GUI. Not a small task, but if the project matures to that point I could easily see this becoming the primary alternative to the official HA UI.
I’m happy to help where possible…my Angular skills are rusty, but I have a lot of experience with Javascript generally, and I can certainly write documentation.
Awesome work!
2 Likes
Thanks! It was never intended to be an opensource project hence the code is not perfect and was mostly tailored towards my own touchscreen. One thing I’ve realised is that we could rewrite it into a custom panel for HA which will solve a lot of problems including authentication and could enable yaml config for pages and tiles. I’m not very familiar with Polymer so I might need some hints as to the best way to integrate it.
TBH I like that it’s standalone and pure javascript. YAML config was one of the things I hated about HADashboard because it ends up being more limiting for power users. I’d be afraid that it would be adding a lot of complexity for not necessarily a lot of gain.
This is mostly true however if done correctly, we could make yaml config for newbie users and keep JS config for those who need it. There are a lot of things to think about but my biggest concern at the moment is that people keep copying config blindly and are storing passwords in plain text while having HA accessible via internet.
Authentication will also break once oauth2 is introduced.
1 Like
In the Tileboard config block for the switch try adding a line for state: like:
state: @attributes.power_consumption
For example:
{
position: [0, 0],
width: 1,
type: TYPES.SWITCH,
id: 'switch.switch_2',
title: 'Living Room',
subtitle: 'Lights',
icon: 'mdi-lightbulb',
state: '@attributes.power_consumption'
},
That will override the On/Off text in the top right corner of the tile with the power consumption
2 Likes
Add bgSuffix: 'image.jpg' (URL of the server will be prefixed), or bg: 'http://domain.com/image.jpg'
You can also reference entity_picture like so: bgSuffix: '@attributes.entity_picture'
I wrote a little function for my temperature sensors so the background color changes depending on the temperature:
{
position: [0, 0],
width: 1,
type: TYPES.SENSOR,
id: "sensor.living_room_multisensor_temperature",
title: 'Living Room',
subtitle: 'Temperature',
state: function(t,entity) {
var color = tempToColor(entity['state']);
t.customStyles = { 'background-color' : color }
return ' ';
},
},
and add the following to the bottom of config.js:
function tempToColor(temp, min = 50, max = 90) {
// map temperature to percentage between min and max
var a = (temp - min) / (max - min);
if (a < 0) { a = 0; }
if (a > 1) { a = 1; }
// Linear interpolation between the cold and hot
var h0 = 240;
var h1 = 1;
var h = (h0) * (1 - a) + (h1) * (a);
return 'hsl('+ h +', 100%, 31%)';
}
Adjust the min and max values in that function to suit your preferences (especially if you’re in the world of celsius). h0 and h1 can also be modified to different hue values to shift the color gradient
7 Likes
I’ve just pushed an update which would allow you to do things like:
{
position: [1, 0],
type: TYPES.SENSOR,
title: 'Downstairs',
id: 'sensor.downstairs_avg_temperature',
unit: 'C',
state: false,
customStyles: function(item, entity){
var min = 10, max = 26;
var a = (entity.state - min) / (max - min);
if (a < 0) a = 0;
if (a > 1) a = 1;
var h0 = 240, h1 = 1;
var h = (h0) * (1 - a) + (h1) * (a);
return {
'backgroundColor': 'hsl('+ h +', 100%, 31%)'
}
},
},
7 Likes
Love it, implementing now.
You can copy the code from my message as long as you have the latest code from github.
I tried it with this but the map still scrolls through
{
position: [0, 0],
width: 1,
type: TYPES.DEVICE_TRACKER,
id: 'device_tracker.ryan',
states: {
home: "Home",
not_home: "Away",
},
bgSuffix: '@attributes.entity_picture',
//slidesDelay: 2
},
Look nice!
I waiting.