Vera Icons and Internet Explorer compatibility

Community Playground General Discussions
#1

When upgrading from Internet Explorer 8 to IE9 or IE10, I noticed that most of the UI5 icons turned into generic “Blue ball” icons. This still works correctly in other web browsers such as Chrome. After a lot of investigation (and learning along the way) I concluded that for some unknown reason IE9 and IE10 are incorrectly firing an onError handler for static icon images. Dynamic icons which change depending on the state of the device are handled differently and are not affected.

I created a patch to the UI5 JavaScript code which works around this bug.

[font=courier]# diff /mios/www/cmh/js/ui5/animatie.js /www/cmh/js/ui5/animatie.js
— /mios/www/cmh/js/ui5/animatie.js
+++ /www/cmh/js/ui5/animatie.js
@@ -1169,9 +1169,10 @@
this.find(“.dev_icon img”).attr(“src”,“skins/”+CurrentUISkin+“/”+o.icon);
}
}catch(e){}

  •   this.find(".dev_icon img").attr("onError","jQuery(this).attr({'src':jQuery(this).attr('defaultimage'),'defaultimage':'skins/default/icons/device.png'});");

  •   this.find(".dev_icon img").attr("onError","if (this['naturalWidth'] == undefined || (this['naturalWidth'] == 0 && this['naturalHeight'] == 0)) {"+

  •                                                                                         "var defImage =jQuery(this).attr('defaultimage');"+

  •                                                                                             "jQuery(this).attr('defaultimage','skins/default/icons/device.png');"+

  •                                                                                             "this.src = defImage;}");
    this.attr(“class”,“”);
    this.addClass(o.size+" device “+o.status.color+” category_num_"+o.category_num);
    this.click(function(){[/font]

Note that the /mios directory is a read-only file-system with the original Vera files whereas the /www directory is writable and is mostly symbolic links back to the /mios directory. Creating the patch is thus reasonably safe because you can always fall back to the original version.

To apply this patch, use a tool such as WinSCP available here: http://winscp.net Log in with user ID root and the password is on the bottom of your Vera. Navigate to /www/cmh/js/ui5 and rename animatie.js to animatie.js.original. Then unzip the attached file and copy it to the directory in Vera. Now press the Reload Icon in your browser and you’re done.

I have tested this patch with IE8-10 as well as the latest versions of Chrome, Firefox, Opera, Safari and even the last Netscape Navigator 9 and they all work as expected. This should work with both the current public firmware 1.5.622 as well as the older firmware 1.5.408.

Hopefully, the MCV engineers will roll this patch into their next firmware update.

#2

Good job fixing this. Thanks. I don’t use IE against Vera, but after reading your post, I did confirm the issue (using IE9) and your fix.

Also, thanks for providing the diff so I didn’t have to wade through a boat load of java script to figure out what was wrong.

Come on MCV, incompatibilities with the second most widely used browser is not a good way to win market share.

#3

You will need to do more than post it here to get MCV to look into this.

#4

Richard, where can he submit this to get MCV to look at it?

#5

Register it in Mantis:

http://bugs.micasaverde.com/main_page.php

#6

I’m glad it helped.

I filed both a tech support request as well as a bug report.

[url=http://bugs.micasaverde.com/view.php?id=2997]http://bugs.micasaverde.com/view.php?id=2997[/url]

#7

Thank you gengen.
It solved it for me. Too bad MCV didn’t do anything with the reported bug. I’m running 1.5.651 (beta) on a VeraLite and it still wasn’t fixed.

#8

OK, new beta firmware from MCV is news. when did it come out? what changed? who is getting it? I filed several bugs besides this one earlier this year. Can I at least see the release notes?

#9

I highly doubt you’ll find any information if this is a newer release. All their focus is on UI7 which should be out sometime in the first quarter of 2014.

  • Garrett
#10

Hey there… as a Microsoft employee, i’m pretty locked into IE11 ;D

Was able to go through these steps fine… but it didn’t seem to help. Still mostly blue balls.

Any ideas?

EDIT: Nevermind… found in another thread. works when you login locally. thanks. Nice fix.

#11

I think just for the IE issues, I’m glad I switched to a Mac :stuck_out_tongue:

#12

Interesting.

Has anybody tested this with UI6?

#13

I can confirm that this bug also exists in IE 11 with Vera 1.5.622 firmware. The fix also works perfectly. I did find I needed to reboot Vera after uploading the fix. Thanks and kudos to gengen (who is obviously a software professional ;D) for taking the time to investigate and build the patch.

#14

I am running IE 11, and I had to add the step of changing the file properties once it was uploaded before it worked. Make sure the file rights shown in WinSCP match the original file’s rights: rwxrwxrwx, then restart the browser.