TileBoard - New dashboard for Homeassistant

Can you tell how it can be implemented for getting image from camera entity?
Now I have it like this (and it is not updating):
bg: '&camera.flowers.attributes.entity_picture'

How I can force it to update every x seconds?

Thanks!

Is it possible to set a custom (css) class to add css animation to spin the icon?
I’ve tried something like this:

.-spinning {

  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

and providing configuration of the tile with:
classes: ["-spinning"],

got no success.
any thoughts?

How do I fix the words in big box here? its the state of a sensor so it changes based on what alarm i pick.
This is my alarm clock now and i would like the words big and in the middle.

            {

               title: '',
               width: 2.65,
               height: 3,
               items: [
                  {
                     position: [0, 0],
                     width: 3,
					 height: 2,
                     type: TYPES.SCRIPT,
                     id: "script.alarmstop",
                     state: false, // disable state element
					 customStyles: {'fontSize': '25px'},
                     title: '&sensor.alarmset.state',
                     
                  },

               ]
            },

ok, this actually work, for icon only you should use this:


.-spinning div div{

  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Is it possible to have dynamic classes? one class for each state (on/off).
Tried something like that but got no success:

                   classes: function(item, entity){
                     if (entity.state == 'on') {
                        return '-spinning';
                     }
                   }

classes is array and you are returning a string.

Not directly answering but just in case you don’t know you can use mdi-spin, for example: “mdi-spin mdi-timer-sand”.

1 Like

Yes, noticed this, tried to return as

return ['-spinning'];

but got the same…

Wow, exactly what I needed.

Now that the unifi tracker doesn’t use known_devices, how do we add the picture of the person in Tileboard?

Is it possible to start a Node Red flow from tileboard?

Is there anyway to hide the Volume slide and Play/Pause, Skip track buttons on a media player tile?

Hi guys…
I have a problem with weather.
I use below code, but I can’t visualize icon weather. I have setting Darksky with italian language or english, but don’t work

{
title: ‘Meteo’,
width: 1,
height: 3,
items: [
{
position: [0, 0],
height: 2,
//classes: [’-compact’], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: {},
state: ‘&sensor.dark_sky_summary.state’, // label with weather summary (e.g. Sunny)
icon: ‘&sensor.dark_sky_icon.state’,
//iconImage: ‘&sensor.dark_sky_icon.state’, // use this one if you want to replace icon with image
fields: { // most of that fields are optional
icon: ‘&sensor.dark_sky_icon.state’,
iconMap: {
‘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’
},
summary: ‘&sensor.dark_sky_summary.state’,
temperature: ‘&sensor.dark_sky_temperature.state’,
temperatureUnit: ‘&sensor.dark_sky_temperature.attributes.unit_of_measurement’,
precip: ‘&sensor.dark_sky_precip.state’,
precipIntensity: ‘&sensor.dark_sky_precip_intensity.state’,
precipIntensityUnit: ‘&sensor.dark_sky_precip_intensity.attributes.unit_of_measurement’,
precipProbability: ‘&sensor.dark_sky_precip_probability.state’,
precipProbabilityUnit: ‘&sensor.dark_sky_precip_probability.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’,
}
}
]
},

Check out my config:

image


              {
                     // please read README.md for more information
                     // this is just an example
                     position: [2, 1],
                     height: 2, // 1 for compact
                     width: 1,
                     //classes: ['-compact'], // enable this if you want a little square tile (1x1)
                     type: TYPES.WEATHER,
                     title: false,
                     id: {},
                     state: '&sensor.dark_sky_summary.state', // label with weather summary (e.g. Sunny)
                     fields: { // most of that fields are optional
                        icon: '&sensor.dark_sky_icon.state',
                        iconMap: {
                           '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'
                        },
                        summary: '&sensor.dark_sky_summary.state',
                        apparentTemperature: '&sensor.dark_sky_apparent_temperature.state',
                        apparentTemperatureUnit: '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
                        temperature: '&sensor.dark_sky_temperature.state',
                        temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
                        highTemperature: '&sensor.dark_sky_daytime_high_temperature_1d.state',
                        highTemperatureUnit: '&sensor.dark_sky_daytime_high_temperature_1d.attributes.unit_of_measurement',
                        lowTemperature: '&sensor.dark_sky_overnight_low_temperature_1d.state',
                        lowTemperatureUnit: '&sensor.dark_sky_overnight_low_temperature_1d.attributes.unit_of_measurement',
                        precip: '&sensor.dark_sky_precip.state',
                        precipIntensity: '&sensor.dark_sky_precip_intensity.state',
                        precipIntensityUnit: '&sensor.dark_sky_precip_intensity.attributes.unit_of_measurement',
                        precipProbability: '&sensor.dark_sky_precip_probability.state',
                        precipProbabilityUnit: '&sensor.dark_sky_precip_probability.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',
                        // pollen: '&sensor.pollen_count.state', // this is a value from a custom REST sensor
                        // pressure: '&sensor.dark_sky_pressure.state',
                        // pressureUnit: '', //'&sensor.dark_sky_pressure.attributes.unit_of_measurement',
                     }
                  },

See post 2295 above for a method, may work for you.

1 Like

This thread is getting rather large, are feature requests OK here or would github be better?

Yes, you need to use the websocket node in NodeRED so it can speak to HA

You can then get Tileboard to trigger a HA script, then in the HA script you can switch an input_boolean than nodeRED is monitoring.

I am trying to get a live camera stream into TileBoard. I’ve looked through this forum and found a few examples, but I can’t get anything to work, it seems like I just get a teal colored block.

My cameras are hosted on BlueIris, so I have a stream in the format of http://camera-server.home/mjpg/backyard

I have this code, but doesn’t seem to work. What am I missing? These cameras are in HA as well, but it’s much more efficient to pull them directly from BlueIris.

  {
     position: [4, 0],
     type: TYPES.CAMERA,
     id: {},
     bgSize: 'cover',
     state: false,
     fullscreen: {
        type: TYPES.CAMERA,
        filter: function (item, entity) {
           return "http://camera-server.home/mjpg/backyard"; },
        bgSize: 'contain'
     },
     filter: function (item, entity) {
        return "http://camera-server.home/mjpg/backyard";
     }
  }

Is that the url you use to get the cam into HA?

Yep. Same one. It works fine in HA. Here’s the HA config for reference:

camera:
  - platform: mjpeg
    mjpeg_url: http://camera-server.home/mjpg/backyard
    name: Back Yard

And from a browser, the URL works fine. Only thing i could possibly think of is that I’m using https for HA and this is an http URL, but still would think it would work fine.

Spend a few days during my holiday on a little project named “deadbolt detection” . I have 7 doors in my house with ‘night locks’ meaning the deadbolt sits in the doorsill when the door handle is pushed up. All great and all but it doesn’t say anything about the lock status… so i needed to find a way to detect the position of the cylinder in each door… very long story short, with lot’s of tinkering about, I got it working (using AEOTEC door sensor and some wiring in the lock) and was then looking for a neat way to put it on a dashboard.

All in all i’m happy with the result so far, I will continue to change and tweak , for now , it’s solid and easy readable for everyone around the house. (sorry, states etc. are all in Dutch but you get the idea)

I have an old iPad mounted on the kitchen wall and find it extremely useful !

Needless to say, green means door open, red, door closed. :wink:

2 Likes