Question/Help : Conditional function in TYPE.DEVICE_TRACKER (EntityPicture)

[MPopti0n]

Running HA 0.90.2 (up-to-date) on RP3 with TileBoard up-to-date

First of all... Hi! and ... I'm really new to JS and fuctions... so I'm pretty sure I'm doing it the wrong way!

Widget

TYPES.DEVICE_TRACKER

Proprety

hideEntityPicture in a conditional function

What I'm trying to do

I want the entity_picture to be display only if the person is home

Note

• The conditional part is ok, if I change it to modify the backgroundColor it's working

• The picture is stored and link to the entity ok, if I put hideEntityPicture: false in the normal way it's showing the picture instead of the map

• I have try (in the last part of the code) both with ' ' and without ' ' around it.

Code

position: [0, 2],
width: 4,
height: 4,
type: TYPES.DEVICE_TRACKER,
title: '',
id: 'device_tracker.iphone1',
map: 'google',
state: false,
zoomLevels: [13, 15, 9],
slidesDelay: 2,
customStyles: function(item, entity) {
	var a = (entity.state);

	if (a === 'Work 2' || a === 'Work 1') {        // Using === because it can be numbers too
		b = 6000;
	}  else if (a === 'Shop' || a === 'Shop 2') {
		b = 5000;
	}  else if (a === 'not_home' || a === 'away' || a === 'Absent') {
		b = 4000;
	}  else if (a === 'home' || a === 'MAISON') {
		b = 3000;
	}  else {
		b = 1000;
	}

	if (b === 1000) {
		return;
	} else if (b === 3000) {
		return {
			hideEntityPicture: false,        // I have try both, with '' and without
		};
	} else {
		return {
			'hideEntityPicture': 'true',

		};
	}
},

That part is the problem

else if (b === 3000) {
	return {
		hideEntityPicture: false,        // I have try both, with '' and without
	};
} else {
	return {
		'hideEntityPicture': 'true',

	};
}

[apop880]

You wouldn't be able to modify hideEntityPicture inside of customStyles, as it's not a CSS property. Instead, include hideEntityPicture in your tile properties and map that to a function. Something like this should work:

position: [0, 2],
width: 4,
height: 4,
type: TYPES.DEVICE_TRACKER,
title: '',
id: 'device_tracker.iphone1',
hideEntityPicture: function(item, entity) {
	if (entity.state === 'home' || entity.state === 'MAISON') {
		return false;
	}
	return true;
}
//etc...

[MPopti0n]

Thank you so much.

If you don't mind, is it possible to use another entity.state in a function (not the entity define in the widget)

[apop880]

Yes, instead of using entity.state in your function, you would use this.states['device_tracker.iphone1'].state, replacing device_tracker.iphone1 with whatever entity_id you want to use. You can also get a specific attribute using this.states['device_tracker.iphone1'].attributes.ATTRIBUTE_NAME_HERE

[MPopti0n]

Thanks again :)

The first answer is not working but it's a good start and I'm looking into it
The second answer is working A1!

[MPopti0n]

Still no luck for the entity picture (I'm still trying!), is it possible to define the entity picture for the entity in the config.js ?

[apop880]

So, passing the function to hideEntityPicture is not working for you? Have you tried just setting it to hideEntityPicture: false directly in your config to confirm that works?

Otherwise, I'm actually using the bg property to get a picture in my device tracker, but I don't use the map at all so take that as you wish. Example:

type: TYPES.DEVICE_TRACKER,
id: 'device_tracker.alex',
states: {
	home: "Home",
	not_home: "Away",
	office: "Office",
},
zoomLevels: [9, 13], // or [9] for only one map slide
hideEntityPicture: false, //hide entity pic, if you need only map
slidesDelay: 2, // delay before first slide animation
bg: '/local/images/alex.jpg',

[MPopti0n]

Yes, setting the hideEntityPicture: false, (or true) work just fine!

and bg: '/local/images/alex.jpg', (with my picture file name of course!) is supposed to do what? because it doesn't change anything

Note : I tried it with multiple 'theme' and null , and it doesn't change anything so it's not because i'm using customTheme: CUSTOM_THEMES.WIN95,

I'll continue messing around with it!

And BTW it's a great project! Many, many thanks!
It looks really sharp on my 3 (really old!) Galaxy Tab 7" + fullykiosk.
I've had some trouble in the beginning with script buttons not working but I figured out that it was because I was using 3 tablets on the same 'site' ( example : if page n.3 was loaded on the tablet n.2 and I come back to tablet n.1 and click on a script button on page n.5 already loaded the button doesn't do nothing) but that was easily solve, I did a copy of the 'TileBoard' folder for each tablet ('TileBoard1', 'TileBoard2' ...) and an automation in HA detects modifications to the original files and replace the copy(s) when needed!
I have an automation in HA that circle between the pages to see all the informations that is stopped let's say when the media player state is 'playing' and bring up that page, or when a parameter in an aquarium is critical ... etc

Honestly, I'm having so much fun!

[apop880]

and bg: '/local/images/alex.jpg', (with my picture file name of course!) is supposed to do what? because it doesn't change anything

That's just a way to set the background picture to anything, to answer your question from your previous post.

And I dug into the code a little, and it looks to me that hideEntityPicture doesn't support being passed a function. The easiest way I can think of to code around this would be to use two sets of tiles. Use the hidden property on them, since hidden supports being passed a function. If the device tracker is away, hide the one with the picture and show the one with the map, and vice versa. Does that make sense?

[MPopti0n]

Hum, didn't think of that, the 2 sets of tiles sounds the most promising option ! Tks

[MPopti0n]

That work perfectly, thanks!

And if someone else is looking for that :

You duplicate the same tile (and put it at the same position on the dashboard).

Tile 1 end by :

hideEntityPicture: true,
hidden: function(item, entity) {
    var a = (entity.state);
    
    if (a === 'home') {
        return true;
    } else {
        return false;
    }
    },

Tile 2 end by :

hideEntityPicture: false,
hidden: function(item, entity) {
    var a = (entity.state);
    
    if (a === 'home') {
        return false;
    } else {
        return true;
    }
    },

That show the tile with the map and no entity_picture when I'm not home, and show the tile with no map a the entity_picture when I'm home.