Solved: needed to use the person option, and then add entity_picture.
how do you do ?
Please share the source code
Thanks
There is no magic in what I’ve done, Tileboard does all the magic, I’ve only placed the tiles on the right spot. the map of my home is the background , positioning of the tiles took some tinkering.
anythnig in particular you want me to share .?
Good idea.
Thanks ,possibilities are endless and it’s fun to do , in the end, you end up with weird position numbers like this
{
height: .25,
width: .25,
position: [0.13, 2.5],
type: TYPES.SENSOR_ICON,
id: 'sensor.status_patio',
title: false,
state: false,
customStyles: function (item, entity) {
if (entity.state == 'close') {
return {
'backgroundColor': '#ff0000', 'color': '#ffffff',
};
} else {
return {
'backgroundColor': '#8adb4c', 'color': '#ffffff',
};
}
},
},
1 Like
Sorry for replying to an old answer regarding the weather tile (TileBoard - New dashboard for Homeassistant)… How do you use the weather iconimage? Store image files somewhere under the images folder and parse the image names as you do with the icons?
I plan to use YR weather instead and it provides the symbol as either an index or a web-link to the actual symbol as an attribute.
BTW, thanks for a great project!
Ok, I know the problem now, but don’t know how to fix it. When I inspected the page, I see the following.
<div style="background-image: url("https://hassio.home:8123http://camera-server.home/mjpg/backyard?_i=0"); background-size: cover; opacity: 1;"></div>
So how do I get rid of the first part of the URL, so that it doesn’t try to find a resource within my HASS instance, and instead force it to use simply a known URL that I am entering? Original js config is:
{
position: [4, 0],
type: TYPES.CAMERA,
id: {},
bgSize: 'cover',
state: false,
fullscreen: {
type: TYPES.CAMERA,
filter: function (item, entity) {
return "http://camera-server.home/mjpg/backyard"; },
bgSize: 'contain'
},
filter: function (item, entity) {
return "http://camera-server.home/mjpg/backyard";
}
}
Ahhhhhh, it’s a bug. The github post has a workaround if anyone else is interested. I got it working once I changed the directives.js based on the issue.
I have this as mine.
title: '',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 4,
height: 2,
state: false,
filter: function(url) {return "https://ipaddress:8765/picture/1/current/"},
Thanks for all the help from the community so far!
I’ve taken the weather applet from https://github.com/resoai/TileBoard/blob/68d46560da28fcc9f560f44068897bc34c526bd3/TILE_EXAMPLES.md and it works pretty well. However, under chance of rain, it is showing NaN instead of 0, like it shows in HA. How can I fix this? I’m guessing I need a filter of some sort but any type of filter I have tried, I’ve had no luck.
{
position: [0, 0],
height: 3,
//classes: ['-compact'], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: 'sensor.temperature',
title: 'Weather',
state: '&sensor.dark_sky_summary.state', // label with weather summary (e.g. Sunny)
icon: '&sensor.dark_sky_icon.state',
//iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: { // most of that fields are optional
summary: '&sensor.dark_sky_summary.state',
// temperature: '&sensor.dark_sky_temperature.state',
// temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
temperature: '&sensor.temperature.state',
temperatureUnit: '&sensor.temperature.attributes.unit_of_measurement',
windSpeed: '&sensor.dark_sky_wind_speed.state',
windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
// humidity: '&sensor.dark_sky_humidity.state',
// humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
humidity: '&sensor.humidity.state',
humidityUnit: '&sensor.humidity.attributes.unit_of_measurement',
list: [
// custom line
'Feels like '
// + '&sensor.dark_sky_apparent_temperature.state'
+ '&sensor.heat_index.state',
// + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
+ '&sensor.heat_index.attributes.unit_of_measurement',
// another custom line
'Pressure '
+ '&sensor.dark_sky_pressure.state'
+ ' mb',
// yet another custom line
+ '&sensor.dark_sky_precip_probability.state'
+ ' %'
+ ' chance of rain',
+ '&sensor.rain_24_hour.state'
+ ' in'
+ ' 24hr rain'
]
}
},
+ parseInt(this.parseFieldValue('&sensor.dark_sky_precip_probability.state'))
Thanks @resoai, however when I apply that, I then can’t load the page, since it tells me that this.parseFieldValue is not a valid function. Is there an error in the syntax you sent over?
TypeError: this.parseFieldValue is not a function
OK, first a disclaimer. I haven’t worked with HTML or JS since -98 or something so please bear with me:-)
Is there any simple way to hide scrollbars for the TYPE.IFRAME tile?
If it was pure HTML instead I assume you should do something like <iframe scrolling="no" .. /iframe> but how do you apply that to a tileboard tile?
Thanks
I know it’s probably in this thread of 2,493 comments, but I haven’t found it. How can I change the background color of a tile based on the numeric value of a sensor? I’m thinking the filter option but don’t know how to implement it.
This thread could really do with being broken into sub topics and posted in a Wiki for help as it’s getting too large.
I know … people will suggest ‘get on with it then’ but I honestly just don’t have the time at the moment - as I’m sure no-one else has either. So many things get in the way of good intentions, which is a shame as the thread increasingly doesn’t serve a purpose currently.
1 Like
I’m unable to get this working with the transparent theme.
With theme: null it works perfectly.
Any ideas?
Apologies for also asking this same question. How do you set it for the individual tile and not for the whole page? I can change the background color in the inspector, but it changes it for all the tiles. I just want to change the individual tile but I have yet to do it correctly.
customStyles: function(item, entity){
var a = entity.state;
var c = 'white';
if (a >= 35 && a < 40 ) { c = 'rgba(255,255,0,0.9)'};
if (a >= 40) { c = 'rgba(255,0,0,0.9)' };
return {
'background-color': c,
'color': c,
}
},
UPDATE: This has to do with the !important flag that is set in the themes.css file for the item background on the transparent theme.
.-theme-transparent .item {
color: #707070;
background: rgba(132, 122, 116, 0.1) !important;
box-shadow: 1px 1px 0 rgba(54, 47, 36, 0.35), -1px -1px 0 rgba(200, 200, 200, 0.1);
border-radius: 2px;
}
It is ignoring my inline background color in the function because !important overrides that value. I have tried both ‘backgroundColor’ and ‘background-color’ in the function and neither will work in the transparent theme. I’m still not sure how to get around this.
Thanks, this works fine. One thing I noticed is that since I am streaming mpeg from BlueIris, I am limited to 6 streams. It’s not a BlueIris or webserver issue, it’s an issue with Chrome only allowing 6 websockets to the same hostname. Short of making new DNS entries or referencing by IP address for some of the cameras, is there any way to better handle the sockets issue?
1 Like
I assume you’re not running grafana in hass.io on a raspberry pi then? Grafana hass.io plug in doesn’t seem to support rendering of graphs as images. Or does anyone know about a solution to solve that issue?
I agree. I would like TileBoard to get it’s own tag in this forum. Anyone know how to request?
edit: I went into third party integrations and asked for a TileBoard tag.