How about instead of using a screensaver and turning off the display, have it set the display to as dim as it can go and never turn off the display. If you can, set it to go to full brightness when motion is detected in the camera. That way way, it’ll always be active in the foreground. That’s the way I have mine configured and it works great.
First just want to give a huge thanks for TileBoard! Just what I wanted for my move from SmartThings to HA.
As many others, I want to change the tile background (for higher visibility) when a switch is on. From reading this thread, the below “should” work:
customStyles: function(item, entity){
return {
'backgroundColor': entity.state === 'on' ? '#ff0000' : '#ffff00'
}
}
By default that does not work, but if I remove “!important” from theme.css then it does. The other thing that works is in the browser dev tools, can add “!important” to the above color that gets added. But what does not work, is adding “!important” to the config.js code:
customStyles: function(item, entity){
return {
'backgroundColor': entity.state === 'on' ? '#ff0000 !important' : '#ffff00 !important'
}
}
When doing that, the color change never makes it to the dev window even. What is also weird, if I make the above rgba() it changes it to rgb().
Any thoughts on the best way to work around this issue? Thinking to change the theme.css is not the best.
Thank you!
Maybe I just answered my own question, this custom.css seems to work with that “!important” still in the theme.css.
.item.-on .item-entity-container {
background: rgba(30, 150, 255, 0.50);
}
this the most appropriate?
1 Like
Here’s an example of how you can put it in multiple locations on this tile.
{
position: [1, 0],
width: 1,
height: 1,
//title: 'Utility',
title: function (item, entity) {
return ( 'Utility/Bat: ' + this.states['sensor.utility_window_battery'].state + '%');
},
//subtitle: 'Windows',
subtitle: function (item, entity) {
return ( 'Window/Bat: ' + this.states['sensor.utility_window_battery'].state + '%');
},
type: TYPES.SCRIPT,
id: 'binary_sensor.utility_window_contact',
icons: {
on: "mdi-window-open",
off: "mdi-window-closed"
},
/*states: {
on: "Open",
off: "Closed"
},*/
state: function (item, entity) {
return ( 'Bat: ' + this.states['sensor.utility_window_battery'].state + '% / ' + (entity.state === 'on' ? 'Open' : 'Closed'));
},
customStyles: function(item, entity) {
return { 'backgroundColor': entity.state == 'on' ? 'red' : 'green' }
},
},
2 Likes
Thanks for TileBoard, it is really getting my HA and display a step closer to how I want it every time I work with it. I’m trying to get a full screen (iframe) google calendar to work. Any suggestions on how to get this done?
I’ve been using the screensaver and its showing slideshows of my kids. Anyway to make this more simpler? I currently have a folder with 400+ pictures, all the pictures are just numbered, ie. 1.jpg, 2.jpg. And the tileboard config file just points to that.
{
bg: "../screensaverimages/354.jpg",
rightTop: [
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>our</b> Home!',
styles: { fontSize: '40px' }
}
]},
I thought about having it generate a random number and stick it within the URL, and have the code repeated 10 times so it will show 10 random images each time it goes to sleep. Am I on the right path or is there a better way to do this? I would love to be able to extract the ‘tags’ that Adobe Lightroom sticks into them, and then filter by tag or even just display the tags on the slide but that is probably farther in the future.
If you’re on android you can use this screensaver app fotoo to pull photos from cloud (Google, Dropbox,OneDrive) or local server. Essentially gives the android device the same photo frame functionality of a Nest Hub. Also able to pull the exif/location info and display it on top of the photo.
I’m actually on a Pi4. I’d like to keep the functionality within Tileboard
I used:
bg: "../screensaverimages/" + Math.floor(Math.random() * 396 + 1) + ".jpg"
which works, but the problem is that even if I wake the screensaver, when it goes back it’ll use the same images, unless I hit refresh. This seems so crude. Learning Javascript, but I have a long way to go.
Hi, could you share your code for this? I got a similar use case and im a bit stuck.
I’ll post my use case here aswell, and someone might be able to help.
I have a car heater integrated with HA. Its controlled with two input_number, one for hours and one for minutes. I would like to be able to longpress a sensor or a switch and get these two input_number sliders to control my departure time.
Im pretty sure its doable with the popup tile and probably some other tile but im not good enough at Javascript. Any examples would be appreciated
@sparv3n, this is how I solved single click (light group on/off toggle) and long press (popup with individual light tiles):
// Alla Lampor - Tvättstugan
{
type: TYPES.POPUP,
id: 'light.room_tvattstuga',
position: [0, 3],
title: 'Tvättstugan',
state: false,
icons:
{
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
action: function(item, entity)
{
return this.apiRequest({
type: 'call_service',
domain: 'light',
service: 'toggle',
service_data:
{
entity_id: 'light.room_tvattstuga',
},
});
},
secondaryAction: function(item, entity)
{
return this.$scope.openPopup(item, entity);
},
popup: {
tileSize: 130,
items: [
{
type: TYPES.LIGHT,
position: [1, 0],
title: 'Bänkbelysning',
id: 'light.tvattstuga_bankbelysning',
state: false,
icons:
{
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders:
[
{
title: 'Brightness',
field: 'brightness',
max: 255,
min: 0,
step: 5,
request:
{
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness",
}
}
]
},
{
type: TYPES.LIGHT,
position: [0, 0],
title: 'Taklampa',
state: false,
id: 'light.tvattstuga_taklampa',
icons:
{
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
]
}
},
1 Like
Great! That made me figure the rest out.
I changed the lights to sliders and made them change the value of my hours/minutes input.
Thanks alot.
{
type: TYPES.POPUP,
id: 'switch.motorvarmarefiat',
position: [0, 2],
title: 'Motorvarmare Fiat',
state: false,
icons:
{
on: "mdi-car-defrost-front",
off: "mdi-car-estate",
},
action: function(item, entity)
{
return this.apiRequest({
type: 'call_service',
domain: 'switch',
service: 'toggle',
service_data:
{
entity_id: 'switch.motorvarmarefiat',
},
});
},
secondaryAction: function(item, entity)
{
return this.$scope.openPopup(item, entity);
},
popup: {
tileSize: 130,
items: [
{
type: TYPES.SLIDER,
position: [0, 0],
width: 1,
title: 'Timmar',
state: false,
id: 'input_number.car_heater_hour',
slider: {
min: 0,
max: 24,
step: 1,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value",
}
}
},
{
type: TYPES.SLIDER,
position: [1, 0],
width: 1,
title: 'Minuter',
state: false,
id: 'input_number.car_heater_minutes',
slider: {
min: 0,
max: 60,
step: 5,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value",
}
}
},
1 Like
Does anyone here have an IP camera that shows either a snapshot ever second or a stream inside Tileboard? If so, how is your camera setup? What protocol did you use?
Thanks.
you must find the url of your camera that provide the stream fist, test it with vlc first.
my tileboard setup for camera is
{
position: [2.2, 0],
title: 'Cam Entrance',
id: 'camera.cam_1',
type: TYPES.CAMERA,
bgSize: 'cover',
width: 2,
state: false,
icon: 'mdi-monitor',
fullscreen: {
type: TYPES.CAMERA_STREAM,
refresh: 200, // can be number in milliseconds
bgSize: 'contain',
filter: function(url) {
return 'rtsp://user:[email protected]/0';
},
},
refresh: function () { return 3000 + Math.random() * 1000 }
},
see that ending zero in url?
@resoai, can i use anonymous function to change the tile TYPE?
like this?
type: function() {
if(this.parseFieldValue("&switch.leak_bathroom_alert.state") == on)return 'TYPES.SWITCH';
else return 'TYPES.SENSOR_ICON';
},
if no, what workaround i have?
i need to be switch if the state is on, icon if state off
Hello,
Also a problem with enabling the camera stream in the tileboard.
I see my flow in lovelace. I see my stream in VLC
My stream looks like this: rtsp: // admin: [email protected]: 554 // h264Preview_01_sub.
I am trying to embed it in config. But I see a dark screen.
P.s. I am sorry for the English. I use a translator.
{
position: [1, 0],
title: 'Cam Entrance',
id: 'camera.frontdoor',
type: TYPES.CAMERA,
bgSize: 'cover',
width: 1,
state: false,
icon: 'mdi-monitor',
fullscreen: {
type: TYPES.CAMERA_STREAM,
refresh: 200, // can be number in milliseconds
bgSize: 'contain',
filter: function(url) {
return 'rtsp://admin:[email protected]:554//h264Preview_01_sub';
},
},
refresh: function () { return 3000 + Math.random() * 1000 }
},
i think you have to use one slash “/”
Hello,
I’m trying to figure out why I’m having an issue adding a couple SYLVANIA SMART+ ColorFlex light strips which are light entities using the sample light tile example.
I get an error on the web frontend of entity undefined not found?
Any help would be appreciated.
No, it doesn’t work.
Rather, I can also see this link in VLC and lovelace.
But I can’t see the image in the tileboard.
Please any ideas.
Added later.
I have a small breakthrough.
My config looked like this:
serverUrl: 'https://' + '192.168.3.109' + ':8123',
wsUrl: 'ws://' + '192.168.3.109' + ':8123/api/websocket',
I changed to “http” and was able to see the picture on the tile. But if you click on the tile, I see a black screen.