TileBoard - New dashboard for Homeassistant

[JesseWebDotCom]

2 quick questions:

1. Tileboard is awesome. How can I send you some money for all your efforts?
2. My camera video feeds all flash. Any idea how I can fix it (and ideally have a live video feed)? I tried changing and even removing the refresh - no difference.

Tilboard:

{
                     position: [2, 2],
                     id: 'camera.driveway_front',
                     title: '',
                     states: function(item, entity) {
                        var motion = this.parseFieldValue('&binary_sensor.driveway_front_camera_motion.state');
                        if (motion == 'on') {
                           return 'MOTION'; 
                        } else {
                           return ' ';
                        }
                     },                      
                     type: TYPES.CAMERA_THUMBNAIL,
                     bgSize: 'cover',
                     width: 2,
                     height: 1,
                     // state: false,
                     fullscreen: {
                        type: TYPES.CAMERA,
                        refresh: 250, // can be number in milliseconds
                        bgSize: 'cover'
                     },
                  },

Underlying Blue Iris camera URL:

http://IP_ADDRESS:PORT/h264/driveway_front/temp.m3u8

Thanks again!

[nabulke (horst)]

Anybody knows how to use the openweathermap platform as a source for the TYPES.WEATHER_LIST?

All the examples are using the DARKSKY sensor.

Home assistant states

Code so far:

                     {
                     position: [0, 1],
                     type: TYPES.WEATHER_LIST,
                     width: 1,
                     height: 1,
                     title: 'Forecast',
                     id: {},
                     icons: {
                        'clear-day': 'clear',
                        'clear-night': 'nt-clear',
                     },
                     hideHeader: false,
                     list: [1,2,3,4,5].map(function (id) {

                    var forecast = "&weather.openweathermap.attributes.attribution";
                    
                    return {
                       date: function () {
                          var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                          return d.toString().split(' ').slice(1, 3).join(' ');
                       },
                       icon: "&sensor.dark_sky_icon_" + id + ".state",
                       //iconImage: null, replace icon with image
                       primary: forecast
                    }
                 })

Output:

[rodrigowa (Rodrigo Araujo)]

Hello @resoai. First off all, congratulation for this wonderful job!!
Well, i have 6 media players and one of them are Home that group the other 5 players. When i choose to play the music on the Home (group) the others media players also plays the same thing. My question is: Is it possible to hide the other players if the Home (group) is playing?! Thanks.

[Torbenan (Torben Andersen)]

I’ve place a Xiaomi thermometer in my Freezer and have display the temperature in TileBoard. I want to show the temperature in red, when the temperature is above -15C. How do I do that. This is my code.
{
position: [1, 2],
height: 1,
width: 1,
type: TYPES.SENSOR,
theme: ITEM_TRANSPARENT,
title: ‘Freezer’,
id: ‘sensor.temperature_158d0002c776ee’,
unit: ‘C’, // override default entity unit
state: false, // hidding state
filter: function (value)
{ // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}

[lolorc (Lolo)]

you could use something like class: function () { return this.states['sensor.temperature_158d0002c776ee'].state > -15 ? 'red': ''; }
and define red somewhere in your custom.css.
(might need a parseFloat(this.states['sensor.temperature_158d0002c776ee'].state))

[JesseWebDotCom]

More responsive scrolling on apple devices (ex. iphone)?
When I added the following, scrolling was great but popup menus (like fan speed) are unusable:

.pages {
  -webkit-overflow-scrolling: touch;
}

[JesseWebDotCom]

@akkaria

refer to the example tiles in @resoai first post and look at the lights tile you will see how to do this with a long press

Can you point me to this example? Thanks

[bachoo786]

Hey how did you get that cool weather effect?

[devastar (matt)]

Hi, how do I remove scrollbars in an iFrame tile?

I’ve tried customStyles but no luck

			 {
				 position: [0, 4],
				 type: TYPES.IFRAME,
				 id: {},
				 width: 3,
				 height: 3,
				 refresh: 3600000, // 1h
				 customStyles: {'overflow':'hidden'},
				 url: 'https://www.metservice.com/publicData/rainRadar/image/AUCKLAN/300K/',
			 },

[radinsky]

How to completely remove notification on reconnection like:
Reconnection successful and etc?

Tried using ignoreErrors: true but it doesn’t help.

Thanks!

[jagiel]

hi, i have sonoff th16 to control gateway in garage, simple switch (after customize - no 200v on output , example how to do on sonoff basic: https://www.smartnydom.pl/wp-content/uploads/wpforo/default_attachments/1494100199-sonoffrelay2.jpg) change state for 1sek, then gateway starts open or close gateway.

it is possible to change state but only when you know code\pin ? not just like simple switch light, change state after write code or locked by code switch?

[cweakland (Chris)]

I had the same issue, I ended up creating a webpage on my own server, formatted the page the way I wanted it and then added that into tialboard via an iframe tile.

[jagiel]

my solution for today:

configuration:

alarm_control_panel:

• platform: manual
  name: Brama
  code: 1111
  pending_time: 2
  delay_time: 5
  trigger_time: 4
  disarmed:
  trigger_time: 0
  armed_home:
  pending_time: 0
  delay_time: 0
  armed_away:
  pending_time: 0
  delay_time: 0

automation:

• id: alarm_brama_zamknieta
  alias: ‘Brama zamknięta’
  trigger:

  • platform: state
    entity_id: alarm_control_panel.brama
    to: ‘armed_away’
    action:
  • service: notify.pushbullet
    data:
    message: ‘Brama zamknięta’
  • service: switch.toggle
    data:
    entity_id: switch.espurna_9176e7_0

• id: alarm_brama_otwarta
  alias: ‘Brama otwarta’
  trigger:

  • platform: state
    entity_id: alarm_control_panel.brama
    to: ‘disarmed’
    action:
  • service: notify.pushbullet
    data:
    message: Brama otwarta’
  • service: switch.toggle
    data:
    entity_id: switch.espurna_9176e7_0

[devastar (matt)]

I didn’t think of that, will try now - thanks.

[iudda]

Great project! I have been using it for my home automation and works like a charm. For another project (without home assistant) I would really like to use Tileboard as well (to create a few pages with iframes in them). Is there any way to use Tileboard without a homeassistant install? Can I comment out some code to skip the home assistant connection?

[devastar (matt)]

That worked, however I found a good rain radar that can be embedded easily like windy.com
We’re on tank water here so being able to see rain forecasts helps

  		 {
  			 position: [0, 4],
  			 type: TYPES.IFRAME,
  			 id: {},
  			 width: 3,
  			 height: 3,
  			 refresh: 3600000, // 1h
  			 customStyles: {'overflow':'hidden'},
  			 url: 'https://www.rainviewer.com/map.html?loc=-37.2665,175.3418,5&oFa=0&oC=0&oU=0&oCS=0&oF=1&oAP=1&rmt=0&c=1&o=83&lm=0&th=1&sm=1&sn=0',
  		 },

[iudda]

I would like to display a different background image on a sensor tile depending on the state of the sensor. It seems to work using the following code when using the nul theme, but when using the transparent theme, no background image shows up. I have now temporarily used “content” instead of “background-image” image for that tile, so the image at least shows up, but that does not auto-update on state-change and (clearly) makes the other advantages of the sensor tiletype disappear (displaying state text etc.).
Can you help me to get background-image to work?

The code I used:

customStyles: function(item, entity){
  if (entity.state === '1') {
     return { 'background-image': 'url("/images/1.png")',
     };
   } else if (entity.state === '2') {
      return { 'background-image': 'url("/images/2.png")',
     };
   } else if (entity.state === '3') {
      return { 'background-image': 'url("/images/3.png")',
     };
   } else if (entity.state === '4') {
      return { 'background-image': 'url("/images/4.jpg")',
     };
   } else if (entity.state === '5') {
      return { 'background-image': 'url("/images/5.jpg")',
     };
   }
 },

[JesseWebDotCom]

How can I use your popup color picker? I also have yeelights and would love to use them with your color picker. Thanks

[resoai (Alexey)]

TileBoard - New dashboard for Homeassistant

Hey all, I have learned a bunch here, am very much loving my wall mounted tablet running TileBoard, and very much appreciate the time and effort @resoai has put into TileBoard. I decided I wanted to give back a little so I took on perhaps the most requested feature - adding an RGB color picker for lights. Alexey accepted the PR and the functionality is now in place along with updated info in the readme docs and updated pics in the tiles example doc. If you have a color changing light that has a…

[cgarwood (Charles Garwood)]

Did some hacking on my local copy of TileBoard today and added support for a footer (works the same as the header) and use it to display weather alerts. Also added weather alert badges to my screensaver.