TileBoard - New dashboard for Homeassistant

Any editor with syntax highlighting would do. If you are a Windows person, Visual Studio Code would be good for both YAML and JS. In order to debug all you need to to is open browser console and see what errors are showing up, it will tell you the line, column and even what was actually expected.

I have some RGBW led strips of which I normally use only the “white light” diode. Using the Light tile I’ve configured only one slider for the “white_value” attribute/field, and this works great in controlling the white light brightness without affecting the RGB brightness. However, the “+” and “-” buttons on the tile default to setting “brightness” which affects the RGB diodes and not the white diode. I tried adding a “field” value to the main tile config, but it didn’t work. Is there a way to change this behavior so that the “+” and “-” control the “white_value” attribute/field? If not, should I open an issue on github for this?

Here’s my code:

              {
                position: [0, 1],
                width: 2,
                height: 1,
                type: TYPES.LIGHT,
                id: 'light.cabinets_btm',
                subtitle: 'Kitchen',
                title: 'Under Cabinet',
                state: switchPercents('white_value', 255, true),
                field: 'white_value',
                icons: {
                   on: "mdi-lightbulb-on",
                   off: "mdi-lightbulb",
                },
                classes: [CLASS_MICRO],
                sliders: [
                   {
                      title: 'Brightness',
                      field: 'white_value',
                      max: 255,
                      min: 0,
                      step: 5,
                      formatValue: function (conf) {
                        var value = parseFloat(conf.value);
                        if(isNaN(value)) return conf.value;
                        value = Math.round((value / conf.max * 100));
                        return value + '%';
                      },
                      request: {
                         type: "call_service",
                         domain: "light",
                         service: "turn_on",
                         field: "white_value"
                      }
                   }
               ],
             }

Absolutely love this. Javascript is so much easier to understand than that appdaemon stuff I was using! I’ll be contributing to this project as I am able.

Two questions as I am trying to add cameras:

  1. What is the best framerate I can expect? I’ve tried tinkering with refresh: 1000, but anything < 1000 makes it stutter and blink at times.
  2. My homeassistant is behind https but my camera is http. I was hoping to use an IFRAME to display it in more real-time (i.e. 5+ fps) but it throws an error about accessing a non-secure website from a secure website. Any ideas? Solution: Host it on built-in apache instead of via homeassistant.

The Hass frontend streams the camera feed through its proxy, so that should solve the http/https issues.

A way to display this real-time stream in tileboard would be great however!

Is there a way to access the user that is logged in?
I would like to deliver different configurations for different users.

Is there a way to dynamically populate a TYPES.TEXT_LIST based on an attribute? This code currently lists all my security zones and their status but I only wish to show it in the list if the status is “on”.

       {
        position: [0, 2],
        width: 3,
        height: 2,
        title: 'Open zones',
        id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
        type: TYPES.TEXT_LIST,
        state: false,
        filter: function (value, field) {
          if(value === "off") {
             return 'Closed';
          } else if (value == "on") {
            return 'Open';
          }
          return value;
       },
        list: ["binary_sensor.heat_detector","binary_sensor.front_door","binary_sensor.big_garage_door","binary_sensor.small_garage_door","binary_sensor.big_garage_windows","binary_sensor.small_garage_windows"].map(function (id) {
          var zone = "&" + id + ".attributes.friendly_name";
          var zonestate = "&" + id + ".state";
          return {
             title: zone,
             icon: "door",
             value: zonestate
          }
       })
     },

Thanks, really appreciate that. I’ll give it a go.

Would love to see that

Hi there,

I’ve been using Tileboard for a while now and I’m not sure if there’s an easy solution for this. My Spotify Media player is hard to read. When the album art is there it hides all the play/pause and well all the buttons. Please see attached picture and let me know your ideas, thanks again

Set bgOpacity to 0.5

1 Like

Thank you. Much better

Hi!
I’m trying tile board, I like it a lot. but I have a problem with the tile cover. when the cover is not completely closed the up arrow does not work. so even if the cover is 50% it is not possible to open it completely. Is it possible to have the slider for the position over the arrows up, down, stop? in home assistant the slider controls the position of the shutters and updates its position if the shutters are opened or closed by the physical buttons on the wall.

Wondering if someone could advise, I’m trying to stop the device.tracker from scrolling through the map. What do I need to add/remove from the below to just make it stay on the picture? The device tracker in use is netgear so it’s a simple if it’s on my wifi it’s at home if it’s not it’s away. But the device tracker does seemingly use the longitude an latitude from my configuration.yaml as when I then removed those from my config.yaml it stopped the map from appearing on the tile, but caused loads of gps parsing errors in my log file.

Thanks!

             {
               position: [4, 0],
               type: TYPES.DEVICE_TRACKER,
               id: 'device_tracker.russiphone',
               states: {
                 home: "Home",
                 not_home: "Away",
               },
               bgSuffix: '@attributes.entity_picture',
               slidesDelay: 2                
             },

Also tried without the slidesDelay line.

zoomLevels: []

1 Like

Thank you!

Is there a way to set a color to a media player tile? In the picture I have audio zone that list as media players with on/off. I’d like that if “ON” the color of the tile is a slightly different color blue. It’s a bit hard to tell if its on.

Create custom.css file and add whatever CSS rules you like to customize any themes you like. This file will not be overwritten by the update.

I got 404 too.
Could you tell me how to fix your problem. Thank you.

Reboot homeassistant and see if 404 error will persist.

Is there any way to create a dynamic list? I’m trying to do something like this to only get lights that are on without having to write every light and then say if it’s hidden or not: `

		position: [2, 3],
        title: "Lights On",
        height: 1,
        width: 3,
		id: "group.all_lights",
		type: TYPES.TEXT_LIST,
        state: false,
        list: function () { 
        var entities = this.parseFieldValue("&group.all_lights.attributes.entity_id");
        var i = 0;
        var j = 0;
        var list = [];
        entities = entities.split(',');
        for (var entity in entities) {
          if (this.parseFieldValue("&" + entities[i] + ".state") == 'on') {
            list.push({"title":this.parseFieldValue("&" + entities[i] + ".attributes.friendly_name")});
            j++;
          }
          i++;
        }
        return list }

`