Hi Sunny,
Thank you for the response, yes it works fine with 1.5 tile height, but does not look necessary if i could some how fix the overlap. I tried adjusting some CSS but couldn’t get it to fix. Here’s my global config, appreciate your help:
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT,
transition: TRANSITIONS.ANIMATED_GPU,
entitySize: ENTITY_SIZES.SMALL,
tileSize: 150,
tileMargin:5,
serverUrl: 'https://hass.home:8123',
wsUrl: 'wss://hass.home:8123/api/websocket',
authToken: null,
debug: false,
pingConnection: true,
events: [
{
command: 'screen_off',
action: function(e) {
if (typeof fully !== undefined) {
fully.startScreensaver();
}
},
},
{
command: 'screen_on',
action: function(e) {
if (typeof fully !== undefined) {
fully.stopScreensaver();
fully.bringToForeground();
}
},
},
{
command: 'play_sound',
action: function(e) {
playSound(e.sound_url);
}
},
{
command: 'open_page',
action: function(e) {
window.openPage(CONFIG.pages[e.page]);
}
}
],
timeFormat: 12, //or 24
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
onReady: function () {},
screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
timeout: 300, // after 5 mins of inactive
slidesTimeout: 10, // 10s for one slide
styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [
{ bg: 'images/bg1.jpeg' },
{
bg: 'images/bg2.png',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to <b>Nepal Residence</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' },
{ bg: 'images/bg-galaxy.jpg' }
]
},
pages: [
{
title: 'Main page', //page1
bg: 'images/bg11.jpg',
//bg: 'images/bg-galaxy.jpg',
bgOpacity: '1',
icon: 'mdi-home-outline', // home icon
groupMarginCss: '20px 10px',
tileSize: 150,
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: '<b>Nepal Residence!</b>',
styles: {
padding: '20px 50px 0px 50px',// top,right,bottom,left
margin: '0x 0px 0px 0px'
}
},
// Uncomment weather object to get weather in your header.
{
type: HEADER_ITEMS.WEATHER,
styles: {
padding: '0px 50px 0px 50px', // top,right,bottom,left
},
icon: '&weather.phoenix.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'sunny':'clear',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: {
//summary: '&weather.phoenix.state',name.charAt(0).toUpperCase() + name.slice(1)
//summary: function() { return this.parseFieldValue("Humidity: " + “&weather.thuis.attributes.humidity” + " % ") + this.parseFieldValue(“Wind Speed: " + “&weather.thuis.attributes.wind_speed” + " m/s”) },
temperature: '&weather.phoenix.attributes.temperature',
temperatureUnit: String.fromCharCode(176) + 'F ,'+ '&weather.phoenix.state',
}
}
],
left: [
{
type: HEADER_ITEMS.DATETIME,
//timeformat: 'hh:mm:ss a',
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
styles: {
padding: '0px 50px 0px 20px', // top,right,bottom,left
},
}
]
},
groups: [
{
title: 'Weather',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
height:1.5,
type: TYPES.WEATHER,
id: 'weather.phoenix',
//title: 'Phoenix Weather',
state: '&weather.phoenix_2.state', // label with weather summary (e.g. Sunny)
fields: { // most of that fields are optional
//icon: '&sensor.dark_sky_icon.state',
icon: '&weather.phoenix_2.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'sunny': 'clear',
'rainy': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy':'cloudy',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
//summary: '&weather.phoenix.state',
summary: function() { return this.parseFieldValue("Humidity: " + "&weather.phoenix_2.attributes.humidity" + " % ") + this.parseFieldValue("Wind Speed: " + "&weather.phoenix_2.attributes.wind_speed" + " m/s") },
temperature: '&weather.phoenix_2.attributes.temperature',
//temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
temperatureUnit: String.fromCharCode(176) + 'F',
//precip: '&sensor.dark_sky_precip.state',
//precipIntensity: '&sensor.dark_sky_precip_intensity.state',
//precipIntensityUnit: '&sensor.dark_sky_precip_intensity.attributes.unit_of_measurement',
//precipProbability: '&sensor.dark_sky_precip_probability.state',
//precipProbabilityUnit: '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement',
windSpeed: '&weather.phoenix_2.attributes.wind_speed',
//windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
humidity: '&weather.phoenix_2.attributes.humidity',
//humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
},
},
{
position: [0, 1.5],
type: TYPES.WEATHER_LIST,
width: 2,
height: 1,
title: 'Forecast',
id: {},
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'sunny': 'clear',
'rainy': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy':'cloudy',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
hideHeader: false,
list: [0,1,2,3,4].map(function (id) { //do 0,1,2,3,4 for more days..
return {
date: function () {
var d = new Date(Date.now() + (id+1) * 24 * 60 * 60 * 1000);
return d.toString().split(' ').slice(1, 3).join(' ');
},
icon: function() {
var sensor = this.states['weather.phoenix_2'];
return sensor.attributes.forecast[id].condition;
},
primary: function() {
var sensor = this.states['weather.phoenix_2'];
var forecast = sensor.attributes.forecast[id].temperature + " C";
return forecast;
},
secondary: function() {
var sensor = this.states['weather.phoenix_2'];
var wind = sensor.attributes.forecast[id].condition ;//+ " Mph";
return wind;
},
}
})
},
{
position: [0, 3.5], // [x, y]
width: 1,
type: TYPES.SENSOR,
id: 'binary_sensor.updater',
state: '@attributes.release_notes' // https://github.com/resoai/TileBoard/wiki/Templates
}
]
},
