TileBoard - New dashboard for Homeassistant

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?

Thanks

Then I don’t know. You could try \n\r but will probably not work either

thanks for the help

Hi @Romkabouter - unfortunately not.

@resoai - do you know if this is possible with this tile?

Thanks

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.

Thanks again @Romkabouter,

Jason

1 Like

Nice :slight_smile:

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)

thanks,

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>';;
               }
						},

Thanks again @Romkabouter - just what was needed.

Jason

Hi,

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 :

			{
			 position: [0, 0.2],
               type: TYPES.IFRAME,
               id: {},
               width: 3,
               height: 0.98,
               refresh: 600000, 
               state: null,
               iFrameStyles: function (item, entity) {
				var weather_state_alert = this.parseFieldValue('&sensor.13_weather_alert.state');
				if (weather_state_alert === "Orange") {
					return { 'border': '3px solid orange'};
				} else if (weather_state_alert === "Rouge") {
					return { 'border': '3px solid red'};
				} 
		       },
               url: 'https://www.meteo-marseille.com/widget/prevision-meteo?bg-clr=0C0C0C&days=3&city=18&min-clr=33CCFF&ft-clr=FFFFFF&lk-clr=FFFFFF&oy-clr=000000&max-clr=ff6961'
			},

Could you please help me to do so ?

Thanks

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.

Please assist.

thank you very much

Thank you all.\

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…

You can try calling window.hideScreensaver() before opening popup.

@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 :+1:t2:

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 :roll_eyes: - 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>';;
               }
            }

bbc

Must be going wrong some where any thought…
Many Thanks

Thank you sir.

it works. TileBoard is the BEST!

Thank you very much.

That’s not ok, it should be:
return '<img id="rssImage" />;

And a lot of typos here:
document.getElementsByClassName('rssImage').scr = entity.attributes.entries[i].img;

should be:

document.getElementsById('rssImage').src = entity.attributes.entries[i].img;

@Romkabouter Hi Thank again for assistance - fixed the 2 lines but still no luck - No Image

I would assume - this should be

> return '<img id="rssImage" />';

euh yes, sorry for the missing quote.

Try this:

               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

Hi Thanks - i get the HA logo as well seems the sensor is returning that image.
Capture1
Thanks again for your time :+1:t2:

The sensor is pretty outdated, so it might need an update.