TileBoard - New dashboard for Homeassistant

@resoai can you tell what do you think:

I’m using tileboard on always-on ipad.
I do have a lighting sensor in the same room.
I’m looking for a way to change the brightness of the tileboard depends on lighting sensor.
The most easiest way is to put some black overlay on the entire screen with changeable transparency.
Any chance you can suggest how it can be done?

I did. (btw, forgive me if I’m posting in the wrong thread. I didnt see a PM option.). I think my real question is simply around hardware. the config appears simple with the IP address reference. of course there are two for the MCA, device and media player. Assuming it’s the device. But I’m unclear on whether the system can communicate with the Russound via its network connection (ethernet) port, or if there is some additional connection required. (TCP to serial converter plugged into serial port of device? some alternative plugged into RNET port?). Thanks again for the help.

No it works simply via PC. You add the device, but functions like a media player. You can select sources, turn it off and on and adjust volume. I’ll paste my config once I can sit at my PC

Thank you sir. You’re a saint.

Changing opacity of the overlay is not the same as changing brightness. Why not set automatic brightness of screen in settings of iPad? iPad has its own ambient light sensor.

I’m not entirely sure which video it was. A lot has changed in the past few months :slight_smile:

Auto brightness is different and not user-controllable.
Regarding the layer/overlay transparency - it’s not the same as changing brightness, but it’'s very near the same result…

Not worked for me, I’ve binded the tile to sensor.time, and still not updated (even when the time is changed):

   {
      position: [2, 3],
      type: TYPES.DOOR_ENTRY,
      width: 1,
      id: "sensor.time",
      state:false,
      // bg: '&camera.dafang.attributes.entity_picture',
      bgSuffix: function(item, entity) {
          return this.parseFieldValue('&camera.dafang.attributes.entity_picture')
            + '&iterator=' + Math.ceil(Date.now() / 100 / 100000);
        },
      title: 'Dafang',
      fullscreen: {
          type: TYPES.CAMERA,
          refresh: 1500, // can be number in milliseconds
          bgSize: 'contain'
      }
   }

I also have this question…

tried using ‘rgb_color’ no luck.

This post:

Also - how do I make a tile smaller? Ideally looking to fill two smaller tiles and one normal side one underneath.

{
position: [0, 1],
type: TYPES.SWITCH,
id: ‘switch.kitchen_spotlights’,
title: ‘Spotlights’,
subtitle: ‘Kitchen’,
states: {
on: “On”,
off: “Off”
},
icons: {
on: “mdi-lightbulb-on”,
off: “mdi-lightbulb”,
}
}

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?

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

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)

<unavailable> [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)
   /* wsUrl: The URL to your HomeAssistant Websocket connection.
    * If HomeAssistant is behind SSL, replace ws:// with wss://
    */
1 Like

works! now i can start playing around :wink:
THANKS

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…

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. :slight_smile:

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

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!

1 Like

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!

1 Like

Use height: and width: to control tile size