So as I mentioned, adjust the size of tiles…
I don’t think you have fully understood my question. Feel free to read it back and let me know if you have any questions.
Well, since it’s set up to scroll horizontally, the right side is going to flow offscreen. I don’t know that there’s a way to control that other than changing the tile size/arrangement so that it all fits on screen and scrolling is not required. The only thing I can think of would be to put all the tiles inside of an iFrame, which would require extensive customization of the source code.
It’s the header I am concerned about. I want the right side to match the left side, align it right and match the same spacing either side. I am totally fine with the tiles over flowing. In fact, I have another group which can’t be seen until you scroll.
Hello,
you can translate it manually at the end of /config/www/tileboard/scripts/vendors/angular.min.js file.
For the screensaver date format, change it in /config/www/tileboard/scripts/directives.js.
I’ve added <script src="scripts/angular-locale_nl-be.min.js"></script> at the end of the scripts in the index.html
Then, you can get your language at https://cdnjs.com/libraries/angular.js/ for example.
atm I’m working this around using an input_select holding effects & colours and a python script on home assistant side. not very convenient, but that’s a first step 
(next step is to create a LIGHT_SELECT, and next one is to find an appropriate color-picker :))
I get your question now, I missed that you were referencing the header. I think it’s because your navigation is on the left hand side, so the header is using the same margins on the right and left when taking the whole page into account. Technically, the header is balanced if you count the navigation as part of the page. The navigation appears to be 120px wide in the CSS, so maybe give this a shot in your custom.css file:
.header {
left: 120px;
That should move the start of the header 120px over and then it should be balanced over the tile content only.
Yeah ! Thanks a lot for this tip !!!
For anyone who wishes to be able to pick background image for TileBoard via a tile, here is the code:
{
position: [0, 0],
type: TYPES.CUSTOM,
id: {},
state: false,
title: 'Pick background',
icon: 'mdi-image-filter',
action: function (item, entity) {
var inp = document.createElement('input');
inp.setAttribute('type', 'file');
inp.setAttribute('accept', 'image/*');
inp.addEventListener('change', function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.addEventListener('load', function(e) {
var img = e.target.result;
CONFIG.pages.forEach(function (page) {
localStorage.setItem('pagesBg', img);
page.bg = img;
page.styles = null;
});
angular.element(window).triggerHandler('view:updated');
});
reader.readAsDataURL( this.files[0] );
}
});
inp.click();
}
}
3 Likes
Looks good!
Nothing wrong with using a negative number in CSS if it gets the job done.
it is possible to create popup window with camera view when move is detected?
i have camera:
{
position: [0, 0],
id: ‘camera.tv’,
type: TYPES.CAMERA_THUMBNAIL,
bgSize: ‘cover’,
width: 9,
height: 5,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 150, // can be number in milliseconds
bgSize: ‘contain’
},
refresh: function () { // can also be a function
return 300 + Math.random() * 1000
}
},
and pleanty of motion detector mi aqara:
Give this a shot:
.page {
background-attachment: fixed;
}Thanks a lot, this TileBoard made me use my old ipad again. Originally I had made a nice lovelace setup just to find out that it doesn’t work on older browsers. So now I use a combination of Lovelace (for mobile) and Tileboard (for tablets).
Only problem I face is that pictures don’t get rounded corners in my setup. I did try overflow: hidden.
Btw I have 0 knowledge of java so please forgive me for that.
2 Likes
Looks nice! How did you do those headers to group your devices? Are those just modified text_list tiles? I’ve been thinking of doing something similar.
Yes they are just text input boxes (like the ones in the example config) but just modified the height and width of it. If there was a nicer way I would have done that instead?m, but I have little knowledge about coding. I was already surprised that I have managed to make a nice looking lovelace setup without asking much questions to the community haha.
Perfect! Well good to see an example of what it looks like before I try it for myself.
Anyone use TileBoard with an amazon fire 7? Seeing that it’s in offer at the moment and thinking about buying a couple since I am nearing the end of my build. Would it work fine for the JavaScript etc?
Yes Tileboard will work fine to my knowledge. I use it on an ipad 3 (2012) so I’m betting the fire tablet will work fine. However if you want to use lovelace (and in particular custom cards) then it might not work.