Home Assistant Community

TileBoard - New dashboard for Homeassistant

#1799

So as I mentioned, adjust the size of tiles…

0 Likes

#1800

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.

0 Likes

#1801

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.

0 Likes

#1802

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.

0 Likes

#1803

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.

0 Likes

#1804

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.

0 Likes

#1805

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 :slight_smile:
(next step is to create a LIGHT_SELECT, and next one is to find an appropriate color-picker :))

0 Likes

#1806

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.

0 Likes

#1807

Yeah ! Thanks a lot for this tip !!!

0 Likes

#1808

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();
    }
 }
1 Like

#1810

Looks good!

Nothing wrong with using a negative number in CSS if it gets the job done.

0 Likes

#1812

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:

0 Likes

#1813

Give this a shot:

.page {
  background-attachment: fixed;
}
0 Likes

#1814

Thank you @apop - that worked on Amazon Fire tablet.

0 Likes

#1815

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.

0 Likes

#1816

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.

0 Likes

#1817

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.

0 Likes

#1818

Perfect! Well good to see an example of what it looks like before I try it for myself.

0 Likes

#1819

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?

0 Likes

#1820

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.

0 Likes