Template widget missing

Tags: #<Tag:0x00007efed2a2de88> #<Tag:0x00007efed2a2dd48>

This is such a bizarre problem, I’m not really sure where to start…

I’ve been developing my HABpanel UI for quite a while now. It consists of 14 dashboards. The other day after installing the latest OH2 snapshot build (934), all the UI elements that are based on the Template Widget disappeared. All I see is an empty box where the UI element should be. Other widgets render fine – buttons, labels, knobs, etc.

The odd thing is that it’s doing this only on an iPad 2. All the UI elements render properly on other devices, such as Android (Chrome), Mac (Chrome, Firefox, and Safari), and Windows (Chrome and Firefox). On the iPad 2, it fails to render Template Widgets on Chrome, Firefox, and Safari.

I created a new, simple HABpanel with a single dashboard containing a single, very simple template widget. It still fails to render on the iPad.

I even did a reset (Erase All Content and Settings) of the iPad. No change.

Here’s the really odd thing. When I edit the dashboard on the iPad, then click on “+ Add Widget”, all the available widgets show up in the list, except for the Template Widget.

I’m out of ideas. Anybody have any thoughts on where I should look to fine the root cause?

Here are a couple screen captures of the dashboard. The blank widget is the template widget.

Here’s the screen capture of edit dashboard where you can see Template is missing from the list.

If you’re wondering how I got the Template Widget in the dashboard, I did it from my Mac.

Adding a little more info on this. I’m officially stumped.

Looking at the iPad source in the Safari dev console on my Mac, I see the following code for the Template Widget.

Looking at the page source of the same dashboard when rendered in Safari on my Mac, I see the following.

@ysc Any idea what’s going on here?

@mhilbush now that’s very strange… :open_mouth: Can anyone with an iPad confirm this?

What could happen - although I have no explanation why - is that the file for the template widget is not loading for some reason - maybe a Javascript error occurring only on iPad Safari (that’s happened before).

If you can access the Javascript console on the iPad, check for any errors in there.
What you should see at the top is a line for every widget as it registers itself when the file is loaded, including the template:

Also the file is loaded by the <script> tag in index.html line 75, check that you have no errors loading it:

    <script src="app/widgets/template/template.widget.js"></script>

Really no idea what could cause this…

@ysc Here you go. Looks like it’s throwing a number of errors, including template.widget.js

I generated this by doing a refresh of the main HABpanel page.

Edit: Not liking this line of code?

Ah, good catch, this was added recently.
Also I’m a bit worried by the content security policy being ignored…

Thanks! it should be easy to fix.

Cool. Thanks for the quick follow up.

I wonder why it didn’t show up on other platforms. Maybe the old template.widget.js is still in the browser cache?

I wasn’t sure what to make of the Content Security Policy stuff. Glad you know what to do about that. :wink:

Win10, FF Browser, clean cache, habpanel version 2.1.0.201706022154:

Because the ignoreTransform = false syntax is valid on other platforms but not on iPad…

About the CSP, it’s about restricting what code may or may not run depending on its origin; since Safari couldn’t parse it and ignored it, it means an attacker could potentially inject malicious code from an external site and your iPad will happily load and run it (other browsers which interpreted the CSP correctly won’t); this is a serious security risk. You shouldn’t expose your openHAB to the Internet without openHAB Cloud/myopenhab.org, or at least some sort of authentication - hope it’s not the case.

Edit: sorry, looking closer it’s actually fine. The main part of the CSP is still enforced (script-src 'self'), only the sha256-... part did not, which is the inline script in the index.html file and is unimportant.

I’ll have a fix for the CSP too but I’ll probably use you as a beta tester on iPad, hope you don’t mind :slight_smile:

Not at all. Happy to check it out.

Good to know. Thanks. Nevertheless, my openHAB is exposed only on my local network, and when connected remotely through my VPN.

Replaced line 71 in template.widget.js with these 2 lines and it’s working again on my iPad… :+1:

scope.itemState = function(itemname, ignoreTransform) {
    ignoreTransform = (typeof ignoreTransform !== 'undefined') ?  ignoreTransform : false;

Hi I have the same problem with my ipad mini 1, my Iphone is working so i think it is something apple has fixed in the later updates, but not on old devices like Ipad mini 1 and Ipad 2

If I should fix it, there do I find this template.widget.js file so I can replace line 71 with your code?

Could you send me your modified habpanel jar file?

Sure. Hang on second.

  1. Download the jar file using the link below
  2. Uninstall HABpanel from OH
  3. Place the downloaded jar file in the addons directory

https://drive.google.com/open?id=0Bwmcwu6ccTd_U0Q3bW5JSDNlYlE

When the official fix comes out, remove my jar from your addons directory, then install the official HABpanel

Thanks it worked,

Is there someplace I can follow the fix updates of habpanel ?

Yes, on GitHub. Keep an eye on the commits. The commit from May 30 is the one that broke the iPad 2 and iPad Mini 1.

Sorry got caught up with other things and totally forgot, just committed the fix now.
Next snapshot from https://openhab.ci.cloudbees.com/job/openHAB2-Bundles/org.openhab.ui$org.openhab.ui.habpanel/ (#67) should have it.

Many thanks! And, no worries. As you saw above, the temp workaround was pretty easy.