Commit e99cffae97b39125b64741feb65025afb3abcbb6
1 parent
35e767cd
Exists in
master
and in
1 other branch
Versão inicial do movimento circular.
Showing
31 changed files
with
520 additions
and
107 deletions
Show diff stats
main.py
... | ... | @@ -7,7 +7,6 @@ import os |
7 | 7 | import pyutil |
8 | 8 | |
9 | 9 | app = Flask(__name__) |
10 | -CORS(app) | |
11 | 10 | controller = None |
12 | 11 | |
13 | 12 | @app.route("/update_project") |
... | ... | @@ -55,6 +54,7 @@ def setup_controller(): |
55 | 54 | |
56 | 55 | def setup_static_files_service(app): |
57 | 56 | if not app.config['APACHE_HOST']: |
57 | + CORS(app) | |
58 | 58 | @app.route("/<path:path>") |
59 | 59 | def send_static_files(path): |
60 | 60 | root_dir = os.path.abspath(os.path.dirname(__file__)) | ... | ... |
view/assets/css/main.css
... | ... | @@ -317,11 +317,8 @@ ul.rig.columns-4 li { |
317 | 317 | width: 20%; |
318 | 318 | } |
319 | 319 | |
320 | -.selection-panel-body[mainconfig=right-hand] ul.rig.columns-2 li { | |
321 | - width: 60%; | |
322 | -} | |
323 | - | |
324 | -.selection-panel-body[mainconfig=left-hand] ul.rig.columns-2 li { | |
320 | +.selection-panel-body[mainconfig=right-hand] ul.rig.columns-1 li, | |
321 | + .selection-panel-body[mainconfig=left-hand] ul.rig.columns-1 li { | |
325 | 322 | width: 60%; |
326 | 323 | } |
327 | 324 | |
... | ... | @@ -373,10 +370,15 @@ ul.rig.columns-4 li { |
373 | 370 | |
374 | 371 | /* Sub-Configuration Panel */ |
375 | 372 | .subconfiguration-options { |
376 | - overflow-x: hidden; | |
373 | + overflow-x: scroll; | |
377 | 374 | white-space: nowrap; |
378 | 375 | } |
379 | 376 | |
377 | +.subconfiguration-options-container { | |
378 | + height: 45px; | |
379 | + overflow: hidden; | |
380 | +} | |
381 | + | |
380 | 382 | .subconfiguration-panel { |
381 | 383 | display: none; |
382 | 384 | padding: 10px; | ... | ... |
... | ... | @@ -0,0 +1,13 @@ |
1 | +(function(defaultConfigurationHandler, $, undefined) { | |
2 | + | |
3 | + defaultConfigurationHandler.setup = function(hand, subConfig, step) { | |
4 | + var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' + | |
5 | + subConfig + '][step=' + step + ']'; | |
6 | + $(baseId + ' .selection-panel-option').off('click').on( | |
7 | + 'click', function() { | |
8 | + wikilibras.selectAnOption(baseId, this); | |
9 | + dynworkflow.userSelectedAnOption(); | |
10 | + }); | |
11 | + }; | |
12 | + | |
13 | +}(window.defaultConfigurationHandler = window.defaultConfigurationHandler || {}, jQuery)); | ... | ... |
view/assets/js/dynamic-selection-workflow.js
... | ... | @@ -101,9 +101,10 @@ |
101 | 101 | } |
102 | 102 | |
103 | 103 | function _selectSubConfig(subConfig) { |
104 | - if (currentSubConfigName == 'movimento') { | |
104 | + /*if (subConfig != 'movimento' && | |
105 | + currentSubConfigName == 'movimento') { | |
105 | 106 | _updateAndGetFirstMovementSubConfig(); |
106 | - } | |
107 | + }*/ | |
107 | 108 | currentSubConfigName = subConfig; |
108 | 109 | currentSubconfig = currentSubconfigParent[currentSubConfigName]; |
109 | 110 | currentStep = 0; |
... | ... | @@ -112,14 +113,14 @@ |
112 | 113 | |
113 | 114 | // It shows the next selection panel on the workflow |
114 | 115 | function _showNextSubConfig() { |
115 | - _walkOnTheWorklow(true); | |
116 | + _walkOnTheWorkflow(true); | |
116 | 117 | } |
117 | 118 | |
118 | 119 | function _showPreviousSubConfig() { |
119 | - _walkOnTheWorklow(false); | |
120 | + _walkOnTheWorkflow(false); | |
120 | 121 | } |
121 | 122 | |
122 | - function _walkOnTheWorklow(toForward) { | |
123 | + function _walkOnTheWorkflow(toForward) { | |
123 | 124 | currentStep = toForward ? currentStep + 1 : currentStep - 1; |
124 | 125 | |
125 | 126 | if (currentStep >= 0 && currentStep < currentSubconfig.length) { |
... | ... | @@ -127,7 +128,7 @@ |
127 | 128 | } else { |
128 | 129 | var nextSubConfig = _getNextSubConfig(toForward); |
129 | 130 | if (nextSubConfig != -1) { |
130 | - dynworkflow.selectSubConfig(nextSubConfig); | |
131 | + _selectSubConfig(nextSubConfig); | |
131 | 132 | } else { |
132 | 133 | wikilibras.hideSelectionPanel(); |
133 | 134 | } |
... | ... | @@ -144,17 +145,19 @@ |
144 | 145 | |
145 | 146 | // Timeline functions |
146 | 147 | function _selectTimelineIcon(mainConfig, subConfig) { |
147 | - var icon_id = '.subconfiguration-panel[mainConfig=' + mainConfig + | |
148 | - '] .icon_container[json_name=' + subConfig + ']'; | |
148 | + var baseId = '.subconfiguration-panel[mainConfig=' + mainConfig + '] .subconfiguration-options'; | |
149 | + var iconContainer = '.icon_container[json_name=' + subConfig + ']'; | |
150 | + var iconId = baseId + ' ' + iconContainer; | |
149 | 151 | |
150 | - var previousSelected = $('.subconfiguration-panel[mainConfig=' + mainConfig + | |
151 | - '] .icon_container[select=true]').attr('json_name'); | |
152 | + var previousSelected = $(baseId + ' .icon_container[select=true]').attr('json_name'); | |
152 | 153 | if (typeof previousSelected != 'undefined') { |
153 | 154 | _deselectTimelineIcon(mainConfig, previousSelected); |
154 | 155 | } |
155 | 156 | |
156 | - wikilibras.enableIconHover($(icon_id), true); | |
157 | - $(icon_id).attr('select', true); | |
157 | + wikilibras.enableIconHover($(iconId), true); | |
158 | + $(iconId).attr('select', true); | |
159 | + // scrollTo icon | |
160 | + $(baseId).scrollTo(iconContainer, {'offset': -60, 'duration': 750}); | |
158 | 161 | } |
159 | 162 | |
160 | 163 | function _deselectTimelineIcon(mainConfig, subConfig) { |
... | ... | @@ -197,9 +200,14 @@ |
197 | 200 | }); |
198 | 201 | } |
199 | 202 | |
200 | - function _setupTimelineIcons(timelineBaseId) { | |
203 | + function _setupTimelineIcons(timelineBaseId, toUpdate) { | |
204 | + if (!toUpdate) { | |
205 | + $(timelineBaseId).show(); | |
206 | + $(timelineBaseId + " .subconfiguration-options").scrollTo(0, 0); | |
207 | + return; | |
208 | + } | |
209 | + | |
201 | 210 | $(timelineBaseId + ' .icon_container[json_name]').attr("active", "false"); |
202 | - | |
203 | 211 | for (var name in currentSubconfigParent) { |
204 | 212 | $(timelineBaseId + ' .icon_container[json_name=' + name + ']').attr("active", "true"); |
205 | 213 | } |
... | ... | @@ -207,21 +215,20 @@ |
207 | 215 | if (preprocessedMainConfig == 'hand') { |
208 | 216 | $(timelineBaseId + ' .icon_container[json_name=movimento]').attr("active", "true"); |
209 | 217 | _setupCheckIcon(mainConfig, 'movimento'); |
210 | - _selectTimelineIcon(mainConfig, currentSubConfigName); | |
211 | 218 | } |
212 | - | |
219 | + _selectTimelineIcon(mainConfig, currentSubConfigName); | |
213 | 220 | _setupTimelineListeners(timelineBaseId); |
214 | 221 | $(timelineBaseId).show(); |
215 | 222 | } |
216 | 223 | |
217 | - function _setupTimeline() { | |
224 | + function _setupTimeline(toUpdate) { | |
218 | 225 | var timelineBaseId = '.subconfiguration-panel[mainConfig=' + mainConfig + ']'; |
219 | 226 | if (_isTimelineLoaded()) { |
220 | - $(timelineBaseId).show(); | |
227 | + _setupTimelineIcons(timelineBaseId, toUpdate); | |
221 | 228 | } else { |
222 | 229 | dynengine.render(baseUrl, '/' + preprocessedMainConfig + |
223 | 230 | '/timeline.html', '#selection-panel', false, function() { |
224 | - _setupTimelineIcons(timelineBaseId); | |
231 | + _setupTimelineIcons(timelineBaseId, true); | |
225 | 232 | }); |
226 | 233 | } |
227 | 234 | } |
... | ... | @@ -236,9 +243,12 @@ |
236 | 243 | currentStep = 0; |
237 | 244 | |
238 | 245 | _showCurrentSubconfig(); |
246 | + }; | |
247 | + | |
248 | + dynworkflow.finishMainConfigSetup = function(subConfig) { | |
239 | 249 | // hide the timeline on the first subconfiguration for "hand" |
240 | 250 | if (preprocessedMainConfig != 'hand' || _isTimelineLoaded()) { |
241 | - _setupTimeline(); | |
251 | + _setupTimeline(false); | |
242 | 252 | } |
243 | 253 | }; |
244 | 254 | |
... | ... | @@ -250,13 +260,13 @@ |
250 | 260 | currentStep = 0; |
251 | 261 | |
252 | 262 | _showCurrentSubconfig(); |
253 | - _setupTimeline(); | |
263 | + _setupTimeline(true); | |
254 | 264 | }; |
255 | 265 | |
256 | 266 | dynworkflow.selectSubConfig = function(subConfig) { |
257 | 267 | _selectSubConfig(subConfig); |
258 | 268 | }; |
259 | - | |
269 | + | |
260 | 270 | dynworkflow.userSelectedAnOption = function() { |
261 | 271 | _userSelectedAnOption(); |
262 | 272 | }; | ... | ... |
... | ... | @@ -0,0 +1,210 @@ |
1 | +/*! | |
2 | + * jQuery.scrollTo | |
3 | + * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com | |
4 | + * Licensed under MIT | |
5 | + * http://flesler.blogspot.com/2007/10/jqueryscrollto.html | |
6 | + * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery | |
7 | + * @author Ariel Flesler | |
8 | + * @version 2.1.2 | |
9 | + */ | |
10 | +;(function(factory) { | |
11 | + 'use strict'; | |
12 | + if (typeof define === 'function' && define.amd) { | |
13 | + // AMD | |
14 | + define(['jquery'], factory); | |
15 | + } else if (typeof module !== 'undefined' && module.exports) { | |
16 | + // CommonJS | |
17 | + module.exports = factory(require('jquery')); | |
18 | + } else { | |
19 | + // Global | |
20 | + factory(jQuery); | |
21 | + } | |
22 | +})(function($) { | |
23 | + 'use strict'; | |
24 | + | |
25 | + var $scrollTo = $.scrollTo = function(target, duration, settings) { | |
26 | + return $(window).scrollTo(target, duration, settings); | |
27 | + }; | |
28 | + | |
29 | + $scrollTo.defaults = { | |
30 | + axis:'xy', | |
31 | + duration: 0, | |
32 | + limit:true | |
33 | + }; | |
34 | + | |
35 | + function isWin(elem) { | |
36 | + return !elem.nodeName || | |
37 | + $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1; | |
38 | + } | |
39 | + | |
40 | + $.fn.scrollTo = function(target, duration, settings) { | |
41 | + if (typeof duration === 'object') { | |
42 | + settings = duration; | |
43 | + duration = 0; | |
44 | + } | |
45 | + if (typeof settings === 'function') { | |
46 | + settings = { onAfter:settings }; | |
47 | + } | |
48 | + if (target === 'max') { | |
49 | + target = 9e9; | |
50 | + } | |
51 | + | |
52 | + settings = $.extend({}, $scrollTo.defaults, settings); | |
53 | + // Speed is still recognized for backwards compatibility | |
54 | + duration = duration || settings.duration; | |
55 | + // Make sure the settings are given right | |
56 | + var queue = settings.queue && settings.axis.length > 1; | |
57 | + if (queue) { | |
58 | + // Let's keep the overall duration | |
59 | + duration /= 2; | |
60 | + } | |
61 | + settings.offset = both(settings.offset); | |
62 | + settings.over = both(settings.over); | |
63 | + | |
64 | + return this.each(function() { | |
65 | + // Null target yields nothing, just like jQuery does | |
66 | + if (target === null) return; | |
67 | + | |
68 | + var win = isWin(this), | |
69 | + elem = win ? this.contentWindow || window : this, | |
70 | + $elem = $(elem), | |
71 | + targ = target, | |
72 | + attr = {}, | |
73 | + toff; | |
74 | + | |
75 | + switch (typeof targ) { | |
76 | + // A number will pass the regex | |
77 | + case 'number': | |
78 | + case 'string': | |
79 | + if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) { | |
80 | + targ = both(targ); | |
81 | + // We are done | |
82 | + break; | |
83 | + } | |
84 | + // Relative/Absolute selector | |
85 | + targ = win ? $(targ) : $(targ, elem); | |
86 | + /* falls through */ | |
87 | + case 'object': | |
88 | + if (targ.length === 0) return; | |
89 | + // DOMElement / jQuery | |
90 | + if (targ.is || targ.style) { | |
91 | + // Get the real position of the target | |
92 | + toff = (targ = $(targ)).offset(); | |
93 | + } | |
94 | + } | |
95 | + | |
96 | + var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset; | |
97 | + | |
98 | + $.each(settings.axis.split(''), function(i, axis) { | |
99 | + var Pos = axis === 'x' ? 'Left' : 'Top', | |
100 | + pos = Pos.toLowerCase(), | |
101 | + key = 'scroll' + Pos, | |
102 | + prev = $elem[key](), | |
103 | + max = $scrollTo.max(elem, axis); | |
104 | + | |
105 | + if (toff) {// jQuery / DOMElement | |
106 | + attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]); | |
107 | + | |
108 | + // If it's a dom element, reduce the margin | |
109 | + if (settings.margin) { | |
110 | + attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0; | |
111 | + attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0; | |
112 | + } | |
113 | + | |
114 | + attr[key] += offset[pos] || 0; | |
115 | + | |
116 | + if (settings.over[pos]) { | |
117 | + // Scroll to a fraction of its width/height | |
118 | + attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos]; | |
119 | + } | |
120 | + } else { | |
121 | + var val = targ[pos]; | |
122 | + // Handle percentage values | |
123 | + attr[key] = val.slice && val.slice(-1) === '%' ? | |
124 | + parseFloat(val) / 100 * max | |
125 | + : val; | |
126 | + } | |
127 | + | |
128 | + // Number or 'number' | |
129 | + if (settings.limit && /^\d+$/.test(attr[key])) { | |
130 | + // Check the limits | |
131 | + attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max); | |
132 | + } | |
133 | + | |
134 | + // Don't waste time animating, if there's no need. | |
135 | + if (!i && settings.axis.length > 1) { | |
136 | + if (prev === attr[key]) { | |
137 | + // No animation needed | |
138 | + attr = {}; | |
139 | + } else if (queue) { | |
140 | + // Intermediate animation | |
141 | + animate(settings.onAfterFirst); | |
142 | + // Don't animate this axis again in the next iteration. | |
143 | + attr = {}; | |
144 | + } | |
145 | + } | |
146 | + }); | |
147 | + | |
148 | + animate(settings.onAfter); | |
149 | + | |
150 | + function animate(callback) { | |
151 | + var opts = $.extend({}, settings, { | |
152 | + // The queue setting conflicts with animate() | |
153 | + // Force it to always be true | |
154 | + queue: true, | |
155 | + duration: duration, | |
156 | + complete: callback && function() { | |
157 | + callback.call(elem, targ, settings); | |
158 | + } | |
159 | + }); | |
160 | + $elem.animate(attr, opts); | |
161 | + } | |
162 | + }); | |
163 | + }; | |
164 | + | |
165 | + // Max scrolling position, works on quirks mode | |
166 | + // It only fails (not too badly) on IE, quirks mode. | |
167 | + $scrollTo.max = function(elem, axis) { | |
168 | + var Dim = axis === 'x' ? 'Width' : 'Height', | |
169 | + scroll = 'scroll'+Dim; | |
170 | + | |
171 | + if (!isWin(elem)) | |
172 | + return elem[scroll] - $(elem)[Dim.toLowerCase()](); | |
173 | + | |
174 | + var size = 'client' + Dim, | |
175 | + doc = elem.ownerDocument || elem.document, | |
176 | + html = doc.documentElement, | |
177 | + body = doc.body; | |
178 | + | |
179 | + return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]); | |
180 | + }; | |
181 | + | |
182 | + function both(val) { | |
183 | + return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val }; | |
184 | + } | |
185 | + | |
186 | + // Add special hooks so that window scroll properties can be animated | |
187 | + $.Tween.propHooks.scrollLeft = | |
188 | + $.Tween.propHooks.scrollTop = { | |
189 | + get: function(t) { | |
190 | + return $(t.elem)[t.prop](); | |
191 | + }, | |
192 | + set: function(t) { | |
193 | + var curr = this.get(t); | |
194 | + // If interrupt is true and user scrolled, stop animating | |
195 | + if (t.options.interrupt && t._last && t._last !== curr) { | |
196 | + return $(t.elem).stop(); | |
197 | + } | |
198 | + var next = Math.round(t.now); | |
199 | + // Don't waste CPU | |
200 | + // Browsers don't render floating point scroll | |
201 | + if (curr !== next) { | |
202 | + $(t.elem)[t.prop](next); | |
203 | + t._last = this.get(t); | |
204 | + } | |
205 | + } | |
206 | + }; | |
207 | + | |
208 | + // AMD requirement | |
209 | + return $scrollTo; | |
210 | +}); | ... | ... |
view/assets/js/tmpJSONParser.js
... | ... | @@ -24,7 +24,13 @@ |
24 | 24 | } |
25 | 25 | |
26 | 26 | function _parseParameterValue(value) { |
27 | - return !isNaN(value) ? parseInt(value) : value; | |
27 | + if (typeof value == "string" && value.toLowerCase() == 'true') { | |
28 | + return true; | |
29 | + } else if (typeof value == "string" && value.toLowerCase() == 'false') { | |
30 | + return false; | |
31 | + } else { | |
32 | + return !isNaN(value) ? parseInt(value) : value; | |
33 | + } | |
28 | 34 | } |
29 | 35 | |
30 | 36 | function _parseTempFacialParameterJSON(tmpJSON) { | ... | ... |
view/assets/js/wikilibras.js
... | ... | @@ -81,7 +81,7 @@ |
81 | 81 | function _isConfigurationComplete(config) { |
82 | 82 | var baseId = '.subconfiguration-panel[mainConfig=' + config + ']'; |
83 | 83 | var total_config = $(baseId + ' .icon_container[json_name][active=true]').length; |
84 | - var completed_config = $(baseId + ' .icon_container[complete=true]').length; | |
84 | + var completed_config = $(baseId + ' .icon_container[active=true][complete=true]').length; | |
85 | 85 | return completed_config != 0 && total_config == completed_config; |
86 | 86 | } |
87 | 87 | |
... | ... | @@ -165,8 +165,9 @@ |
165 | 165 | function _showSelectionPanel(option) { |
166 | 166 | _clearPreviousSelection(); |
167 | 167 | _selectIcon(option, true); |
168 | - _setupGUIOnSelection(option); | |
169 | - | |
168 | + _setupGUIOnSelection(option, function() { | |
169 | + dynworkflow.finishMainConfigSetup(option); | |
170 | + }); | |
170 | 171 | dynworkflow.selectMainConfig(option); |
171 | 172 | } |
172 | 173 | |
... | ... | @@ -174,7 +175,9 @@ |
174 | 175 | var config = _getCurrentMainConfiguration(); |
175 | 176 | _deselectIcon(config); |
176 | 177 | if (_isConfigurationComplete(config)) { |
177 | - _finishConfiguration(config); | |
178 | + _finishConfiguration(config, true); | |
179 | + } else { | |
180 | + _finishConfiguration(config, false); | |
178 | 181 | } |
179 | 182 | |
180 | 183 | _addZoomOutToAvatar(config, function() { |
... | ... | @@ -189,13 +192,19 @@ |
189 | 192 | (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); |
190 | 193 | } |
191 | 194 | |
192 | - function _finishConfiguration(config) { | |
193 | - _setupCheckIcon(config, true); | |
194 | - _setupCheckIcon('avatar-' + config, true); | |
195 | - $('#' + config + '-edit .check-icon').show(); | |
196 | - | |
195 | + function _finishConfiguration(config, toFinish) { | |
196 | + _setupCheckIcon(config, toFinish); | |
197 | + _setupCheckIcon('avatar-' + config, toFinish); | |
198 | + | |
199 | + if (toFinish) { | |
200 | + $('#' + config + '-edit .check-icon').show(); | |
201 | + } else { | |
202 | + $('#' + config + '-edit .check-icon').hide(); | |
203 | + } | |
197 | 204 | if (_canRenderSignVideo()) { |
198 | 205 | $('#ready-button').removeClass('disabled'); |
206 | + } else { | |
207 | + $('#ready-button').addClass('disabled'); | |
199 | 208 | } |
200 | 209 | } |
201 | 210 | |
... | ... | @@ -209,11 +218,13 @@ |
209 | 218 | } |
210 | 219 | } |
211 | 220 | |
212 | - function _setupGUIOnSelection(option) { | |
221 | + function _setupGUIOnSelection(option, finishCallback) { | |
213 | 222 | $('#ready-button').fadeOut(300); |
214 | 223 | $('.edit-container').fadeOut(300); |
215 | 224 | _addZoomInToAvatar(option, function() { |
216 | - $('#selection-panel').fadeIn(300); | |
225 | + $('#selection-panel').fadeIn(300, function() { | |
226 | + finishCallback(); | |
227 | + }); | |
217 | 228 | }); |
218 | 229 | } |
219 | 230 | |
... | ... | @@ -274,7 +285,7 @@ |
274 | 285 | // Render Screen |
275 | 286 | function _submitParameterJSON(callback) { |
276 | 287 | parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); |
277 | - //console.log(parsedParameterJSON); | |
288 | + console.log(parsedParameterJSON); | |
278 | 289 | |
279 | 290 | $.ajax({ |
280 | 291 | type: 'POST', | ... | ... |
view/conf/selection-workflow-json
... | ... | @@ -15,10 +15,11 @@ |
15 | 15 | "articulacao" : ["passo-1", "passo-2"], |
16 | 16 | "configuracao" : ["passo-1", "passo-2"], |
17 | 17 | "orientacao" : ["passo-1"], |
18 | + "plano": ["passo-1"], | |
18 | 19 | "raio" : ["passo-1"], |
19 | 20 | "velocidade" : ["passo-1"], |
20 | - "lado_oposto" : ["passo-1"], | |
21 | - "sentido_inverso" : ["passo-1"] | |
21 | + "sentido_inverso" : ["passo-1"], | |
22 | + "lado_oposto" : ["passo-1"] | |
22 | 23 | }, |
23 | 24 | "retilineo" : { |
24 | 25 | "articulacao-retilineo": ["passo-1", "passo-2", "passo-3", "passo-4"], | ... | ... |
view/facial/timeline.html
... | ... | @@ -2,23 +2,22 @@ |
2 | 2 | <div class="arrow icon_container col-sm-1" name="left-arrow"> |
3 | 3 | <img src="{{ server }}/img/left-arrow-icon.png" /> |
4 | 4 | </div> |
5 | - | |
6 | - <div id="facial-subconfiguration-options" | |
7 | - class="subconfiguration-options col-sm-10"> | |
8 | - <div class="icon_container" name="facial-expression" | |
9 | - json_name="expressao"> | |
10 | - <img src="{{ server }}/img/facial-expression-icon.png" /> | |
11 | - </div> | |
12 | - <div class="icon_container" name="facial-expression-velocity" | |
13 | - json_name="transicao"> | |
14 | - <img src="{{ server }}/img/facial-expression-velocity-icon.png" /> | |
15 | - </div> | |
16 | - <div class="icon_container" name="facial-expression-duration" | |
17 | - json_name="duracao"> | |
18 | - <img src="{{ server }}/img/facial-expression-duration-icon.png" /> | |
5 | + <div class="subconfiguration-options-container col-sm-10"> | |
6 | + <div class="subconfiguration-options col-sm-12"> | |
7 | + <div class="icon_container" name="facial-expression" | |
8 | + json_name="expressao"> | |
9 | + <img src="{{ server }}/img/facial-expression-icon.png" /> | |
10 | + </div> | |
11 | + <div class="icon_container" name="facial-expression-velocity" | |
12 | + json_name="transicao"> | |
13 | + <img src="{{ server }}/img/facial-expression-velocity-icon.png" /> | |
14 | + </div> | |
15 | + <div class="icon_container" name="facial-expression-duration" | |
16 | + json_name="duracao"> | |
17 | + <img src="{{ server }}/img/facial-expression-duration-icon.png" /> | |
18 | + </div> | |
19 | 19 | </div> |
20 | 20 | </div> |
21 | - | |
22 | 21 | <div class="arrow icon_container col-sm-1" name="right-arrow"> |
23 | 22 | <img src="{{ server }}/img/right-arrow-icon.png" /> |
24 | 23 | </div> | ... | ... |
... | ... | @@ -0,0 +1,23 @@ |
1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
2 | + subConfig="lado_oposto" step="1"> | |
3 | + <div class="panel-header"> | |
4 | + <h8>O movimento começa pelo lado oposto?</h8> | |
5 | + </div> | |
6 | + <div class="selection-panel-inner-body"> | |
7 | + <ul class="rig columns-2"> | |
8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
9 | + preload="metadata" value="false" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video>Não</li> | |
13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
14 | + preload="metadata" value="true" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video>Sim</li> | |
18 | + </ul> | |
19 | + </div> | |
20 | +</div> | |
21 | +<script type="text/javascript"> | |
22 | + defaultConfigurationHandler.setup("{{ hand }}", "lado_oposto", "1"); | |
23 | +</script> | ... | ... |
view/hand/movimento/passo-1.html
... | ... | @@ -4,24 +4,23 @@ |
4 | 4 | <h8>Escolha o movimento mais parecido</h8> |
5 | 5 | </div> |
6 | 6 | <div class="selection-panel-inner-body"> |
7 | - <ul class="rig columns-2"> | |
8 | - <li><img | |
9 | - class="box-panel-option selection-panel-option" | |
10 | - src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li> | |
11 | - | |
12 | - <li><img | |
13 | - class="box-panel-option selection-panel-option" | |
14 | - src="{{ server }}/img/mov/CALAR.gif" value="retilineo" />Retilíneo</li> | |
7 | + <ul class="rig columns-1"> | |
8 | + <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
9 | + preload="metadata" value="pontual" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video> Pontual</li> | |
13 | + <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
14 | + preload="metadata" value="retilineo" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video> Retilíneo</li> | |
18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
19 | + preload="metadata" value="circular" | |
20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
21 | + <source type="video/webm"> | |
22 | + </video> Circular</li> | |
15 | 23 | <!-- |
16 | - <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
17 | - preload="metadata" value="pontual" | |
18 | - class="box-panel-option selection-panel-option" autoplay loop> | |
19 | - <source type="video/webm"> | |
20 | - </video> Pontual</li> | |
21 | - <li><img class="box-panel-option selection-panel-option" | |
22 | - src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li> | |
23 | - <li><img class="box-panel-option selection-panel-option" | |
24 | - src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li> | |
25 | 24 | <li><img class="box-panel-option selection-panel-option" |
26 | 25 | src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li> |
27 | 26 | <li><img class="box-panel-option selection-panel-option" |
... | ... | @@ -35,5 +34,5 @@ |
35 | 34 | </div> |
36 | 35 | </div> |
37 | 36 | <script type="text/javascript"> |
38 | - movement.setup("{{ server }}", "{{ hand }}"); | |
37 | + movement.setup("{{ server }}", "{{ hand }}"); | |
39 | 38 | </script> | ... | ... |
... | ... | @@ -0,0 +1,29 @@ |
1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
2 | + subConfig="plano" step="1"> | |
3 | + <div class="panel-header"> | |
4 | + <h8>Escolha o plano do movimento</h8> | |
5 | + </div> | |
6 | + <div class="selection-panel-inner-body"> | |
7 | + <ul class="rig columns-2"> | |
8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
9 | + preload="metadata" value="frente-esquerda" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video>Frente - Esquerda</li> | |
13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
14 | + preload="metadata" value="frente-cima" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video>Frente - Cima | |
18 | + </li> | |
19 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
20 | + preload="metadata" value="esquerda-cima" | |
21 | + class="box-panel-option selection-panel-option" autoplay loop> | |
22 | + <source type="video/webm"> | |
23 | + </video>Esquerda - Cima</li> | |
24 | + </ul> | |
25 | + </div> | |
26 | +</div> | |
27 | +<script type="text/javascript"> | |
28 | + defaultConfigurationHandler.setup("{{ hand }}", "plano", "1"); | |
29 | +</script> | ... | ... |
... | ... | @@ -0,0 +1,28 @@ |
1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
2 | + subConfig="raio" step="1"> | |
3 | + <div class="panel-header"> | |
4 | + <h8>Escolha o tamanho do raio do movimento</h8> | |
5 | + </div> | |
6 | + <div class="selection-panel-inner-body"> | |
7 | + <ul class="rig columns-2"> | |
8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
9 | + preload="metadata" value="pequeno" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video>Pequeno</li> | |
13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
14 | + preload="metadata" value="normal" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video>Médio</li> | |
18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
19 | + preload="metadata" value="grande" | |
20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
21 | + <source type="video/webm"> | |
22 | + </video>Grande</li> | |
23 | + </ul> | |
24 | + </div> | |
25 | +</div> | |
26 | +<script type="text/javascript"> | |
27 | + defaultConfigurationHandler.setup("{{ hand }}", "raio", "1"); | |
28 | +</script> | ... | ... |
... | ... | @@ -0,0 +1,23 @@ |
1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
2 | + subConfig="sentido_inverso" step="1"> | |
3 | + <div class="panel-header"> | |
4 | + <h8>Escolha o sentido do movimento</h8> | |
5 | + </div> | |
6 | + <div class="selection-panel-inner-body"> | |
7 | + <ul class="rig columns-2"> | |
8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
9 | + preload="metadata" value="false" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video>Horário</li> | |
13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
14 | + preload="metadata" value="true" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video>Anti-horário</li> | |
18 | + </ul> | |
19 | + </div> | |
20 | +</div> | |
21 | +<script type="text/javascript"> | |
22 | + defaultConfigurationHandler.setup("{{ hand }}", "sentido_inverso", "1"); | |
23 | +</script> | ... | ... |
view/hand/timeline.html
... | ... | @@ -2,36 +2,64 @@ |
2 | 2 | <div class="arrow icon_container col-sm-1" name="left-arrow"> |
3 | 3 | <img src="{{ server }}/img/left-arrow-icon.png" /> |
4 | 4 | </div> |
5 | - <div class="subconfiguration-options col-sm-10"> | |
6 | - <div class="icon_container" name="hand-moviment" json_name="movimento"> | |
7 | - <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
8 | - </div> | |
9 | - <!-- articulacao --> | |
10 | - <div class="icon_container" name="hand-articulation" | |
11 | - json_name="articulacao"> | |
12 | - <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
13 | - </div> | |
14 | - <div class="icon_container" name="hand-articulation" | |
15 | - json_name="articulacao-retilineo"> | |
16 | - <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
17 | - </div> | |
18 | - <!-- configuracao --> | |
19 | - <div class="icon_container" name="hand-fingers-position" | |
20 | - json_name="configuracao"> | |
21 | - <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
22 | - </div> | |
23 | - <div class="icon_container" name="hand-fingers-position" | |
24 | - json_name="configuracao-retilineo"> | |
25 | - <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
26 | - </div> | |
27 | - <!-- orientacao --> | |
28 | - <div class="icon_container" name="hand-orientation" | |
29 | - json_name="orientacao"> | |
30 | - <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
31 | - </div> | |
32 | - <div class="icon_container" name="hand-orientation" | |
33 | - json_name="orientacao-retilineo"> | |
34 | - <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
5 | + <div class="subconfiguration-options-container col-sm-10"> | |
6 | + <div class="subconfiguration-options col-sm-12"> | |
7 | + <div class="icon_container" name="hand-moviment" | |
8 | + json_name="movimento"> | |
9 | + <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
10 | + </div> | |
11 | + <!-- articulacao --> | |
12 | + <div class="icon_container" name="hand-articulation" | |
13 | + json_name="articulacao"> | |
14 | + <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
15 | + </div> | |
16 | + <div class="icon_container" name="hand-articulation" | |
17 | + json_name="articulacao-retilineo"> | |
18 | + <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
19 | + </div> | |
20 | + <!-- configuracao --> | |
21 | + <div class="icon_container" name="hand-fingers-position" | |
22 | + json_name="configuracao"> | |
23 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
24 | + </div> | |
25 | + <div class="icon_container" name="hand-fingers-position" | |
26 | + json_name="configuracao-retilineo"> | |
27 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
28 | + </div> | |
29 | + <!-- orientacao --> | |
30 | + <div class="icon_container" name="hand-orientation" | |
31 | + json_name="orientacao"> | |
32 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
33 | + </div> | |
34 | + <div class="icon_container" name="hand-orientation" | |
35 | + json_name="orientacao-retilineo"> | |
36 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
37 | + </div> | |
38 | + <!-- plano --> | |
39 | + <div class="icon_container" name="hand-moviment-plane" | |
40 | + json_name="plano"> | |
41 | + <img src="{{ server }}/img/hand-moviment-plane-icon.png" /> | |
42 | + </div> | |
43 | + <!-- raio --> | |
44 | + <div class="icon_container" name="hand-moviment-radius" | |
45 | + json_name="raio"> | |
46 | + <img src="{{ server }}/img/hand-moviment-radius-icon.png" /> | |
47 | + </div> | |
48 | + <!-- velocidade --> | |
49 | + <div class="icon_container" name="hand-moviment-velocity" | |
50 | + json_name="velocidade"> | |
51 | + <img src="{{ server }}/img/hand-moviment-velocity-icon.png" /> | |
52 | + </div> | |
53 | + <!-- sentido_inverso --> | |
54 | + <div class="icon_container" name="hand-moviment-direction" | |
55 | + json_name="sentido_inverso"> | |
56 | + <img src="{{ server }}/img/hand-moviment-direction-icon.png" /> | |
57 | + </div> | |
58 | + <!-- lado_oposto --> | |
59 | + <div class="icon_container" name="hand-moviment-direction" | |
60 | + json_name="lado_oposto"> | |
61 | + <img src="{{ server }}/img/hand-moviment-direction-icon.png" /> | |
62 | + </div> | |
35 | 63 | </div> |
36 | 64 | </div> |
37 | 65 | <div class="arrow icon_container col-sm-1" name="right-arrow"> | ... | ... |
... | ... | @@ -0,0 +1,28 @@ |
1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
2 | + subConfig="velocidade" step="1"> | |
3 | + <div class="panel-header"> | |
4 | + <h8>Escolha a velocidade do movimento</h8> | |
5 | + </div> | |
6 | + <div class="selection-panel-inner-body"> | |
7 | + <ul class="rig columns-2"> | |
8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
9 | + preload="metadata" value="lento" | |
10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
11 | + <source type="video/webm"> | |
12 | + </video>Lento</li> | |
13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
14 | + preload="metadata" value="normal" | |
15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
16 | + <source type="video/webm"> | |
17 | + </video>Normal</li> | |
18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
19 | + preload="metadata" value="rapido" | |
20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
21 | + <source type="video/webm"> | |
22 | + </video>Rápido</li> | |
23 | + </ul> | |
24 | + </div> | |
25 | +</div> | |
26 | +<script type="text/javascript"> | |
27 | + defaultConfigurationHandler.setup("{{ hand }}", "velocidade", "1"); | |
28 | +</script> | ... | ... |
3.41 KB
722 Bytes
710 Bytes
3.45 KB
944 Bytes
940 Bytes
2.47 KB
646 Bytes
644 Bytes
2.63 KB
1.02 KB
1.01 KB
view/img/mov/CALAR.gif
469 KB
No preview for this file type
view/template.html
... | ... | @@ -173,12 +173,15 @@ |
173 | 173 | </div> |
174 | 174 | </div> |
175 | 175 | |
176 | +<script src="{{ server }}/assets/js/jquery.scrollTo.js"></script> | |
176 | 177 | <script src="{{ server }}/assets/js/js.cookie.js"></script> |
178 | + | |
177 | 179 | <script src="{{ server }}/assets/js/facial.js"></script> |
178 | 180 | <script src="{{ server }}/assets/js/movement.js"></script> |
179 | 181 | <script src="{{ server }}/assets/js/articulation.js"></script> |
180 | 182 | <script src="{{ server }}/assets/js/configuration.js"></script> |
181 | 183 | <script src="{{ server }}/assets/js/orientation.js"></script> |
184 | +<script src="{{ server }}/assets/js/defaultConfigurationHandler.js"></script> | |
182 | 185 | <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script> |
183 | 186 | <script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script> |
184 | 187 | <script src="{{ server }}/assets/js/tmpJSONParser.js"></script> | ... | ... |