[old] - Web Interface Fixes + IE 7/8 Full Support - 1.1
Posted: Fri May 01, 2009 3:06 am
All of the below changes have been merged into trunk, this patch and no longer needed.
Current version: 1.1
V1.1 Changes
Added scaling for Montage view
Added waiting on the backend for sockets to get setup (should fix issues where people would not have the stats for a video loaded consistantly and other issues)
Fixed zm_monitor/zm_image bug where the detection for if the writing of an image to a stream was not correct so even if it failed it would think it succeeded. This should fix where zms processes can run forever as they think they are still sending frames even though the stream is dead.
Added a safety check to zm_monitor so that if it doesn't send a frame for 10 seconds or more it will kill itself off. Keeping in mind that even when paused a keep alive frame is sent every 5 seconds. This will also catch a bug where if a camera was offline (so reading frames was invalid) zms would just run forever in a loop.
Note: You can no longer apply the patch directly to the web directory if you want all the changes as there are backend changes too now.
Initial Post:
While I am sure many of you hate on IE some of us (atleast myself) use it, and ZM is not exactly 100% IE friendly/compatible. Even those who use other browsers or the mobile version can gain something from this. Please note that this does add some additional error handling, that normally would be swept under the rug. If you are having problems in zone minder with things not working look at your javascript error console (control + shift + J in firefox, or F12 in IE8 and turn on script debugging then look at the javascript console) it may contain some very useful error messages about server side errors. Another option that may be easier is to just open up: skins/classic/includes/functions.php and right before </head> put: it will popup a box any time there is an error, which is certainly helpful in catching server side issues. Overall I find the web interface less buggy after these fixes. If you know of anything else in the web interface that doesn't work in all browsers (or even just in IE) let me know how to reproduce the error and I am happy to look at it.
This patch is against trunk and should do the following:
*IE: Fix zooming/scaling of events/live streams
*On event pages checks all server responses for errors and doesn't continue if there are any
*IE: Still thumb image popup box would sometimes appear off screen so you would have to scroll, no longer should happen
*Stills would sometimes not auto show up and rather require clicking on timeline bar
*MOST of the time clicking on a still image thumb to pop it up and zoom it would NOT work, not clicking the image will always zoom it.
*IE: Still thumbs would show up VERY wide and not at correct size, now they show proper thumb size
*IE (possibly others): skin.js overwrote console debugger even when it existed so debug messages would not properly log
*Mobile skin fix, for those who couldn't get the mobile skin to even load it should probably now work properly with index.php?skin=mobile
The patch is at: http://mitchcapper.com/zm_web_fixes.patch
To apply this patch in your ZM checkout folder just do patch -p0 < zm_web_fixes.patch if you want to check if it will work against the dryrun option like: patch -p0 --dry-run < zm_web_fixes.patch . If you are daring you can just apply it direct to your web folder (may work on 4.21) in your web folder just do: patch -p1 --dry-run < zm_web_fixes.patch if you are lucky no failed merges. Note if you do it in your web folder it will get overwritten next time you do a make install. There is no reason this can't be applied to trunk officially if someone wants to do that. Note that 1.1 and greater includes some changes to the backend that will not work if directly applied to the web folder.
For those who want the technical details quickly:
*IE thumbs were too wide as it would take the width from the transparent placeholder image then when swapped the CSS would properly set the height but unlike FF IE does not keep the ratio, so IE needed the height also in CSS
*Clicking a still thumb to zoom it would only work if not loaded, if already loaded it wouldn't pass the loadImage var so wouldn't do anything when clicked.
*skin.js was overwriting the console debugger due to faulty logic, it did if (! window.console) var console= except in javascript there is NO scope except function level scope, so that var console= would actually always be global and thus IE8 (and maybe others) that only add the console debugger if its not in the global scope would not add it
*While most of the ajax page libs (montagejs/watch.js) have proper error handling if the server returns an error, event.js had next to none. Added a function to skin.js to handle the checking of a returned server object to make sure its valid.
*the mobile console page had a php warning which would break the markup due to using $_REQUEST['view'] instead of $view(like classic console) in a variable output.
*IE for scaling we try to get the liveStream object/img however for one in IE8 atleast it is actually an "APPLET" not an object. Secondly as cambozola is a JAVA applet most javascript calls can't be used on it, so using moo tools $() to get it causes it to break. I used standard calls on the zooming items to fix that.
Current version: 1.1
V1.1 Changes
Added scaling for Montage view
Added waiting on the backend for sockets to get setup (should fix issues where people would not have the stats for a video loaded consistantly and other issues)
Fixed zm_monitor/zm_image bug where the detection for if the writing of an image to a stream was not correct so even if it failed it would think it succeeded. This should fix where zms processes can run forever as they think they are still sending frames even though the stream is dead.
Added a safety check to zm_monitor so that if it doesn't send a frame for 10 seconds or more it will kill itself off. Keeping in mind that even when paused a keep alive frame is sent every 5 seconds. This will also catch a bug where if a camera was offline (so reading frames was invalid) zms would just run forever in a loop.
Note: You can no longer apply the patch directly to the web directory if you want all the changes as there are backend changes too now.
Initial Post:
While I am sure many of you hate on IE some of us (atleast myself) use it, and ZM is not exactly 100% IE friendly/compatible. Even those who use other browsers or the mobile version can gain something from this. Please note that this does add some additional error handling, that normally would be swept under the rug. If you are having problems in zone minder with things not working look at your javascript error console (control + shift + J in firefox, or F12 in IE8 and turn on script debugging then look at the javascript console) it may contain some very useful error messages about server side errors. Another option that may be easier is to just open up: skins/classic/includes/functions.php and right before </head> put:
Code: Select all
<script>console.error = alert;</script>
This patch is against trunk and should do the following:
*IE: Fix zooming/scaling of events/live streams
*On event pages checks all server responses for errors and doesn't continue if there are any
*IE: Still thumb image popup box would sometimes appear off screen so you would have to scroll, no longer should happen
*Stills would sometimes not auto show up and rather require clicking on timeline bar
*MOST of the time clicking on a still image thumb to pop it up and zoom it would NOT work, not clicking the image will always zoom it.
*IE: Still thumbs would show up VERY wide and not at correct size, now they show proper thumb size
*IE (possibly others): skin.js overwrote console debugger even when it existed so debug messages would not properly log
*Mobile skin fix, for those who couldn't get the mobile skin to even load it should probably now work properly with index.php?skin=mobile
The patch is at: http://mitchcapper.com/zm_web_fixes.patch
To apply this patch in your ZM checkout folder just do patch -p0 < zm_web_fixes.patch if you want to check if it will work against the dryrun option like: patch -p0 --dry-run < zm_web_fixes.patch . If you are daring you can just apply it direct to your web folder (may work on 4.21) in your web folder just do: patch -p1 --dry-run < zm_web_fixes.patch if you are lucky no failed merges. Note if you do it in your web folder it will get overwritten next time you do a make install. There is no reason this can't be applied to trunk officially if someone wants to do that. Note that 1.1 and greater includes some changes to the backend that will not work if directly applied to the web folder.
For those who want the technical details quickly:
*IE thumbs were too wide as it would take the width from the transparent placeholder image then when swapped the CSS would properly set the height but unlike FF IE does not keep the ratio, so IE needed the height also in CSS
*Clicking a still thumb to zoom it would only work if not loaded, if already loaded it wouldn't pass the loadImage var so wouldn't do anything when clicked.
*skin.js was overwriting the console debugger due to faulty logic, it did if (! window.console) var console= except in javascript there is NO scope except function level scope, so that var console= would actually always be global and thus IE8 (and maybe others) that only add the console debugger if its not in the global scope would not add it
*While most of the ajax page libs (montagejs/watch.js) have proper error handling if the server returns an error, event.js had next to none. Added a function to skin.js to handle the checking of a returned server object to make sure its valid.
*the mobile console page had a php warning which would break the markup due to using $_REQUEST['view'] instead of $view(like classic console) in a variable output.
*IE for scaling we try to get the liveStream object/img however for one in IE8 atleast it is actually an "APPLET" not an object. Secondly as cambozola is a JAVA applet most javascript calls can't be used on it, so using moo tools $() to get it causes it to break. I used standard calls on the zooming items to fix that.