can you send for me your mobile site config sample file ??
@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',
}
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
Has anyone tried putting up Google calendar on Tileboard? , what approach to use for the same?
3 Likes
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
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
After playing with it for a few hours:
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
Can you show me your header config for the weather, in the upper right? Also what size table is that?
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.
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.
Hi Mr. @resoai is it possible to run the TileBoard page in standalone mode(seperate the hass homepage)? How can I achieve this? Thanks!
Tileboard is simply an HTML page which you can store absolutely anywhere you like, even directly on the tablet.
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.
@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.
No, it opens a popup and you can have a number of tiles on the left for actions.
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).
Oh, I see.
action: function(eventData) {
var tile = TILES.DOOR_ENTRY_FRONT_GATE;
this.$scope.openDoorEntry(tile, tile.id);
}
@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.
@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]);
}
}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!
Yes that works thanks.