Versão inicial do movimento circular.

Adabriand Furtado
1 parent 35e767cd
Showing 31 changed files with 520 additions and 107 deletions Show diff stats
main.py
view/assets/css/main.css
view/assets/js/defaultConfigurationHandler.js
view/assets/js/dynamic-selection-workflow.js
view/assets/js/jquery.scrollTo.js
view/assets/js/tmpJSONParser.js
view/assets/js/wikilibras.js
view/conf/selection-workflow-json
view/facial/timeline.html
view/hand/lado_oposto/passo-1.html
view/hand/movimento/passo-1.html
view/hand/plano/passo-1.html
view/hand/raio/passo-1.html
view/hand/sentido_inverso/passo-1.html
view/hand/timeline.html
view/hand/velocidade/passo-1.html
view/img/hand-moviment-direction-icon-check.png
view/img/hand-moviment-direction-icon-hover.png
view/img/hand-moviment-direction-icon.png
view/img/hand-moviment-plane-icon-check.png
@@ -7,7 +7,6 @@ import os
 import pyutil
 app = Flask(__name__)
-CORS(app)
 controller = None
 @app.route("/update_project")
@@ -55,6 +54,7 @@ def setup_controller():
 def setup_static_files_service(app):
     if not app.config['APACHE_HOST']:
+        CORS(app)
         @app.route("/<path:path>")
         def send_static_files(path):
             root_dir = os.path.abspath(os.path.dirname(__file__))
@@ -317,11 +317,8 @@ ul.rig.columns-4 li {
 	width: 20%;
 }
-.selection-panel-body[mainconfig=right-hand] ul.rig.columns-2 li {
-	width: 60%;
-}
-
-.selection-panel-body[mainconfig=left-hand] ul.rig.columns-2 li {
+.selection-panel-body[mainconfig=right-hand] ul.rig.columns-1 li,
+	.selection-panel-body[mainconfig=left-hand] ul.rig.columns-1 li {
 	width: 60%;
 }
@@ -373,10 +370,15 @@ ul.rig.columns-4 li {
 /* Sub-Configuration Panel */
 .subconfiguration-options {
-	overflow-x: hidden;
+	overflow-x: scroll;
 	white-space: nowrap;
 }
+.subconfiguration-options-container {
+    height: 45px;
+    overflow: hidden;
+}
+
 .subconfiguration-panel {
 	display: none;
 	padding: 10px;
@@ -0,0 +1,13 @@
+(function(defaultConfigurationHandler, $, undefined) {
+
+  defaultConfigurationHandler.setup = function(hand, subConfig, step) {
+    var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+			subConfig + '][step=' + step + ']';
+    $(baseId + ' .selection-panel-option').off('click').on(
+        'click', function() {
+          wikilibras.selectAnOption(baseId, this);
+          dynworkflow.userSelectedAnOption();
+        });
+  };
+
+}(window.defaultConfigurationHandler = window.defaultConfigurationHandler || {}, jQuery));
@@ -101,9 +101,10 @@
   }
   function _selectSubConfig(subConfig) {
-    if (currentSubConfigName == 'movimento') {
+    /*if (subConfig != 'movimento' &&
+    		currentSubConfigName == 'movimento') {
       _updateAndGetFirstMovementSubConfig();
-    }
+    }*/
     currentSubConfigName = subConfig;
     currentSubconfig = currentSubconfigParent[currentSubConfigName];
     currentStep = 0;
@@ -112,14 +113,14 @@
   // It shows the next selection panel on the workflow
   function _showNextSubConfig() {
-    _walkOnTheWorklow(true);
+    _walkOnTheWorkflow(true);
   }
   function _showPreviousSubConfig() {
-    _walkOnTheWorklow(false);
+    _walkOnTheWorkflow(false);
   }
-  function _walkOnTheWorklow(toForward) {
+  function _walkOnTheWorkflow(toForward) {
     currentStep = toForward ? currentStep + 1 : currentStep - 1;
     if (currentStep >= 0 && currentStep < currentSubconfig.length) {
@@ -127,7 +128,7 @@
     } else {
       var nextSubConfig = _getNextSubConfig(toForward);
       if (nextSubConfig != -1) {
-        dynworkflow.selectSubConfig(nextSubConfig);
+        _selectSubConfig(nextSubConfig);
       } else {
         wikilibras.hideSelectionPanel();
       }
@@ -144,17 +145,19 @@
   // Timeline functions
   function _selectTimelineIcon(mainConfig, subConfig) {
-    var icon_id = '.subconfiguration-panel[mainConfig=' + mainConfig +
-    '] .icon_container[json_name=' + subConfig + ']';
+	var baseId = '.subconfiguration-panel[mainConfig=' + mainConfig + '] .subconfiguration-options';
+    var iconContainer = '.icon_container[json_name=' + subConfig + ']';
+	var iconId = baseId + ' ' + iconContainer;
-    var previousSelected = $('.subconfiguration-panel[mainConfig=' + mainConfig    +
-    '] .icon_container[select=true]').attr('json_name');
+    var previousSelected = $(baseId + ' .icon_container[select=true]').attr('json_name');
     if (typeof previousSelected != 'undefined') {
       _deselectTimelineIcon(mainConfig, previousSelected);
     }
-    wikilibras.enableIconHover($(icon_id), true);
-    $(icon_id).attr('select', true);
+    wikilibras.enableIconHover($(iconId), true);
+    $(iconId).attr('select', true);
+    // scrollTo icon
+    $(baseId).scrollTo(iconContainer, {'offset': -60, 'duration': 750});
   }
   function _deselectTimelineIcon(mainConfig, subConfig) {
@@ -197,9 +200,14 @@
     });
   }
-  function _setupTimelineIcons(timelineBaseId) {
+  function _setupTimelineIcons(timelineBaseId, toUpdate) {
+	if (!toUpdate) {
+      $(timelineBaseId).show();
+      $(timelineBaseId + " .subconfiguration-options").scrollTo(0, 0);
+      return;
+	}
+	
     $(timelineBaseId + ' .icon_container[json_name]').attr("active", "false");
-
     for (var name in currentSubconfigParent) {
       $(timelineBaseId + ' .icon_container[json_name=' + name + ']').attr("active", "true");
     }
@@ -207,21 +215,20 @@
     if (preprocessedMainConfig == 'hand') {
       $(timelineBaseId + ' .icon_container[json_name=movimento]').attr("active", "true");
       _setupCheckIcon(mainConfig, 'movimento');
-      _selectTimelineIcon(mainConfig, currentSubConfigName);
     }
-
+    _selectTimelineIcon(mainConfig, currentSubConfigName);
     _setupTimelineListeners(timelineBaseId);
     $(timelineBaseId).show();
   }
-  function _setupTimeline() {
+  function _setupTimeline(toUpdate) {
     var timelineBaseId = '.subconfiguration-panel[mainConfig=' + mainConfig + ']';
     if (_isTimelineLoaded()) {
-      $(timelineBaseId).show();
+    	 _setupTimelineIcons(timelineBaseId, toUpdate);
     } else {
       dynengine.render(baseUrl, '/' + preprocessedMainConfig +
           '/timeline.html', '#selection-panel', false, function() {
-            _setupTimelineIcons(timelineBaseId);
+            _setupTimelineIcons(timelineBaseId, true);
           });
     }
   }
@@ -236,9 +243,12 @@
     currentStep = 0;
     _showCurrentSubconfig();
+  };
+  
+  dynworkflow.finishMainConfigSetup = function(subConfig) {
     // hide the timeline on the first subconfiguration for "hand"
     if (preprocessedMainConfig != 'hand' || _isTimelineLoaded()) {
-      _setupTimeline();
+      _setupTimeline(false);
     }
   };
@@ -250,13 +260,13 @@
     currentStep = 0;
     _showCurrentSubconfig();
-    _setupTimeline();
+    _setupTimeline(true);
   };
   dynworkflow.selectSubConfig = function(subConfig) {
     _selectSubConfig(subConfig);
   };
-
+  
   dynworkflow.userSelectedAnOption = function() {
     _userSelectedAnOption();
   };
@@ -0,0 +1,210 @@
+/*!
+ * jQuery.scrollTo
+ * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
+ * Licensed under MIT
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
+ * @author Ariel Flesler
+ * @version 2.1.2
+ */
+;(function(factory) {
+	'use strict';
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['jquery'], factory);
+	} else if (typeof module !== 'undefined' && module.exports) {
+		// CommonJS
+		module.exports = factory(require('jquery'));
+	} else {
+		// Global
+		factory(jQuery);
+	}
+})(function($) {
+	'use strict';
+
+	var $scrollTo = $.scrollTo = function(target, duration, settings) {
+		return $(window).scrollTo(target, duration, settings);
+	};
+
+	$scrollTo.defaults = {
+		axis:'xy',
+		duration: 0,
+		limit:true
+	};
+
+	function isWin(elem) {
+		return !elem.nodeName ||
+			$.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
+	}		
+
+	$.fn.scrollTo = function(target, duration, settings) {
+		if (typeof duration === 'object') {
+			settings = duration;
+			duration = 0;
+		}
+		if (typeof settings === 'function') {
+			settings = { onAfter:settings };
+		}
+		if (target === 'max') {
+			target = 9e9;
+		}
+
+		settings = $.extend({}, $scrollTo.defaults, settings);
+		// Speed is still recognized for backwards compatibility
+		duration = duration || settings.duration;
+		// Make sure the settings are given right
+		var queue = settings.queue && settings.axis.length > 1;
+		if (queue) {
+			// Let's keep the overall duration
+			duration /= 2;
+		}
+		settings.offset = both(settings.offset);
+		settings.over = both(settings.over);
+
+		return this.each(function() {
+			// Null target yields nothing, just like jQuery does
+			if (target === null) return;
+
+			var win = isWin(this),
+				elem = win ? this.contentWindow || window : this,
+				$elem = $(elem),
+				targ = target, 
+				attr = {},
+				toff;
+
+			switch (typeof targ) {
+				// A number will pass the regex
+				case 'number':
+				case 'string':
+					if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
+						targ = both(targ);
+						// We are done
+						break;
+					}
+					// Relative/Absolute selector
+					targ = win ? $(targ) : $(targ, elem);
+					/* falls through */
+				case 'object':
+					if (targ.length === 0) return;
+					// DOMElement / jQuery
+					if (targ.is || targ.style) {
+						// Get the real position of the target
+						toff = (targ = $(targ)).offset();
+					}
+			}
+
+			var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
+
+			$.each(settings.axis.split(''), function(i, axis) {
+				var Pos	= axis === 'x' ? 'Left' : 'Top',
+					pos = Pos.toLowerCase(),
+					key = 'scroll' + Pos,
+					prev = $elem[key](),
+					max = $scrollTo.max(elem, axis);
+
+				if (toff) {// jQuery / DOMElement
+					attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
+
+					// If it's a dom element, reduce the margin
+					if (settings.margin) {
+						attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0;
+						attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0;
+					}
+
+					attr[key] += offset[pos] || 0;
+
+					if (settings.over[pos]) {
+						// Scroll to a fraction of its width/height
+						attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos];
+					}
+				} else {
+					var val = targ[pos];
+					// Handle percentage values
+					attr[key] = val.slice && val.slice(-1) === '%' ?
+						parseFloat(val) / 100 * max
+						: val;
+				}
+
+				// Number or 'number'
+				if (settings.limit && /^\d+$/.test(attr[key])) {
+					// Check the limits
+					attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
+				}
+
+				// Don't waste time animating, if there's no need.
+				if (!i && settings.axis.length > 1) {
+					if (prev === attr[key]) {
+						// No animation needed
+						attr = {};
+					} else if (queue) {
+						// Intermediate animation
+						animate(settings.onAfterFirst);
+						// Don't animate this axis again in the next iteration.
+						attr = {};
+					}
+				}
+			});
+
+			animate(settings.onAfter);
+
+			function animate(callback) {
+				var opts = $.extend({}, settings, {
+					// The queue setting conflicts with animate()
+					// Force it to always be true
+					queue: true,
+					duration: duration,
+					complete: callback && function() {
+						callback.call(elem, targ, settings);
+					}
+				});
+				$elem.animate(attr, opts);
+			}
+		});
+	};
+
+	// Max scrolling position, works on quirks mode
+	// It only fails (not too badly) on IE, quirks mode.
+	$scrollTo.max = function(elem, axis) {
+		var Dim = axis === 'x' ? 'Width' : 'Height',
+			scroll = 'scroll'+Dim;
+
+		if (!isWin(elem))
+			return elem[scroll] - $(elem)[Dim.toLowerCase()]();
+
+		var size = 'client' + Dim,
+			doc = elem.ownerDocument || elem.document,
+			html = doc.documentElement,
+			body = doc.body;
+
+		return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
+	};
+
+	function both(val) {
+		return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
+	}
+
+	// Add special hooks so that window scroll properties can be animated
+	$.Tween.propHooks.scrollLeft = 
+	$.Tween.propHooks.scrollTop = {
+		get: function(t) {
+			return $(t.elem)[t.prop]();
+		},
+		set: function(t) {
+			var curr = this.get(t);
+			// If interrupt is true and user scrolled, stop animating
+			if (t.options.interrupt && t._last && t._last !== curr) {
+				return $(t.elem).stop();
+			}
+			var next = Math.round(t.now);
+			// Don't waste CPU
+			// Browsers don't render floating point scroll
+			if (curr !== next) {
+				$(t.elem)[t.prop](next);
+				t._last = this.get(t);
+			}
+		}
+	};
+
+	// AMD requirement
+	return $scrollTo;
+});
@@ -24,7 +24,13 @@
   }
   function _parseParameterValue(value) {
-    return !isNaN(value) ? parseInt(value) : value;
+	if (typeof value == "string" && value.toLowerCase() == 'true') {
+		return true;
+	} else if (typeof value == "string" && value.toLowerCase() == 'false') {
+		return false;
+	} else {
+		return !isNaN(value) ? parseInt(value) : value;
+	}
   }
   function _parseTempFacialParameterJSON(tmpJSON) {
@@ -81,7 +81,7 @@
   function _isConfigurationComplete(config) {
     var baseId = '.subconfiguration-panel[mainConfig=' + config + ']';
     var total_config = $(baseId + ' .icon_container[json_name][active=true]').length;
-    var completed_config = $(baseId + ' .icon_container[complete=true]').length;
+    var completed_config = $(baseId + ' .icon_container[active=true][complete=true]').length;
     return completed_config != 0 && total_config == completed_config;
   }
@@ -165,8 +165,9 @@
   function _showSelectionPanel(option) {
     _clearPreviousSelection();
     _selectIcon(option, true);
-    _setupGUIOnSelection(option);
-
+    _setupGUIOnSelection(option, function() {
+    	dynworkflow.finishMainConfigSetup(option);
+    });
     dynworkflow.selectMainConfig(option);
   }
@@ -174,7 +175,9 @@
     var config = _getCurrentMainConfiguration();
     _deselectIcon(config);
     if (_isConfigurationComplete(config)) {
-      _finishConfiguration(config);
+      _finishConfiguration(config, true);
+    } else {
+      _finishConfiguration(config, false);
     }
     _addZoomOutToAvatar(config, function() {
@@ -189,13 +192,19 @@
         (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand'));
   }
-  function _finishConfiguration(config) {
-    _setupCheckIcon(config, true);
-    _setupCheckIcon('avatar-' + config, true);
-    $('#' + config + '-edit .check-icon').show();
-
+  function _finishConfiguration(config, toFinish) {
+    _setupCheckIcon(config, toFinish);
+    _setupCheckIcon('avatar-' + config, toFinish);
+    
+    if (toFinish) {
+    	$('#' + config + '-edit .check-icon').show();
+    } else {
+    	$('#' + config + '-edit .check-icon').hide();
+    }
     if (_canRenderSignVideo()) {
       $('#ready-button').removeClass('disabled');
+    } else {
+      $('#ready-button').addClass('disabled');
     }
   }
@@ -209,11 +218,13 @@
     }
   }
-  function _setupGUIOnSelection(option) {
+  function _setupGUIOnSelection(option, finishCallback) {
     $('#ready-button').fadeOut(300);
     $('.edit-container').fadeOut(300);
     _addZoomInToAvatar(option, function() {
-      $('#selection-panel').fadeIn(300);
+      $('#selection-panel').fadeIn(300, function() {
+    	  finishCallback();
+      });
     });
   }
@@ -274,7 +285,7 @@
   // Render Screen
   function _submitParameterJSON(callback) {
     parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON);
-    //console.log(parsedParameterJSON);
+    console.log(parsedParameterJSON);
     $.ajax({
       type: 'POST',
@@ -15,10 +15,11 @@
 				"articulacao" : ["passo-1", "passo-2"],
 				"configuracao" : ["passo-1", "passo-2"],
 				"orientacao" : ["passo-1"],
+				"plano": ["passo-1"],
 				"raio" : ["passo-1"],
 				"velocidade" : ["passo-1"],
-				"lado_oposto" : ["passo-1"],
-				"sentido_inverso" : ["passo-1"]
+				"sentido_inverso" : ["passo-1"],
+				"lado_oposto" : ["passo-1"]
 			},
 			"retilineo" : {
 				"articulacao-retilineo": ["passo-1", "passo-2", "passo-3", "passo-4"],
@@ -2,23 +2,22 @@
 	<div class="arrow icon_container col-sm-1" name="left-arrow">
 		<img src="{{ server }}/img/left-arrow-icon.png" />
 	</div>
-
-	<div id="facial-subconfiguration-options"
-		class="subconfiguration-options col-sm-10">
-		<div class="icon_container" name="facial-expression"
-			json_name="expressao">
-			<img src="{{ server }}/img/facial-expression-icon.png" />
-		</div>
-		<div class="icon_container" name="facial-expression-velocity"
-			json_name="transicao">
-			<img src="{{ server }}/img/facial-expression-velocity-icon.png" />
-		</div>
-		<div class="icon_container" name="facial-expression-duration"
-			json_name="duracao">
-			<img src="{{ server }}/img/facial-expression-duration-icon.png" />
+	<div class="subconfiguration-options-container col-sm-10">
+		<div class="subconfiguration-options col-sm-12">
+			<div class="icon_container" name="facial-expression"
+				json_name="expressao">
+				<img src="{{ server }}/img/facial-expression-icon.png" />
+			</div>
+			<div class="icon_container" name="facial-expression-velocity"
+				json_name="transicao">
+				<img src="{{ server }}/img/facial-expression-velocity-icon.png" />
+			</div>
+			<div class="icon_container" name="facial-expression-duration"
+				json_name="duracao">
+				<img src="{{ server }}/img/facial-expression-duration-icon.png" />
+			</div>
 		</div>
 	</div>
-
 	<div class="arrow icon_container col-sm-1" name="right-arrow">
 		<img src="{{ server }}/img/right-arrow-icon.png" />
 	</div>
@@ -0,0 +1,23 @@
+<div class="selection-panel-body" mainConfig="{{ hand }}"
+	subConfig="lado_oposto" step="1">
+	<div class="panel-header">
+		<h8>O movimento começa pelo lado oposto?</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="false"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Não</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="true"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Sim</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	defaultConfigurationHandler.setup("{{ hand }}", "lado_oposto", "1");
+</script>
@@ -4,24 +4,23 @@
 		<h8>Escolha o movimento mais parecido</h8>
 	</div>
 	<div class="selection-panel-inner-body">
-		<ul class="rig columns-2">
-			<li><img
-				class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
-
-			<li><img
-				class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/mov/CALAR.gif" value="retilineo" />Retilíneo</li>
+		<ul class="rig columns-1">
+			<li><video src="{{ server }}/img/mov/PONTUAL.webm"
+					preload="metadata" value="pontual"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video> Pontual</li>
+			<li><video src="{{ server }}/img/mov/PONTUAL.webm"
+					preload="metadata" value="retilineo"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video> Retilíneo</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="circular"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video> Circular</li>
 			<!--
-      <li><video src="{{ server }}/img/mov/PONTUAL.webm"
-          preload="metadata" value="pontual"
-          class="box-panel-option selection-panel-option" autoplay loop>
-          <source type="video/webm">
-        </video> Pontual</li>
-      <li><img class="box-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
-      <li><img class="box-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
       <li><img class="box-panel-option selection-panel-option"
         src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
       <li><img class="box-panel-option selection-panel-option"
@@ -35,5 +34,5 @@
 	</div>
 </div>
 <script type="text/javascript">
-  movement.setup("{{ server }}", "{{ hand }}");
+	movement.setup("{{ server }}", "{{ hand }}");
 </script>
@@ -0,0 +1,29 @@
+<div class="selection-panel-body" mainConfig="{{ hand }}"
+	subConfig="plano" step="1">
+	<div class="panel-header">
+		<h8>Escolha o plano do movimento</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="frente-esquerda"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Frente - Esquerda</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="frente-cima"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Frente - Cima
+			</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="esquerda-cima"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Esquerda - Cima</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	defaultConfigurationHandler.setup("{{ hand }}", "plano", "1");
+</script>
@@ -0,0 +1,28 @@
+<div class="selection-panel-body" mainConfig="{{ hand }}"
+	subConfig="raio" step="1">
+	<div class="panel-header">
+		<h8>Escolha o tamanho do raio do movimento</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="pequeno"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Pequeno</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="normal"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Médio</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="grande"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Grande</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	defaultConfigurationHandler.setup("{{ hand }}", "raio", "1");
+</script>
@@ -0,0 +1,23 @@
+<div class="selection-panel-body" mainConfig="{{ hand }}"
+	subConfig="sentido_inverso" step="1">
+	<div class="panel-header">
+		<h8>Escolha o sentido do movimento</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="false"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Horário</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="true"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Anti-horário</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	defaultConfigurationHandler.setup("{{ hand }}", "sentido_inverso", "1");
+</script>
@@ -2,36 +2,64 @@
 	<div class="arrow icon_container col-sm-1" name="left-arrow">
 		<img src="{{ server }}/img/left-arrow-icon.png" />
 	</div>
-	<div class="subconfiguration-options col-sm-10">
-		<div class="icon_container" name="hand-moviment" json_name="movimento">
-			<img src="{{ server }}/img/hand-moviment-icon.png" />
-		</div>
-		<!-- articulacao -->
-		<div class="icon_container" name="hand-articulation"
-			json_name="articulacao">
-			<img src="{{ server }}/img/hand-articulation-icon.png" />
-		</div>
-		<div class="icon_container" name="hand-articulation"
-			json_name="articulacao-retilineo">
-			<img src="{{ server }}/img/hand-articulation-icon.png" />
-		</div>
-		<!-- configuracao -->
-		<div class="icon_container" name="hand-fingers-position"
-			json_name="configuracao">
-			<img src="{{ server }}/img/hand-fingers-position-icon.png" />
-		</div>
-		<div class="icon_container" name="hand-fingers-position"
-			json_name="configuracao-retilineo">
-			<img src="{{ server }}/img/hand-fingers-position-icon.png" />
-		</div>
-		<!-- orientacao -->
-		<div class="icon_container" name="hand-orientation"
-			json_name="orientacao">
-			<img src="{{ server }}/img/hand-orientation-icon.png" />
-		</div>
-		<div class="icon_container" name="hand-orientation"
-			json_name="orientacao-retilineo">
-			<img src="{{ server }}/img/hand-orientation-icon.png" />
+	<div class="subconfiguration-options-container col-sm-10">
+		<div class="subconfiguration-options col-sm-12">
+			<div class="icon_container" name="hand-moviment"
+				json_name="movimento">
+				<img src="{{ server }}/img/hand-moviment-icon.png" />
+			</div>
+			<!-- articulacao -->
+			<div class="icon_container" name="hand-articulation"
+				json_name="articulacao">
+				<img src="{{ server }}/img/hand-articulation-icon.png" />
+			</div>
+			<div class="icon_container" name="hand-articulation"
+				json_name="articulacao-retilineo">
+				<img src="{{ server }}/img/hand-articulation-icon.png" />
+			</div>
+			<!-- configuracao -->
+			<div class="icon_container" name="hand-fingers-position"
+				json_name="configuracao">
+				<img src="{{ server }}/img/hand-fingers-position-icon.png" />
+			</div>
+			<div class="icon_container" name="hand-fingers-position"
+				json_name="configuracao-retilineo">
+				<img src="{{ server }}/img/hand-fingers-position-icon.png" />
+			</div>
+			<!-- orientacao -->
+			<div class="icon_container" name="hand-orientation"
+				json_name="orientacao">
+				<img src="{{ server }}/img/hand-orientation-icon.png" />
+			</div>
+			<div class="icon_container" name="hand-orientation"
+				json_name="orientacao-retilineo">
+				<img src="{{ server }}/img/hand-orientation-icon.png" />
+			</div>
+			<!-- plano -->
+			<div class="icon_container" name="hand-moviment-plane"
+				json_name="plano">
+				<img src="{{ server }}/img/hand-moviment-plane-icon.png" />
+			</div>
+			<!-- raio -->
+			<div class="icon_container" name="hand-moviment-radius"
+				json_name="raio">
+				<img src="{{ server }}/img/hand-moviment-radius-icon.png" />
+			</div>
+			<!-- velocidade -->
+			<div class="icon_container" name="hand-moviment-velocity"
+				json_name="velocidade">
+				<img src="{{ server }}/img/hand-moviment-velocity-icon.png" />
+			</div>
+			<!-- sentido_inverso -->
+			<div class="icon_container" name="hand-moviment-direction"
+				json_name="sentido_inverso">
+				<img src="{{ server }}/img/hand-moviment-direction-icon.png" />
+			</div>
+			<!-- lado_oposto -->
+			<div class="icon_container" name="hand-moviment-direction"
+				json_name="lado_oposto">
+				<img src="{{ server }}/img/hand-moviment-direction-icon.png" />
+			</div>
 		</div>
 	</div>
 	<div class="arrow icon_container col-sm-1" name="right-arrow">
@@ -0,0 +1,28 @@
+<div class="selection-panel-body" mainConfig="{{ hand }}"
+	subConfig="velocidade" step="1">
+	<div class="panel-header">
+		<h8>Escolha a velocidade do movimento</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="lento"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Lento</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="normal"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Normal</li>
+			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+					preload="metadata" value="rapido"
+					class="box-panel-option selection-panel-option" autoplay loop>
+					<source type="video/webm">
+				</video>Rápido</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	defaultConfigurationHandler.setup("{{ hand }}", "velocidade", "1");
+</script>
@@ -173,12 +173,15 @@
 	</div>
 </div>
+<script src="{{ server }}/assets/js/jquery.scrollTo.js"></script>
 <script src="{{ server }}/assets/js/js.cookie.js"></script>
+
 <script src="{{ server }}/assets/js/facial.js"></script>
 <script src="{{ server }}/assets/js/movement.js"></script>
 <script src="{{ server }}/assets/js/articulation.js"></script>
 <script src="{{ server }}/assets/js/configuration.js"></script>
 <script src="{{ server }}/assets/js/orientation.js"></script>
+<script src="{{ server }}/assets/js/defaultConfigurationHandler.js"></script>
 <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
 <script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script>
 <script src="{{ server }}/assets/js/tmpJSONParser.js"></script>
@@ -0,0 +1,13 @@		@@ -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));
@@ -0,0 +1,210 @@		@@ -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	+});
@@ -0,0 +1,23 @@		@@ -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>
@@ -0,0 +1,29 @@		@@ -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 @@		@@ -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>
	@@ -2,36 +2,64 @@		@@ -2,36 +2,64 @@
2	<div class="arrow icon_container col-sm-1" name="left-arrow">	2	<div class="arrow icon_container col-sm-1" name="left-arrow">
3	<img src="{{ server }}/img/left-arrow-icon.png" />	3	<img src="{{ server }}/img/left-arrow-icon.png" />
4	</div>	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	</div>	63	</div>
36	</div>	64	</div>
37	<div class="arrow icon_container col-sm-1" name="right-arrow">	65	<div class="arrow icon_container col-sm-1" name="right-arrow">