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.
Dont know if you like my solution, but maybe you could be inspired by it. I’m going the other way - I only want the album cover to be displayed and nothing else. The result i want, is to create buttons for the actions I want to controll/see elsewhere than on the cover tile. I just can’t figure out, how to hide the volume-slider, play/pause, backward and forward buttons from the cover media tile. As you see, I have created buttons for play/pause, backward and forward with a simple script, but the others are giving me a pain. Maybe someone could pick and provide a hint for this, in parallel?
update. Found that if changing the media-type to TYPES.MEDIA_CONTROL, I would get a clean image of media art.
Now, I just to figure out how to control the volume with a slider or buttons.
Ah, I see. Interesting approach. One tile with the covert art, other tiles to control the music. Would you private message me your script? I’d like to use it as a starting point for developing.
It’d be great if someone develops a nice set of tiles to fully control Sonos in TileBoard, with the same functionality that comes along with the Sonos app and then posts it pubically. I was happy with partial functionality but there’s no reason we couldn’t capture the complete functionality if we work at it.
I used this:
-theme-transparent {
text-shadow: #000 2px 2px 2px, #000 2px 2px 2px, #000 2px 2px 2px, #000 2px 2px 2px;
}
in a file custom.css in config/www/tileboard/styles. It puts shadows around the controls, so they are visible on white backgrounds, and I generally like the way it highlights text on transparent themes. I also used this to hide the volume slider.
.media-player-table--td-volume .media-player--volume {
display: none;
}
So now it looks like this:
Maybe this will work for you, maybe not.
Kdem, thanks. The shadows definitely help. Good idea.
Hi Alexey.
Amazing app!! Thanks
Can you just help me how to define the size of menu buttons please?
What’s line 98 in your config.js look like? Could you share that line plus a few lines above and a few lines below it?
title: 'Main page',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline', // home icon
groups: [
{
title: 'First group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Sun.sun state',
icon: 'mdi-weather-sunny',
value: '&sun.sun.state'
},
{
title: 'Custom',
icon: 'mdi-clock-outline',
value: 'value'
}
]
},
{
position: [0, 1], // [x, y]
width: 1,
type: sensor.shower,
id: 'updater.updater',
state: '@attributes.release_notes' // https://github.com/resoai/TileBoard/wiki/Templates
}
]
},
type: sensor.shower, is line 98
For type, you want to specify the type of tile, not the entity id. Most likely you’ll want:
type: TYPES.SENSOR, or type: TYPES.SENSOR_ICON, (https://github.com/resoai/TileBoard/blob/e5ce3b3ad8f9d95dfe3086a9d9f65c2f31b033da/TILE_EXAMPLES.md)
then change the id: line to:
id: 'sensor.shower',
What is in line 22 of config.js. It should be something like
wsUrl: “wss://xxxx.duckdns.org:8123/api/websocket”,