TileBoard - New dashboard for Homeassistant

resoai · March 29, 2019, 2:15pm

function $$(tileObject, merge) {
   if(merge instanceof Array) {
      merge = {position: merge};
   }

   var copy = mergeObjects({}, tileObject);

   return mergeObjects(copy, merge);
}

{
    width: 3,
    height: 3,
    title: 'Scenes',
    items: [
        $$(TILES.GOOD_MORNING_SCENE, [0, 0]),
        $$(TILES.GOOD_NIGHT_SCENE, [1, 0]),
        $$(TILES.LIGHTS_OUT_SCENE, [2, 0]),

        $$(TILES.MOVIE_SCENE, [0, 1]),
        $$(TILES.GAME_SCENE, [1, 1]),
        $$(TILES.RELAX_SCENE, [2, 1]),
    ]
}

diggerdanh · March 29, 2019, 2:18pm

True, all fair points.

In my case I have several items, mostly lights and switches, that I use for tiles in multiple places in my dashboard, for instance in an overview section on my home screen, maybe on a specific room page, and then again on a page that lists all lights. In my case being able to simply make a copy of the tile definition that includes most of the options already set and just being able to override the position is enough. And since I treat some tiles like that I want to treat all of them the same way, I do not want some tiles defined inline and some tiles defined as custom tiles, etc.

It does simplify it for me, but what works for me does not work for everyone.

resoai · March 29, 2019, 2:21pm

function loadScript(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url + '?cache=' + Math.random(), false);
  req.onreadystatechange = function(){
     if (req.readyState === 4) {
        var s = document.createElement('script');
        s.appendChild(document.createTextNode(req.responseText));
        document.head.appendChild(s);
     }
  };
  req.send(null);
}

loadScript('includes/helpers/functions.js');
loadScript('includes/helpers/states.js');
loadScript('includes/helpers/common.js');
loadScript('includes/helpers/events.js');
loadScript('includes/helpers/tiles.js');

diggerdanh · March 29, 2019, 2:22pm

Thanks @resoai I’ll give that a try!

resoai · March 29, 2019, 2:27pm

If you have a lot of similar tiles on one page, you could could do something like this:

{
    title: 'Downstairs',
    width: 2,
    height: 3,
    items: [
        ['climate.hallway', 'sensor.hallway_heat_demand'],
        ['climate.av_room', 'sensor.av_room_heat_demand'],
        ['climate.lounge', 'sensor.lounge_heat_demand'],
        ['climate.kitchen', 'sensor.kitchen_heat_demand'],
        ['climate.dining_room', 'sensor.dining_room_heat_demand'],
        ['climate.utility_room']
    ].map(function(item, i) {
        var y = Math.floor(i / 2);

        return $$(TILES.CLIMATE, {
            position: [i - y * 2, y],
            subtitle: item[1] ? 'Valve at &' + item[1] + '.state' + '%' : false,
            id: item[0]
        });
    })
}

As you can see, I’m also reusing TILE.CLIMATE.

Codec303 · March 31, 2019, 5:52am

Nice that allows you to put any property in the array.

With this we are getting back to the crux of how tileboard works except now you can define your defaults for a tile.

I guess if you make after you add lots of changes to then sometimes it’s easier just to make a whole new one, but it’s really handy for me when I have a single camera tile that different sizes depending on which device I’m using Tileboard on.

Yes this is basically what it does already… if you have just one thing to reuse why not put that in a variable and reuse it in the default tile builder?

For me this help as I’ll re-use the tile on multiple tileboard layouts. Eg Phone has a tile layout that is different to my ipad, but they both use the same tiles. It’s great to have this flexability

EDIT: Is anyone else running HA behind 2 proxies? If so do your camera feeds work in popout mode in tileboard?

hentes · March 31, 2019, 1:09pm

First of all @resoai thank you for this masterpiece. I have one question: is there any way to implement floorplan to your work? It would be really nice and usefull.

pbangsoe · April 2, 2019, 10:18am

+1 for Floorplan support

resoai · April 2, 2019, 10:31am

No, this is not possible

cgarwood · April 2, 2019, 12:38pm

You could include your Floorplan in an iframe tile

mathewtaylor2007 · April 2, 2019, 12:53pm

could you share how to made items pulsate please?
I’ve no idea how to implement this. custom css?

tman75 · April 3, 2019, 3:45am

I am finally able to create the weather/forecast card that I want, so I am going to go with TileBoard vs HADashboard. Love it!

But how do I set each date to use two lines instead of one? I want to make it so each day has two lines that can display for the summary. Also, is there a way to have it display relative day (today, tomorrow, Thursday, etc)? Thanks.

This is my current config for my forecast card.

{
                    position: [0, 1],
                    type: TYPES.WEATHER_LIST,
                    width: 3,
                    height: 2,
                    title: 'Forecast',
                    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: [1,2,3,4,5].map(function (id) {
                    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";

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

                    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,
                    secondary: wind
                            }
                        })
                    }
               ]
            }

Codec303 · April 3, 2019, 9:05am

You’d have to use custom.css to make it 2 lines per entry

diggerdanh · April 3, 2019, 12:29pm

Changing the date function to the below will give you: Tomorrow, Friday, Saturday, Sunday

             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()];
             },

changing your list: [1,2,3,4,5].map to start with list: [0,1,2,3,4,5,6].map with show today as “Today” and give you a 7 day forecast.

apop · April 3, 2019, 3:03pm

Hey @resoai, any thoughts about opening up the Wiki on GitHub for public editing? I’d love to add some examples to it and beef it up a little bit, I think it would really help new users out to have more examples in one place around how to use anonymous functions, for example. But I know you guys only have so much time so opening up the Wiki a bit more would probably help cut down on questions if some of us can share examples and things we learned. This forum thread is a great resource as well, but there’s so much in here that it can be overwhelming and hard to find things.

hentes · April 3, 2019, 3:32pm

“Direct Link Rendered Image” not working when using Grafana on Hass.io as addon. Any solution?

resoai · April 3, 2019, 3:42pm

We can certainly do that but this would probably require some sort of moderation as well. Perhaps a link to a Wii with examples would be the best solution? I’m not sure there is an option for public wiki editing anyway.

apop · April 3, 2019, 3:56pm

Looks like it’s possible. Definitely agree that moderation would be needed, though: https://help.github.com/en/articles/changing-access-permissions-for-wikis

resoai · April 3, 2019, 4:00pm

OK, I’ve done it

tman75 · April 3, 2019, 4:53pm

Thanks! I put that in, and it is giving me Today, and Tomorrow, but blanks for the rest of the days.

{ 
                    position: [0, 2],
                    type: TYPES.WEATHER_LIST,
                    width: 3,
                    height: 1.63,
                    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 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";

                    var wind = "&sensor.dark_sky_summary_" + id + ".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 + ".state",
                    //iconImage: null, replace icon with image
                    primary: forecast,
                    secondary: wind
                    }