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

New Skin for 1.24

Post by kylejohnson » Thu Feb 19, 2009 1:37 am

I am working on a new skin for 1.24.2 Instead of manually taring up the skin every time I make changes, I am going to use git. So, if you want to try out the skin, you'll need to change into your zm/skins/ directory and clone my git repo:

1) cd skins/new
2) git clone git://github.com/kylejohnson/zm_newskin.git new
3) navigate to http://YourZM/?skin=new

While the original skin works just fine, I am gearing this skin towards end-users who are likely familiar with commercial DVRs and as such are expecting something else from the console. I want a clean, consistent design. I am removing a lot of the less-frequently used features and also removing other features in place of configuring them as mostly commonly used.


Check out the most recent replies to this topic for the most up-to-date information and updates.

Image
Image
Image
Last edited by kylejohnson on Wed May 15, 2013 2:30 pm, edited 21 times in total.

kylejohnson
Posts: 257
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD
Contact:

Post by kylejohnson » Thu Feb 19, 2009 4:52 pm

Here is what I have so far:
<img>

It obviously needs a lot of work - but what do you all think?

Personally, I like being able to see the actual camera (with a live snapshot), and then having the ability to click on it, to launch the larger view. This is also less confusing, as the events and monitors are now separated.

The individual monitors are contained in a div that is float:left, so that if you have too many cameras, they automatically overflow to the next row, and adjust to the size of your screen.

Ideally, you would be able to specify an option, which would determine the size of the thumbnails.

Comments / Criticism / Recommendations please.
Last edited by kylejohnson on Tue May 05, 2009 12:15 am, edited 1 time in total.

c0mputerking
Posts: 190
Joined: Tue Sep 16, 2008 5:22 am
Contact:

Post by c0mputerking » Fri Feb 20, 2009 9:07 pm

I do not see anything but am interested

timgman
Posts: 46
Joined: Wed Mar 14, 2007 6:01 pm

How hard is it to ...

Post by timgman » Tue Mar 03, 2009 6:24 pm

How hard is it to make the background black and add an image to the default skin of zm?

kylejohnson
Posts: 257
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD
Contact:

Re: How hard is it to ...

Post by kylejohnson » Wed Mar 04, 2009 8:15 pm

timgman wrote:How hard is it to make the background black and add an image to the default skin of zm?
body {background-color:#000;} will set the background to black.
What do you mean by, add an image to the default skin of zm?

c0mputerking
Posts: 190
Joined: Tue Sep 16, 2008 5:22 am
Contact:

Post by c0mputerking » Sat Mar 07, 2009 9:58 am

I am interested are there docs on how to switch between skins?

timgman
Posts: 46
Joined: Wed Mar 14, 2007 6:01 pm

I just meant to add some curb appeal to ZM...

Post by timgman » Mon Mar 09, 2009 8:08 pm

Many web dvr's have some fir;y nice looking guis... I wonder if you can put the video feeds into a nice looking web page...

User avatar
zoneminder
Site Admin
Posts: 5220
Joined: Wed Jul 09, 2003 2:07 pm
Location: Bristol, UK
Contact:

Post by zoneminder » Mon Mar 09, 2009 9:34 pm

c0mputerking wrote:I am interested are there docs on how to switch between skins?
If you just add a skin=<skin> to the url you login on then it will change to that skin from there onwards. You can try it with the mobile skin in the stock ZM.
Phil

kylejohnson
Posts: 257
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD
Contact:

Post by kylejohnson » Tue May 05, 2009 12:12 am

Haven't had time to work on this until recently, but I have made some progress and am wondering if anyone is interested. You can view a screenshot here


The monitors in the main console can either be shown as a live feed (similar to some DVR solutions (like the montage window)), and will display at the FPS specified for that monitor, or as a single image, which will refresh at whichever interval you have configured for your selected bandwidth setting.

The monitors are currently set to a fixed width, though with some additional interest, this could become a configurable option. The only changes to ZoneMinder that I've had to make so far are to console.php and console.css

The main downside to this is that there will be an extra load on the server when using the live-feed option, due to the zms processes that will be continuously running when the console is open.

godsyn
Posts: 10
Joined: Sat Aug 16, 2008 6:27 am

Post by godsyn » Tue May 12, 2009 2:32 pm

Please post the skin. I was just about to start on the same thing, and decided to search and see if anyone else had done this.

trendkill
Posts: 35
Joined: Sat Mar 10, 2007 1:48 pm
Contact:

Post by trendkill » Fri Oct 16, 2009 3:35 pm

here is my dark skin for 1.24.2 : http://montenegrofly.hu/inferno.tar.gz
I can't set the PTZ views withour PTZ cams :)

I'm intresting to see other's themes.
Would be nice to download user skins from this site.

kylejohnson
Posts: 257
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD
Contact:

Post by kylejohnson » Thu Mar 04, 2010 8:30 pm

So I've lost my work and started again on this a couple of times - here is what I currently have.

Image

The most common complaint from end users when trying to sell ZM is that it is neither intuitive nor easy to use. I think a new console page will help, as will a new way of searching.

I'm currently looking for requests - what would you like to see? What do commercial DVRs offer that you would like ZM to have (as far as a front-end)?

PROBLEMS:
  • Functions requiring use of the checkbox (edit, delete, move) do not really work. You can still edit by clicking on the camera source
  • I am pulling the still image from the Zones directory, so the zones are overlaid on the image.
REQUESTS:
  • AJAX-y drag-and-drop of monitors for reordering

kylejohnson
Posts: 257
Joined: Tue Aug 21, 2007 1:42 pm
Location: Baltimore, MD
Contact:

Post by kylejohnson » Fri Mar 12, 2010 5:22 pm

Received a couple PMs looking to download the skin.
You can download it at http://dl.dropbox.com/u/4663848/zm/new.tgz
Just extract the file to the skins directory and navigate to http://youzm/index.php?skin=new

User avatar
kingofkya
Posts: 1110
Joined: Mon Mar 26, 2007 6:07 am
Location: Las Vegas, Nevada

Post by kingofkya » Mon Mar 15, 2010 3:34 am

Thanks for creating this I hope other will do the same so we can get a good collection of interfaces.

Honestly the reason most people can't figure out the normal interface is simple because it looks like a terminal program and it keeps it simple. Which workes for me but kudos for making a average joe interface.

craver84
Posts: 92
Joined: Sun Aug 31, 2008 7:35 am

Post by craver84 » Mon Mar 15, 2010 1:26 pm

kylejohnson, thanks for your skin!

i've got a problem with Mootools, can anybody help me please?

Code: Select all

MooTools not found! Please download from
http://mootools.net and install in ZoneMinder web root.
Well, I've downloaded
http://mootools.net/download/get/mootoo ... classes.js

after that I've renamed it to mootools.js and putted in /var/www/zm

How is written here: http://www.zoneminder.com/forums/viewto ... 9ee8462e2f
there shoud be a file called mootools.ext.js in the web root but I've found it in /var/www/zm/js

I tried to copy mootools.js in /var/www/zm/js and /var/www/zm/tools/mootools, and I've also tried to copy mootools.ext.js in the web root with mootools.js, but it still doesnt' work

where am I wrong? thanks

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest