Home Assistant Community

TileBoard - New dashboard for Homeassistant

#340

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

#341

awesome Project!

Can someone help display a Power Value inside a Switch Text?

0 Likes

#342

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

#343

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'

0 Likes

#344

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

5 Likes

#345

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

#346

Love it, implementing now.

0 Likes

#347

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

0 Likes

#348

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

#349

A quick update: We are working on an ALARM tile :slight_smile:

12 Likes

#350

Look nice!
I waiting.

0 Likes

#351

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

0 Likes

#352

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

0 Likes

#353

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

1 Like

#354

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.

0 Likes

#355

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.

0 Likes

#356

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

#357

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.

0 Likes

#358

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

0 Likes

#359

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