New Skin for 1.24

Post by **kylejohnson** » Sun Sep 12, 2010 9:58 pm

logray wrote:Wow! Stellar work here. Great job.

One thing I noticed is that the control feature does not work with this skin. View full, when I click control, the PTZ icons are not available.

Other than that one "annoyance", this is amazing compared with the original skin !!!!

Thanks for the kind words!

I was able to do some work today and got PTZ controls working (at least with my Axis PTZ 215 camera). Should work identical to how controls work in the classic skin, for now.

Please continue to leave feed back and bugs!

Post by **kylejohnson** » Sun Sep 12, 2010 10:16 pm

Fixed the bandwidth option (again).
If bandwidth is low or medium, you get a snapshot (still) of the monitor
if bandwidth is high, you get a live view of the monitor.

logray · Post by **logray** » Sun Sep 12, 2010 10:43 pm

This is serously cool. I am excited about ZM again... the dull canned interface (albeit workable) was geting me dis-interested.

PAN/TILT works like a charm! (and I noticed the bandwidth options work as well now too...) This is great.

Playing around with the events tab I noticed a few areas of intrest.

1.) The video size while browsing (not the search) is the same resolution as the input, would be cool if it could be scaled down (similar to the live view scaling). Maybe I am missing where to set that option if available.

2.) I noticed looking at the events when scrolling down past the last event - just below the video it shows 26-50, 51-75, forever... (which I suppose "would" be future events) as if though I have events beyond the last event, yet there are no more recorded. I suppose a check could go in to see if this is the last even in the table, and then not scroll down any further?

3.) I can't seem to get the playback to work when I open an event. The "play" is "locked" and the video doesn't playback. It also doesn't allow pause/etc.

Post by **kylejohnson** » Sun Sep 12, 2010 10:49 pm

logray wrote:This is serously cool. I am excited about ZM again... the dull canned interface (albeit workable) was geting me dis-interested.

PAN/TILT works like a charm! (and I noticed the bandwidth options work as well now too...) This is great.

Playing around with the events tab I noticed a few areas of intrest.

1.) The video size is the same resolution as the input, would be cool if it could be scaled down (similar to the live view scaling). Maybe I am missing where to set that option if available.

2.) I noticed looking at the events when scrolling down past the last event - just below the video it shows 26-50, 51-75, forever... (which I suppose "would" be future events) as if though I have events beyond the last event, yet there are no more recorded. I suppose a check could go in to see if this is the last even in the table, and then not scroll down any further?

3.) I can't seem to get the playback to work when I open an event. The "play" is "locked" and the video doesn't playback. It also doesn't allow pause/etc.

Lets see..
1) The 'video size' as in the thumbnail, or when you click on one and it opens in a lightbox for playback? The thumbs should be scaled down to the size of WEB_LIST_THUMB_WIDTH in options.
2) Good point

I'm testing on a box with tens of thousands of events.
3) You won't be able to play until it is finished loading the snapshots... To the left of "Play", there should be a progress indicator that goes from 1% to 100%. When it reaches 100%, Play should become enabled. If that isn't working on your box, let me know annd I'll check it out. Could take a couple minutes on a slow connection (though pretty fast on a LAN)

logray · Post by **logray** » Mon Sep 13, 2010 12:35 am

kylejohnson wrote:1) The 'video size' as in the thumbnail, or when you click on one and it opens in a lightbox for playback? The thumbs should be scaled down to the size of WEB_LIST_THUMB_WIDTH in options.

The thumbnail size when browsing (not searching) through events. The web_list_thumb_width works in the orignal interface events list and the thumbs are scaled down to the size I specify. However not in the "new" interface, the thumbs are full video size (in my case 800x600).

kylejohnson wrote:To the left of "Play", there should be a progress indicator that goes from 1% to 100%...If that isn't working on your box, let me know annd I'll check it out. Could take a couple minutes on a slow connection (though pretty fast on a LAN)

I don't see any sort of progress meter to the left of play in the lightbox, only a seemingly "greyed out" (Play) button using Ubuntu 10.04 w/latest FF 3.8.x IIRC. This is on a 100mb LAN.

Post by **kylejohnson** » Mon Sep 13, 2010 12:36 pm

logray wrote:
kylejohnson wrote:1) The 'video size' as in the thumbnail, or when you click on one and it opens in a lightbox for playback? The thumbs should be scaled down to the size of WEB_LIST_THUMB_WIDTH in options.
The thumbnail size when browsing (not searching) through events. The web_list_thumb_width works in the orignal interface events list and the thumbs are scaled down to the size I specify. However not in the "new" interface, the thumbs are full video size (in my case 800x600).

kylejohnson wrote:To the left of "Play", there should be a progress indicator that goes from 1% to 100%...If that isn't working on your box, let me know annd I'll check it out. Could take a couple minutes on a slow connection (though pretty fast on a LAN)
I don't see any sort of progress meter to the left of play in the lightbox, only a seemingly "greyed out" (Play) button using Ubuntu 10.04 w/latest FF 3.8.x IIRC. This is on a 100mb LAN.

I've fixed the fetching of more events to only display the pagemark (x to y) if there is more data to display.
Also, looking at the code for playing back events, and testing on my box, I can't find any problems... Do you have Firebug installed? I have a couple lines of debug in the code so that, if you open the Console of firebug when clicking on an event to watch it, you should see output like

Code: Select all

Loading images...
Src: events/7/1634526/001-capture.jpg
pos: 16
path: events/7/1634526/
Getting files...
Got 193 files...
Preloading images...
Preloaded: 1
Preloaded: 2
Preloaded: 3
Preloaded: 4
Preloaded: 5
Preloaded: 6
Preloaded: 7
...

Can you verify whether or not you are receiving these lines in Firebug's console after clicking on an event (the page where Play is locked)?

logray · Post by **logray** » Mon Sep 13, 2010 3:21 pm

kylejohnson wrote: I've fixed the fetching of more events to only display the pagemark (x to y) if there is more data to display.

Looks fantastic. Noticed another issue this AM, after I create tabs on the dashboard, I'm unable to delete them. Clicking on x in the upper right hand corner of the tab does nothing.

kylejohnson wrote: Can you verify whether or not you are receiving these lines in Firebug's console after clicking on an event (the page where Play is locked)?

Firebug output below... it looks like it just "stalls" after preloading images. Perhaps I am missing a module or plug-in somewhere?

Code: Select all

Loading images...
Src: events/5/137/001-capture.jpg
pos: 12
path: events/5/137/
Getting files...
Got 44 files...
Preloading images...

logray · Post by **logray** » Mon Sep 13, 2010 4:26 pm

More interesting warnings from firebug when opening a lightbox (view full or view event).

Code: Select all

Expected ':' but found ';'. Declaration dropped.
[Break on this error] display;block;
skin.css (line 610)
Expected ':' but found ';'. Declaration dropped.
[Break on this error] }
skin.css (line 611)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxTopLeft{background:transp...TopLeft.png, sizingMethod='scale');}
colorbox.css (line 55)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxTopCenter{background:tran...pCenter.png, sizingMethod='scale');}
colorbox.css (line 56)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxTopRight{background:trans...opRight.png, sizingMethod='scale');}
colorbox.css (line 57)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxBottomLeft{background:tra...tomLeft.png, sizingMethod='scale');}
colorbox.css (line 58)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxBottomCenter{background:t...mCenter.png, sizingMethod='scale');}
colorbox.css (line 59)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxBottomRight{background:tr...omRight.png, sizingMethod='scale');}
colorbox.css (line 60)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxMiddleLeft{background:tra...dleLeft.png, sizingMethod='scale');}
colorbox.css (line 61)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .cboxIE #cboxMiddleRight{background:tr...leRight.png, sizingMethod='scale');}
colorbox.css (line 62)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .ui-helper-zfix { width: 100%; height:...pacity: 0; filter:Alpha(Opacity=0); }
jquery...tom.css (line 18)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .ui-priority-secondary, .ui-widget-con...a(Opacity=70); font-weight: normal; }
jquery...tom.css (line 76)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .ui-state-disabled, .ui-widget-content...pacity=35); background-image: none; }
jquery...tom.css (line 77)
Unknown property 'border-top-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-tl { -moz-border-radius-top...: 5px; border-top-left-radius: 5px; }
jquery...tom.css (line 274)
Unknown property 'border-top-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-tr { -moz-border-radius-top... 5px; border-top-right-radius: 5px; }
jquery...tom.css (line 275)
Unknown property 'border-bottom-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-bl { -moz-border-radius-bot...px; border-bottom-left-radius: 5px; }
jquery...tom.css (line 276)
Unknown property 'border-bottom-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-br { -moz-border-radius-bot...x; border-bottom-right-radius: 5px; }
jquery...tom.css (line 277)
Unknown property 'border-top-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-top { -moz-border-radius-to... 5px; border-top-right-radius: 5px; }
jquery...tom.css (line 278)
Unknown property 'border-top-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-top { -moz-border-radius-to... 5px; border-top-right-radius: 5px; }
jquery...tom.css (line 278)
Unknown property 'border-bottom-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-bottom { -moz-border-radius...x; border-bottom-right-radius: 5px; }
jquery...tom.css (line 279)
Unknown property 'border-bottom-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-bottom { -moz-border-radius...x; border-bottom-right-radius: 5px; }
jquery...tom.css (line 279)
Unknown property 'border-top-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-right { -moz-border-radius...x; border-bottom-right-radius: 5px; }
jquery...tom.css (line 280)
Unknown property 'border-bottom-right-radius'. Declaration dropped.
[Break on this error] .ui-corner-right { -moz-border-radius...x; border-bottom-right-radius: 5px; }
jquery...tom.css (line 280)
Unknown property 'border-top-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-left { -moz-border-radius-t...px; border-bottom-left-radius: 5px; }
jquery...tom.css (line 281)
Unknown property 'border-bottom-left-radius'. Declaration dropped.
[Break on this error] .ui-corner-left { -moz-border-radius-t...px; border-bottom-left-radius: 5px; }
jquery...tom.css (line 281)
Unknown property 'border-radius'. Declaration dropped.
[Break on this error] .ui-corner-all { -moz-border-radius: 5...er-radius: 5px; border-radius: 5px; }
jquery...tom.css (line 282)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .ui-widget-overlay { background: #aaaa...city: .30;filter:Alpha(Opacity=30); }
jquery...tom.css (line 285)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] .ui-widget-shadow { margin: -8px 0 0 -...px; border-radius: 8px; }/* Resizable
jquery...tom.css (line 286)
Unknown property 'border-radius'. Declaration dropped.
[Break on this error] .ui-widget-shadow { margin: -8px 0 0 -...px; border-radius: 8px; }/* Resizable
jquery...tom.css (line 286)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] .ui-accordion .ui-accordion-header { c...relative; margin-top: 1px; zoom: 1; }
jquery...tom.css (line 300)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] .ui-accordion .ui-accordion-content { ...flow: auto; display: none; zoom: 1; }
jquery...tom.css (line 306)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] zoom:1;
jquery...tom.css (line 336)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] .ui-button { display: inline-block; po...property removes extra width in IE */
jquery...tom.css (line 345)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] .ui-dialog .ui-dialog-content { border...und: none; overflow: auto; zoom: 1; }
jquery...tom.css (line 385)
Unknown property 'zoom'. Declaration dropped.
[Break on this error] .ui-tabs { position: relative; padding... overflow: auto appear as "fixed") */
jquery...tom.css (line 408)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] filter: mask(); /*must have*/
jquery...tom.css (line 472)

logray · Post by **logray** » Tue Sep 14, 2010 5:31 pm

Noticed another issue this AM, after I create tabs on the dashboard, I'm unable to delete them. Clicking on x in the upper right hand corner of the tab does nothing.

The problem looks to be from console.js, the post line...

Code: Select all

		// close icon: removing the tab on click
		// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
		$('#tabs span.ui-icon').click(function() {
			var index = $('li',$("#tabs")).index($(this).parent());
			$.post("skins/new/includes/updateGroups.php?action=delete&groupName=" + $(this).parent().find('a').text());
			$("#tabs").tabs('remove', index);

A workaround...

Code: Select all

mysql> select * from Groups;
+----+----------+------------+
| Id | Name     | MonitorIds |
+----+----------+------------+
|  1 | local    | 4          |
|  2 | remote   | 5          |
|  3 | blahblah | 5          |
+----+----------+------------+
3 rows in set (0.00 sec)

mysql> delete from Groups where Name = 'blahblah';
Query OK, 1 row affected (0.00 sec)

Post by **kylejohnson** » Tue Sep 14, 2010 5:33 pm

That's what my post line does - it calls a .php file which just sends a delete query. The problem is registering the click on the X in order to post to the .php file

Can't seem to get it working right,

newvisionantenna · Post by **newvisionantenna** » Tue Sep 14, 2010 6:51 pm

kylejohnson,

Great work on the skin! Since I've been out of the loop for some time now and not familar with what's going on, can you confirm this skin is good to use in production use?

The reason I ask is that seeing this and other enhancements in the forum make me want to sit down and redo another up to date install dvd with all the best features and addons.

I could take the current Ubuntu and install everything by hand, add whatever the community would like to see, and then post a download that would allow a secure end product for someone to easily install and use. It would take me some time to complete, especially with moving, but I'll find some time to roll this up.

Post by **kylejohnson** » Tue Sep 14, 2010 6:54 pm

newvisionantenna wrote:kylejohnson,

Great work on the skin! Since I've been out of the loop for some time now and not familar with what's going on, can you confirm this skin is good to use in production use?

The reason I ask is that seeing this and other enhancements in the forum make me want to sit down and redo another up to date install dvd with all the best features and addons.

I could take the current Ubuntu and install everything by hand, add whatever the community would like to see, and then post a download that would allow a secure end product for someone to easily install and use. It would take me some time to complete, especially with moving, but I'll find some time to roll this up.

Definitely not ready for production yet, though soon. Squashing remaining bugs and adding a few features. However, you could bundle the skin and allow the user to change using the ?skin=skin query string.

Post by **kylejohnson** » Fri Sep 17, 2010 3:34 pm

Well I have fixed a bunch of bugs recently, but for the life of me I still can not get the tab-deletion working! Not a show-stopper, but annoying none-the-less.

So this skin is probably nearing a production-ready (v1.0) release... Once I fix authentication. I could use bug reports in the mean time!

logray · Post by **logray** » Fri Sep 17, 2010 4:25 pm

This looks great, except I'm still having two issues.

Thumbnails on events home screen are not resized (they are full resolution).

Opening an event yields no playback option, or loading of frames... (see earlier posts). Perhaps I am missing a plug in?

Post by **kylejohnson** » Fri Sep 17, 2010 4:31 pm

logray wrote:This looks great, except I'm still having two issues.

Thumbnails on events home screen are not resized (they are full resolution).

Opening an event yields no playback option, or loading of frames... (see earlier posts). Perhaps I am missing a plug in?

With so many bugs, I overlooked those two!

There are no "plug ins" that are needed for this skin. This happens with every one of your events? Are you definitely using the most recent version of the code? Can anyone else confirm these bugs?