I’m using Fire HD 8’s with TileBoard. I recently purchased a Fire HD 10. What is the best method to scale everything up size wise for the 10? Do I need a seperate configuration file/url for each tablet size? Also, is there a formula that can be used to adjust all of the sizes in my current config to scale everything larger for the HD 10?
whao!!!, love it @Romkabouter - just a couple of things in terms of styling for my needs, but functionality is there! - great work, and also a great learning curve for me personally, to see the problem, and to see how you went about solving it by looking at your code, so thanks for that. I too only get the title, link and image returned.
Remember the setTimeout function is not for scrolling but to give the tile a short amount of time to render the html used in the return statement.
On my laptop, I did not need it at all (fast hardware), but my old ipad needed that part.
Without it, I got undefined errors on the div ID’s (rssFeed and rssTtile)
just to let you know that i’ve tweaked it slightly - jsut for when i’m looking at TileBoard from my laptop, rather than tablet, i have removed the title of the tile and used the link to give me the hyperlink below it.
{
position: [0,4.1],
type: TYPES.CUSTOM,
id: 'sensor.bbc_news',
state: false,
title: "",
width: 5.5,
height: 0.5,
customHtml: function(item, entity) {
var d = new Date(this.$scope.states['input_number.bbcnews_index'].last_changed);
d.setSeconds(d.getSeconds() + 5);
if (Date.now() > d) {
this.$scope.states['input_number.bbcnews_index'].last_changed = Date.now();
var i = Math.round(this.$scope.states['input_number.bbcnews_index'].state);
setTimeout(function(){
document.getElementById('rssTitle').innerHTML = entity.attributes.entries[i].title;
document.getElementById('rssText').innerHTML = `<a href="` + entity.attributes.entries[i].link + `" target="_blank" style="text-decoration:none;color:white;">BBC News</a>`;
}, 500);
i++;
if (i > 9) {i=0;}
this.$scope.states['input_number.bbcnews_index'].state = i;
}
return '<div id="rssFeed" style="white-space:pre-wrap;text-align:center;padding:10px;overflow:hidden;position:relative;font-size:1.6em;"><div id="rssTitle" style="margin-bottom:10px"></div><div id="rssText" style="font-size:0.8em;"></div></div>';;
}
},
I want to add a colored border to my weather tile (iFrame tile) in case of weather alert. An orange border for an orange alert, a red border for a red alert.
I don’t know how to add this border.
I tried an iFrameStyles without success :
sir
i managed to have the camera pop up as per your configuration. But when it is on screensaver mode, it does not activate tghe camera pop up. i tried creating new automation with event and new command. it still does not activate the camera pop up while in screensaver mode.
Finally, I got all the icons in the tiles and side menu icon. i tried google chrome and opera but does not work, so i change to microsoft edge and it works…
@Romkabouter - Hi Thanks for the assistance !! Working great … changing the BBC feed to a local one now. Another question - Is it possible to pull the image in ?.. from the sensor - help with that if possible.
Thanks again
Sure, add a img tag with an ID in the return html and do the same getElementById trick for the image.
Only, use src and not innerHtml.
Something like this:
@Romkabouter thanks - not winning - here’s the code I’ve removed all other feeds entries as to get the image in first. Can be that far off - as I get a small picture icon
{
position: [0,0],
type: TYPES.CUSTOM,
id: 'sensor.bbc_news',
width: 3,
height: 3,
customHtml: function(item, entity) {
var d = new Date(this.$scope.states['input_number.bbcnews_index'].last_changed);
d.setSeconds(d.getSeconds() + 5);
if (Date.now() > d) {
this.$scope.states['input_number.bbcnews_index'].last_changed = Date.now();
var i = Math.round(this.$scope.states['input_number.bbcnews_index'].state);
setTimeout(function(){
document.getElementsByClassName('rssImage').scr = entity.attributes.entries[i].img;
}, 500);
i++;
if (i > 2) {i=0;}
this.$scope.states['input_number.bbcnews_index'].state = i;
}
return '<img src="rssImage" ></div>';;
}
}
Must be going wrong some where any thought…
Many Thanks
position: [0,0],
type: TYPES.CUSTOM,
id: 'sensor.bbc_news',
width: 3,
height: 3,
customHtml: function(item, entity) {
var d = new Date(this.$scope.states['input_number.bbcnews_index'].last_changed);
d.setSeconds(d.getSeconds() + 5); // 1 hour
if (Date.now() > d) {
this.$scope.states['input_number.bbcnews_index'].last_changed = Date.now();
var i = Math.round(this.$scope.states['input_number.bbcnews_index'].state);
//console.log(entity.attributes.entries[i]);
setTimeout(function(){
document.getElementById('rssImage').src = entity.attributes.entries[i].image;
}, 500);
i++;
if (i > 2) {i=0;}
this.$scope.states['input_number.bbcnews_index'].state = i;
}
return '<img id="rssImage" style="max-width:100%" />';
}
I only get the home assistant icon, but that is what entity.attributes.entries[i].image shows.
You can see this in the console if you uncomment the console.log line and pres F12