I think you need to add:
groupsAlign: GROUP_ALIGNS.VERTICALLY,
to CONFIG?
Thanks, But I want to have my tiles aligned horizontally.
Looking at my layout I think I may have to add this option and change the way I lay things out. Thanks.
@resoai is there any scope to change the layout per page? (Horizontally, vertically).
This is really useful to hide and display tiles based on state of media_player for example. Show the remote switches for av receiver when it is on only.
Awesome work!
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