New Skin for 1.24

If you've made a patch to quick fix a bug or to add a new feature not yet in the main tree then post it here so others can try it out.
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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. :)
craver84
Posts: 96
Joined: Sun Aug 31, 2008 7:35 am

Post 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
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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.
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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.
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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.
craver84
Posts: 96
Joined: Sun Aug 31, 2008 7:35 am

Post 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...
User avatar
kingofkya
Posts: 1110
Joined: Mon Mar 26, 2007 6:07 am
Location: Las Vegas, Nevada

Post 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
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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.
timgman
Posts: 46
Joined: Wed Mar 14, 2007 6:01 pm

Wow good plans...

Post 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.
craver84
Posts: 96
Joined: Sun Aug 31, 2008 7:35 am

Post 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:
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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
thomasjohansen
Posts: 3
Joined: Thu Apr 22, 2010 10:54 am

Post 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.
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post by kylejohnson »

What browser and OS?
Is ZoneMinder's authentication (hashed or plain) enabled?
thomasjohansen
Posts: 3
Joined: Thu Apr 22, 2010 10:54 am

Post 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>
kylejohnson
Posts: 260
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD

Post 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.
Post Reply