├── .gitignore
├── LICENSE
├── README.md
├── assets
├── icons
│ ├── Read Me.txt
│ ├── demo-files
│ │ ├── demo.css
│ │ └── demo.js
│ ├── demo.html
│ ├── fonts
│ │ ├── icomoon-video-tagging.eot
│ │ ├── icomoon-video-tagging.svg
│ │ ├── icomoon-video-tagging.ttf
│ │ └── icomoon-video-tagging.woff
│ ├── ie7
│ │ ├── ie7.css
│ │ └── ie7.js
│ ├── selection.json
│ └── style.css
└── images
│ ├── area.png
│ ├── area2shapes.png
│ ├── areatagged.png
│ ├── chrome.png
│ ├── edge.jpg
│ ├── empty.png
│ ├── emptyframe.png
│ ├── ff.png
│ ├── frames1.png
│ ├── frames2.png
│ ├── frames3.png
│ ├── frames4.png
│ ├── loaded.png
│ ├── lock.png
│ ├── multipoints.png
│ ├── nextuntagged.png
│ ├── playback.png
│ ├── playcontrols.png
│ ├── singlepoint.png
│ ├── taggingcontrols.png
│ ├── tags.png
│ ├── time.png
│ ├── videocontrols.png
│ └── volume.png
├── bower.json
├── css
├── border-anim-h.gif
├── border-anim-v.gif
├── border-h.gif
├── border-v.gif
├── imgareaselect-animated.css
└── sliders.css
├── demo
├── bower.json
├── index.html
├── mov1.mp4
├── mov2.mp4
└── test_images
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ └── 4.jpg
├── index.html
├── js
├── jquery.imgareaselect.js
├── jquery.imgareaselect.min.js
└── jquery.imgareaselect.pack.js
├── optional-tags.html
├── package.json
├── playback-control.html
├── test
├── basic-test.html
└── index.html
├── video-tagging.html
└── video-taggingstyles.html
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
29 |
30 | server.js
31 | bower_components
32 |
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Catalyst Code
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VideoTagging Web Element
2 | This web element can be used to tag videos, frame by frame. It is useful for video-processing applications, where computer vision algorithms are used on video input. For example, drones and robot applications are used to track a specific persn, to detect oil pipes leaks, etc.
3 |
4 | Using the video-tagging web wlement, users can mark regions in each frame and associate text tags to these regions.
5 |
6 | ## Overview
7 | The video-tagging web element is built using HTML5, CSS3 based on [Polymer](https://www.polymer-project.org/1.0/).
8 | Here's an example of marking rectangualr regions in a frame and tagging them with textual labels, representing the objects within the region.
9 | More details on the functionality apear below.
10 |
11 | 
12 |
13 | The area selection is credited to [ImageAreaSelect](http://odyniec.net/projects/imgareaselect/)
14 |
15 | ## Demo
16 | Follow the next steps to run the demo locally.
17 |
18 | * You will need the following installations to be able to run the demo:
19 | [node.js](https://nodejs.org/en/)
20 | [Bower](http://bower.io/)
21 | [Git client](http://www.git-scm.com/) or [GitHub app](https://desktop.github.com/)
22 | * Clone the repository and install required packages
23 |
24 | ```
25 | // clone the repository
26 | git clone https://github.com/CatalystCode/video-tagging.git
27 | ```
28 | ```
29 | // change dir to the 'demo'
30 | cd video-tagging
31 | ```
32 |
33 | ```
34 | // install required node.js packages
35 | npm install
36 | ```
37 |
38 | ```
39 | // install http-server to be able to host the demo
40 | npm install -g http-server
41 | ```
42 | ```
43 | // install bower components
44 | cd demo
45 | bower install
46 | ```
47 | ```
48 | // run a local http-server to host the demo
49 | http-server
50 | ```
51 | * Open your browser: [http://localhost:8080/index.html](http://localhost:8080/index.html)
52 | * Select a tagging job from the list
53 | * Use the mouse to mark a frame point/rectangle and use the tags toggles to select the relevant tags
54 |
55 |
56 | ## Using the element in your app
57 | In order to use the element in your app, you need to install the video-tagging Bower component as follows:
58 |
59 | ```
60 | bower install CatalystCode/video-tagging
61 | ```
62 |
63 | In your HTML page, add the element as follows:
64 |
65 | * Add a reference to the element:
66 |
67 | ```
68 |
69 | ```
70 |
71 | * Add the element tag inline:
72 |
73 | ```
74 |
75 |
76 |
77 | ```
78 |
79 |
80 | **A video-tagging web app, using this web element, is available here: [VideoTaggingTool](https://github.com/CatalystCode/VideoTaggingTool.git)**
81 |
82 | ##API & Usage
83 |
84 | The video-tagging element is based on a video player, with additional functionality for tagging the frames.
85 | The **_tags_** are text labels associated to **_regions or points_** designated in each frame.
86 | The regions that are currently supported are of type "Rectangle".
87 |
88 | A **_video-tagging job_** is an input video and a configuration object which defines the tagging job.
89 | Here's an example of a job configuration:
90 | ```
91 | { "id": 5,
92 | "src": "sample-video.mp4",
93 | "Description = "human tracking job",
94 | "regiontype":"Point",
95 | "regionsize":"25",
96 | "multiregions":"1", // allow multiple regions per frame
97 | "tags" : ["text-1","text-2","text-3"],
98 | "DurationSeconds" = 21.8,
99 | "FramesPerSecond = 25,
100 | "Height" = 480,
101 | "Width" = 640
102 | }
103 | ```
104 | A **_video-tagging job_** can also support image tagging with the following configuration object which defines the tagging job.
105 | Here's an example of a job configuration:
106 | ```
107 | { "id": 5,
108 | "imagelist": "['image_path1.jpg','image_path2.jpg', 'image_path3.jpg']",
109 | "Description = "human tracking job",
110 | "regiontype":"Point",
111 | "regionsize":"25",
112 | "multiregions":"1", // allow multiple regions per frame
113 | "tags" : ["text-1","text-2","text-3"],
114 | "DurationSeconds" = 21.8,
115 | "FramesPerSecond = 25,
116 | "Height" = 480,
117 | "Width" = 640
118 | }
119 | ```
120 |
121 | Each frame may have multiple region/point markers, each labeled with text tags.
122 |
123 | **Example #1: Point markers**
124 | ```
125 | { region: { name: 1, type: 'Point', x1: 123, y1: 54, tags: [ 'horse', 'brown'], ... }}
126 | ```
127 |
128 | **Example #2: rectangle markers**
129 | ```
130 | { region: { name: 1, type: 'Rectangle', x1: 123, y1: 54, x2: 35, y2: 78, tags: [ 'horse', 'brown'], ... }}
131 | ```
132 |
133 |
134 | ###Video Controls:
135 |
136 | 
137 |
138 | 1. Video timebar
139 | 2. Previous frame
140 | 3. Play/Pause
141 | 4. Next frame
142 | 5. Skip to the furst untagged frame
143 | 6. Frame index
144 | 7. Play speed
145 | 8. Timer
146 | 9. Volume/Mute
147 |
148 | ###Tagging controls
149 |
150 | 
151 |
152 | 1. Tags - click on the relevant buttons to tag the selected region/point in the frame.
153 | 2. Mark as empty frame - designates a frame with no relevant tags.
154 | 3. Lock tags - automatically adds selected tags to new regions. Toggle to enable/disable.
155 |
156 |
157 | ###Tag the video
158 |
159 | **Point marker**
160 | click on the frame and associate tags to the clicked **point/position** in the frame.
161 | 
162 |
163 | **Rectangle marker**
164 | Click on the frame, drag mouse to create a rectangle and release the mouse. Add tags using the tag toggles.
165 | 
166 |
167 | To edit tags, select a marker (Point or Rectangle), and add/remove tags.
168 |
169 | **Lock tags**
170 | When enabled, the selected tags will remain selected after tagging the current frame and moving to the next frame.
171 | When only single marker can be tagged in a frame ("multitags="0") and the tags are locked, the frame will advance automatically after the marker was created.
172 | In tsuch case, the tagging workflow is as follows:
173 | 1. Create a new region - Click or drag
174 | 2. Select tags
175 | 3. Click on the Lock Icon
176 | 4. Create a region
177 | 5. Repeat
178 | 6. Click the icon again to exit this mode.
179 |
180 |
181 | ####Input Data
182 | The following properties must be populated:
183 |
184 | * `videoduration` - number, for example 30.07
185 | * `videowidth` - number, for example 420
186 | * `videoheight` - number, for example 240
187 | * `framerate` - number, for example 29.97
188 | * `regiontype` - string, can be "point" or "rectangle"
189 | * `regionsize` - number, for example 20 (in pixels) for point regions.
190 | * `multitags` - string, can be "0" or "1"
191 | * `inputtagsarray` - a string array of the possible tags
192 | * `inputFrames` - an object containing all the tagged frames of this video (That have been created at an earlier time).
193 | The object is a dictionary, the frame number is the key. Each frame has a collection of regions
194 | and each region has a collection of tags.
195 | In this example we see data for frames 434, 442 and 628.
196 | 
197 | Expanded- each region is an object with coordinates and a tags array.
198 | 
199 |
200 | Example:
201 | ```
202 | var videotagging = document.getElementById('video-tagging');
203 |
204 | videotagging.videoduration = data.video.DurationSeconds;
205 | videotagging.videowidth = data.video.Width;
206 | videotagging.videoheight = data.video.Height;
207 | videotagging.framerate = data.video.FramesPerSecond;
208 | ```
209 |
210 | Finally, to load the control, set the src property to the URL of the video:
211 | ```
212 | videotagging.src = data.video.Url;
213 | ```
214 |
215 | ####Output Data
216 | When a region is created or updated and when tags are added/removed, the element fires an event called "onregionchanged". Register to this event to get the
217 | data:
218 | ```
219 | document.getElementById('video-tegging').addEventListener('onregionchanged', function (e) {...
220 | ```
221 |
222 | The control returns **all** the regions and their tags in the current frame. The parameter e holds this data in e.detail:
223 |
224 | 
225 |
226 | ####Browser Support
227 |
228 |  Chrome 47
229 |  Firefox 43
230 |
231 | It is recommended to use the same browser consistently as there are differences between them regarding video time calculations.
232 | Better precision was observed in Firefox.
233 |
234 | # License
235 | [MIT](LICENSE)
236 |
--------------------------------------------------------------------------------
/assets/icons/Read Me.txt:
--------------------------------------------------------------------------------
1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2 |
3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4 |
5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6 |
7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
8 |
--------------------------------------------------------------------------------
/assets/icons/demo-files/demo.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 0;
3 | margin: 0;
4 | font-family: sans-serif;
5 | font-size: 1em;
6 | line-height: 1.5;
7 | color: #555;
8 | background: #fff;
9 | }
10 | h1 {
11 | font-size: 1.5em;
12 | font-weight: normal;
13 | }
14 | small {
15 | font-size: .66666667em;
16 | }
17 | a {
18 | color: #e74c3c;
19 | text-decoration: none;
20 | }
21 | a:hover, a:focus {
22 | box-shadow: 0 1px #e74c3c;
23 | }
24 | .bshadow0, input {
25 | box-shadow: inset 0 -2px #e7e7e7;
26 | }
27 | input:hover {
28 | box-shadow: inset 0 -2px #ccc;
29 | }
30 | input, fieldset {
31 | font-size: 1em;
32 | margin: 0;
33 | padding: 0;
34 | border: 0;
35 | }
36 | input {
37 | color: inherit;
38 | line-height: 1.5;
39 | height: 1.5em;
40 | padding: .25em 0;
41 | }
42 | input:focus {
43 | outline: none;
44 | box-shadow: inset 0 -2px #449fdb;
45 | }
46 | .glyph {
47 | font-size: 16px;
48 | width: 15em;
49 | padding-bottom: 1em;
50 | margin-right: 4em;
51 | margin-bottom: 1em;
52 | float: left;
53 | overflow: hidden;
54 | }
55 | .liga {
56 | width: 80%;
57 | width: calc(100% - 2.5em);
58 | }
59 | .talign-right {
60 | text-align: right;
61 | }
62 | .talign-center {
63 | text-align: center;
64 | }
65 | .bgc1 {
66 | background: #f1f1f1;
67 | }
68 | .fgc1 {
69 | color: #999;
70 | }
71 | .fgc0 {
72 | color: #000;
73 | }
74 | p {
75 | margin-top: 1em;
76 | margin-bottom: 1em;
77 | }
78 | .mvm {
79 | margin-top: .75em;
80 | margin-bottom: .75em;
81 | }
82 | .mtn {
83 | margin-top: 0;
84 | }
85 | .mtl, .mal {
86 | margin-top: 1.5em;
87 | }
88 | .mbl, .mal {
89 | margin-bottom: 1.5em;
90 | }
91 | .mal, .mhl {
92 | margin-left: 1.5em;
93 | margin-right: 1.5em;
94 | }
95 | .mhmm {
96 | margin-left: 1em;
97 | margin-right: 1em;
98 | }
99 | .mls {
100 | margin-left: .25em;
101 | }
102 | .ptl {
103 | padding-top: 1.5em;
104 | }
105 | .pbs, .pvs {
106 | padding-bottom: .25em;
107 | }
108 | .pvs, .pts {
109 | padding-top: .25em;
110 | }
111 | .unit {
112 | float: left;
113 | }
114 | .unitRight {
115 | float: right;
116 | }
117 | .size1of2 {
118 | width: 50%;
119 | }
120 | .size1of1 {
121 | width: 100%;
122 | }
123 | .clearfix:before, .clearfix:after {
124 | content: " ";
125 | display: table;
126 | }
127 | .clearfix:after {
128 | clear: both;
129 | }
130 | .hidden-true {
131 | display: none;
132 | }
133 | .textbox0 {
134 | width: 3em;
135 | background: #f1f1f1;
136 | padding: .25em .5em;
137 | line-height: 1.5;
138 | height: 1.5em;
139 | }
140 | #testDrive {
141 | display: block;
142 | padding-top: 24px;
143 | line-height: 1.5;
144 | }
145 | .fs0 {
146 | font-size: 16px;
147 | }
148 | .fs1 {
149 | font-size: 32px;
150 | }
151 |
152 |
--------------------------------------------------------------------------------
/assets/icons/demo-files/demo.js:
--------------------------------------------------------------------------------
1 | if (!('boxShadow' in document.body.style)) {
2 | document.body.setAttribute('class', 'noBoxShadow');
3 | }
4 |
5 | document.body.addEventListener("click", function(e) {
6 | var target = e.target;
7 | if (target.tagName === "INPUT" &&
8 | target.getAttribute('class').indexOf('liga') === -1) {
9 | target.select();
10 | }
11 | });
12 |
13 | (function() {
14 | var fontSize = document.getElementById('fontSize'),
15 | testDrive = document.getElementById('testDrive'),
16 | testText = document.getElementById('testText');
17 | function updateTest() {
18 | testDrive.innerHTML = testText.value || String.fromCharCode(160);
19 | if (window.icomoonLiga) {
20 | window.icomoonLiga(testDrive);
21 | }
22 | }
23 | function updateSize() {
24 | testDrive.style.fontSize = fontSize.value + 'px';
25 | }
26 | fontSize.addEventListener('change', updateSize, false);
27 | testText.addEventListener('input', updateTest, false);
28 | testText.addEventListener('change', updateTest, false);
29 | updateSize();
30 | }());
31 |
--------------------------------------------------------------------------------
/assets/icons/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | IcoMoon Demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |