I would just reuse it 
Getting there. I manage to create my Tile and add two new fields. I’m struggling a little with CSS though. Not my stronger side. Questions:
- I’m missing the clickable pointer on my Tile. The pointer stays as the arrow. What have I missed?
- My top left seem to have a fixed width and the text centralised but I cannot find why.
- My bottom right has the position based on
top:because I can’t make it work withbottom:.
index.html
<div ng-if="item.type === TYPES.HOUSE"
class="item-entity-container">
<div class="item-state ng-binding ng-scope house-bottom-right" ng-if="item.fields.bottom_right">
<span ng-bind="getFields('bottom_right', item, entity)"></span>
</div>
<div class="item-state ng-binding ng-scope house-top-left" ng-if="item.fields.top_left">
<span ng-bind="getFields('top_left', item, entity)"></span>
</div>
<div class="item-entity">
<span class="item-entity--icon mdi"
ng-class="entityIcon(item, entity)"></span>
</div>
</div>
custom.css
.house-bottom-right {
position: absolute;
top: 122px;
right: 6px;
}
.house-top-left {
position: absolute;
top: 0px;
left: 6px;
}
Any pointers?
And it doesn’t seem to inherit the item-clickable class either.
You would need to add your tile in main.less under:
&-clickable {
display: none;
}
&.-switch,
&.-your-tile,
and recompile less file.
I would also suggest to right-click on your tile in the browser, choose “inspect element” and play with css in real time. You probably want text-align: left to align the text.
Since setting TileBoard up I have used my external details for serverurl and WS. My domain uses SSL. Ideally id like to keep this communication local and set this as my local IP problem is when I do it doesn’t work. I think this is probably due to the https cert is there a way to stop TileBoard verifying SSL?
This is not TileBoard verifying SSL, TileBoard is just an HTML page. The best and probably the most elegant solution would be to install nginx with SSL and proxy requests from outside world to HA via HTTP rather than HTTPS.
I’m sure there is a way to start chrome with a parameter which would bypass verification but I’m not familiar with it.
Thanks for the reply @resoai I was hoping there was some kind of cert_verify option like in HAdashboard. Ill look into using nginx and browse around for other possible meathods.
@resoai but the html page is connecting to ha via secure Websocket, wss, right? I think this is what he means. Without looking it up I guess it’s a JavaScript library who takes care of that and there might be an option in that to skip verification.
1 Like
There is no library, TileBoard talks to websocket directly. Again, it is just a webpage and the warning is an expected behaviour of the browser.
is it possible to execute an event which deactivates the screensaver? Running this on an amazon fire hd 10 and I have ip cam installed which sends events to home assistant when motion is detected. I would like to deactivate the screensaver when that motion is detected.
also, is it possible to put any data overlay on the screensaver with the date/time? for example, sensor.darksky.temperature or something like that?
Also, it doesnt appear a wildcard is possible to include all jpg images in a directory. I built a short script to simply loop through and paste each one into the config.js file if it does not already exist. This way i can cron it and simply add pictures to the directory.
Currently the script works, however tileboard is not displaying the images. I confirm they are in the correct path (symlinked, but the bg1.jpeg sample pic is in teh same dir and it works). The page loads and screensaver turns on, but all of the .jpg files set by the script just do not enter the rotation. The following is the output with the script pasted below that:
slides: [
{ bg: 'images/bg1.jpeg' },
{ bg: 'images/20170405_193727.jpg' },
{ bg: 'images/20170406_180705.jpg' },
{ bg: 'images/20170407_105623.jpg' },
{ bg: 'images/20170407_204648.jpg' },
{ bg: 'images/bg3.jpg' }, // screensaverAddSedPattern
the //screensaverAddSedPattern is just a unique string i placed for sed to match on that wouldnt match any other part of the config.
#!/bin/bash
screensaverPath=/data/Screensaver_pictures/.jpg
configFile=/.homeassistant/www/tileboard/config.js
for f in $screensaverPath
do
fileBase=$(basename “$f” .jpg)
ifcat $configFile | grep -q $fileBase
then
echo “not sedding $fileBase”
else
sed -i “/screensaverAddSedPattern/i
\ \ \ \ \ \ \ \ \ { bg: ‘images/${baseOfF}.jpg’ },” $configFile
fi
done**
So the screensaver issue was a permissions issue on the photos. got that resolved. Though it does lead to another question…Are there any options for rotating pictures? All pictures get displayed in landscape mode, even if they are portrait mode.
I found a solution which ended up being really simple and had been staring me in the face the whole time. I simply turned on ignore SSL errors in each of my FullyKioskBrowser apps and it works a treat!
Haha, so Fully has it. I’m using Chrome on a NUC machine so did not do a lot of digging. I still think that exposing HA to the outside world is not a good idea though.
You can read a bit more about screensave config on our wiki page up here:
Also there’re global function to show and hide screensaver window.showScreensaver() and window.hideScreensaver()
You will need to rotate all of your images manually as it could simply be your image viewer that rotates them for you based on the EXIF information. Try opening the very same photo in Chrome and you shall see that it is not in fact rotated properly.
Haha indeed it does! Do you have a particular concern or just general security?
I have a particular concern about general security
2 Likes
If you’re at all worried about security, I’d highly recommend placing ha behind an nginx reverse proxy. It would take care of your ssl issues at the same time. Also, just consider that even though there may be nothing in ha you care about hackers getting (even though it seems access to all your switches and cameras etc would be worth worrying aobut) they could also gain access to you host machine and do further damagae from that, as well as have access to your internal network.
This is not to say ha has vulnerabilities, though I would be highly skeptical if someone said it had absolutely none, it is very safe to say that nginx as a reverse proxy has a much smaller attack surface and hardened with millions of customers and billions of tested hours.
I placed this line in but cannot get the display to show the weather on the screensaver:
...
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
rightBottom: [{ type: SCREENSAVER_ITEMS.WEATHER }],
slides: [
...
Did i missomething there? It is not erring out, it just does not display weather. Do I need define the object somewhere?
You did not define any fields for weather at all.
Thank you, not sure how I missed the wiki! I’ve just been trying to reverse engineer things, lol. One more question, is it possible to have different styles to each portion? For example, font size 40px for SCREENSAVER_ITEMS.DATETIME and 80px for .WEATHER?
As it sits, it appears to just take the last css written in the screensaver section…