TileBoard - New dashboard for Homeassistant

Hi,

Newbie when it comes to javascript and trying to get my head around triggering events in combination with tiles. What I would like to achieve is to trigger an popup iframe tile.

As far I´ve come is that I need a tile outside of config, so added the following just above the config var:

var iframe = {
                     position: [2, 0],
                     width: 3,
					 height: 3,
                     title: 'Test Iframe',
					 type: TYPES.POPUP_IFRAME,
                     id: {}, // using empty object for an unknown id
                     refresh: 10000, // 10 seconds
				     url: "http://www.xxx.com"
                  }

But completely lost when it comes to the event definition in config.js…Anyone that could give me a hint? :slight_smile:

How do you restrict the screensaver to a single image rather than going through a few of them?

   screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
      timeout: 20, // after 5 mins of inactive
      //slidesTimeout: 5, // 10s for one slide
      styles: { fontSize: '40px' },
      leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
      slides: [
         { bg: 'images/bg1.jpeg' },
         {
            bg: 'images/bg2.png',
            rightTop: [ // put text to the 2nd slide
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: 'Welcome to the <b>TileBoard</b>',
                  styles: { fontSize: '40px' }
               }
            ]
         },
         { bg: 'images/bg3.jpg' }
      ]
   },

Just remove the slides you don´t want…I.e:

      slides: [
         {
            bg: 'images/bg5.jpg',
            rightTop: [ // put text to the 2nd slide
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: '<b>Cedervall</b>',
                  styles: { fontSize: '40px' }
               }
            ]
         },
        
      ]
   },

Would be a single slide…

Anyone managed to find a solution to trigger a message from home assistant with data in the message…?

Like:

message: "The status of the lamp is {{ switch.screen_turned_on.state }}"...

sends the text string directly. Would like to actually get the state value of device…

Would it be possible to have some sort of countdown timer (in seconds) on tileboard? I’d quite like to add a visual 10 second timer that is started by clicking a tile.

Anyone managed to find a solution to trigger a message from home assistant with data in the message…?

If you look at the example tiles the weather tile shows an example of this being done :slight_smile:

Hey everyone :slight_smile:

First of all I love TileBoard and started using it on my 7" Raspi display for the wall.

But I had the problem that it is not possible to symlink the config.js or a optional secrets.js due to restrictions of the built-in Home-Assistant web server, when using TileBoard in the Home-Assistant www/ directory. Since I’ve added TileBoard as a git-submodule in my HA-Config repository, symlinking was the only chance to have my config in the repository.

Then I found a security issue with my configuration… Of course it is all Javascript and since my Home-Assistant instance is callable from the www, it was also possibly to call TileBoard directly, including the secrets.js file… But it should only be available for internal use cases and not be as publicly accessible as my Home Assistant.

tldr;

So long story short… I’ve created a simple Docker Container for TileBoard just serving the files with a Python3 web server :slight_smile:

So you can decide if you want to expose it with Traefik (and even an own domain and https) to the web or not.

https://hub.docker.com/r/fbrinker/tileboard

2 Likes

I did this by setting up a timer in HA (Countdown kitchen timer - #15 by Flipso) and then displaying it. I press a tile in Tileboard to activate the HA automation. Once it is active another tile becomes visible in Tileboard and shows the timer. When tmer is finished lights flash and the tile is hidden again. My child uses this to time how long until their cup of tea is ready.

As an aside before Google broke the integration with HA I was using a similar approach to display the current status of my Google timers in TielBoard - which was really useful.)

                  {
                     position: [0, 3], // [x, y]
                     width: 1,
                     type: TYPES.SENSOR,
                     title: 'Tea Timer running',
                     id: 'counter.timer_counter',
                     customStyles: {'color': '#d469f4','font-weight':'900'},
                     state: false,
                      hidden:function(item, entity){
                      if (entity.state==240) {return true}
                      else {return false}
                      },
      filter: function (value) { 
      var minutes = Math.floor(value / 60);
      var seconds = value - minutes * 60;
      var final;
      if(seconds<=9){ final = minutes +':0'+seconds;}
      else{ final = minutes +':'+seconds;}
      return final;
   }
1 Like

This looks to be exactly what I’m after. None of my timers are currently longer than 1 minute so I should be able to simplify things also. Thanks very much. :slight_smile:

Hi all
How can I reduce the size of the header and the page selection? Thanks

@kwetiaw You can set the style directly in the Header configuration.

Or you could add your own custom.css, overwriting the sizes.

Inspect the classes header and pages-menu in your browser for more details on the current size/pading/margin values :slight_smile:

@fbrinker thanks for your help. i thought it would be as easy as changing the settings inside config.js.

I dont have experience at creating CSS

Cheers!

@cgarwood, regarding your actions to launch Netflix and Spotify. I copied your code and my android 6 phone tries to open these links in a few other apps. But not in Spotify or Netflix. Are you aware of any change in the way apps are launched from the browser? Or is this very device/version dependent?

Are you using Fully Kiosk Browser or a different browser? I’ve only tested those links in Fully, so they may not work in Chrome, Safari, or other mobile browsers.

I installed fully to test. And there nothing happens at all, when I click the Netflix tile. Maybe I missed some security setting?

I found the Universal Laucher, added Netflix and it just starts from there. But not from the link directly.

Interestingly using your code in the index.html broke my gauge tiles.

Looking through it I have no idea why though. I can see what you changed and I don’t see why it would break that…

I need some help, Im trying to display the light tile settings (where the brightness slider is) not as a part of the tile, but as we have on the alarm tile, so it will overlay the screen and you can change all the settings of the light.

I tried changing the z-index but the elements of the second group are on the top anyway, is there anyway to do it?

3 Likes

Damn your UI looks awesome! Could you please share?
Very nice work. I love it.

thanks :sweat_smile:, but its not ready yet, I have to manage how to put almost every controller on the top…still didn’t find any solution for that :confused:

Hey,

Found a strange bug, and though I’d ask here before filing an issue on github.
I have a simple slider tile (based on the example) on a regular page. MOBILE theme. No fancy addons.

Sliding works perfectly on my Galaxy S8, but my wife’s iPhone 10 (iOS 13.2) doesn’t slide. When sliding over the slider, it switches pages.

I’ve debugged it and found the problem is that page-container catches the swipe action instead of the slider catching it.

By removing lines 70-71 in index.html (hm-swipe and hm-recognizer-options attributes of the page-container div) I’ve solved the problem (but removed the slide-to-switch-page functionality).

Did anyone encounter this behavior?

I managed to make a fullscreen pop-up for the light, and I have all the sliders config there (that was in the light div before) but the sliders are not showing up, anybody knows how to bind them? (no idea why the gif is so small)ScreenRecorderProject2