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.
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
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
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%)'
}
},
},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.
Good news! Alarm tile has been implemented. You can grab latest code from github (you can see example code in TILE_EXAMPLES)
I’m sorry I’ve misinformed you. Please try adding zoomLevels: []
Hi @resoai just wondering if you were able to shed any light on why i wouldnt be able to open the dashboard on Android tablet? It runs fine on Chromium on my raspberry pi as well as Safari on my Macbook. When i load the page on my Samsung Android tablet using either the default browser or chrome it shows “System Error” in the top left corner and thats it… doesnt say anything else.
Likely some kind of config error. There should be an error (or errors) in the developer console. You can access it by plugging the tablet in to your computer over USB and using Chrome’s Remote Devices tool in the developer console.
I tried the following, cleared cache, but still shows the map
{
position: [0, 0],
width: 1,
type: TYPES.DEVICE_TRACKER,
id: 'device_tracker.name',
states: {
home: "Home",
not_home: "Away",
},
bgSuffix: '@attributes.entity_picture',
zoomLevels: []
//slidesDelay: 2
},Ahh great, thank you @cgarwood i was wondering how i could access the developer console on a tablet. I’ll give it a go when i get home tonight. Cheers.
Hi all,
I’m trying to print out the date and time the Ring Doorbell was last pressed. I have this:
{ position: [0, 3], height: .5, width: 2, type: TYPES.TEXT_LIST, title: 'Front Door', id: {}, // using empty object for an unknown id state: false, // disable state element list: [{ title: 'Doorbell', icon: 'mdi-doorbell-video', value: '&sensor.ring_front_door_last_ding.attributes.created_at' }, { title: 'Motion', icon: 'mdi-run-fast', value: '&sensor.ring_front_door_last_motion.attributes.created_at' }, ] },
The date prints out as: " 2018-07-02T09:47:24+10:00". Any idea if/how to use a filter to clean it up to the current date and time, taking into account the +10:00 offset?
Thanks
I believe your final goal was probably to show something like 2 minutes ago or just now etc.
value: function () {
var time = this.states['sensor.ring_front_door_last_ding'].attributes.created_at;
return timeAgo(time);
}