how does it look when you turn it on (from lovelace for example)?
how does it look in lovelace/dev panel?
Thanks TrickerZ,
here is my code snippet, it is part of a groups section in my config.js. It gives me an error on the last code line })
{ // list of lights on
position: [0, 2],
title: “Verlichting aan”,
height: 1,
width: 3,
id: “group.all_lights”,
type: TYPES.TEXT_LIST,
state: false,
list: [1, 2, 3, 4].map(function (id) {
return {
title: function (item, entity) {
var list = [];
var entities = this.parseFieldValue(’&group.all_lights.attributes.entity_id’, item, entity);
entities = entities.split(’,’);
for (var i in entities) {
var entity_state = this.parseFieldValue(’&’ + entities[i] + ‘.state’, item, entity)
if (entity_state == ‘on’) {
list.push(this.parseFieldValue(’&’ + entities[i] + ‘.attributes.friendly_name’, item, entity));
}
}
return list[id-1];
},
value: function (item, entity) {
var list = [];
var entities = this.parseFieldValue(’&group.all_lights.attributes.entity_id’, item, entity);
entities = entities.split(’,’);
for (var i in entities) {
var entity_state = this.parseFieldValue(’&’ + entities[i] + ‘.state’, item, entity)
if (entity_state == ‘on’) {
list.push(this.parseFieldValue(’&’ + entities[i] + ‘.attributes.friendly_name’, item, entity));
}
}
return list[id+3];
}
}) // here is where I get an error : missing ;
}, // end list of lights
It shows as gray within a lovelace panel, clicking on it has no effect.
Within dev-states its state is “unavailable”
Thanks 
If so, there’s nothing related to tileboard, you need to fix it first in Homeassistant and then expose to tileboard.
it looks like you have an extra } after the return list[id+3];
Thanks for pointing me in the right direction, but removing the } after return list[id+3]; did not work. When I added an extra } before the line with }) it did the trick. Looks like the code was missing a closing } for the return{ statement.
Thanks for sharing your code.
Yeah, my code doesn’t have the leading and trailing braces. Glad you got it working. Just as a note, this will work for up to 8 lights being on. For more, you’d have to add 5, 6, 7… to the list.
Is it possible to override .item.-off.-sensor_icon .item-entity--icon, within a customStyles: function?
I want to be able to set the opacity on the mdi icon when its state is off.
{
position: [3, 1],
type: TYPES.SENSOR_ICON,
id: 'input_boolean.black_bin',
title: 'Bin Week',
state: false,
icons: {
on: "mdi-dump-truck",
off: "mdi-recycle",
},
},
This switches between two icons depending on the bin collection. It would also allow me to dim the mdi icon when a light has a state of unavailable.
Is it possible to do floor plan or overlayed images with button on them like in lovelace ?
I’m trying to use a camera tile but unfortunately when open to fullscreen the stream flickers
I commented in an opened issue
What do you have for the refresh setting for the camera tile? I have 10000 (ms so 10 seconds) and I do not experience the issue that you demonstrate. Perhaps you can try adjusting the setting to see if you get different results.
I’m using 1500ms, now I understand that’s the problem. The connection with the camera slow and using a lower refresh rate makes it flicker.
Anyway, I activated stream: in Home assistant, so that it just streams like rtsp:// protocol but I think TileBoard isn’t working that way right?
Guys can someone please help me?
I am using this for the first time after a while and I use https://XXX.duckdns.org to access my HA. How do I set tileboard up? I have generated a token and added it to my config.js. I have also put my serverUrl: as https://XXX.duckdns.org.
After rebooting HA and clearing the cache etc I only get a white page with arm and dis arm etc (see image below).
Can someone please help?
Thanks.
Looks like it can’t access the stylesheet for some reason. Try opening it up in a desktop browser and open the developer console (usually F12) and see if there are any errors listed there.
I have two questions, which I hope someone can help with.
- where do I define the size of page icons?
- What code can be inserted at tile-level that overrule the page theme, so I can change the background color of a specific tile?
This would help me so much, thanks
I am so grateful for you posting the code for dynamic background images on tiles! It was driving me crazy! Thanks very much
I got this code working for me
customStyles: function(item, entity){
return {
'opacity': this.states['input_boolean.lillestuescene3'].state === 'off' ? '0.4' : '1'
}
}
},
Not sure I understand your issue, but this URL works for me
https://xxx.duckdns.org:8123/local/tileboard/index.html
Same here, works perfect till now.
When opening in chrome I get 403: Forbidden
I’ve integrated Sonos into my TileBoard successfully. However, there is an aspect I don’t like and would appreciate advice on how to fix. As the background for the tile, I’m using the album cover. But on many covers, the text (song name, Source button) and symbols (play/pause, mute, etc) on the tile gets washed out by the album cover. It’d be perfect if those text and symbols could have their own background color on top of the album cover. Here’s my code for the tile:
{
position: [0, 0],
id: 'media_player.kitchen',
type: TYPES.MEDIA_PLAYER,
hideSource: false,
hideMuteButton: false,
width: 2,
height: 2,
state: false,
subtitle: '@attributes.media_title',
bgSuffix: '@attributes.entity_picture',
}
I have used bgOpacity: 0.5 which helps make the text and symbols more visible but leads to lousy album covers. I also have left out the picture which of course makes the text and symbols very reasonable but I really like the picture. Ideally, the text and symbols would bring along their own background color that goes on top of the image. Any suggestions on how to address this issue?
Thanks.