TileBoard - New dashboard for Homeassistant

[apt (Ade Thompson)]

Hi @resoai

I have the following set up in config.js:

   {
                            position: [0, 2],
                            type: TYPES.SENSOR_ICON,
                            title: 'Face Detection',
                            id: 'sensor.wallpanel_face',
                            states: {
                                on: "True",
                                off: "False"
                            },
                            icons: {
                                on: 'mdi-emoticon',
                                off: 'mdi-emoticon'
                                },
                        }

Now everything displays fine, and I can see the title state change when a face is detected BUT I see no icon intitially or any icon change. I assumed I could used a simple sensor icon type as these work perfectly for my other motions detection sensors.

Do you think a new type would be needed to display the WallPanel face detection?

[resoai (Alexey)]

Add customStyles: {'fontSize': 'XXpx'} to the sensor tile where XX is the size in px which will look ok.

As for the camera, replace camera with camera_thumbnail tile.

[resoai (Alexey)]

Just have a look what states are being reported at each stage.

[apt (Ade Thompson)]

HA reports True when face detected and False when not.

[resoai (Alexey)]

So why are you mapping on/off than?

[J_IO_B]

Thanks @resoai,

Added the line directly to the tile configuration but it looks like its changing the sensor Title font size and not the sensor contents. Any ideas?

That fixed the cameras thanks.

[apt (Ade Thompson)]

you got me there

I think I wrongly assumed that on/off was the default and you mapped the state. Working now

[resoai (Alexey)]

Oh yeah, you can create a custom.css file and use classes:[] of the item as required.

[apt (Ade Thompson)]

Trying to setup a type text list but not getting anywhere (excuse the indenting)

{
            title: 'Plants',
            bg: 'images/bg3.jpg',
            icon: 'mdi-flower',
            groups: [
            {
   position: [0, 0],
   width: 2,
   height: 2,
   title: 'Downstairs',
   id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
   type: TYPES.TEXT_LIST,
   state: false,
   list: [
      {
         title: 'Moisture',
         icon: 'mdi-flower',
         value: '&sensor.calatha_orbifolia_moisture'
      },
      {
         title: 'Temperature',
         icon: 'mdi-flower',
         value: '&sensor.calatha_orbifolia_temperature'
      },
      {
         title: 'Battery',
         icon: 'mdi-flower',
         value: '&sensor.calatha_orbifolia_battery'
      }
   ]
}, 
            ]
        }

[resoai (Alexey)]

'&sensor.XXX.state' .... '&sensor.XXX.attributes.YYY'

We have it covered in the examples on github.

[apt (Ade Thompson)]

Yeah as soon as I posted I worked it out… I could see the example on GitHub but couldn’t see the explanation as to why you have to add .state and .attributes. I assumed wrongly it would just add the state as default when adding the sensor.

[resoai (Alexey)]

We can’t add it by default since users might want attribute rather than state or even concatenate two sensor states etc.

[aidbish (Adrian)]

Is it possible to change the colour of the icon for a sensor tile based on state.
e.g.
open/on =red
closed/off = yellow
For my alarm panel i have all my doors /windows showing and at the moment it hard at a glance to see what is open or closed.
If its possible, could you direct me what i need to change

[JoRoCoBo]

Here’s the content of my custom.css which changes icons to yellow when activated.

.item.-on.-switch .item-entity--icon,
.item.-armed.-switch .item-entity--icon,
.item.-locked.-switch .item-entity--icon,
.item.-on.-generic_icon .item-entity--icon,
.item-armed.-generic_icon .item-entity--icon,
.item.-locked.-generic_icon .item-entity--icon,
.item.-on.-input_boolean .item-entity--icon,
.item-armed.-input_boolean .item-entity--icon,
.item.-locked.-input_boolean .item-entity--icon,
.item.-on.-light .item-entity--icon,
.item-armed.-light .item-entity--icon,
.item.-locked.-light .item-entity--icon,
.item.-on.-sensor_icon .item-entity--icon,
.item-armed.-sensor_icon .item-entity--icon,
.item.-locked.-sensor_icon .item-entity--icon {
  color: yellow;
}
.item.-on .item-state,
.item-armed .item-state,
.item.-locked .item-state {
  color: yellow;
}

[aidbish (Adrian)]

perfect, thankyou

[JoRoCoBo]

Hi all,
I’ve been trying to figure out how to get the time and date to be side by side rather than time above date in HEADER_ITEMS.DATETIME. Has anyone been able to do this, it’s still a step beyond me…

Thanks

[J_IO_B]

I don’t think I’m proficient enough in CSS to add it for just that sensor. Also after playing in chrome dev console I think if I do manage to do it the text will not be wrapped to form a block and will still disappear out of view.

@apt I just came to start adding my plants I like your solution.

[apt (Ade Thompson)]

It works well in Tileboard. Are you using MiFlora too? what solution are you using to obtain the data?

[J_IO_B]

Yes using MiFlora, I’m using a bluetooth USB into my server which has been bulletproof for a long time. I recently put a couple outside to see if they withstand the British elements. These were sending intermittently so I made a plant gateway with a pi-zero and put it closer. So far so good. What solution do you use?

[J_IO_B]

Hi @resoai, thanks again for the reply.

This still only changes the sensor title the sensor data itself seems to still use a class called.

.item-entity--value

I’m probably overlooking the obvious here.