TileBoard - New dashboard for Homeassistant

No worries :slight_smile:

Hi , Any assistance with this would be really appreciated , have been struggling with this for a while, to no avail.
Has anybody got this to working…

                         action: function (item, entity) {
                         this.$scope.openPopup(item, entity);
                         setTimeout(function () {
                           this.$scope.closePopup();
                         }, '1000');},

or

                           action: function (item, entity) {
                           this.$scope.entityClick({}, item, entity); 
                            setTimeout(function () {
                            this.$scope.closePopup();
                            }, '5000');}

The popup opens as expected and after the timeout of x seconds the following error is seen on the screen and in the browser console and the popup does not close:

‘Uncaught TypeError: Cannot read property ‘closePopup’ of undefined’

You have 2 nested functions. “This” represents the context, when you first call this.$scope.openPopup, it works because this represents the context of the first function. When you call it inside this first function, “this” now represents the nested context, you can pass “this” to the second one with :slight_smile:

action: function (item, entity) {
                           this.$scope.entityClick({}, item, entity); 
                            setTimeout(function () {
                            this.$scope.closePopup();
                            }, '5000');}.bind(this)

You can check it here : javascript - How do I pass the this context to a function? - Stack Overflow

@Amaurgit - Thank you for the reply - still failing miserably :grimacing: tried both these options
the first , popup don’t open & console error -
angular.js:15697 TypeError: Cannot read property ‘openPopup’ of undefined
at config.js?r=1628365522785:1533

	{
	   position: [0, 0],
	   width: 2,
	   height: 1,
	   title: 'System',
	   id: {}, 
	   type: TYPES.TEXT_LIST,
	   state: false,
	   list: [
		  {
			 title: 'Processor',
			 icon: 'mdi-cpu-64-bit',
			 value: '&sensor.processor_use_percent.state' + '%'
		  },
	   ],
		 action: function (item, entity) {
		 this.$scope.openPopup(item, entity);
		 setTimeout(function () {
		   this.$scope.closePopup();
		 }, '2000');}.bind(this),
		 
			popup: {
			tileSize: 100,
			
			items: [
		  {
			position: [0, 0],
			width: 2,
			type: TYPES.HISTORY,
			id: "sensor.processor_use_percent",
			title: "CPU %",
			customStyles: {'background-color':'#667584'},				
			subtitle: function (item, entity) {
			  return (
				"since " +
				timeAgo(Date.now() - (item.offset || 24 * 3600 * 1000))
			  );
			},
			 offset: 0.01 * 24 * 3600 * 1000,
			 options: MINIMAL_CHART_OPTIONS,
	  },	

			],				  
		}					   
	},

The second popup opens , the tile is a Boolean it doesn’t turn on - & popup don’t close -error in the console -
angular.js:15697 TypeError: Cannot read property ‘entityClick’ of undefined
at config.js?r=1628366467625:1608
at R (main.js:2212)
at c.t.entityClick (main.js:119)
at fn (eval at compile (angular.js:16548), :4:360)
at i (angular.js:29123)
at c.$eval (angular.js:19523)
at c.$apply (angular.js:19622)
at HTMLDivElement. (angular.js:29127)
at Pe (angular.js:3891)
at HTMLDivElement.n (angular.js:3879)

		{
			  position: [0, 1],
			  type: TYPES.POPUP,			  
			  id: {},
			  icon: "mdi-home-group",
			  title: "Home Scenes",
			  customStyles: {
			  "background-color": "#7dba81",},			  
			  height: 1,
			  state: false,		  
			  popup: {
				tileSize: 100,
				items: [
		{
				position: [0, 0],
				width: 2,
				title: "Guest Mode",
				classes: [CLASS_BIG],
				type: TYPES.INPUT_BOOLEAN,					
				id: "input_boolean.guest_mode",
				icons: {
				  on: "mdi-account-multiple-plus",
				  off: "mdi-account-multiple-outline",
		},
				customStyles: function (item, entity) {
				if (entity.state === "off") {
				return { backgroundColor: "#898c80" };
				} else {
				return { backgroundColor: "red" };
				}
		},
				states: {
				  on: "Guests",
				  off: "No Guests",
			},	
				action: function (item, entity) {
				this.$scope.entityClick({}, item, entity); 
				setTimeout(function () {
				this.$scope.closePopup();
				}, '3000');}.bind(this)
			
		  },
  
		],	
	  },				  
	},

any assistance will be appreciated - is there anything oblivious that I’m missing here - still learning :thinking:
Thanks again .

Ping… I thought I’d push my question on TYPES.FAN to the front of the line…

@resoai
i have two questions, maybe you could help me:

  1. with TYPES.DOOR_ENTRY, i would like to have if '&sensor.ABC.state' === 'on', then it show me 'camera.ONE', if '&sensor.ABC.state' === 'off', then it show me 'camera.TWO',
    i tried to get the 'id:' with the following code, but it didn’t work, the question is, is it even possible to have that 'funktion() if' with 'id:' ?
{
	position: [0, 0],
	type: TYPES.DOOR_ENTRY,
	id: {},
	icon: 'mdi-door',
	title: 'DOOR_ENTRY',
	state: false,
	layout: {
		camera: {
			type: TYPES.CAMERA,
			objFit: 'contain', 
			//id: 'camera.ONE', // original 	
			id: function() {    if ( this.states['sensor.ABC'].state === 'on' )  //does not work 
									{ return 'camera.ONE'; }
							   else if ( this.states['sensor.ABC'].state === 'off' )
									{ return 'camera.TWO'; }
								},
			refresh: 3000,
			bgSize: 'cover'
		},
	page: {},
	... ...
},
  1. with screensaver, how can it show me the value of a sensor(e.g.'&sensor.ABC.state') on 'html:' ?
    i tried with html: this.parseFieldValue('&sensor.ABC.state'), but it didn’t work, i know screensaver is before page: {} loading, but is it is that feasible ?
screensaver: {
  timeout: 300, 
  slidesTimeout: 10, 
  styles: { fontSize: '40px' },
  leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], 
  slides: [
	  { bg: 'images/bg1.jpeg' },
	  {
		 bg: 'images/bg2.png',
		 rightTop: [
			{
			   type: SCREENSAVER_ITEMS.CUSTOM_HTML,
			   //html: 'Welcome to the <b>TileBoard</b>', // original
			   html: this.parseFieldValue('&sensor.ABC.state'), //does not work 
			   styles: { fontSize: '40px' }
			}
		 ]
	  },
	  { bg: 'images/bg3.jpg' }
   ]
}

Thanks for your time.

The FAN tile loops through this: entity.attributes.speed to fill the speeds.
Your MQTT fan dos not look to have that.

These should be attributes:

Check here: MQTT Sensor - Home Assistant and look for json_attributes_template

Since they are hardcode, this might work (But I am not really sure):

json_attributes_template: '{ "Turtle":"turtle", "Low":"low", "Medium":"medium", "High": "high" }'

1 Like

Thanks for the tip. Unfortunately this doesn’t work, but your pointer has me headed in the right direction. I see that the speed attribute is null for the fans. Perhaps I also need a json_attributes_topic. I’ll work with it a bit to try to sort it out.

Yes, I do not know if those preset are available in a topic or something.
I see now that the attributes template needs an attributes topic.

Anyway, you are on the right track.

Actually, I think I have discovered part of the issue: TileBoard is using deprecated properties for fan entities. Namely, speed and speed_list have been deprecated and replaced with percentage, preset mode, and preset_modes.This is documented:

Because my fan has four speeds, neither speed nor speed_list has a value in the entity attributes, although they are present. I think this is what is making my fan tile unhappy.

I suggest the maintainer of tile.html in the TileBoard repository update the FAN tile definition to use the updated entity attributes.

You can open an issue of the github page for tileboard for this :slight_smile:

Done! Issue #751:

I tried installing this today.

I downloaded the latest tileboard.zip and copied in into www/tileboard on my HA. I renamed the config.js. Restarted HA and tried accesing it. But all it says is;

If you see this page then you you have most likely picked a wrong way to install TileBoard.

Am I missing something? Or do I need to change everything into my own setup before it will show up? I thought it would be easier for me if I could see the changes take affect as I went along - as I’m not to experienced.

Navigate to www/tileboard and run tree command. What’s the output?

tree command?

It’s a command that prints the directory structure. Depending on what system are you running, I guess you might not have it. Otherwise you can screenshot the structure or something.

Here’s the www folder

and here’s inside the tileboard folder:

I just dropped the folder in via smb

Are you accessing the /local/tileboard/index.html path?
Also try in incognito/private mode to rule out the cached page being served.

Aha! Incognito showed it. Cached page deff being served. Thanks :slight_smile:

Apologies for what I would think is the my 4 post on this & resquest in :

Working example of popup auto closure #727

it seems I’m not the only one struggling with this - tried every piece of advice from the forum - is there a way to close a popup using setTimeout - i must be doing something wrong - if anybody got this working if so -please assist, if possible with an small example in this space.
Thanking you in advance.