TileBoard - New dashboard for Homeassistant

Well, that is another error, the first error is gone.
The URL that gives the error has ?_i=0 behind it, giving you the 404.

I do not know if it a problem, but the documentation says:

filter: function (url) {return url},

You have

filter: function (item, entity) {

It seems the url returned puts ?_i=0 behind it somehow.

Hi Romkabouter,

I used Filter: function (url) {return url}, instead of filter: function (item, entity) {

Now I get the url of my HA before the cam stream url…

GET https://192.168.178.15:8123/192.168.178.56:9090/stream/video.mjpeg?_i=0 404 (Not Found)
index.html:1 GET https://192.168.178.15:8123/192.168.178.56:9090/stream/video.mjpeg?_i=1 404 (Not Found)
index.html:1 GET https://192.168.178.15:8123/192.168.178.56:9090/stream/video.mjpeg?_i=2 404 (Not Found)
index.html:1 GET https://192.168.178.15:8123/192.168.178.56:9090/stream/video.mjpeg?_i=3 404 (Not Found)

Ok, that does not make it better :wink:

The problem is that there is a query string attached to the url (?_i=0 etc).
I do not know what is causing that, but I also do not know what you are trying to achieve

What I am trying to do is the following:

I have managed to build a video intercom using a raspberry pi integrated with HA following these instructions:

It is now working with HA and I get the video and audio from HA, but I use TileBoard on a touchscreen inside my house with all automations I need. I am trying to get the video on the Door Entery Tile outside HA, because if I use the entity id from HA it will cut the video from Tilebord because HA is routing the video stream to its intercom card. by the way I am using a usb webcam with integrated microphone, video and audio is streaming using webrtc and uv4l…

Ah ok, I have something similar, do you want the tile to show an image or only when you click it (aka fullscreen)

This works for me on a tile and the fullscreen:

            {
               position: [3, 2],
               width: 3,
               height: 2,
               title: '',
               type: TYPES.CAMERA,
               refresh: 3000,
               filter: function(item, entity) {
                  return 'http://192.168.43.54:8087';
               },
               id: {}, 
               state: false,
               fullscreen: {
                  type: TYPES.CAMERA,
                  id: {},
                  refresh: 0,
                  bgSize: 'contain',
                  filter: function (item, entity) {
                     return 'http://192.168.43.54:8087';
                  },
               }
            }  

I have a camera and use motionEye. The IP adress is the ip from motioneye.
Without the filter on the tile, I get the same entity_picture error.

I just started using the TYPES.FAN card for two ceiling fans that I have which are controlled by a Treatlife smart ceiling fan control and dimmer light switch flashed with tasmota 9.5.0 and communicating with HA using MQTT. The fan tiles show up with no speed control. All I can do is turn the fans on and off. There are four speed presets which I can set through HA. I’d like to be able to set the speed in TileBoard as well. Any idea where to look?

FYI, this is how I specify the tile:

                  {
                     position: [0, 4],
                     type: TYPES.FAN,
                     title: 'Office Fan',
                     id: 'fan.office_fan',
                  },

And here is the fan specification in configuration.yaml:

fan:
  - platform: mqtt
    name: "Office Fan"
    qos: 1
    state_topic: "stat/FanLight1/POWER1"
    command_topic: "cmnd/FanLight1/POWER1"
    availability_topic: "tele/FanLight1/LWT"
    percentage_state_topic: "stat/FanLight1/speed"
    percentage_value_template: '{{ ((value | replace("3,","")) | int + 1) * 25 }}'
    percentage_command_topic: "cmnd/FanLight1/tuyasend4"
    percentage_command_template: "3,{{ ((value | int - 1) / 25) | int }}"
    preset_mode_state_topic: "stat/FanLight1/speed"
    preset_mode_value_template: '{{ value | replace("3,0", "turtle") | replace("3,1", "low") | replace("3,2", "medium") | replace("3,3", "high") }}'
    preset_mode_command_topic: "cmnd/FanLight1/tuyasend4"
    preset_mode_command_template: '{{ value | replace("turtle", "3,0") | replace("low", "3,1") | replace("medium", "3,2") | replace("high", "3,3") }}'
    preset_modes:
      - "turtle"
      - "low"
      - "medium"
      - "high"
    payload_available: "Online"
    payload_not_available: "Offline"
    payload_on: "ON"
    payload_off: "OFF"

@resoai
could you pls tell me how to set a timeout for a notify event?
thanks

I’m not sure what you mean by the timeout. Event is an event, it only fires once.

@resoai
I mean Timeout for notify to automatically close the Notification, something like “doorEntryTimeout: 20” for DOOR_ENTRY to automatically close pop-up.

If you are referring to this notification, than you can use lifetime attribute to set how long the toast will be visible.

omg, how can i overlook the “lifetime”.
thanks again

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.