New Skin for 1.24

[kylejohnson]

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.

[kylejohnson]

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.

[c0mputerking]

I do not see anything but am interested

[timgman]

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

[kylejohnson]

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]

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

[timgman]

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

[zoneminder]

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.

[kylejohnson]

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]

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]

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]

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



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]

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

[kingofkya]

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]

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