I am new to TileBoard and it is fantastic. I am trying to fire a HA script as the secondaryAction of a popup tile. I’ve got a popup tile in which I present all the light switches of a room. My goal is to fire a script to turn off all the lights by long pressing the tile. Is it possible? Thanks!
Yes, that is possible. Something like this:
secondaryAction: function(item, entity) {
this.api.callService(‘input_boolean’, ‘turn_on’, {‘entity_id’ : entity.entity_id});
}
But not the input_boolean turn_on service, but the script you use for turning the lights off (or on)
1 Like
Hey @merccooper,
Did you end up getting this cleaned up? I’d be keen on some of the style configs either way (possibly by way of pastebin) if possible?
Love the look!
Thanks, it works!
Good day - hoping for sum assistants - struggling to implement the auto close in a popup.
Where do I insert this in the popup config and what changes do i need to make - will appreciate a working config example,
action: function (item, entity) {
this.$scope.entityClick({}, item, entity);
$timeout(function () {
this.$scope.closePopup();
}, shorter_timeout_in_millliseconds_to improve user experience);}`
Thanks for any assistance
should be: setTimeout
@Romkabouter thanks for the response.
Do you perhaps have a popup config example.
Much appreciated
Thanks
Please post you tile config, so I can put it in the right spot
@Romkabouter
Thanks it a bit log includes lights on counter as well.
Thanks
{
position: [0, 1],
type: TYPES.POPUP,
id: {},
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#ffa500',
};
}
else {
return { 'backgroundColor': '#ffa500',
};
}
},
icon: function () {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = ["&switch.sonoff_kitchen_couter.state", "&switch.sonoff_kitchen_light.state", "&switch.sonoff_bathroom_light.state", "&switch.sonoff_pantry_light.state", "&switch.patio_room_light.state", "&switch.living_room_light.state", "&switch.sonoff_frontdoor.state", "&switch.ha_shelly_1.state", "&switch.sonoff_passage_light.state", "&switch.sonoff_bedroomlight.state", ];
//designate a counter variable
var count = 0;
//loop through the array of lights
for (i = 0; i < lights.length; i++) {
if (this.parseFieldValue(lights[i]) === "on") {
//increment the counter by 1 if the given light is on
count++;
}
}
//return the number of lights that are on
switch (count) {
case 1:
return "mdi-numeric-1-circle-outline";
case 2:
return "mdi-numeric-2-circle-outline";
case 3:
return "mdi-numeric-3-circle-outline";
case 4:
return "mdi-numeric-4-circle-outline";
case 5:
return "mdi-numeric-5-circle-outline";
case 6:
return "mdi-numeric-6-circle-outline";
case 7:
return "mdi-numeric-7-circle-outline";
case 8:
return "mdi-numeric-8-circle-outline";
case 9:
return "mdi-numeric-9-circle-outline";
case 10:
return "mdi-numeric-10-circle-outline";
default:
return "mdi-numeric-0-circle";
}
},
title: 'Lights On',
state: false,
popup: {
tileSize: 100,
items: [
{
position: [1, 1],
width: 1,
title: 'Patio Lights',
subtitle: '',
id: 'switch.patio_room_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7aa379',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-track-light"
},
},
{
position: [2, 1],
width: 1,
title: 'Passage',
subtitle: '',
id: 'switch.sonoff_passage_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7aa379',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-wall-sconce-round"
},
},
{
position: [3, 1],
width: 1,
title: 'Bathroom',
subtitle: '',
id: 'switch.sonoff_bathroom_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7aa379',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-wall-sconce-flat"
},
},
{
position: [0, 0],
width: 1,
title: 'Counter',
subtitle: '',
id: 'switch.sonoff_kitchen_couter',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7992a3',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-vanity-light"
},
},
{
position: [0, 1],
width: 1,
title: 'TV Room',
subtitle: '',
id: 'switch.living_room_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7aa379',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-ceiling-light"
},
},
{
position: [1, 0],
width: 1,
title: 'Kitchen Light',
subtitle: '',
id: 'switch.sonoff_kitchen_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7992a3',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-ceiling-light"
},
},
{
position: [3, 0],
width: 1,
title: 'Kitchen Led',
subtitle: '',
id: 'switch.kitchen_led_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7992a3',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-wall-sconce-flat"
},
},
{
position: [4, 0],
width: 1,
title: 'Kitchen Door',
subtitle: '',
id: 'switch.ha_shelly_1',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7992a3',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-coach-lamp"
},
},
{
position: [0, 2],
width: 1,
title: 'Bedroom',
subtitle: '',
id: 'switch.sonoff_bedroomlight',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#bd8abf',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-dome-light"
},
},
{
position: [2, 2],
width: 1,
title: 'Future L3',
subtitle: '',
id: 'switch.kitchen_led_light',
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-off",
off: "mdi-lightbulb-off"
},
},
{
position: [4, 1],
width: 1,
title: 'Front Door',
subtitle: '',
id: 'switch.sonoff_frontdoor',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7aa379',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-outdoor-lamp"
},
},
{
position: [4, 2],
width: 1,
title: 'Pool Area',
subtitle: '',
id: 'switch.sonoff_poolarea_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#bd8abf',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-spotlight-beam"
},
},
{
position: [2, 0],
width: 1,
title: 'Pantry',
subtitle: '',
id: 'switch.sonoff_pantry_light',
customStyles: function(item, entity){
if (entity.state === 'off') {
return {'backgroundColor': '#7992a3',
};
}
else {
return { 'backgroundColor': '#e6e67c',
};
}
},
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-ceiling-light"
},
},
{
position: [1, 2],
width: 1,
title: 'Future L2',
subtitle: '',
id: 'switch.sonoff_pantry_light',
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-off",
off: "mdi-lightbulb-off"
},
},
{
position: [3, 2],
width: 1,
title: 'Future L4',
subtitle: '',
id: 'switch.sonoff_pantry_light',
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-off",
off: "mdi-lightbulb-off"
},
},
]
}
},
Thanks again
That is horrible to read, you really should get your indentations fixed 
Anyway, on all tiles in the popup that code should be placed.
Start with the first to try it, which is title: ‘Patio Lights’,
i agree need to get around to it, Thanks will give it a shot…@Romkabouter - well it seems my indentations is not the worst of it 
I just can’t get it to work.
Once inserted, the light switch doesn’t work and popup don’t close.
My entire setup is popup with in popups - it would be great to have it auto close after a selection and time period.
Thanks again for your time.
A small popup example with the code would assist me to figure out what’s wrong - if possible
1 Like
Hi!
is it possible to rotate the camera image 90 degrees? I use ESPCAM and there is no such possibility
Looking to do something similar, did you resolve this?
No, I moved away from the idea and redone my dashboard and moved to the wonderful work Mattias Persson did : A different take on designing a Lovelace UI
Thanks for coming back to me 
Can anyone confirm whether it’s possible to colour the text / icon of a TEXT_LIST item using a function. I don’t want to dynamically colour all of them and I am looking at having a battery icon turn red if it’s below 10% for example.
I just stumbled upon your question as I was trying to achieve this look myself. I was able to blur the background when a popup was open by using the following in custom.css:
backdrop-filter: blur(5px);
Initially this wouldn’t work when testing on my browser and it turned out that backdrop-filter isn’t yet supported by Firefox, I tested again in Chrome and the background is blurred as expected
I am currently using the transparent theme. Is there a way I can change the font color for all the tiles to black using the theme.css file?
Some one was able to use a google login and redirect to the tile board page securely ?