TileBoard - New dashboard for Homeassistant

dehein2 · January 14, 2019, 2:08pm

Hi,

i just tried to set-up tileboard with hass.io and moved the fodler to config/www/tileboard and edited the first part of the config as follows. Unfortunatly I just get a blank blue page when loading.

var CONFIG = {
   customTheme: null, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
   transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
   entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
   tileSize: 150,
   tileMargin: 6,
   serverUrl: "https://192.168.2.170:8123/",
   wsUrl: "ws://192.168.2.170:8123/api/websocket",
   authToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4OTJlYzY5NDAwMjA0Yjc2OGZhNDNmYzE0MGZiOWIxZSIsImlhdCI6MTU0NzQ3NDI5MiwiZXhwIjoxODYyODM0MjkyfQ.hfZfSUKd6wrq4Bjy3a8F4xD_fpYY-CXkYCKktU1BLc4', // optional: make an long live token and put it here
   //googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
   debug: false, // Prints entities and state change info to the console.

I didn’t change anythign else so far to have a first look. But i still should be able to see sun.sun e.g., shouldn’t I?
What can I look into to fix this?

resoai · January 14, 2019, 2:19pm

You can start by changing https to http and opening developer tools in your browser to see what errors are popping up.

dehein2 · January 14, 2019, 2:37pm

But will http work if my hass.io is only reachable via https?
To access TileBoard i also access https://192.168.2.170:8123/local/tileboard/index.html

And thats what i get in the firefox error console:

Glitter Drag: Content script is injected by browser successfully [content_script.js:4:1](moz-extension://83286519-22bd-4348-b26b-6bd13ec6014c/content_scripts/content_script.js)

Error: WebExtension context not found!

[ExtensionParent.jsm:1039:13](resource://gre/modules/ExtensionParent.jsm)

Glitter Drag: loaded config from storage [content_script.js:1151:9](moz-extension://83286519-22bd-4348-b26b-6bd13ec6014c/content_scripts/content_script.js)

TAB_SIDE has not matched i18n message [common.js:337:9](moz-extension://83286519-22bd-4348-b26b-6bd13ec6014c/common.js)

SecurityError: The operation is insecure. [api.js:153](https://192.168.2.170:8123/local/tileboard/scripts/models/api.js)

&lt;unavailable&gt; [angular.min.js:125:278](https://192.168.2.170:8123/local/tileboard/scripts/vendors/angular.min.js)

XrayWrapper denied access to property "wrappedJSObject" (reason: value shadows a property on the standard prototype). See https://developer.mozilla.org/en-US/docs/Xray_vision for more information. Note that only the first denied property access from a given global object will be reported. [content-process-forward.js:54:10](resource://devtools/server/actors/webconsole/content-process-forward.js)

resoai · January 14, 2019, 3:07pm

   /* wsUrl: The URL to your HomeAssistant Websocket connection.
    * If HomeAssistant is behind SSL, replace ws:// with wss://
    */

dehein2 · January 14, 2019, 3:09pm

works! now i can start playing around
THANKS

dehein2 · January 14, 2019, 3:29pm

Sorry, that was a bit to early. When i try to load the page on my ipad (safari) i just get a “system error” message popping up every 2 seconds…

HypnoToad · January 14, 2019, 6:47pm

I’m finally getting to grips with how to use CSS to control the look and feel and tileboard and it’s really cool what can be done using custom.css.

Just a quick question, it it possible to possible to change the CSS class of something in TEXT_LIST tile depending on entity state? For example:

  {
    title: 'Lounge Light',
    icon: 'mdi-lightbulb',
    value: function () {
      return switch_text(this.states['light.lounge_light'].state);
    },
    class: function () {
      return switch_text(this.states['light.lounge_light'].state);
    }    
  },
...other fields here...
]

I’ve used the class: feature in switch files to give a different CSS class to the whole tile, but I’d like to change the CSS of a TEXT_LIST field if this is possible?

Thanks

mathewtaylor2007 · January 14, 2019, 8:04pm

Has anyone got their tileboard config on github?
It would be really useful for us non-coders to look at how others have got things working. Thanks in advance!

HypnoToad · January 14, 2019, 11:19pm

Ok, I’ve fixed my own issue, it turns out I can simply put my CSS class into the icon field on text lists, all I wanted to do was for the light bulb icon to change colour depending of it’s state.

here’s my function which gives me the icon for the text fields:

function light_icon(state) {
  var icon;
  switch(state) {
    case "on":
      icon = "mdi-lightbulb bulb-fade-on";
      break;
    case "off":
      icon = "mdi-lightbulb bulb-fade-off";
      break;
    default:
      icon = "mdi-alert-circle-outline";
      break;
  }
  return icon;
}

I can then use .bulb-fade-on CSS class to change the icon appearence in the text list.

mathewtaylor2007: I have mine on bitbucket, but it wouldn’t really be any more helpful than the example already up on github.

I’m not really a coder by trade, I just change bits and using trial and error and see if it works or not!

isbrodie1 · January 15, 2019, 12:24pm

Use height: and width: to control tile size

SimplyGardner · January 15, 2019, 12:40pm

Could you send the link?

dehein2 · January 15, 2019, 7:31pm

Hi,

one more question regarding safety: My HA installation is accessible from the internet at the port 8123, i use it for the iOS App and to log into the web ui directly. But Ha itsels is secured by the api key and user/password.

but now tileboard is accessible at the same port but doesn’t have any access control, does ist?
How do you get around this problem?

Thanks

nickcj · January 15, 2019, 10:06pm

I would use a VPN buddy, you don’t want any tom dick and harry for example flicking your lights on and off if they get your public address.

If you need access from outside your house I would use a VPN, something like http://www.pivpn.io which is nice and simple.

Whats the main reason for accessing your dashboard outside the house?

resoai · January 15, 2019, 10:18pm

TileBoard is JUST an HTML page. If you don’t specify a long-lived password within the config, than TileBoard will redirect you to HA’s login page and a token will be saved in localStorage and refreshed whenever it is about to expire.

kobiak · January 16, 2019, 2:02am

Thanks for great board, but for some reason, pages are not working for me.
I’ve set-up 2 pages and when click on second - nothing changes

kobiak · January 16, 2019, 2:11am

never mind. there was an error in config.

Rkg90 · January 16, 2019, 12:42pm

Hi

is it possible to use another android app inside an iframe or something?
im using an android tablet with wallpanel and tileboard

RKG90

radinsky · January 16, 2019, 1:40pm

Implemented 2 events to allow adjusting brightness via black transparent overlay:

custom.css:

.brightness-overlay {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  top:0px; right:0px; bottom:0px; left:0px;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.3); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  pointer-events: none;
}

index.html (before <div ng-if="ready" class="page-container"> )

<div id="brightness-overlay" class="brightness-overlay"></div>

index.js

events: [
      {
        command: 'dim',
        action: function(e) {
          document.getElementById("brightness-overlay").style.width = "100%";
        }
      },
      {
        command: 'bright',
        action: function(e) {
          document.getElementById("brightness-overlay").style.width = "0%";
        }
      },
    ],

homeassistant automation:

- alias: Dim Tileboard
  initial_state: 'on'
  trigger:
    - platform: numeric_state
      entity_id: sensor.illumination_158d00016xxxxx  
      below: 10
  action:
    - event: tileboard
      event_data:
        command: 'dim'

- alias: Bright Tileboard
  initial_state: 'on'
  trigger:
    - platform: numeric_state
      entity_id: sensor.illumination_158d00016xxxxx  
      above: 10
  action:
    - event: tileboard
      event_data:
        command: 'bright'

enjoy

dehein2 · January 16, 2019, 3:33pm

@ nickcj: Thanks. I just figured out that i could just put tileboard on a different web server (in my case on a qnap) which does allow access control via htaccess and additionally is not exposed to the internet. Seems to work fine

SimplyGardner · January 16, 2019, 6:26pm

Maybe post the tip here?