TileBoard - New dashboard for Homeassistant

resoai · February 4, 2019, 5:38pm

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

apop · February 4, 2019, 7:56pm

Looks good!

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

jagiel · February 5, 2019, 5:58am

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:

apop · February 5, 2019, 1:58pm

Give this a shot:

.page {
  background-attachment: fixed;
}

SimplyGardner · February 5, 2019, 2:43pm

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

jimz011 · February 5, 2019, 5:10pm

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.

apop · February 5, 2019, 5:44pm

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.

jimz011 · February 5, 2019, 7:31pm

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.

apop · February 6, 2019, 3:18am

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

SimplyGardner · February 6, 2019, 10:21am

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?

jimz011 · February 6, 2019, 12:38pm

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.

resoai · February 6, 2019, 12:42pm

I would not recommend it. Although Amazon Fires are cheap, they mostly run hardware from 2007 and there is no way to change launcher which will not allow you to wake screen remotely.

I have Fire HD 8 in my kitchen and I kinda regret I purchased it.

SimplyGardner · February 6, 2019, 1:24pm

Thanks @jimz011 and @resoai. Loving the price, I must admit. Looking for something clean and simple and something I can install in something like this.

I have heard a couple of people installing the Google Play store and installing full Kiosk which turns the screen off and uses the camera to wake. Or, I could set a black screen on the screensaver or something. @resoai - how do you use yours?

jimz011 · February 6, 2019, 1:47pm

Ah, but if he doesn’t use screen wake it would be fine no? My ipad doesn’t wake as far as I know, however, I do have a separate motion sensor which will send a notification to the ipad (and thus turns on the screen).

I have read mixed reviews about this tablet, so I can’t say for sure. But I think if he’s looking for basic functionality that a Fire Tablet will do (or even getting a refurb iPad 3/4 will do which is around the same price here).

But as I mentioned before Lovelace will probably not work fine on those tablets as it requires a modern browser.

resoai · February 6, 2019, 1:57pm

Even my 1st gen iPad is faster than this thing. Although it works OK-ish, I can’t stop regretting the purchase.

resoai · February 6, 2019, 1:58pm

I am running Fully Kiosk and am dimming the screen. There was a 7inch cheap tablet made by Lenovo which had a bit more decent specs.

jimz011 · February 6, 2019, 2:10pm

Ah ok, well thanks, I almost bought one too, until I found out that I couldn’t use lovelace. So I decided to build an interface with your TileBoard instead for my iPad 3 (its slow but works fine for this). However I can’t leave the screen on as I have no power source anywhere near that wall. So atm I need to charge my iPad once every few days (my screen turns off obviously, or it would only last a day).

I really wanted to use lovelace, but actually I came around with this and I think for my wall that this UI is easier to use. So thanks for that.

apop · February 6, 2019, 4:46pm

I’m running TileBoard on Fully Kiosk on a Fire 10 (got it on Black Friday). For the price, I’ve been very happy with it. I use @radinsky’s trick for “dimming” the display with an overlay when we’re sleeping or not home. Every so often, Full Kiosk will crash and I have to restart it, but it’s maybe once every two weeks or so, nothing to really be concerned with. Performance has been good. I will say, @simplygardner, make sure you download the Fire specific .apk directly from the Full Kiosk website and not the version on the Google Play store.

John_Gratis · February 6, 2019, 7:26pm

I use wallpanel to display tileboard and its been nice. I have a fire hd 10 i got on prime day, and im happy with it as my main panel by the front door. I also use android ip cam to send the feed to home assistant which can be used as a trigger. I do not have it dim, or turn the screen on/off via trigger, though. Will be my next project perhaps.

I was using it as a digital picture frame as well, when it was not “actively in use”. Currently, however, i get an error when the screensaver should come on or go off.

uncaught typeError:
$window.trigger is not a function on script

It happens on all browsers. Any ideas? I updated HA to the latest, I upgraded Tileboard (git pull) and I even reinstalled Tileboard and copied by config.js back in. Still the same issue.

Brian_Pedersen · February 6, 2019, 7:31pm

Hi There

Iam trying to open a page using the events command “open_page” I have added the event to the events in config, added an id: ‘2’ to the page i want to open, and the I fire the json command to tileboard:

{
    "command": "open_page",
    "page": "2"
}

But notning happens… only highlighted icon on the actual page dissapears, have also tried playing a sound, that does also not work, only calling a toast message works.
Any idea? (still new still learning)