TileBoard - New dashboard for Homeassistant

[khouse75]

@reckless

I have a question about camera’s and RTSP / RTMP integration.

Is there a way to have a direct camera stream, either RTSP or RTMP, in Tileboard, outside of HA (just using direct URLs)? I just want the direct stream and not refreshing pictures. Is this possible and if so, what is the recommended way?

Thanks in advance.

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.

[reckless]

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.

[khouse75]

@reckless

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.

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>

[oriolism]

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

[reckless]

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)?

[reckless]

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

[resoai (Alexey)]

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.

[resoai (Alexey)]

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.

[reckless]

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

                    }
                 })

[resoai (Alexey)]

{
      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
         }
      })
   }

[reckless]

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?

[resoai (Alexey)]

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

[jschwalbe (Justin S)]

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

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

[reckless]

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.

[resoai (Alexey)]

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

  monitored_conditions:
   - temperature_high
   - temperature_low

[resoai (Alexey)]

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

[lolorc (Lolo)]

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 ?

[baggi97 (Rasmus Andersen)]

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"
                        }
                      })
                    }

[Stewface (Stewart)]

@resoai

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.

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

[ReneTode]

@resoai

while native HA UI is (almost) perfect for phones

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.