Just create two groups: Upstairs and Downstrais with width set to 1 and height to 2. Each of those groups will have two tiles one bellow another.
1 Like
Here’s my Weather page. Its just a text list, weather list and some camera thumbnails
{
title: 'Weather',
bg: 'images/bg9.jpg',
icon: 'mdi-weather-partlycloudy',
groups: [
{
// title: 'Weather',
width: 10,
height: 4,
items: [
{
position: [0, 0],
width: 10,
height: 1,
title: 'Forecast Summary',
id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
type: TYPES.TEXT_LIST,
state: false,
list: [
{
title: '&sensor.dark_sky_hourly_summary.state'
},
{
title: '&sensor.dark_sky_daily_summary.state'
},
]
},
{
position: [2, 1],
id: 'camera.rainradar',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 3,
height: 3,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 1500, // can be number in milliseconds
bgSize: 'contain'
},
refresh: function () { // can also be a function
return 3000 + Math.random() * 1000
}
},
{
position: [5, 1],
id: 'camera.sydney',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 3,
height: 3,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 1500, // can be number in milliseconds
bgSize: 'contain'
},
refresh: function () { // can also be a function
return 3000 + Math.random() * 1000
}
},
{
position: [0, 1],
type: TYPES.WEATHER_LIST,
width: 2,
height: 3,
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: 'Rain',
list: [1,2,3,4,5,6,7].map(function (id) {
var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
var date = d.toString().split(' ').slice(1,3).join(' ');
var forecast = "&sensor.dark_sky_daytime_high_temperature_" + id + ".state - ";
forecast += "&sensor.dark_sky_overnight_low_temperature_" + id + ".state";
forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".attributes.unit_of_measurement";
var rain = "&sensor.dark_sky_precip_probability_" + id + ".state";
rain += " &sensor.dark_sky_precip_probability_" + id + ".attributes.unit_of_measurement";
return {
date: date,
icon: "&sensor.dark_sky_icon_" + id + ".state",
//iconImage: null, replace icon with image
primary: forecast,
secondary: rain
}
})
},
]
},
]
},
1 Like
1 Like
Its a still image, as far as i can tell. I just grabbed off someones post on Reddit. Animated would be cool though!
Will give it a go when I’m at the Mac next. Thanks.
1 Like
Is this something that can be used on TileBoard too? I want to be able to control Spotify like the above link.
Hi
im using this camera config with direct connection to camera URL.
Do you know if it streams the connection in the background when say im not on the same page as my cameras in tileboard? @resoai
cheers
No, it should close the connection.
superb, thanks for the quick response.
one more question if you dont mind? (that’ll make it 2 questions 
)
Is there any way to shift the page icons to start from the top left of the page?
As attached i’ve moved the tiles to top of page to suit a tablet but the page buttons remain further down, so i’m still getting scroll bars.
thanks
You can create custom.css file and fiddle around with alignments as you so desire. For instance to force the page menu to the top:
.pages-menu--items {
vertical-align: top;
}
Tiles:
.page-align {
vertical-align: top;
}
I can also see that icons within the tiles are way too big. Suggest that you add the following to the root of CONFIG:
entitySize: ENTITY_SIZES.SMALL
cheers for entitysize.
Unfortunatly no idea were to start with the custom.css, i’ll put up with it for now
thanks again
Simply create a blank file called custom.css in the directory where tileboard files reside and try to add the second rule I’ve mentioned.
ta, tried both nothing changed, file permissions are same as all others. I do have my device tracker tiles set to positions in the -3 position, will this affect it?
sorry to be a newbie pain in the a**e
This should have shifted the menu (left) to the top. Setting a negative number for tile position is certainly unconventional to say the least
ta, i’ll have a play
cheers
Hi, just want to clarify how I should host this…
My HA is exposed to the internet through the standard duckdns set up - can I just follow your instructions using prompt and save and be safe? Or do I need nginx?
Would I then be able to access this externally as well as within my network?
Hi @freekeys, I’m using duckdns and nginx, and I can access TB externally.
Setting up nginx let’s you easily access HA from your duckdns domain, and also locally via IP address, which is very convenient when developing. I’d suggest you give it a try.
I’ve set up a directory called ‘tb’ under the www directory for HA, and I can access TB externally via:
‘domain.duckdns.org/local/tb/index.html’.
Trying to access the directory (e.g. ‘domain.duckdns.org/local/tb/’ gives me ‘403: forbidden’, but that can be got around, so don’t embed any passwords or other secure info in your code.
Awesome - and could I replace ‘alarm.home.state’ in your syntax with any HA entity?
1 Like
Even if you don’t store password in plain text I would still recommend using Nginx to host TileBoard if it is being exposed to the internet. While attacker can not access your HA instance, he can read the config file and get idea as to what hardware you have.