TileBoard - New dashboard for Homeassistant

lukenn · April 3, 2020, 5:42pm

Hi all,

I’m having some trouble getting customStyles to work.

I have a tile which is a script. The script toggles the shuffle mode on my sonos speaker
I’d like the background for the tile to be green if shuffle is on, no color if off. I have a sensor that monitors the shuffle status: sensor.bedroom_sonos_shuffle.

I’ve tried this with no luck:

                   customStyles: function(item, entity){
                     return {
                       'background-color': this.states['sensor.bedroom_sonos_shuffle'].state === 'true' ? '#b2e39f' : '#f07387'
                     }
                   },

(any advice on how to have a ‘no color’ option if the arguement is false would be appreciated also)

I’ve tried simply changing the tile colour as well but nothing seems to be updating.
This, for example, doesnt change the tile background color either:

customStyles: {'background-color':'orange'},

Any suggestion for what I’m doing wrong?

This is the full tile for completeness:

                 {
                   title: "Shuffle",
                   position: [2, 0],
                   width: 1,
                   height: 0.25,
                   state: false,
                   type: TYPES.SCRIPT,
                   id: 'script.bedroom_sonos_shuffle',
                   customStyles: function(item, entity){
                     return {
                       'background-color': this.states['sensor.bedroom_sonos_shuffle'].state === 'true' ? '#b2e39f' : '#f07387'
                     }
                   },
                 },

doktordoc · April 3, 2020, 8:44pm

i cant get this to work
i am new to HA

download from github and put it in www-community-tileboard
copy config.example.js in config. yaml

dont work
always error, cant confirm changes when i import in config.yaml
please help

vinceskahan · April 4, 2020, 2:58pm

(from a couple answers thousands of replies up in this thread)

This works for me

   customStyles: function(item, entity){
         if (entity.state === 'off')     {return {'backgroundColor': '#2E8B57',};}
         else if (entity.state === 'on') {return {'backgroundColor': '#B80D0D',};}
         else                            {return {'backgroundColor': '#FFA100',};}
    }

vegetate7 · April 4, 2020, 6:39pm

config.js but not config.yaml

doktordoc · April 4, 2020, 9:20pm

Where is that

vegetate7 · April 4, 2020, 9:24pm

put the tileboard tree into <HA config dir>/www/tileboard/
copy ‘config.example.js’ to ‘config.js’
in web browser open http://<your HA address>:8123/local/tileboard/index.html

doktordoc · April 4, 2020, 10:18pm

thx for help, but dont understand this
Copy config.example.js to config.js and edit it for your needs
config.js, where is that
sorry i am a noob for this

svenschuldt · April 5, 2020, 8:12am

Hi,

just if somebody runs into the same issue, meanwhile, I have found a solution - simply reboot the system. I was trying to get the blinds running through a node red automation and my node red instance runs on a linux server in a docker … and I needed to restart the node red instance in the docker for node red to recognise the new input_select entity … nothing to do with HA nor Tileboard

svenschuldt · April 5, 2020, 8:15am

Hi,

seeing that this is some months old I was wondering if you found a solution for the slider overlay? I have the slider available in yaml but cannot get it working in TileBoard so far. Did you make any progress with it?

Thanks!

vegetate7 · April 5, 2020, 9:11am

In the Tileboard source tree.
Have you unzipped it after download ever?

doktordoc · April 5, 2020, 9:36am

i found it, maybe
/config/www/tileboard/config.example.js - this ,right

i have duck.dns, then i put that in url
and my is https, not http,
https://my ip.duckdns.org:8123/local/tileboard/index.html ? is this ok
and in ws goes the same
wss://‘my ip.duckdns.org’:8123/api/websocket’

not working
when put http: then search found no file
when put https: then web locatio cant be reached
sorry for bad english

svenschuldt · April 5, 2020, 10:06am

Hi,

I cannot believe that nobody has tried in the Climate tile to switch in the middle of the tile between the target temperature and the current temperature. I am playing around with all sorts of value definitions for the middle of the tile but it does not seem to work … I just thought I give it another try here in the group for some help on this:

I try to show the current temperature in the middle of the tile and the target temperature as a state - the state works, but the center of the tile still shows the target temperature as well, which makes no sense, imho.

Following value definition I have used (among many )

                 {
                     position: [0, 0],
                     width: 2,
                     height: 1,
                     title: 'Wohnung',
                     id: 'climate.diele',
                     value: function() {
                        return climate.diele.attributes.current_temperature;
                     },
                     type: TYPES.CLIMATE,
                     unit: '°C',
                     state: function (item, entity) {
                        return 'eingestellt:  '
                           + entity.attributes.temperature
                           + '°C';
                     },
                  },

Anybody any idea - would be great!

vegetate7 · April 5, 2020, 9:22pm

check your HA settings then. I can not say more, because do not remember

doktordoc · April 6, 2020, 3:32am

Thx
Will try more

akloeckner · April 8, 2020, 12:45am

Actually, @HeyImAlex seems to have done that. At least almost by coming up with a generic popup. Maybe he’s willing to share his addition and develop it into a pull request?

Roel11 · April 9, 2020, 12:31pm

Quick question: is it possible to change title and subtitle using CustomStyles depending on the state.?
I want to change color of the text depending on the value it’s state but am stuck

akloeckner · April 11, 2020, 8:13pm

Have you tried adding new classes to user CSS? And then use a function of the state for the classes option?

Maker2000 · April 12, 2020, 2:30am

Hi, I tried to pick up on a thought from @resoai about integrating some webpage as a screensaver. I am using the following code:

      slides: [
         {
            bg: 'images/bg2.png',
            rightTop: [ 
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: '<iframe style="position: absolute; width: 108%; height: 112%; pointer-events: none;" src="https://embed.windy.com/embed2.html?lat=35.960&lon=-92.593&zoom=4&level=surface&overlay=rain&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=39.110&detailLon=-94.630&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0" allow="autoplay *; fullscreen *" allowfullscreen="true"></iframe>',
                  styles: {position: 'fixed', zIndex: -99, top: 0, left: 0, right: 0, bottom: 0, margin: '-6% -4%'}
               }
            ]
         },

I am running this on a wall mounted Raspberry Pi Touch Display with a PI3 Model B and this type of screensaver is extremely slow. However, there is no problem running the same url in a popup_iframe. Not sure whats going on here. Any hint on what’s the problem or what can be done differently is much appreciated.

Roel11 · April 12, 2020, 2:07pm

Thanks, i have not as I’m not sure where to start , can you push me in the right direction .?
how would a generic sample look like if for example state changes from ‘a’ to ‘b’, subtitle changes from red to green

akloeckner · April 12, 2020, 3:02pm

I’d expect some CSS similar like this to work:

.red .subtitle {color: red;}

To test, add red to the tiles classes option.

As soon as it works, make that option a function like

function(...) { return states....== 'a' ? 'red' : 'green';}