I also seem to be struggling with the path.
I have tried many combinations.
can anyone help us?
{
position: [0, 3],
type: TYPES.IMAGE,
id: {},
title: 'WiFi',
subtitle: 'Code for',
url: 'images/Wifi-QR-Code.png'
},
Where are you hosting your images? Are you using Home Assistant to serve the files? Are you storing them in an images folder under where your index.html file is located and just opening index.html locally without a web server? Are you using IIS, Apache, etc?
i’m storing the image in the images dir of tileboard and accessing the index.html via an ipad for display
Doesn’t work for me either no matter what I use for the url. Maybe try TYPES.CAMERA without fullscreen:. Looks like the url needs to include http:// and be fully qualified, otherwise, it gets the serverurl prepended. You could host the images with home assistant by creating the www folder where you have your config located and placing files in there then accessing using http://your_ha_server/local/imagename.png.
{
position: [0, 0],
id: {},
title: 'Test Image',
type: TYPES.CAMERA,
bgSize: 'cover',
filter: function (item, entity)
{
return "http://test.com/images/image.png";
},
},
How do I get the date and time on the bottom of the screen? When I change the padding px’s the buttons become unclickable. Also is there a way to Align the text to the right?
Like so:
01:02
Monday, September 10
hello, I need help.
how do i make this transparency on my tileboard panel?
Thanks
- I’m new to HA!
However, there is a slight problem with doing this.
When you add it as a camera it works but on the camera fullscreen for other cameras it appears as a camera!
Forgot about that.
I did some digging into the code and I located the problem. There’s a typo in main.css.
Here’s the css code that’s the issue. item-image should be .item-image.
.item-camera,
item-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
Here’s the corrected code:
.item-camera,
.item-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
You can change it in main.css but I prefer to do so in custom.css. Just add this to custom.css:
.item-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
if you changed “url:” to “bg:” it works for me
You can do that. It places the image on a different element. You can actually do both url: and bg: if you want. url: will be above bg:. You can adjust opacity of url: and see bg: behind it.
I see that the main.css in github has been updated to fix the .item-image css.
Hi everyone, I use tileboard on the wall to speed things up. However, in my opinion, an essential “widget” is missing, the ability to add the interactive floor plan. What do you mean?
In the sense that in hassio (see photo) I have a page with only the floor plan where I can turn on or off the various lights or even view the temperature of the rooms. What do you think? it’s possible?
Thank you all
Sorry for the poor English!
5 Likes
Tileboard is (pardon the understatement) simply a webpage. So in the directory that you have hosting your tileboard, add a few directories and copy then customize your tileboard install for each one. For example in my install I have /m for mobile /ws for workshop and /dt for desktop - each with a different configuration.
Had some more fun recently and tried to “stack” tiles and worked out beautifully;
I can control my Roomba with a standard TYPES.VACUUM tile and have a TYPE.GAUGE tile showing battery status.
Love it , next is a neat way to indicate the bin is full.
{
position: [0.6, 2.29],
width: 1,
height: .5,
title: false,
subtitle: false,
state: false,
type: TYPES.GAUGE,
theme: ITEM_TRANSPARENT,
id: 'sensor.batt_roomba',
value: function(item, entity){
return entity.state;
},
settings: {
size: 80, // Defaults to 50% of either height or width, whichever is smaller
type: 'arch', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 100, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
thresholds: { 100: { color: '#8adb4c'}, 50: { color: '#ff8c00' }, 20: { color: '#ff0000' }}, // Defaults to undefined
labelOnly: true, // Defaults to false
foregroundColor: 'rgba(0, 150, 136, 1)', // Defaults to rgba(0, 150, 136, 1)
backgroundColor: 'rgba(0,0,0,0.1)', // Defaults to rgba(0, 0, 0, 0.1)
fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
},
},
{
position: [0.7,2.21],
width: 0.8,
height: 0.8,
type: TYPES.VACUUM,
theme: ITEM_TRANSPARENT,
state: false,
title: false,
id: 'vacuum.roomba',
icon: 'mdi-robot-vacuum',
customStyles: function (item, entity) {
if (entity.state == 'on') {
return {
'backgroundColor': 'transparent',
'color': '#3ac900',
};
} else {
return {
'backgroundColor': 'transparent',
'color': '#f7f7f7',
};
}
},
4 Likes
can you please advise how to read on android proper intent “link” … .I would like to add phone, google maps, chrome and ToDoist tiles and do not know where to fin proper “activity” string.
1 Like
ok found solution 
… i used Universal Launcher in Fully which shows everything
anyway thank you for an inspiration
TileBoard newbie here getting back in HA via docker…
I’m struggling with terminology and where HA stashes things. If I run the docker container with /local mapped to persistent storage on my docker host, HA comes up just fine with the default lovelace interface etc…but where/how do I install TileBoard ?
The github instructions have a cryptic instruction saying “Create a directory called tileboard inside www directory in HA’s config path and move all of the files there”
For running HA in docker, how do I find the config path and is there a www directory there that we’re supposed to somehow know how to find ?
(admittedly frustrated by HA assuming we know the answers in order to ask the questions, but I would like to at least give it a try since TileBoard looks like exactly the interface I’d like to set up).
Any help appreciated.
What do you see under /local?
If you know where your configuration.yaml file is, that’s your config folder. Create www in there and place your tileboard related files inside there for hosting.
I have it running in docker on Ubuntu 18.04.1 LTS. The config path there is /usr/share/hassio/homeassistant. You can also run bash inside the docker container: sudo docker exec -it homeassistant bash. Inside there, it’s under /config.
1 Like
Got it. I was overthinking obviously.
After doing that things started up fine. Screens look awful of course because they refer to things not defined here, but the UI does come up so I can get going on trying it out here.
Thanks for the help!
I’m trying to use my Raspberry pi with touchscreen as an alarm clock in combination with my Home Assistant.
i’m thinking of running the Magic Mirror software on the pi with an extra module to showcase Tileboard.
Is there someone who managed to get a fully working alarm clock in Tileboard?
I was working with: https://github.com/rdehuyss/homeassistant-lovelace-alarm-clock-card/blob/master/README.md
But tileboard looks a lot cleaner and easier to get on the touchscreen.
Hey guys, maybe somebody could help me with this.
On pc the live camera stream works but on safari on ipad it doesn’t.
Maybe you guys could figure out.
Thanks in advance