TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
940

@resoai so this is what i ended up with for date/time, kinda a mix between the custom js and the HA entity:

{
  position: [0, 0],
  type: TYPES.SENSOR,
  classes: [" datetime"],
  id: 'sensor.time',
  title: '',
  width: 3,
  height: 2,
  filter: function(value) {
    time = value.split(':');
    var suffix = time[0] >= 12 ? " pm":" am";
    var hour = ((parseInt(time[0]) + 11) % 12 + 1);
    return hour + ":" + time[1] + suffix;
  },
  bg: 'https://picsum.photos/374/247?random',
  state: '&sensor.date.state',
}

datetime

Little bit of custom css to style it:

.datetime .item-entity--value{font-size: 480% !important;overflow: inherit !important;}
.datetime .item-entity{overflow: inherit !important;}
.datetime .item-background{opacity: 0.5;}
.item.-th-sensor.datetime{background-color: transparent;}

Love the flexibility!!

5 Likes
941

Has anyone tried putting up Google calendar on Tileboard? , what approach to use for the same?

3 Likes
942

So my config.js file was getting a little out of control. I’ve split it up into a bunch of pieces. Basically I have the below structure:

index.html

<script src="tiles/custom_tiles.js"></script>
<script src="tiles/lights.js"></script>
<script src="tiles/sensors.js"></script>
<script src="tiles/switches.js"></script>
<script src="tiles/buttons.js"></script>
<script src="pages/home.js"></script>
<script src="pages/lights.js"></script>
<script src="pages/sensors.js"></script>
<script src="config.js"></script>

config.js

pages: [
  p_home,
  p_lights,
  p_sensors
]

sensors.js (/pages/sensors.js)

var p_sensors = {
  title: 'Lights',
  bg: 'images/bg2.png',
  icon: 'mdi-numeric-2-box-outline',
  groups: [{
    title: 'Living Room',
    width: 3,
    height: 2,
    groupMarginCss: "35px 7px",
    items: [
      t_s_john_presence(0, 0),
      t_s_jane_presence(1, 0),
      t_s_smoke_master(2,0),
      t_s_smoke_basement(3,0),
      t_s_smoke_2ndfloor(4,0),

      t_b_dashboard(0,1),
      t_b_lights(1,1),
    ]
  }]
};

example light tile (/tiles/lights.js, a function so i could pass positioning, all my tiles are setup this way):

var t_l_landscape_lights = function(x, y) {
  return {
    position: [x, y],
    title: 'Landscape Lights',
    id: 'switch.landscape_lights_switch',
    type: TYPES.SWITCH,
    states: {
      on: "On",
      off: "Off"
    },
    icons: {
      on: "mdi-lightbulb-on",
      off: "mdi-lightbulb",
    }
  }
};

directory structure:

tileboard
  tiles\
    lights.js
    buttons.js
    sensors.js
    switches.js
    custom_tiles.js
  pages\
   home.js
   lights.js
   sensors.js
  config.js

Thought this might be helpful to others. Also maybe someone has a better way to do this and could share it as well.

5 Likes
943

Has anyone figured out a nice color picker for RGB lights yet? I found a web-based one @ http://jscolor.com/ and another @ https://www.eyecon.ro/colorpicker/. Can either be integrated into TileBoard as a pop-up? @resoai is it feasible as a new feature request?

1 Like
944

After playing with it for a few hours:

IMG_20180820_155014
IMG_20180820_1550144608×3456 2.64 MB

Header

I had to make some customizations to the header so it doesn’t overlap with the tiles.

config.js

header: {
    styles: {
        padding: '20px 20px 0 20px',
        fontSize: '20px'
    },
},

custom.css:

.page-align {
    vertical-align: top;
}

#pages > div {
    padding-top: 110px;
}

.pages-menu--items {
    vertical-align: top;
    padding-top: 110px;
}

Device tracker

The device tracker grays out the images:

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

Custom button to turn of group

I’ve used a custom tile to create a push-button to turn of a group of lights (like a scene/script). This uses the Api to send a custom request. I wanted it to behave like a scene without toggling the group. The current state of the group is shown however, so you can see if a light is on.

{
    position: [1, 1],
    type: TYPES.CUSTOM,
    title: 'All lichten uit',
    id: 'group.living_room_lights',
    icons: {
        on: 'mdi-lightbulb-on',
        off: 'mdi-lightbulb-outline',
    },
    state: false,
    action: function(item, entity) {
        Api.send({
            type: 'call_service',
            domain: 'homeassistant',
            service: 'turn_off',
            service_data: {
                entity_id: item.id,
            }
        });
    }
}
4 Likes
945

Can you show me your header config for the weather, in the upper right? Also what size table is that?

946

I may have missed something obvious but when the screen saver start’s the images are rotated in random directions, when I check the images they all appear orientated correctly, but don’t display correctly. Any ideas.

ps excellent work with Tileboard by the way.

947

DISCLAIMER: I know just enough about NGINX to be dangerous with it

That being said I thought I would drop my proxy config for HA and Tileboard here. My HA docker instance is on an intel NUC running Ubuntu server 18.04 with port forwarding setup and available outside my network. TileBoard is setup in the www/tileboard directory of my HA instance. Using an NGINX reverse proxy on my unRAID server and the allow and deny rules I think I have tileboard available on my local network only

Here are my location blocks in my hass file for nginx:

location @proxy {
		proxy_set_header 	Upgrade 		$http_upgrade;
        proxy_set_header 	Connection 		"upgrade";
        proxy_set_header 	Host 			$http_host;
		proxy_set_header 	X-Real-IP 		$remote_addr;
        proxy_set_header 	X-Forward-For 	$proxy_add_x_forwarded_for;
        proxy_set_header 	X-Forward-Proto http;
        proxy_set_header 	X-Nginx-Proxy 	true;
		
		proxy_http_version	1.1;
		proxy_pass 			http://192.168.1.247:8123;
		proxy_redirect 		off;
		break;
	}
	
	# default location for hass
	location / {
		try_files $uri @proxy;
	}
	
	# deny every request to local for now
	location /local {
		deny all;
	}

	# allow only local traffic to tileboard
	location /local/tileboard {
		
		allow 192.168.1.0/24;
		deny all;
				
		try_files $uri @proxy;
	}

So far this is working for me. If i go to https://hass.mydomain.com/local/tileboard/index.html on my home network i have access. If i try the same URL on my phone over LTE i get a big 403 Forbidden on the screen. Hopefully this will help out others using HA behind a NGINX proxy.

948

Hi Mr. @resoai is it possible to run the TileBoard page in standalone mode(seperate the hass homepage)? How can I achieve this? Thanks!

949

Tileboard is simply an HTML page which you can store absolutely anywhere you like, even directly on the tablet.

950

The weather config is the same as the example, except that I’ve used the outdoor temperature from my ventilation sensor instead of darsky. The font size is 20px. Check the css and js in my post for the full details.

Make sure you get icon and summary from the darsky component for the weather.

951

@resoai I’m looking at the event implementation to open a door_entry view when the doorbell is pushed, however it seems that the current version only provides a function to switch to a different page, not to open a door_entry for example.

952

No, it opens a popup and you can have a number of tiles on the left for actions.

953

Yes. That’s the door_entry, I know. I would like to open this view from an event. (To open the camera view with the actions when somebody is at the door).

954

Oh, I see.

      action: function(eventData) {
         var tile = TILES.DOOR_ENTRY_FRONT_GATE;
         this.$scope.openDoorEntry(tile, tile.id);
      }
955

@michaelarnauts i was also looking for this type of functionality. Do you mind sharing how to set up the automation in home assistant that will trigger the event in tileboard? I’m not great with event type automations.

956

@lordsiris I tried setting up the custom tile per your example but clicking on it does not take me to the second page. Did i do anything wrong?

{
  position: [0, 3],
  type: TYPES.CUSTOM,
  title: 'Lights',
  id: { },
  icon: 'mdi-lightbulb-outline',
  action: function(e) {
    window.openPage(CONFIG.pages[2]);
  }
}
957

it’s zero indexed so the first page would be CONFIG.pages[0], second page CONFIG.pages[1], etc, based on the order in the config.js file. Hope that helps!

958

Yes that works thanks.

959

Firing the event is described here: https://www.home-assistant.io/docs/scripts/#fire-an-event

I haven’t set the automation up yet on the hass side, but manually firing the event from the hass UI works fine.