TileBoard - New dashboard for Homeassistant

cgarwood · July 3, 2018, 8:38pm

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

resoai · July 3, 2018, 9:45pm

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%)'
                }
             },
          },

JoRoCoBo · July 3, 2018, 10:16pm

Love it, implementing now.

resoai · July 3, 2018, 10:18pm

You can copy the code from my message as long as you have the latest code from github.

Marauder2 · July 4, 2018, 2:07am

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
},

resoai · July 4, 2018, 1:23pm

A quick update: We are working on an ALARM tile

putte99 · July 4, 2018, 2:29pm

Look nice!
I waiting.

resoai · July 4, 2018, 3:27pm

Good news! Alarm tile has been implemented. You can grab latest code from github (you can see example code in TILE_EXAMPLES)

resoai · July 4, 2018, 4:34pm

I’m sorry I’ve misinformed you. Please try adding zoomLevels: []

JoRoCoBo · July 4, 2018, 10:37pm

I’ve just implemented this and I can report it’s works well. Thanks again @resoai.

akkaria · July 5, 2018, 12:21am

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.

cgarwood · July 5, 2018, 1:31am

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.

Marauder2 · July 5, 2018, 1:55am

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
},

akkaria · July 5, 2018, 2:25am

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.

JoRoCoBo · July 5, 2018, 3:24am

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

resoai · July 5, 2018, 11:03am

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);
                   }

resoai · July 5, 2018, 11:31am

Most likely you don’t have the latest code from github.

akkaria · July 5, 2018, 1:06pm

This method solved it. Turns out for what ever reason android tablets can’t read hassio.local as a web address so changed the wsURL to the IP address and it works great now.
Got it running nicely now in Fully Kiosk browser with motion detection.

resoai · July 5, 2018, 2:09pm

For those of you who wanted page menu to be at the bottom, you can now do it by adding following to your config:

menuPosition: MENU_POSITIONS.BOTTOM

Kronyx · July 5, 2018, 3:13pm

Where do I add that line in the config ? I tried to add it but i always have errors