Commit e99cffae97b39125b64741feb65025afb3abcbb6

Authored by Adabriand Furtado
1 parent 35e767cd
Exists in master and in 1 other branch dynamic

Versão inicial do movimento circular.

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;
... ...
view/assets/js/defaultConfigurationHandler.js 0 → 100644
... ... @@ -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 };
... ...
view/assets/js/jquery.scrollTo.js 0 → 100644
... ... @@ -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>
... ...
view/hand/lado_oposto/passo-1.html 0 → 100644
... ... @@ -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>
... ...
view/hand/plano/passo-1.html 0 → 100644
... ... @@ -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>
... ...
view/hand/raio/passo-1.html 0 → 100644
... ... @@ -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>
... ...
view/hand/sentido_inverso/passo-1.html 0 → 100644
... ... @@ -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">
... ...
view/hand/velocidade/passo-1.html 0 → 100644
... ... @@ -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>
... ...
view/img/hand-moviment-direction-icon-check.png 0 → 100644

3.41 KB

view/img/hand-moviment-direction-icon-hover.png 0 → 100644

722 Bytes

view/img/hand-moviment-direction-icon.png 0 → 100644

710 Bytes

view/img/hand-moviment-plane-icon-check.png 0 → 100644

3.45 KB

view/img/hand-moviment-plane-icon-hover.png 0 → 100644

944 Bytes

view/img/hand-moviment-plane-icon.png 0 → 100644

940 Bytes

view/img/hand-moviment-radius-icon-check.png 0 → 100644

2.47 KB

view/img/hand-moviment-radius-icon-hover.png 0 → 100644

646 Bytes

view/img/hand-moviment-radius-icon.png 0 → 100644

644 Bytes

view/img/hand-moviment-velocity-icon-check.png 0 → 100644

2.63 KB

view/img/hand-moviment-velocity-icon-hover.png 0 → 100644

1.02 KB

view/img/hand-moviment-velocity-icon.png 0 → 100644

1.01 KB

view/img/mov/CALAR.gif

469 KB

view/img/mov/CIRCULAR.webm 0 → 100644
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>
... ...