1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
zmNinja is a multi platform client for ZoneMinder users.
ZoneMinder is an incredible open source camera monitoring system and is used
by many for home and commercial security monitoring. http://www.zoneminder.com
Video Demo
-------------
Check out a video demo of zmNinja here: https://youtu.be/prtA_mv68Ok
Thanks
------
To the zonemider community in general, and the awesome Stack Overflow community.
But specifically, [Andrew Bauer](https://github.com/knnniggett) (knnniggett) - he is a ZoneMinder maintainer and
helped me significantly in getting into ZoneMinder and also continues to help
me with my client goals.
Important Notes
---------------
* zmNinja needs APIs enabled in ZoneMinder. See https://github.com/pliablepixels/zmNinja/wiki/Configuring-ZoneMinder-with-API
Objective
----------
I wanted to learn how to create a full fledged cross platform app for a long time.
I used this as an excuse to learn Angular JS, phoneGap and ionic and see if one could
use these modern tools to build high performance phonegap apps. I was very pleasantly
surprised -- for a large part, most people who complain about performance probably
haven't spent time researching how to optimize.
I'll keep refining it over time as I learn more of AngularJS and stuff.
Building
--------
zmNinja uses the [Ionic Framework](http://ionicframework.com/). To install Ionic, follow their easy [Getting Started instructions](http://ionicframework.com/getting-started/).
With Ionic installed, you will need to install the build dependencies:
```bash
$ cd zmNinja # make sure you are in the directory where the project is checked out
$ npm install
```
Next, build the application. You will need to specify the appropriate target, either `ios` or `android`:
```bash
$ ionic build ios
# - OR -
$ ionic build android
```
If you want to run zmNinja in an emulator, you will need to install the appropriate emulator tools.
* For iOS, you will need the latest version of XCode (available in the App Store) as well as the npm package `ios-sim`: `npm install -g ios-sim`
* For Android, you will need the latest [Android Studio](https://developer.android.com/sdk/index.html)
Now, you can launch the emulator:
```bash
$ ionic emulate ios
# - OR -
$ ionic emulate android
```
Screenshots:
------------
Menu:
Events List:
Event Quick Scrub:
![]
(http://www.pbase.com/arjunrc/image/160851403/medium.jpg "Events Scrub")
Timeline View:
![]
(http://www.pbase.com/arjunrc/image/160940106/medium.jpg "Timeline zoomout")
![]
(http://www.pbase.com/arjunrc/image/160940104/medium.jpg "Timeline zoomin")
Full Screen Events Footage View (with floating buttons)
Sliding Montage View 1:
Sliding Montage View 2 (Different sizes):
![] (http://www.pbase.com/arjunrc/image/160697822/medium.jpg "Sliding Montage View again")
Montage Re-order and show/hide:
![] (http://www.pbase.com/arjunrc/image/160697740/medium.jpg "Montage re-order and hide")
Monitor View:
Graphs:
![] (http://www.pbase.com/arjunrc/image/160697738/medium.jpg "Graphs")
Control ZM custom states/start/stop/restart:
![] (http://www.pbase.com/arjunrc/image/160697735/medium.jpg "Control ZM")
Change Monitor Modes:
![] (http://www.pbase.com/arjunrc/image/160697731/medium.jpg "Monitor Modes")
Pan/Tilt/Zoom Mode:
![] (http://www.pbase.com/arjunrc/image/160171688/medium.jpg "PTZ")
|
