TileBoard - New dashboard for Homeassistant

That was it - everything working, thank you.

Wow - what a mission

Hi folks, has anyone successfully implemented this with a calendar (that is much bigger). Came here searching for DAKBoard alternatives, but the main goal is a family hub mounted on the kitchen wall showing the family calendar and a few other bits and pieces.
The idea would be a rolling month calendar view.

1 Like

Please tell me how to set a local photo in DEVICE_TRACKER, instead of the default @attributes.entity_picture.
Thanks.

And how to do the same for the sensor (TYPES.SENSOR)?
Setting “| round” to sensors.yaml and setting “parseInt (value)” in config.js does not work.

I have been playing around with a sensor that displays the apple tv info or the sonos info based on the input of the sonos.

My question is, the bgSuffix i created with this sensor, is grabbing the right code, but it is hit or miss on displaying the correct bg. The title sensor i created using the same method based on input, works perfectly.

and as soon as i change the input it changes to this

Basically i have my tv, which i only use apple tv on, using the sonos as a speaker below the tv, so it is perfect for combining the two into one media player.

any thoughts?

    sonos_artist_song_coreys_room:
      friendly_name: "Now Playing - Corey's Room"
      value_template: "{{ state_attr('media_player.corey_s_bedroom', 'media_artist') + ' - ' + state_attr('media_player.corey_s_bedroom', 'media_title') }}"
    sonos_corey_bedroom:
      friendly_name: "Now Playing - Corey w/ TV"
      value_template: >-
        {% if is_state_attr('media_player.corey_s_bedroom', 'source', 'Line-in') %}
          {{ state_attr('media_player.coreys_apple_tv', 'media_title') }}
        {% elif is_state_attr('media_player.corey_s_bedroom', 'source', 'Patriots.com Radio') %}
          Pats Radio
        {% elif is_state_attr('media_player.corey_s_bedroom', 'media_artis', '') %}
          98.5 The Sports Hub
        {% else %}
          {{ states('sensor.sonos_artist_song_coreys_room') }}
        {% endif %}
    sonos_corey_bedroom_entity_picture:
      friendly_name: "Picture with TV Corey"
      value_template: >-
        {% if is_state_attr('media_player.corey_s_bedroom', 'source', 'Line-in') %}
          {{ state_attr('media_player.coreys_apple_tv', 'entity_picture') }}
        {% else %}
          {{ state_attr('media_player.corey_s_bedroom', 'entity_picture') }}
        {% endif %}

Thanks for helping me.
But this does not work for me. I get the data from the ‘hPa’ pressure sensor, convert it to ‘mmHg’, send it to TYPES.SENSOR and always get fractional numbers.

SENSORS.YAML

  - platform: template
    sensors:
      pressure:
          friendly_name: "Pressure mmHg"
          unit_of_measurement: 'mmHg'
          value_template: >
          {{ (states('sensor.pressure_158d00025eeb15') | float * 0.75006375541921) |round }}

config.js

             {
                     position: [2, 0],
                     type: TYPES.SENSOR,
                     title: 'Pressure',
                     id: 'sensor.pressure',
                     unit: 'mHg', // override default entity unit
                     state: false, // hidding state
                     filter: function (value) {
                     var num = parseInt(value);
                     return num && !isNaN(num) ? num.toFixed(1) : value;
                  }
             },

It’s good here

Here is a fractional number!

How can I change this?
Thanks.

You would just need to see what exactly the sensor is returning in HA’s state. It is impossible to guess such thing.

The problem lies with toFixed, it didn’t matter if you convert the value to integer or not, it would format it with one number after the point. In your case you can simply remove the whole filter and have the value displayed as it would come from HA.

Use anonymous function to return URL you need for bg.

Alexey, thank you very much, everything works very well!

it all reads exactly what it should on HA sensors. A refresh seems to fix it sometimes, but its a mystery as to why it doesn’t display cover images properly.

Right-click on the player and inspect in dev-tools what bg is being set when it appears blank.

Отлично :slight_smile:

see anything suspicious? looks correct to me

25 PM

Try opening that URL directly in your browser. Does the image show up?

Can you share how you got camera streaming to work? Thanks!

I am trying to add a RSS news feed tile. Has anyone done this? I am trying to use an iframe with custom.css but the styling does not work. Any insight would be helpful. Thanks!

To add context the website that is processing the iframe from a RSS link is https://rss.bloople.net/. The RSS feed is loaded into the iframe with preexisting classes.

I’m playing with cameras right now and noticed strange behavior. Maybe someone will be able to point me into the right direction.
Initially, I configured cameras based on synology platform as all my cameras are recordered on Synology surveillance station.

Config:

- platform: synology
    url: !secret dscam_ip
    username: !secret dscam_username
    password: !secret dscam_password 
    verify_ssl: false

All works perfectly fine in HA lovelace and TileBoard but unfortunately Synology provides only second (low quality) stream.
Therefore I decided to add cameras directly e.g.:

  - platform: ffmpeg
    name: front_hq
    input: !secret camera_front_rtsp_hq

By doing this, I got perfect (high resolution) streaming in HA lovelace but TileBoard doesn’t work as it should … i mean thumbnail shows on the tile itself but after click, popup window with stream is black or stream shows randomly for 2,3 seconds and disappearing again.

My first thought was that resolution might be too high so I tried to use proxy to make it smaller:

  - platform: proxy
    entity_id: camera.front_hq
    max_stream_width: 640
    max_image_width: 640

nothing better (HA lovelace ok, TileBoard the same) so I tried to change platform from ffmpeg to generic:

  - platform: generic
    name: front_hq_generic
    stream_source: !secret camera_front_rtsp_hq
    still_image_url: !secret camera_front_pict
    authentication: digest

still nothing is showing in TileBoard even if in HA lovelace all works perfectly fine.

@resoai or anyone :slight_smile: … any idea what is wrong ?

Well I ended up heavily customizing the TileBoard code, rewriting larger parts of the backend to suit my specific needs, especially around camera handling on mobile phones. So while it still looks like TileBoard, it isn’t really Tileboard anymore under the hood in large parts.

I have several 4k Hikvision cameras. Each camera is split into two definitions in configuration.yaml. One native at the actual camera resolution which supplies high resolution images plus rtsp stream and a proxy which supplies a lowres and low fps image sequence. The former is used in the camera popup and security related automations (recording on perimeter breach), the latter within a camera thumbnail tile for a low bandwidth quick view.

- platform: generic
    name: HikVision1
    still_image_url: http://192.168.5.64/ISAPI/Streaming/channels/101/picture
    stream_source: rtsp://admin:[email protected]/ISAPI/Streaming/channels/101
    username: admin
    password: -------

  - platform: proxy
    entity_id: camera.hikvision1
    name: hikvision1_lowres
    max_image_width: 640
    max_stream_width: 640
    image_refresh_rate: 3.0

It’s important to specifically include the credentials in the stream_source URL !

This is in config.js, the tile itself uses the the lowres proxy image. The fullscreen popup shows the full res feed. This uses a custom extension that allows a different camera to be shown in the popup, that won’t work with stock TileBoard unfortunately. On the stock Tileboard, it will just use the camera you specify in id as the one for the stream. So you should specify the one with the rtsp stream_source (camera.hikvision1 in my example)

{
   position: [0, 0.4],
   id: 'camera.hikvision1_lowres',
   type: TYPES.CAMERA_THUMBNAIL,
   title: 'Front yard',
   bgSize: 'cover',
   width: 3,
   height: 1.6,
   state: false,
   fullscreen: {
	  objFit: 'contain',
	  type: TYPES.CAMERA_STREAM,
	  entity: 'camera.hikvision1',
	  showPtzControls: false
   },
   refresh: function() { return 3000 + Math.random() * 500; },
}
1 Like