Page 3 of 11

Posted: Fri Mar 26, 2010 1:22 pm
by 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. :)

Posted: Fri Mar 26, 2010 1:38 pm
by 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 :oops: )


Image
Image

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

Posted: Fri Mar 26, 2010 1:43 pm
by 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.

Posted: Fri Mar 26, 2010 3:28 pm
by kylejohnson
Image

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.

Posted: Mon Mar 29, 2010 8:03 pm
by kylejohnson
Per craver84's idea,
Image

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.

Posted: Mon Mar 29, 2010 9:00 pm
by 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...

Posted: Tue Mar 30, 2010 2:21 am
by 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

Posted: Tue Mar 30, 2010 2:04 pm
by kylejohnson
craver84 wrote: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"

kingofkya wrote: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.

Wow good plans...

Posted: Tue Mar 30, 2010 6:50 pm
by 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.

Posted: Wed Mar 31, 2010 3:16 pm
by 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

:oops:

Posted: Tue Apr 20, 2010 6:00 pm
by 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.


Image


Image

Image

Image

Image

Posted: Thu Apr 22, 2010 11:20 am
by 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.

Posted: Thu Apr 22, 2010 1:34 pm
by kylejohnson
What browser and OS?
Is ZoneMinder's authentication (hashed or plain) enabled?

Posted: Thu Apr 22, 2010 1:58 pm
by 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>

Posted: Thu Apr 22, 2010 2:27 pm
by 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.