TileBoard - New dashboard for Homeassistant

Yes, just define it as a SWITCH tile.

1 Like

Doh! Thanks for that - I was making it way overcomplicated lol

My weather icons are not showing up in the tile, yet the files are there. Also, when I click on a camera to bring up the full screen, the image flashes on and off.

  1. How did you define weather tile?
  2. How did you define camera tile?

Weather:

                     position: [0, 0],
                     width: 2,
                     height: 2,
                     type: TYPES.WEATHER,
                     id: {}, // using empty object for an unknown id
                     state: '&sensor.dark_sky_summary.state', // disable state element
                     iconImage: '&sensor.dark_sky_icon.state',
                     icons: {
                        'clear-day': 'clear',
                        'clear-night': 'nt-clear',
                        'cloudy': 'cloudy',
                        'rain': 'rain',
                        'sleet': 'sleet',
                        'snow': 'snow',
                        'wind': 'hazy',
                        'fog': 'fog',
                        'partly-cloudy-day': 'partlycloudy',
                        'partly-cloudy-night': 'nt-partlycloudy'
                     },
                     fields: { // most of that fields are optional
                        summary: '&sensor.dark_sky_summary.state',
                        temperature: '&sensor.dark_sky_temperature.state',
                        temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
                        windSpeed: '&sensor.dark_sky_wind_speed.state',
                        windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
                        humidity: '&sensor.dark_sky_humidity.state',
                        humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
                        list: [
                           // custom line
                           'Feels like '
                              + '&sensor.dark_sky_apparent_temperature.state'
                              + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
                  
                           // another custom line
                           'Humidity '
                              + '&sensor.dark_sky_humidity.state'
                              + '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
                  
                           // yet another custom line
                           ' Chance of rain '
                              + '&sensor.dark_sky_precip_probability.state'
                              + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
                        ]
                     }
                  },

and Camera

                     position: [0, 0],
                     id: 'camera.front_door',
                     type: TYPES.CAMERA_THUMBNAIL,
                     bgSize: 'cover',
                     width: 2,
                     state: false,
                     fullscreen: {
                        type: TYPES.CAMERA,
                        refresh: 1500, // can be number in milliseconds
                        bgSize: 'contain'
                     },
                     refresh: function () { // can also be a function
                        return 3000 + Math.random() * 1000
                     }
                  },

Why did you uncomment following line?

//iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image

It is either icons or iconImage which overrides icons.

Camera image can flicker in Firefox which is something we can’t control. It appears to be working fine in Chome and other Webkit browsers.

I must have misunderstood about the iconimage. I’ll put it back. As for the camera, I am using Chrome. Don’t even have FireFox installed.

edit: So, I commented iconimage back out but I still get nothing. Exactly where should the .svg files go? Currently they are in www/tileboard/images/weather-icons/white AND www/tileboard/images/weather-icons/black. I have tried moving them up 1 and 2 directory levels. But they do not appear regardless.

Who wants to create my tileboard pages for me for money? I can send you my entities and PayPal you for the config etc

I founf the node-red flow on the web and it seemed to do what I needed.

Hello,
Thanks for this tileboard!
My english is not very well so i will try to explain what i want if it’s possible…
I want to change the icon like
icon for on
and icon for off
but in
type: TYPES.TEXT_LIST,

so i have made this, but don’t work, any ideas, please:

{
                       title: 'Chambre parents',
					   icon: function (item, entity) {
                         if ('&binary_sensor.door_window_sensor_158d000232abca.state' === 'on') {
                           return 'mdi-door-open';
                         } else {
                           return 'mdi-door-closed'
                         }
                       },	
                       //icon: 'mdi-door-open',
                       value: '&binary_sensor.door_window_sensor_158d000232abca.state'
                    },
{
   title: 'Chambre parents',
   icon: function () {
      return this.parseFieldValue('&binary_sensor.door_window_sensor_158d000232abca.state') === 'on' ?  'mdi-door-open' : 'mdi-door-closed';
   },
   value: '&binary_sensor.door_window_sensor_158d000232abca.state'
},

You should not move images anywhere. They should remain in /www/tileboard/images/weather-icons I presume you simply did not clear browser’s cache once you changed the config.

As for the cameras, try CAMERA_THUMBNAIL instead on CAMERA

@ resoai

Thanks that’s great.

1 Like

Hi
how do you make the mdi yellow, when a door is open?

i have a custom.css file that changes the properties of the sensor
contents of the custom.css

.item.-on.-sensor_icon .item-entity–icon,
.item-armed.-sensor_icon .item-entity–icon,
.item.-locked.-sensor_icon .item-entity–icon {
color: yellow ;
}

Thanks. I did not have any succes. i appended your code to the customs.css file but all mdi icons are still white.
Anything else I need to do?
My CSS skills are limited

Hello,

Can i have two groups on a column ?
or groups in group?

thanks.

Groups can either be all horizontal or all vertical, you can’t mix them and nest them. This would simply break the grid layout.

Moved all the files out of www/tileboard/images/weather-icons/white and up one level to www/tileboard/images/weather-icons, but still no icon. However, increasing the refresh from 1500 to 3000 got rig of the flickering in my fullscreen cam.

edit: Went back to the docs one more time and found my error. Somehow the line defining the icon sensor was deleted. Replaced it and everything working perfectly! Thanks for all your help!!!

1 Like

Ok thanks !