TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
2237

sure.

Here is my custom.css

.weather-list--secondary {
  white-space: normal;
}
.weather-list--secondary {
  width: 200px;
}

and here is my code in config.js

// WEATHER LIST \\
                { 
                    position: [3, 0],
                    type: TYPES.WEATHER_LIST,
                    width: 3,
                    height: 2,
                    title: '',
                    id: {},
                    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'
                        },
                    hideHeader: false,
                    secondaryTitle: 'Summary',
                    list: [0,1,2,3,4,5,6].map(function (id) {
                    var weekday = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
                    var forecast = "&sensor.dark_sky_overnight_low_temperature_" + id + "d" + ".state - ";
                    forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d" + ".state";
                    forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d" + ".attributes.unit_of_measurement";

                    var wind = "&sensor.dark_sky_summary_" + id + "d" + ".state";

                    return {
                    date: function () {
                        if ( id === 0 ) {
                        return "Today";
                        }
                        else if ( id === 1 ) {
                        return "Tomorrow";
                        }
                        var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                        return weekday[d.getDay()];
                        },
                    icon: "&sensor.dark_sky_icon_" + id + "d" + ".state",
                    //iconImage: null, replace icon with image
                    primary: forecast,
                    secondary: wind
                        };
                    })
                },
1 Like
2238

Just so you know, you can save yourself a couple lines of code by combining those two pieces of custom.css together:

.weather-list--secondary {
  white-space: normal;
  width: 200px;
}

Obviously not a big deal when you’ve only got two properties you’re touching, but good to remember if you make more modifications down the road.

2 Likes
2239

Sweet! Didn’t know that. Thanks.

2240

Hey, this is awesome and just what I’m looking for! Looks loads better then action tiles :slight_smile:

is there a way to confirm/check that my requirements will work on this (eg my list of “things” before I embark on building this all out ?

Or is it just anything I can load up into HomeAssistant will work?

2241

This will give you a good idea of the things that you can do in TileBoard:

And the wiki has some additional details for specific things like screensaver, mobile version, etc:

Once you get going refer to the ReadME for all of the options and this discussion to learn more.

1 Like
2242

Hello,
can some help with the dateformat in a sensor value.
For now i have the default datetime format like 2019-04-11T:00:00:00 .

I tried below but it returns the word Date.:

value: function () { 
  var d = new Date(Date.now() + '&sensor.rova_bio.state' * 24 * 60 * 60 * 1000);
  return d.toString().split(' ').slice(1, 3).join(' ');
}
2243

Thanks - this is great
another question around devices, do swipe actions work to move between different pages

2244

What is the value of this? Is it a date like you mentioned above? Or is it an integer/number?

2245

It shows a date. 14
the return object type is a date.

2246

How do you want it displayed?

2247

Well dd-mm-yyyy would be fine in this case. But have an other case i like to see hh-mm dd-mm-yyyy

2248

Hey, is there anywhere i can find working examples of full “config.js” files?
im quite new and the readme is helpful but some real life working config files, would really help me to understand whats happening and where im going wrong!

2249

@jimz011 documented his configuration here: https://github.com/jimz011/Tileboard-unedited, screenshots here: Lovelace by Jimzz011 (HA 0.91.x compatible) *DEPRECATED

2250

@sro1705 try something like:

var d = new Date( this.states[ "sensor.rova_bio" ].state );
return d.toLocaleTimeString() + " " + d.toLocaleDateString();

you may not have to do the this.states[…] thing. Most of the function calls include (item,entity) arguments so you could just use entity.state, ex:

       customStyles: function (item, entity) {
          if (entity.state !== 'Home') {
              return {
                  'opacity': 0.8,
                  'filter': 'grayscale()',
              };
          } else {
              return {
                  'opacity': 1,
                  'filter': '',
              };
          }
       }
2251

The config.example.js file is also a working example. You can rename that config.js and then add a new tile of your own, a light tile for example, and then you are on your way.

2252

@diggerdanh : ive tried the following but returns invalid date

title: 'Afval',
icon: 'mdi-recycle',    
value: function () {
 	var d = new Date([ "&sensor.rova_bio" ].state );
  	return d.toLocaleTimeString() + " " + d.toLocaleDateString();  
}
2253

try var d = new Date( this.states[ "sensor.rova_bio" ].state );

2254

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 an rgb_color attribute and add the option colorpicker: true to its light tile definition you will see a new option on the longpress screen, along with any sliders you have defined like this:

If you click the color box you will then see this:

Currently this only updates the rgb_color attribute for the light so the light must support that value. I only have one color changing light to test with and what I have implemented works fine with it. Pull down the latest code and give it a try. Let me know if you run into any issues or have any suggestions here: https://github.com/resoai/TileBoard/issues

4 Likes
2255

@diggerdanh

that did the trick… thank you :slight_smile:

1 Like
2256

Firstly this is such a great front end and I am loving the how good it looks.

Having followed all of the documentation and great advice I have managed to create an event triggered movement on the camera. Using the scripts provided I have managed to get it to move Tileboard to the camera page.

The only problem I have is I can not get it to switch the screen saver off. I am using old iPad mini(s) with an app called kiosk pro lite.

I have this defined in my events in config.js

{
command: ‘screen_on’,
action: function(e) {
if (typeof fully !== undefined) {
fully.stopScreensaver();
fully.bringToForeground();
}
},

The call from HA is defined as below

  • alias: ‘Motion Detection Outside’
    trigger:

    • entity_id: binary_sensor.frontsensor_line_crossing
      from: ‘off’
      platform: state
      to: ‘on’
      action:

    • event: tileboard
      event_data:
      command: ‘screen_on’

    • event: tileboard
      event_data:
      page: 2
      command: ‘open_page’

Any help appreciated.