TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
2296

Hi,

Started looking into using Tileboard, and I think it’s an amazing dashboard. Thanks for this!

I was wondering if it is possible to somehow make a light switch/dimmer turn off when the slider is set to 0?
I have a working slider for my light switch, but if I slide it all the way down to 0, the switch is still seen as “On” in my dashboard(and HA), and I need to click the tile to switch it off.
Is there any way to make the tile/switch be set to “off” when the slider is set to 0?

Thanks

2297

No. Stream is not exposed to the API.

1 Like
2298

I am trying to load the following image in an iframe but it does not work:

              {
                 position: [1, 0],
                 type: TYPES.IFRAME,
                 id: {},
                 width: 3,
                 height: 3,
                 refresh: 10000, 
                 url: 'http://sirocco.accuweather.com/nx_mosaic_640x480_public/sir/inmasirva_.gif'
              }

Can you share with me the code you are using to display a internet hosted gif image?

2299

i have a sensor that sends over my beer level as an integeter

is there a way to add an icon?

do i need to import pictures from the material design page somewhere? https://materialdesignicons.com/cdn/1.0.62/

          {
          position: [0, 1],
          type: TYPES.SENSOR,
          title: 'Tap1',
          id: 'sensor.tap1',
          icon: 'mdi-beer',
          unit: '%', // override default entity unit
          state: false, // hidding state
          filter: function (value) { // optional
             var num = parseFloat(value);
             return num && !isNaN(num) ? num.toFixed(1) : value;
            }
          },
2300

how did you get the spotify picture to display what is playing?

2301

You need to add the following line inside the items

bgSuffix: '@attributes.entity_picture'

Then it will look like the following:

           title: 'Media',
           width: 2,
           height: 3.4,
           items: [
              {
                 position: [0, 0],
                 height: 3,
                 width: 3,
                 id: 'media_player.spotify',
                 type: TYPES.MEDIA_PLAYER,
                 hideSource: false,
                 hideMuteButton: false,
                 state: false,
                 subtitle: '@attributes.media_title',
                 bgSuffix: '@attributes.entity_picture'
              },
2302

Thank you!. Just answered this here

Best!

2304

Hey, I’m trying to pass the light value in RGB but with no luck. Any ideas?

customStyles: {'backgroundColor' : 'rgb(' + '&light.living.attributes.rgb_color' + ')'}

Thanks!

2305

how do you get a entity to show a picture? someone above had lights

2306

Sorry? Didn’t get it.

2307
2308

Well, this works:

customStyles: function (item, entity) {
  return { 'backgroundColor' : this.states['light.living'].state === 'on' ? 
    'rgb(255,255,255)' : 'rgb(255,0,0'};
},

But what I need is to change the background based on the actual light RGB colors, then, this does not work:

customStyles: function (item, entity) {
  return { 'backgroundColor' : this.states['light.living'].state === 'on' ? 
    'rgb(&light.living.attributes.rgb_color)' : 'rgb(255,0,0'};
},

I guess is because the attributes are coming in a different format. I know that variable brings the colores, I have debugged, but for some reason it seems I need to turn the string in numbers. I’m not sure why it does not work.

2309

I guess I know why. The colors comes in an array and I need to parser them into a string. I will do the trick with some JS and I will keep it posted here.
Thanks

2310

Done.

                 customStyles: function (item, entity) {
                    var rgb = entity.attributes.rgb_color.toString();
                    return {
                       'backgroundColor' : this.states['light.living'].state === 'on' ? 'rgb('+ rgb + ')' : '#7a4e7f'
                    };
                 },
2311

so how i do you replace the background with a picture?

2312

where did you get the frame?

2313

I glued together UPVC angle trim pieces with superglue, filled in the gaps with the very same glue and painted it. I’d never do that again.

IMG_0789
IMG_0789960×1280 99.4 KB
IMG_0790
IMG_0790720×1280 96.3 KB

1 Like
2314

I figured out my issue, I am accessing Tileboard over HTTPS and the java script will not load mixed content, simply changing the destination URL to httpS resolved the problem.

2315

Tweaks to weather list.

Hi. I looked through main.less and main.css but I can’t figure out how to change somethings. Could someone point me into the right direction? Not sure if I need to modify one of those files or custom.css.

Trying to do the following.

  1. Have the weather list display high temp first, then low temp (currently it is low then high)
  2. Have division be a / rather than a -
  3. Have high be red, and low be blue.
  4. Have temp be rounded to nearest whole number…not 10th of decimal.

Thanks.

2316

If you haven’t already, take a look at the example in https://github.com/resoai/TileBoard/blob/master/TILE_EXAMPLES.md.

Specifically, this is the portion you’ll want to look at to reverse the high and low, make the separator a /, and round the temp:

var forecast = "&sensor.dark_sky_overnight_low_temperature_" + id + ".state - ";
      forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".state";
      forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".attributes.unit_of_measurement";

As currently configured, index.html would likely have to be modified to handle changing the high/low colors independently.

1 Like