New Skin for 1.24

[kylejohnson]

Craver - I'm aware of that bug. It showed up when I added the jquery files. I'll see if I can fix it today. As for the layout, thanks for the feedback. I'm not much of a designer so it is good to have input.

[craver84]

What about doing something more radical? I thought we can "copy" the layout of other projects, like IpCop or Elastix
The thing I don't really like in ZM is that there are more that one windows (option, filters, monitors, source...)
I was looking at elastix and I draw this (I'm not a designer, and I can't draw very well.... sorry )





It's only an idea... I can do it better if you like it

[kylejohnson]

I was about to say, holy shit - you put my work to shame! But it's only a mock-up

Well, I like some of the ideas - like the menu bar. Perhaps a menu bar that defaults to "Cameras" or "History" (user definable option), but also has "System" and the other tabs that you mentioned. I can see that making things easier - the Cam tab has only cameras, the History tab has only events. Makes sense. The "System" tab would be nice too, but would probably come last. Maybe even something under "System" that calculates how many hours / days / whatever of storage you have, based on the number of cameras, resolution, etc.

[kylejohnson]

I've also fixed the bug which prevented you from changing tabs when adding / editing a monitor (Monitor view).

So this skin is not completely usable.

Still lots to do.

[kylejohnson]

Per craver84's idea,


Thoughts?

All of the navigation links do not full work (though mostly). You can check this out from the skin-with-nav branch of my git repo.

[craver84]

kylejohnson, great work!
I think that the navigation with the tabs (with only 1 window!) is the better way to improve the front end, kylejohnson don't you think so? I also would like to know what other people think...

Please help me to download it. i'm here:
http://github.com/kylejohnson/zm_newski ... n-with-nav
and I don't know how to download it...

[kingofkya]

I must say its coming along great two suggestions.

Fist make the divs or tables expand because with the higher res pics, axis ip cams it overflowed. If you want a pic to test with let me know i can give you a link to mine. You might have fixed it my versions a week out of date and haven updated yet.

Same goes for monitor/camera popup window.

Also if you need some graphics done let me know. Hears some stuff I have done.
http://www.zoneminder.com/forums/viewtopic.php?t=13779

[kylejohnson]

kylejohnson, great work!
I think that the navigation with the tabs (with only 1 window!) is the better way to improve the front end, kylejohnson don't you think so? I also would like to know what other people think...

Please help me to download it. i'm here:
http://github.com/kylejohnson/zm_newski ... n-with-nav
and I don't know how to download it...

I'm not sure yet... I like the tabbed navigation, but the history also looks good underneath the camera snapshot. It's a small change so it isn't too big of a deal yet.

To download it, you'll need to download the entire repo as normal. Then once the repo is downloaded, type "git checkout skin-with-nav". Reload your web page and there you go. To switch back to the main skin, type "git checkout master". To see all options, type "git branch"

I must say its coming along great two suggestions.

Fist make the divs or tables expand because with the higher res pics, axis ip cams it overflowed. If you want a pic to test with let me know i can give you a link to mine. You might have fixed it my versions a week out of date and haven updated yet.

Same goes for monitor/camera popup window.

Also if you need some graphics done let me know. Hears some stuff I have done.
http://www.zoneminder.com/forums/viewtopic.php?t=13779

I know that this is still a pending issue - I just haven't thought of a good way to implement it yet. The problem is that with this CSS layout, I need a fixed width on li.monitor... So I need a way to dynamically override the width. I'll figure it out soon enough.

And thanks for the offer. I am definitely not a graphic / ui designer, so I could use some help.

[timgman]

It's about time someone makes this baby look as good as it needs to.
With the added eye-candy of those Custom icons and the sweet one page layout, This app will become more popular very fast.

[craver84]

Sorry for my stupid question, but I still don't know how to download it ....
In terminal I type:

paolo@Shuttle:~$ git clone git://github.com/kylejohnson/zm_newskin.git
Initialized empty Git repository in /home/paolo/zm_newskin/.git/
remote: Counting objects: 245, done.
remote: Compressing objects: 100% (206/206), done.
remote: Total 245 (delta 95), reused 162 (delta 36)
Receiving objects: 100% (245/245), 191.71 KiB | 246 KiB/s, done.
Resolving deltas: 100% (95/95), done.

after that? If I type:
paolo@Shuttle:~$ git checkout skin-with-nav
fatal: Not a git repository (or any of the parent directories): .git

[kylejohnson]

So I've been working away on the skin, and I feel that I've made enough progress for an update to be worthy. Still lots to go. Again, this is all available via my git repo, so feel free to check it out.

* Main console screen now only shows the monitors - no addition events, zones or what have you information.
* Clicking on a monitor "drills into" the events for that monitor, bringing you to the Events page, with that monitor's results shown.
* All even searching and paginating are now done with jquery and ajax calls.
* I have removed MANY features. I think it is best to start with only what is needed, and add extras as required. That said, filtering is only available by Monitor Name and Date Range.
* Click a monitor's corresponding Check Box to add that monitor to the filter
* Clicking a monitor will filter immediately.
* Add a date range and click "Submit" to search the currently selected monitors by that date range.

[thomasjohansen]

Bug: No cam in the console view, with this new skin.

Proberly because its a axis ip cam with resolution 1280x800.


the camera view is empty.

[kylejohnson]

What browser and OS?
Is ZoneMinder's authentication (hashed or plain) enabled?

[thomasjohansen]

Version 1.24.1 (ubuntu) Victor peterson livecd

windows 7 Firefox 3.6.3


Axis IP M3014 1280x800



Tried both with and without user auth and with plain and hash and none.


classic skin works fine.


output of the source:

Code: Select all

<DOCTYPE>
<html>
<head>
  <title>ZM - Console</title>
  <link>
  <link>
  <link>
  <link>
  <link>
  <link>

  <link>
<script></script>
<script></script>
<script>
$(document).ready(function(){
var refresh = 300000;
 $("#monitors").load("/skins/new/views/monitors.php");

 setInterval(function() {
  $("#monitors li").each(function() {
   var _this = $(this);
   $(".spinner",_this).html("<img>");
   var mid = $(this).attr("id");
   mid = mid.split("_");
   $(".mon",this).load("/skins/new/views/monitors.php?mid=" + mid[1] + " .mon", function () { 
    $(".spinner",_this).fadeOut('slow');
   });
  });
 }, refresh);

  $("#monitors").sortable({ opacity: 0.6, cursor: 'move', update: function() {
  var order = $(this).sortable("serialize") + '&action=sequence';
    $.post("skins/new/includes/updateSequence.php", order);
   }});

});
</script>
  <link>
  <script>
  var AJAX_TIMEOUT = 3000;

  var currentView = 'console';
  var thisUrl = "http://10.192.67.108/index.php";
  var skinPath = "skins/zm_newskin";

  var canEditSystem = true;
  var canViewSystem = true;

  var refreshParent = false;

  var focusWindow = false;
  </script>
  <script>
var consoleRefreshTimeout = 300000;

var showVersionPopup = false;
var showDonatePopup = false;
  </script>
  <script></script>

  <script></script>
<script>console.error = alert;</script>
</head>
<body>
  <div>
    
    <div>
      <h2><a>ZoneMinder</a> Console - <a>Running</a></h2>

      <div></div>
      <div><a>1 Monitor</a></div>
      <div><a>Options</a></div>
      <h3>Configured for&nbsp;<a>High</a> Bandwidth</h3>
    </div>
 <div>

     <ul>
      <li><a>Cameras</a></li>
      <li><a>Events</a></li>
      <li><a>Timeline</a></li>
      <li><a>Admin.</a></li>
      <li><a>Options</a></li>

      <li><a>System</a></li>
     </ul>
    </div>
    <div>
<ul>
</ul>
  </div>
<div>
        <a>v1.24.1</a></div>

    </div>
</body>
</html>

</div>

[kylejohnson]

Thomas,

Seems to not work on my Windows XP Firefox 3.6.3, but it does on my Ubuntu install. I'll look into it soon.