TileBoard - New dashboard for Homeassistant

I am, you specify mdi-xxx but if you inspect an element is also has an mdi class (mdi mdi-iconname) the preceeding mdi class is whats conflicting.

You can override any properties in your class.


Does anyone else have issue with dynamic tile background color not changing (only refresh helps) ?

Is there an easy way to localize the date string in the header to Dutch?

Thank you in advance.

Can you please show the code of the tiles?

I believe you would need to include localization file for Angular:

<script src="bower_components/angular-i18n/angular-locale_nl-nl.js"></script>
2 Likes

Thank you Alexey. That worked immediately!

1 Like

sure, here it is:

{  
   height: .5,
   width: .5,
   position: [0, 2],
   // using this to make white text for value and unit
   classes: ['-sensor-whitetext-value', '-sensor-whitetext-unit'], 
   /*in custom.css:
     .-sensor-whitetext-value .item-entity--value {
        color: white;
     }
    .-sensor-whitetext-unit .item-entity--unit {
       color: white;
    }*/
   type: TYPES.SENSOR,
   title: 'Boiler',
   id: 'sensor.boiler',
   unit: 'C', // override default entity unit
   state: false, // hidding state
   filter: function (value) { // optional
   var num = parseFloat(value);
         return num && !isNaN(num) ? num.toFixed(1) : value;
    },
    customStyles: function(item, entity){
         var min = 26, max = 40;
         var a = (entity.state - min) / (max - min);

         if (a < 0) a = 0;
         if (a > 1) a = 1;

         var h0 = 240, h1 = 1;
         var h = (h0) * (1 - a) + (h1) * (a);

         return {
             'backgroundColor': 'hsl('+ h +', 100%, 31%)',
              'color': 'white', // using this to make title white
              

         }
    },
},

All the other dynamic color bacground tiles are based on the same structure

I see the same behavior utilizing the same method.

I use a slightly different method, but looks like I’m seeing the same behavior with the background’s not updating:

customStyles: function(t,entity) {
	return { 'background-color' : tempToColor(entity['state'])	}
},

and

function tempToColor(temp, min = 50, max = 90) {

	var a = (temp - min) / (max - min);

	if (a < 0) { a = 0; }
	if (a > 1) { a = 1; }

	var h0 = 240;
	var h1 = 1;
	var h = (h0) * (1 - a) + (h1) * (a);
	
	return 'hsl('+ h +', 100%, 31%)';
}

Is there any way to stop the horizontal scrolling? I have it set up where everything fits, but it can still scroll up and down which I would rather not.

Also, is it possible to use the compact and transparent themes at the same time?

Thanks!

I can’t speak for anyone else, but this new approach is exactly what HomeAssistant needed to stay competitive with other similar projects. While HaDashboard has some interesting and usable qualities, to me,it just never knocked it out of the park. ( to use a baseball analogy)
I often admired some of the other dashboards out there created for the other home automation platforms and wondered if I would ever get to set up my HA Dash as cool as those. In other words, THANKS for taking the time and trouble to give the HA community this new and fresh mod for the home automation system that we all use and love. Your efforts are greatly appreciated and thanks again for creating and maintaining this newest creation. I love where you are taking it. Please try to keep the backend easy enough for guys like myself to configure. :wink:
Rich T.

6 Likes

Thanks so much for your kind words. Unfortunately it is very hard to find a balance between easy of configuration and complete freedom of customization. While it might be difficult to work with JS config initially, one would soon realize the great potential having freedom of defining almost every field as a function.

You would need to adjust the size of the tiles and margins to get rid of the scroll, as it would appear that your TileBoard is wider than the screen.

You can define customTheme as an array including all the themes that you need :slight_smile:

@franzuu @mezz64 @cgarwood Please try to pull latest code and try again.

Thank you! :star_struck:
Seems to be working fine for me. Atleast with the test tile, when I change slider value then background color also changes without the need of page refresh.

Perfect! Any warnings or errors in the console?

just one error with : style.css:1

Uncaught SyntaxError: Unexpected token .  
.tr_reset{ // this is underlined with red
    all: initial !important;
    * {
        all: unset !important;
    }
}

not sure what it means

We don’t even have style.css. Perhaps this is one of your browser add-ons?

Yes, might be one of the addons. Anyways everything seems to be working :slight_smile: Thanks again!

1 Like