TileBoard - New dashboard for Homeassistant

Faieka · October 21, 2020, 1:53pm

@Romkabouter Hi Got it working - It wasn’t the sensor - if the feed has no image it returns HA icon.
Found a local rss feed with images - what a learning curve! - and it works.
Capture5

			{			
               position: [1,0],
			   type: TYPES.CUSTOM,			    
               id: 'sensor.bbc_news',
							 state: false,
							 title: "",
               width: 4.0,
               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.getElementById('rssImage').src = entity.attributes.entries[i].image; 
						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;">News</a>`;
                     }, 500);
                     i++;
                     if (i > 9) {i=0;}
                     this.$scope.states['input_number.bbcnews_index'].state = i;
                  }
					return '<img id="rssImage" style="max-width:90%;overflow:hidden;padding:10px" /><div id="rssFeed" style="white-space:pre-wrap;text-align:center;padding:10px;overflow:hidden;position:relative;font-size:1.0em;"><div id="rssTitle" style="margin-bottom:10px"></div><div id="rssText" style="font-size:0.8em;"></div></div>';;
               }
			},

Could probably done better job on the return html - no coding experience at all - copy & paste but learning.

@jasonwills Thanks used some of you code as well

Thanks again for the assistance …

mathewtaylor2007 · October 21, 2020, 7:43pm

I seem to get an REST API code -1 error when I long press a tile to see its history.
It used to work but not sure whats changed to break it. Anyone have any ideas for me to try please?
Many thanks,
Mat.

TechBrain64 · October 21, 2020, 8:52pm

Hi resoai,
I am new to HA, which I got up and running with very little effort. Now I want to setup a tablet dashboard on an old Surface RT tablet I have lying around. I’ve installed all of the latest OS updates for Windows RT and HA. I came across a post discussion where they recommended Tileboard because of the RT browser version issue. I then gone ahead and downloaded v2.01 of TB, made the suggest configuration changes from an old youtube video (serverURL and wsUrl) by replacing location.hostname with the IP address (between the '+'s) of my HA installation. When I attempt to browse to the site on the RT tablet using IE, I get the following message:

The “config.js” configuration file has loaded but window.CONFIG is not defined!
Please make sure that it defines a CONFIG variable with proper configuration.

I’ve search the config.js file and there’s no such variable. Can you or anyone offer suggestion?

FYI: I like what you’ve done/doing with this code, however, I think it would be very beneficial to community if you’d expand on you installation documenation.

resoai · October 22, 2020, 1:36pm

With all due respect TileBoard was never meant for one-click installation and was made purposely hackable for those who have at least basic knowledge of JS.

There is clearly a syntax error in the config which you can see by opening browser’s development tools.

TechBrain64 · October 22, 2020, 4:29pm

I’m not offended by your response as I’m not a JS developer, however, I’ve worked in the IT field for 20+ years and actually as a hobby stated programming in Basic; back in the day. But, I’ve been a System Admin for most of those years, as such I’ve dabbled in many programming languages. But in no means do I consider myself a programmer.

I figured out where the input error existed in my config. In your example file you went through great extent to comment what information should be entered in certain fields, except the two important fields:

serverUrl: 'http://' + location.hostname + ':8123',
wsUrl: 'ws://' + location.hostname + ':8123/api/websocket'

Now, because I’ve seen some languages where the text in the middle of the + symbols are concatenated to make desired string. I assumed I just needed to replace “location.hostname” text with the host IP address; not the case. Once I made the change, the site loaded; however, not on the Surface RT device. For that reason I’ll purchase a Android tablet and probably try the Full Kiosk Browser add-on.

If I may offer a suggestion, why not also comment \\ http://x.x.x.x:8123 and ws://x.x.x.x:8123/api/websock, respectively as a simple input aide to users? Given most of us understand what is implied.

resoai · October 22, 2020, 5:29pm

I’m glad it is working now. Please feel free to create a PR or open an issue on our GitHub page. It should probably work on Surface RT when you specify a long-lived token in the config as the problem is most likely with HA’s authentication.

TechBrain64 · October 22, 2020, 5:33pm

Yes, is was the HA authentication where the webpage hangs. How do I add the token to the config?

resoai · October 22, 2020, 5:46pm

You specify it in the config, change authToken To the token you create in HA.

ajaxhanna68 · October 25, 2020, 10:28am

Hi Ryan

should I include one by one image at the screensaver config. it is long? can i create folder, and let TileBoard play image randomly?

Please assist. I do not understand resoai Alexey explanation.

Rikvz · October 25, 2020, 5:37pm

I put this for my screensaver

  	bg: "../screensaverimages/" + Math.floor(Math.random() * 396 + 1) + ".jpg"

,
(i have 396 images in the folder). I copy this about 10 times so each time it reloads, I get 10 new random images. Not a great solution, but I’ve not dug deeper into it. I’d love to have a better screen saver solution.

timota · October 25, 2020, 11:51pm

Hi guys,

can you please help. I’m looking how to make distance between header and group of icons smaller.

Thanks.

ajaxhanna68 · October 26, 2020, 12:16am

Thank you Rik.

I managed to get my image runs randomly as per my screensaver config.

But i have to type every single image and thus it will be very long.

therefore anyone could help me on this. Create a screensaver folder and let the screensaver runs on the that folder image.

Thank you very much.

Themsk · October 26, 2020, 5:10pm

Dear @resoai, please give me a hint, how to make tileboard to first page after a 3 minutes of inactivity. My panel (tablet) stay all day on and only at night enters in screensaver mode. So it will be nice that after few minutes of inactivity, the page will return to first page on tileboard.

Regards.
P.S. I’m using the unversioned tileboard.

resoai · October 27, 2020, 7:50am

@Themsk you can navigate to the page you like by calling window.openPage(0) where 0 is the index of the page in the array (it starts from zero). You could probably use the logic we have with the built-in screensaver to track last activity and reset it on click keypress touchstart focus however I’m not sure if this is exactly what your end goal is.

ShaunB · October 28, 2020, 4:04am

Here is an interesting one. Wondering if anyone else has seen this.

When leaving Tileboard running for a day. When the screen turns on, it will run through all the state changes. For example, buttons will show being turned on and off. Gauges will jump all over the place. Basically replaying all the events throughout the day.

The screen has turned off due to being idle. The tablet is a Fire tablet with all the power saving functions disabled. Running Fully Kiosk. And I can ping it all day, so the network is good the entire time.

Themsk · October 28, 2020, 10:14pm

any idea how to prevent an accidental click on a switch?

rchl · October 28, 2020, 11:06pm

Pay attention where you click?

But seriously, what do you mean by that? Is there a bug that causes accidental clicks or you want some sort of solution that would require confirmation or something?

Themsk · October 29, 2020, 10:45am

It’s not about me. I have a tuya switch that cuts off all the house power, so, as you know, all sensitive actions need a “are you sure” alert before the action. I don’t want my wife or some other person push by ‘mistake’ that button. I was thinking for a PIN pop-up…

csgoh · October 30, 2020, 12:58am

hi all, learned a lot here and managed to set up my tileboard for tablet and phone from the knowledge i gained here even with zero js knowlege. a sample of the screen on mobile. More than happy to share info for those who wanna do something like this.

I been searching all over to find a way to have the media player tiles to bring up a media browser like how we have it in lovelace UI. This is because i have loads of local mp3 that i play through the google home. Is there a way to do this with tileboard? Appreciate any help or pointers.

p.deelen · October 30, 2020, 4:52pm

I’m also looking for a media browser inside tileboard.
Inside lovelace it works verry well.