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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
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
Key Features (just watch the video already)
--------------------------------------------
* Receive real time push notifications for alarms as they happen. You need to install my [Event Server](https://github.com/pliablepixels/zmeventserver) for this. You can even control monitors you want to be notified of and reporting intervals (if you defined your zones loosely you don't want pings every second, do you?)
* View live monitors and events
* High speed event scrubbing and control
* Pullup handy views of activities based on time
* Incredible zoom/pan timeline of alarms
* Control Zoneminder - restart, change states
* Swipe/pan between monitors
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")
|
