TileBoard - New dashboard for Homeassistant


#1313

Not directly. The easiest way I found to do it is by converting the stream to an mjpeg stream using ffmpeg and ffserver. You then access the mjpeg stream using http. If you scroll up to recent posts by me, I asked the same question. You use TYPES.CAMERA and filter function() to return the url to your mjpeg stream(s).

I switched to this because accessing my 20+ cameras through home assistant was causing out of memory issues with HA along with CPU issues and sync issues. Accessing the cameras directly completely eliminates all issues I was having.


#1314

Very interesting, thanks for the pointers. I haven’t used ffserver or ffmpeg so let me pick your brain for a second: can I run ffserver in a docker container? Do I convert it there and then get the URL from tileboard pointing to the ffserver url? Or how does this work exactly? Thanks for the help.


#1315

Yes. You convert with ffmpeg and ffserver serves the mjpeg stream as a url. You then access that url from tileboard directly. You should be able to run in docker but I just run them from a Linux VM. I run Ubuntu so apt install ffmpeg installs everything. It uses very minimal space. You then edit /etc/ffserver.conf to match your environment. ffserver then launches ffmpeg which outputs its stream to ffserver. Here’s a sample of my ffserver.conf file. Basically, what this does is it launches ffmpeg witch connects to my rtsp stream then outputs it to http://127.0.0.1:8090/channel02.ffm which is the ffserver listener. ffserver then makes this stream available as http://IP ADDRESS:8090/channel02.mjpeg. You then access this url from tileboard.

Here’s a sample ffserver.conf file.

HTTPPort 8090
HTTPBindAddress 0.0.0.0
MaxHTTPConnections 2000
MaxClients 1000
MaxBandwidth 1000000
CustomLog -

<Feed channel02.ffm>
   File /tmp/channel02.ffm
   FileMaxSize 20M
   Launch ffmpeg -i "rtsp://192.168.10.10:554/cam/realmonitor?channel=02&subtype=00&authbasic=*PASSWORD*="
</Feed>

<Stream channel02.mjpeg>
   Feed channel02.ffm
   Format mpjpeg
   VideoBitRate 10000
   VideoFrameRate 15
   VideoSize 352x240
   VideoIntraOnly
   NoAudio
   Strict -1
   NoDefaults
</Stream>

#1316

It’s possible to use Tileboard without internet? If the internet is disabled the icons won’t load. BTW great work!


#1317

Is there a way to round down the numbers of the Weather Forecast Github code example? For example, rather then getting values like 33.42 - 67.36, just get them as whole numbers (33 - 67)?


#1318

I’m going to check it out and see if I can get this working. Thanks for the help, appreciate it.


#1319

You need to use parseInt(...) instead of of parseFloat(...) to display integers. You can also use any javascript functions to format or do calculations to the numbers.


#1320

As you know this is just an HTML page and we are using native controls available on the particular OS, <input type="range"> in this case. You can try to play around with CSS making things slightly bigger but I honestly believe that dashboards are primarily for larger screens while native HA UI is (almost) perfect for phones.


#1321

I don’t see parseFloat in the code provided on Github - where in the code below should parseInt() go?

                     list: [1,2,3,4,5].map(function (id) {
                    var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                    var date = d.toString().split(' ').slice(1,3).join(' ');

                    var forecast = "&sensor.dark_sky_overnight_low_temperature_" + id + ".state - ";
                    forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".state";
                    forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".attributes.unit_of_measurement";


                    return {
                       date: date,
                       icon: "&sensor.dark_sky_icon_" + id + ".state",
                       //iconImage: null, replace icon with image
                       primary: forecast

                    }
                 })

#1322
{
      position: [0, 1],
      type: TYPES.WEATHER_LIST,
      width: 2,
      height: 1,
      title: 'Forecast',
      id: {},
      icons: STATE_MAPS.WEATHER_ICONS,
      hideHeader: true,
      secondaryTitle: 'Rain',
      list: [1,2,3,4].map(function (id) {
         var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
         var date = d.toString().split(' ')[0];

         var secondary = '&sensor.dark_sky_precip_probability_' + id + '.state';
         secondary += ' &sensor.dark_sky_precip_probability_' + id + '.attributes.unit_of_measurement';

         return {
            date: date,
            icon: '&sensor.dark_sky_icon_' + id + '.state',
            primary: function (item, entity) {
               var high = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
                  + id + '.state', item, entity);
               var low = this.parseFieldValue('&sensor.dark_sky_overnight_low_temperature_'
                  + id + '.state', item, entity);
               var unit = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
                  + id + '.attributes.unit_of_measurement', item, entity);

               high = parseInt(high);
               low = parseInt(low);

               return low + ' / ' + high + unit;
            },
            secondary: secondary
         }
      })
   }

#1323

Much better, thanks @resoai, really appreciate your help (and Tileboard as a whole too!)

The STATE_MAPS.WEATHER_ICONS do not work for me though, not sure what that is. Could you explain more? I still have the icons mapped out manually as per your Github example code. Would this be different?


#1324

Sorry, STATE_MAPS.WEATHER_ICONS this is just me defining icons separately, you can replace it with whatever you had in original example.


#1326

I am having the same problem. Did you get it figured out?
image

Also I can’t get it to show the value for $sensor.dark_sky_daytime_high_temperature


#1327

For what it’s worth, I would also love to have the text wrap in the box for a weather summary. +1 to that request.


#1328

You need to make sure that relevant monitored_conditions are enabled in the sensor:

  monitored_conditions:
   - temperature_high
   - temperature_low

#1329

Guys, this is just an HTML page, you can create any CSS rules in custom.css to display stuff any way you like.


#1330

trying to play with custom.css, I’d like to have a different background color for even div in TEXT_LIST like it is done in TYPES.WEATHER_LIST.
I’m obviously not an css expert, tried

.-small-entity .item-list div:nth-child(even) {
background-color:#F00;
}

but it’s not working as expected if using “even”, it works-ish if I use “3n” but not “2n”.

Would anybody care to give me a hint please ? :slight_smile:


#1331

Is there a way to extract values from a array in the attributes on an entity in a list.

A have the weather.dark_sky entity

and it have a forecast object with the coming hours, which is a array

When using in it a list it always writes out [Object object]

{
                      position: [0,1],
                      width: 2,
                      height: 2,
                      type: TYPES.WEATHER_LIST,
                      id: 'weather.dark_sky',
                      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'
                      },
                      list: [0,1,2].map(function (id) {
                        return {
                           date: "&weather.dark_sky.attributes.forecast[" + id +"].datetime",
                           icon: "&weather.dark_sky.attributes.forecast[" + id +"].condition",
                           primary: "&weather.dark_sky.attributes.forecast[" + id +"].condition"
                        }
                      })
                    }

#1332

Thanks @resoai ill have a play with it next week.

Agree dashboards a great on big screens, but why not have dozens of controls in addition to the light switches in each room :smiley:


#1333

really? all elements on the normal HA gui are way to small to be workable.
on a normal phone i find it already bad if there are more then a few buttons to push.

i think its the other way around.
the bigger the screen the better the ha gui is, the smaller the screen the more there is need for a dashboard.