I realise that this is no longer maintained and so there could be issues that will not get fixed. However, I am hoping my issue is simple to correct.
I have not used tileboard for some time and have just come back to update my tileboard screen. I have a jpg that acts as my background.
As can be seen from the screenshot, the url indeed displays the jpg when I enter it on my laptop (not my raspberry pi home assistant). In the past, this was displaying correctly in tileboard. However, now, all I am getting is the default blue background. I have even changed my config to a basic default screen with no cards but it still does not work. The code is below:
/*
This is an example configuration file.
COPY OR RENAME THIS FILE TO config.js.
Make sure you use real IDs from your HA entities.
*/
const userAgent = navigator.userAgent.toLowerCase();
const isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
console.log(isTablet)
/*var GROUP_WIDTH = 3;
var GROUP_MARGIN = 5;
var TILE_MARGIN = 4;
var TILE_SIZE = getTileSize(GROUP_WIDTH, TILE_MARGIN, GROUP_MARGIN);
var TRANSITION = TRANSITIONS.SIMPLE;
var CUSTOM_THEME = CUSTOM_THEMES.MOBILE;
function getTileSize(tileCount, tileMargin, groupMargin)
{
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
width -= groupMargin * 2 + tileMargin * (tileCount - 1);
return +(width / tileCount).toFixed(1);
}*/
/*$(function () {
// Get elements and starting sizes;
var $box = $('#box'),
$debug = $('#debug'),
startingWidth = $box.width(),
startingHeight = $box.height(),
startingFontSize = 15;
// On resize of box also resize font.
$box.resize(function () {
// Get new sizes and calculate percentage differences for height and width.
var newWidth = $box.width(),
newHeight = $box.height(),
percentageWidthDifference = ((newWidth- startingWidth) / newWidth),
percentageHeightDifference = ((newHeight - startingHeight) / newHeight),
// Increase/decrease font size by the percentage.
newFontSize = startingFontSize + (startingFontSize * percentageWidthDifference);
// Set the new font size;
$box.css('font-size', newFontSize + 'px');
// Show values in debug area while resizing.
$debug
.html('Width: ' + Math.round(percentageWidthDifference * 100) + '% changed <br />')
.append('Height: ' + Math.round(percentageHeightDifference * 100) + '% changed <br />')
.append('Font size: ' + Math.round(newFontSize) + 'px');
}).resizable();
});*/
var SPACER_WIDTH = 0;
if (isTablet == true) { SPACER_WIDTH = 7;} else { SPACER_WIDTH = 10;}
var CURRENT_DEVICE_TRACKED = 'NONE';
var OPEN_MAP_TILE = {
position: [0, 3],
type: TYPES.POPUP_IFRAME,
id: {},
width: 3,
height: 2,
url: function () {
var lat = this.states[CURRENT_DEVICE_TRACKED].attributes.latitude;
var lon = this.states[CURRENT_DEVICE_TRACKED].attributes.longitude;
var zoom = '.0025';
var url = "https://maps.google.com/maps?q=@" + lat + "," + lon + "&ll=" + lat + "," + lon + "&spn=" + zoom + "," + zoom + "&t=h&hl=en&output=embed";
return (url);
}
}
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
//transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
transition: TRANSITIONS.SIMPLE, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.SMALL, //SMALL, BIG are available
tileSize: 90,
tileMargin: 6,
groupMarginCss: '10px',
serverUrl: 'http://' + location.hostname + ':8123',
wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
googleApiKey: "AIzaSyCd3Cj96sNbGW1HAAOT60LfFTLiSQq4HUg", // Required if you are using Google Maps for device tracker
//mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
debug: false, // Prints entities and state change info to the console.
pingConnection: true, //ping connection to prevent silent disconnections
locale: 'en-us', // locale for date and number formats - available locales: it, de, es, fr, pt, ru, nl, pl, en-gb, en-us (default). See readme on adding custom locales.
// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // HORIZONTALLY, VERTICALLY, GRID
onReady: function () {},
/**************************************************************************************************************************/
/* */
/* HEADER */
/* */
/**************************************************************************************************************************/
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
margin: '30px 130px 0',
fontSize: '28px'
},
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'MyCity'
},
{
type: HEADER_ITEMS.WEATHER,
styles: {
margin: '0'
},
icon: '&weather.mycity.state',
state: '&weather.mycity.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'unknown',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'partlycloudy': 'partlycloudy',
'pouring': 'rain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'wind': 'unknown',
'windy': 'unknown',
'windy-variant': 'unknown'
},
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
fields: {
temperature: '&weather.mycity.attributes.temperature',
temperatureUnit: '°C',
}
}
],
left: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: '<b><i>Home Sweet Home</b></i>'
},
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, dd LLLL', //https://docs.angularjs.org/api/ng/filter/date
},
// {
// type: HEADER_ITEMS.DATE,
// dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
// },
// {
// type: HEADER_ITEMS.TIME,
// },
]
},
/*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 the <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},*/
pages: [
{
title: 'Curtains and Blinds',
bg: 'http://192.168.0.186:8123/local/images/frontofhouse.jpg?v=1',
icon: 'mdi-blinds',
groups: [
{
title: '',
width: 4,
height: 3,
items: [
]
},
]
}
],
}
Is there any reason why this bg url definition would no longer work in the config?
