TileBoard - New dashboard for Homeassistant

Hmm, ok. I will have to look if I really want to do that. I am not good in css, nor js. :slight_smile:

That is because I forgot something important :slight_smile: - add the var weekday = ... line below:

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 + ".state - ";
1 Like

worked liked a champ! Thanks so much for your help and quick reply!

@emilp333, I see you did get your garage tile the way you wanted it, which is exactly what I would like as well. Can you post the code that you use? I believe it is a custom tile with an action.

Thanks.

I played around with it, and got it to work, however, is there a way to make the icon show a different icon when it is opened vs closed?

Another edit. I was able to figure out the icons. I am able to open it, but it will not close it.

{
                position: [0, 3],
                type: TYPES.CUSTOM,
                title: 'Garage Door',
                id: 'cover.gdo',
                icons: {
                    'open': 'mdi-garage-open',
                    'closed': 'mdi-garage',
                },
                action: function(item, entity) {
		        Api.send({
			    type: 'call_service',
			    domain: 'cover',
			    service: 'open_cover', // or 'close_cover'
			    service_data: {
			    entity_id: 'cover.gdo'
			        }
		        });

Try this:

{
                position: [0, 3],
                type: TYPES.CUSTOM,
                title: 'Garage Door',
                id: 'cover.gdo',
                icons: {
                    'open': 'mdi-garage-open',
                    'closed': 'mdi-garage',
                },
                action: function(item, entity) {
		        var action = 'open_cover';
		        if(entity.state === 'open') {
		            action = 'close_cover';
                        }
		        Api.send({
			    type: 'call_service',
			    domain: 'cover',
			    service: action,
			    service_data: {
			    entity_id: 'cover.gdo'
			        }
		        });
2 Likes

Thanks so much. Just in case anyone else is reading this I added a comma at the end of service: action.

1 Like

Sorry, typed too fast. Good catch. Just went back and edited my post to add the comma, but glad it worked for you otherwise!

1 Like

I am getting used to finding out I didn’t put a comma in. :slight_smile:

1 Like

Can I make a request for a theme? Combine the CUSTOM_THEMES.TRANSPARENT and the CUSTOM_THEMES.COMPACT.

Thanks.

That’s my number one mistake when updating my TileBoard config.

1 Like

Same here. If you use Sublime Text the jslint package is handy as it alerts you of any errors instantly.

Could you please help me how to display grafana graphs since I’m using Hass.io with grafana as addon and the direct link rendered image gives this error: “Rendering failed - PhantomJS isn’t included in arm build per default”.

I am experiencing constant log-out using chrome on a windows tablet.
It remains on and unlocked 24/7 showing tileboard full screen on google chrome.
Anybody has an idea why it keeps logging out from home assistant?

thanks!

You can use long-lived token as a workaround.

@resoai, thank you for replying!
I checked the documentation but couldn’t get my head around it. Do you have any guidance (articles/documentation) on how to use it, please?

how can I manage a xiaomi vacuum in tileboard?

Untitled-1

Go to your profile in HA and click on the button as shown on the screenshot. This shall be towards the very bottom of the page.

Oh I see… I should have read tileboard’s documentation on top of hass… Sorry about that, but thank you very much!

Hello all,

I am having an issue with the door entry tile, i cannot get it to work here is my config:
top of the config file:

var DOORENTRY_TILE = {
position: [0, 3],
type: TYPES.DOOR_ENTRY,
id: {},
icon: ‘mdi-phone’,
title: ‘Door entry’,
state: false,
doorEntryTimeout: 30,
layout: {
type: TYPES.CAMERA_THUMBNAIL,
id: ‘camera.front_door’,
refresh: 1500,
bgSize: ‘cover’
},
page: {},
}
My Events:
events: [
{
command: ‘open_doorentry’,
action: function(eventData) {
this.$scope.openDoorEntry(DOORENTRY_TILE, DOORENTRY_TILE.id);
}
}
],
Here is where put the variable:
title: ‘Nest’,
bg: ‘images/bg2.png’,
icon: ‘mdi-security’,
groups: [
{
title: ‘’,
width: 2,
height: 3,
items: [
DOORENTRY_TILE,

And finally the Homeassistant script to test it:

I think I modified the code correctly to add the new d value in dark sky, but now not having the weather_list show up as two lines is coming back to bite me. Do I modify the styles/main.css? The only thing I see for weather_list is this.

.item.-weather_list {
  overflow: hidden;
}

Here is my corrected code for the dark sky d.

{ 
                position: [0, 2],
                type: TYPES.WEATHER_LIST,
                width: 3.4,
                height: 1.75,
                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
                }
            })
        }
           ]
        },