Versão inicial do módulo de controle do workflow de seleção.

Adabriand Furtado
1 parent e0c12d9c
Showing 17 changed files with 718 additions and 32 deletions Show diff stats
view/assets/js/articulation.js
view/assets/js/configuration.js
view/assets/js/dynamic-loading-engine.js
view/assets/js/dynamic-selection-workflow.js
view/assets/js/movement.js
view/assets/js/orientation.js
view/assets/js/wikilibras.js
view/conf/selection-workflow-json
view/facial/timeline.html
view/hand/articulacao/passo-1.html
view/hand/articulacao/passo-2.html
view/hand/configuracao/passo-1.html
view/hand/configuracao/passo-2.html
view/hand/movimento/passo-1.html
view/hand/orientacao/passo-1.html
view/hand/timeline.html
view/template.html
@@ -11,7 +11,7 @@
  
 	function _setupModuleZ(hand, y) {
 		if (typeof y == "undefined") return;
-		var articulation_z = "#" + hand + "-articulation .module-z";
+		var articulation_z = "." + hand + "-articulation .module-z";
 		$(articulation_z + " .ball-selector").hide();
 		$(articulation_z + " .row-number-" + y + " .ball-selector").show();
  
@@ -23,8 +23,8 @@
 	}
  
 	function _setupBallSelector(hand) {
-		var articulation_x_y = "#" + hand + "-articulation .module-x-y"; 
-		$(articulation_x_y + " .ball-selector").on("click", function(a) {
+		var articulation_x_y = "#" + hand + "-articulation-x-y .module-x-y"; 
+		$(articulation_x_y + " .ball-selector").off("click").on("click", function(a) {
 		    var b = $(a.target);
 		    if (!b.hasClass("ball-selector")) return;
 		    var c = b.parent(".grid-row"),
@@ -33,17 +33,19 @@
 		        g = c.attr("data-y");
 		    d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
 		    _setupModuleZ(hand, g);
-		    _updateParameterJSON(hand);
+		    //_updateParameterJSON(hand);
+		    dynworkflow.nextSubConfig();
 		});
-		var articulation_z = "#" + hand + "-articulation .module-z";
-		$(articulation_z + " .ball-selector").on("click", function(a) {
+		var articulation_z = "#" + hand + "-articulation-z .module-z";
+		$(articulation_z + " .ball-selector").off("click").on("click", function(a) {
 		    var b = $(a.target);
 		    if (!b.hasClass("ball-selector")) return;
 		    var c = b.parent(".grid-row"),
 		        e = $(articulation_z),
 		        h = b.attr("data-z");
 		    b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
-		    _updateParameterJSON(hand);
+		    //_updateParameterJSON(hand);
+		    dynworkflow.nextSubConfig();
 		});
 	}
  
@@ -57,8 +59,8 @@
 	}
  
 	function _readValue(hand) {
-		var articulation_x_y = "#" + hand + "-articulation .module-x-y";
-		var articulation_z = "#" + hand + "-articulation .module-z";
+		var articulation_x_y = "." + hand + "-articulation .module-x-y";
+		var articulation_z = "." + hand + "-articulation .module-z";
 		var x = parseInt($(articulation_x_y).attr("data-x"));
 		var y = parseInt($(articulation_x_y).attr("data-y"));
 		var z = $(articulation_z).attr("data-z");
@@ -0,0 +1,24 @@
+(function(configuration, $, undefined) {
+	
+	configuration.setupFingersGroup = function() {
+		$("#right-hand-fingers-position-group .selection-panel-option").off("click").on(
+				"click", function() {
+				    $("#right-hand-fingers-position-group .selection-panel-option[select=true]")
+				    .removeAttr("select");
+				    $(this).attr("select", true);
+				    dynworkflow.nextSubConfig();
+		});
+	};
+	
+	configuration.setupFingersPosition = function() {
+		$("#right-hand-fingers-position .selection-panel-option").off("click").on(
+				"click", function() {
+					dynworkflow.nextSubConfig();
+		});
+		
+		var finger_group = $("#right-hand-fingers-position-group .selection-panel-option[select=true]").attr("group");
+		$("#right-hand-fingers-position .finger-group").hide();
+		$("#right-hand-fingers-position .finger-group[group=" + finger_group + "]").show();
+	}
+	
+}(window.configuration = window.configuration || {}, jQuery));
 \ No newline at end of file
@@ -5,12 +5,18 @@
     return data.replace(/{{ server }}/g, url);
   };
  
-  dynengine.render = function(serverUrl, templatePath, target, callback) {
+  dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
     var url = serverUrl + templatePath;
     $.get(url, function(data) {
       // TODO replace or append boolean
       console.log('got: ' + url);
-      $(target).append(_preprocessHtml(data, serverUrl));
+      
+      var processedHtml = _preprocessHtml(data, serverUrl);
+      if (prepend) {
+    	  $(target).prepend(processedHtml);
+      } else {
+    	  $(target).append(processedHtml);
+      }
     })
     .done(function() {
       callback && callback(); // call if defined
@@ -27,7 +33,7 @@
       console.log('click right hand on panel');
     });
  
-    $('#avatar-body-right-hand').bind('click', function() {
+    /*$('#avatar-body-right-hand').bind('click', function() {
       console.log('click avatar hand');
       dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() {
         $('.movimento-pontual').bind('click', function() {
@@ -40,8 +46,8 @@
         });
       });
  
-    });
+    });*/
  
   };
  
-}(window.dynengine = window.wikilibras || {}, jQuery));
+}(window.dynengine = window.dynengine || {}, jQuery));
@@ -0,0 +1,121 @@
+(function(dynworkflow, $, undefined) {
+
+	var jsonWF = {};
+	var baseUrl = "";
+	
+	var mainConfig = "";
+	var currentSubconfigParent = "";
+	var currentSubconfig = "";
+	var currentSubConfigName = "";
+	var currentStep = 0;
+	
+	function _preprocessConfig(config) {
+		config = config.replace("right-hand", "hand");
+		config = config.replace("left-hand", "hand");
+		return config;
+	};
+	
+	function _getFirstKey(json) {
+	    var first_key = undefined;
+	    for (first_key in json) break;
+	    return first_key;
+	}
+	
+	function _getAttributes(json) {
+		var result = [];
+	    for (attr in json) {
+	    	result.push(attr);
+	    }
+	    return result;
+	}
+	
+	function _getNextSubConfig() {
+	    var attrs = _getAttributes(currentSubconfigParent);
+	    for (var i = 0; i < attrs.length; i++) {
+	    	if (attrs[i] == currentSubConfigName && i < attrs.length - 1) {
+	    		return attrs[i+1];
+	    	}
+	    }
+	    return -1;
+	}
+	
+	function _showCurrentSubconfig() {
+		_showSubconfiguration(currentSubConfigName, currentSubconfig[currentStep]);
+	}
+	
+	function _showSubconfiguration(subconfig, step) {
+		var step = typeof step == "undefined" ? "passo-1" : step;
+		$(".selection-panel-body").hide();
+		dynengine.render(baseUrl, "/" + mainConfig + "/" + subconfig +
+				"/" + step + ".html", "#selection-panel", true);
+	}
+	
+	dynworkflow.selectMainConfig = function(config) {
+		mainConfig = _preprocessConfig(config);
+		currentSubConfigName = _getFirstKey(jsonWF[mainConfig]);
+		currentSubconfig = jsonWF[mainConfig][currentSubConfigName];
+		currentSubconfigParent = jsonWF[mainConfig];
+		currentStep = 0;
+		
+		_showCurrentSubconfig();
+	}
+	
+	dynworkflow.selectMovement = function(movement) {
+		var subconfigJSON = currentSubconfig[movement]
+		currentSubConfigName = _getFirstKey(subconfigJSON);
+		currentSubconfigParent = subconfigJSON;
+		currentSubconfig = subconfigJSON[currentSubConfigName];
+		currentStep = 0;
+		
+		_showCurrentSubconfig();
+	}
+	
+	dynworkflow.selectSubConfig = function(config) {
+		currentSubConfigName = config;
+		currentSubconfig = currentSubconfigParent[currentSubConfigName];
+		currentStep = 0;
+		
+		_showCurrentSubconfig();
+	}
+	
+	dynworkflow.nextSubConfig = function() {
+		currentStep = currentStep + 1;
+		
+		if (currentStep < currentSubconfig.length) {
+			_showCurrentSubconfig();
+		} else {
+			var nextSubConfig = _getNextSubConfig();
+			
+			if (nextSubConfig != -1) {
+				dynworkflow.selectSubConfig(nextSubConfig);
+			} else {
+				wikilibras.hideSelectionPanel();
+			}
+		}
+	}
+	
+	dynworkflow.setupTimeline = function() {
+		dynengine.render(baseUrl, "/" + mainConfig + "/timeline.html", "#selection-panel", false, function() {
+			$(".subconfiguration-options .icon_container").hide();
+
+			for (var name in currentSubconfigParent) {
+				$(".subconfiguration-options .icon_container[json_name=" + name + "]").show();
+			}
+			if (mainConfig == "hand") {
+				$(".subconfiguration-options .icon_container[json_name=movimento]").show();
+			}
+			
+			$(".subconfiguration-panel").show();
+		});
+	}
+
+	dynworkflow.load = function() {
+		baseUrl = $('#server-url').data('url');
+		$.get(baseUrl + "/conf/selection-workflow-json", function(result) {
+			jsonWF = $.parseJSON(result);
+		}).fail(function() {
+			console.log("Failed to load the workflow configuration");
+		});
+	}
+
+}(window.dynworkflow = window.dynworkflow || {}, jQuery));
 \ No newline at end of file
@@ -0,0 +1,14 @@
+(function(movement, $, undefined) {
+
+	var base_url = "";
+
+	movement.setup = function(serverhost) {
+		base_url = serverhost;
+
+		$("#right-hand-moviment .selection-panel-option").off("click").on(
+				"click", function() {
+					dynworkflow.selectMovement($(this).attr("value"));
+					dynworkflow.setupTimeline();
+		});
+	};
+}(window.movement = window.movement || {}, jQuery));
 \ No newline at end of file
@@ -0,0 +1,10 @@
+(function(orientation, $, undefined) {
+	
+	orientation.setup = function() {
+		$("#right-hand-orientation .selection-panel-option").off("click").on(
+				"click", function() {
+				    dynworkflow.nextSubConfig();
+		});
+	};
+	
+}(window.orientation = window.orientation || {}, jQuery));
 \ No newline at end of file
@@ -178,6 +178,8 @@
       _setupHandSelectionPanel(option);
     }
     _setupGUIOnSelection(option);
+    
+    dynworkflow.selectMainConfig(option);
   }
  
   function _hideSelectionPanel() {
@@ -450,8 +452,7 @@
   // JSON
   function _getFirstKey(json) {
     var first_key = undefined;
-    for (first_key in json)
-    ;
+    for (first_key in json) break;
     return first_key;
   }
  
@@ -506,9 +507,9 @@
   }
  
   function _setupSelectionPanel() {
-    // $("#selection-panel .x").off("click").on("click", function() {
-    // 	_hideSelectionPanel();
-    // });
+	$("#selection-panel .x").off("click").on("click", function() {
+		_hideSelectionPanel();
+	});
     // $(".selection-panel-body .selection-panel-option").off("click").on(
     // 		"click", function() {
     // 			_selectConfig(this);
@@ -594,6 +595,7 @@
       $("#initial-screen").hide();
       $("#configuration-screen").show();
       dynengine.load();
+      dynworkflow.load();
       console.log('dynengine loaded');
     });
     $("#ready-button").off("click").on("click", function() {
@@ -623,8 +625,6 @@
     _setupConfigurationPanel();
     _setupSelectionPanel();
     _setupMainScreen(task, deferred);
-
-    articulation.setup(base_url);
   }
  
   function _saveAnswer(task, deferred) {
@@ -678,5 +678,11 @@
   wikilibras.updateParameterJSON = function(config, value) {
     _updateParameterJSON(config, value);
   }
+  
+  wikilibras.hideSelectionPanel = function() {
+	  _hideSelectionPanel();
+  }
+  
+  
  
 }(window.wikilibras = window.wikilibras || {}, jQuery));
@@ -0,0 +1,25 @@
+{
+	"facial" : {
+		"expressao" : ["passo-1"],
+		"transicao" : ["passo-1"],
+		"duracao" : ["passo-1"]
+	},
+	"hand" : {
+		"movimento" : {
+			"pontual" : {
+				"articulacao" : ["passo-1", "passo-2"],
+				"configuracao" : ["passo-1", "passo-2"],
+				"orientacao" : ["passo-1"]
+			},
+			"circular" : {
+				"articulacao" : ["passo-1", "passo-2"],
+				"configuracao" : ["passo-1", "passo-2"],
+				"orientacao" : ["passo-1"],
+				"raio" : ["passo-1"],
+				"velocidade" : ["passo-1"],
+				"lado_oposto" : ["passo-1"],
+				"sentido_inverso" : ["passo-1"]
+			}
+		}
+	}
+}
 \ No newline at end of file
@@ -0,0 +1,28 @@
+<div class="subconfiguration-panel col-sm-12">
+	<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"
+			panel="facial-expression" previous="facial-expression"
+			next="facial-expression-velocity">
+			<img src="{{ server }}/img/facial-expression-icon.png" />
+		</div>
+		<div class="icon_container" name="facial-expression-velocity"
+			panel="facial-expression-velocity" previous="facial-expression"
+			next="facial-expression-duration">
+			<img src="{{ server }}/img/facial-expression-velocity-icon.png" />
+		</div>
+		<div class="icon_container" name="facial-expression-duration"
+			panel="facial-expression-duration"
+			previous="facial-expression-velocity" next="end">
+			<img src="{{ server }}/img/facial-expression-duration-icon.png" />
+		</div>
+	</div>
+
+	<div class="arrow icon_container col-sm-1" name="right-arrow">
+		<img src="{{ server }}/img/right-arrow-icon.png" />
+	</div>
+</div>
@@ -0,0 +1,75 @@
+<div id="right-hand-articulation-x-y" class="selection-panel-body">
+	<div class="panel-header">
+		<h8>Onde é feito o sinal?</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<div data-x="" data-y=""
+			class="module-x-y grid gray-background right-hand-gray-front-avatar active">
+			<div class=grid-selectors>
+				<div class="grid-row row-number-1" data-y=1>
+					<div class="ball-selector selection-panel-option ball-1" data-x=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-x=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-x=3></div>
+					<div class="ball-selector selection-panel-option ball-4" data-x=4></div>
+					<div class="ball-selector selection-panel-option ball-5" data-x=5></div>
+					<div class="ball-selector selection-panel-option ball-6" data-x=6></div>
+					<div class="ball-selector selection-panel-option ball-7" data-x=7></div>
+					<div class="ball-selector selection-panel-option ball-8" data-x=8></div>
+					<div class="ball-selector selection-panel-option ball-9" data-x=9></div>
+					<div class="ball-selector selection-panel-option ball-10" data-x=10></div>
+				</div>
+				<div class="grid-row row-number-2" data-y=2>
+					<div class="ball-selector selection-panel-option ball-1" data-x=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-x=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-x=3></div>
+					<div class="ball-selector selection-panel-option ball-4" data-x=4></div>
+					<div class="ball-selector selection-panel-option ball-5" data-x=5></div>
+					<div class="ball-selector selection-panel-option ball-6" data-x=6></div>
+					<div class="ball-selector selection-panel-option ball-7" data-x=7></div>
+					<div class="ball-selector selection-panel-option ball-8" data-x=8></div>
+					<div class="ball-selector selection-panel-option ball-9" data-x=9></div>
+					<div class="ball-selector selection-panel-option ball-10" data-x=10></div>
+				</div>
+				<div class="grid-row row-number-3" data-y=3>
+					<div class="ball-selector selection-panel-option ball-1" data-x=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-x=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-x=3></div>
+					<div class="ball-selector selection-panel-option ball-4" data-x=4></div>
+					<div class="ball-selector selection-panel-option ball-5" data-x=5></div>
+					<div class="ball-selector selection-panel-option ball-6" data-x=6></div>
+					<div class="ball-selector selection-panel-option ball-7" data-x=7></div>
+					<div class="ball-selector selection-panel-option ball-8" data-x=8></div>
+					<div class="ball-selector selection-panel-option ball-9" data-x=9></div>
+					<div class="ball-selector selection-panel-option ball-10" data-x=10></div>
+				</div>
+				<div class="grid-row row-number-4" data-y=4>
+					<div class="ball-selector selection-panel-option ball-1" data-x=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-x=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-x=3></div>
+					<div class="ball-selector selection-panel-option ball-4" data-x=4></div>
+					<div class="ball-selector selection-panel-option ball-5" data-x=5></div>
+					<div class="ball-selector selection-panel-option ball-6" data-x=6></div>
+					<div class="ball-selector selection-panel-option ball-7" data-x=7></div>
+					<div class="ball-selector selection-panel-option ball-8" data-x=8></div>
+					<div class="ball-selector selection-panel-option ball-9" data-x=9></div>
+					<div class="ball-selector selection-panel-option ball-10" data-x=10></div>
+				</div>
+				<div class="grid-row row-number-5" data-y=5>
+					<div class="ball-selector selection-panel-option ball-1" data-x=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-x=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-x=3></div>
+					<div class="ball-selector selection-panel-option ball-4" data-x=4></div>
+					<div class="ball-selector selection-panel-option ball-5" data-x=5></div>
+					<div class="ball-selector selection-panel-option ball-6" data-x=6></div>
+					<div class="ball-selector selection-panel-option ball-7" data-x=7></div>
+					<div class="ball-selector selection-panel-option ball-8" data-x=8></div>
+					<div class="ball-selector selection-panel-option ball-9" data-x=9></div>
+					<div class="ball-selector selection-panel-option ball-10" data-x=10></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	articulation.setup("{{ server }}");
+</script>
 \ No newline at end of file
@@ -0,0 +1,37 @@
+<div id="right-hand-articulation-z" class="selection-panel-body">
+	<div class="panel-header">
+		<h8>Escolha a distância entre a mão e o corpo</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<div data-z="" class="module-z grid gray-background gray-side-avatar">
+			<div class="grid-selectors pull-right">
+				<div class="grid-row row-number-1">
+					<div class="ball-selector selection-panel-option ball-1" data-z=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-z=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-z=3></div>
+				</div>
+				<div class="grid-row row-number-2">
+					<div class="ball-selector selection-panel-option ball-1" data-z=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-z=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-z=3></div>
+				</div>
+				<div class="grid-row row-number-3">
+					<div class="ball-selector selection-panel-option ball-1" data-z=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-z=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-z=3></div>
+				</div>
+				<div class="grid-row row-number-4">
+					<div class="ball-selector selection-panel-option ball-1" data-z=1></div>
+					<div class="ball-selector selection-panel-option ball-2" data-z=2></div>
+					<div class="ball-selector selection-panel-option ball-3" data-z=3></div>
+				</div>
+				<div class="grid-row row-number-5">
+					<div class="ball-selector selection-panel-option ball-1" data-z=1></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	articulation.setup("{{ server }}");
+</script>
 \ No newline at end of file
@@ -0,0 +1,30 @@
+<div id="right-hand-fingers-position-group" class="selection-panel-body">
+	<div class="panel-header">
+		<h8>Escolha a posição mais parecida dos dedos</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-3">
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0007.png" group="0" />
+				0.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0014.png" group="1" />
+				1.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0045.png" group="2" />
+				2.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0048.png" group="3" />
+				3.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0040.png" group="4" />
+				4.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/cmd/0000.png" group="5" />
+				5.</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	configuration.setupFingersGroup();
+</script>
 \ No newline at end of file
@@ -0,0 +1,214 @@
+<div id="right-hand-fingers-position" class="selection-panel-body">
+	<div class="panel-header">
+		<h8>Escolha a posição dos dedos</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<div class="finger-group" group="0">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0001.png"
+					value="1" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0002.png"
+					value="2" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0007.png"
+					value="7" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0008.png"
+					value="8" /> 4.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0009.png"
+					value="9" /> 5.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0010.png"
+					value="10" /> 6.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0011.png"
+					value="11" /> 7.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0016.png"
+					value="16" /> 8.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0017.png"
+					value="17" /> 9.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0018.png"
+					value="18" /> 10.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0019.png"
+					value="19" /> 11.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0020.png"
+					value="20" /> 12.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0021.png"
+					value="21" /> 13.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0022.png"
+					value="22" /> 14.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0023.png"
+					value="23" /> 15.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0024.png"
+					value="24" /> 16.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0058.png"
+					value="58" /> 17.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0059.png"
+					value="59" /> 18.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0060.png"
+					value="60" /> 19.</li>
+			</ul>
+		</div>
+		<div class="finger-group" group="1">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0003.png"
+					value="3" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0005.png"
+					value="5" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0006.png"
+					value="6" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0012.png"
+					value="12" /> 4.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0013.png"
+					value="13" /> 5.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0014.png"
+					value="14" /> 6.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0030.png"
+					value="30" /> 7.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0052.png"
+					value="52" /> 8.</li>
+			</ul>
+		</div>
+		<div class="finger-group" group="2">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0004.png"
+					value="4" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0015.png"
+					value="15" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0029.png"
+					value="29" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0031.png"
+					value="31" /> 4.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0032.png"
+					value="32" /> 5.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0035.png"
+					value="35" /> 6.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0036.png"
+					value="36" /> 7.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0045.png"
+					value="45" /> 8.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0051.png"
+					value="51" /> 9.</li>
+			</ul>
+		</div>
+		<div class="finger-group" group="3">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0033.png"
+					value="33" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0034.png"
+					value="34" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0037.png"
+					value="37" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0039.png"
+					value="39" /> 4.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0043.png"
+					value="43" /> 5.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0044.png"
+					value="44" /> 6.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0046.png"
+					value="46" /> 7.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0047.png"
+					value="47" /> 8.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0048.png"
+					value="48" /> 9.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0049.png"
+					value="49" /> 10.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0050.png"
+					value="50" /> 11.</li>
+			</ul>
+		</div>
+		<div class="finger-group" group="4">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0038.png"
+					value="38" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0040.png"
+					value="40" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0041.png"
+					value="41" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0042.png"
+					value="42" /> 4.</li>
+			</ul>
+		</div>
+		<div class="finger-group" group="5">
+			<ul class="rig columns-4">
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0025.png"
+					value="25" /> 1.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0026.png"
+					value="26" /> 2.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0027.png"
+					value="27" /> 3.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0028.png"
+					value="28" /> 4.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0053.png"
+					value="53" /> 5.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0054.png"
+					value="54" /> 6.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0055.png"
+					value="55" /> 7.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0056.png"
+					value="56" /> 8.</li>
+				<li><img class="box-panel-option selection-panel-option"
+					src="{{ server }}/img/cmd/0057.png"
+					value="57" /> 9.</li>
+			</ul>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	configuration.setupFingersPosition();
+</script>
 \ No newline at end of file
@@ -0,0 +1,35 @@
+<div id="right-hand-moviment" class="selection-panel-body"
+	name="movimento">
+	<div class="panel-header">
+		<h8>Escolha o movimento mais parecido</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-2">
+			<li class="movimento-pontual"><img
+				class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</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"
+				src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
+				 -->
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	movement.setup("{{ server }}");
+</script>
@@ -0,0 +1,37 @@
+<div id="right-hand-orientation" class="selection-panel-body"
+	name="orientacao">
+	<div class="panel-header">
+		<h8>Palma da mão</h8>
+	</div>
+	<div class="selection-panel-inner-body">
+		<ul class="rig columns-3">
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/01.png" value="68" />1.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/02.png" value="66" />2.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/03.png" value="64" />3.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/04.png" value="2" />4.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/05.png" value="9" />5.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/06.png" value="16" />6.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/07.png" value="92" />7.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/08.png" value="90" />8.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/09.png" value="88" />9.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/10.png" value="4" />10.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/11.png" value="11" />11.</li>
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/ord/12.png" value="18" />12.</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+	orientation.setup();
+</script>
 \ No newline at end of file
@@ -0,0 +1,29 @@
+<div class="subconfiguration-panel col-sm-12">
+  <div class="arrow icon_container col-sm-1" name="left-arrow">
+    <img src="{{ server }}/img/left-arrow-icon.png" />
+  </div>
+
+  <div id="right-hand-subconfiguration-options"
+  	class="subconfiguration-options col-sm-10">
+  	<div class="icon_container" name="hand-moviment"
+  		panel="right-hand-moviment" json_name="movimento">
+  		<img src="{{ server }}/img/hand-moviment-icon.png" />
+  	</div>
+  	<div class="icon_container" name="hand-articulation"
+  		panel="right-hand-articulation" json_name="articulacao">
+  		<img src="{{ server }}/img/hand-articulation-icon.png" />
+  	</div>
+  	<div class="icon_container" name="hand-fingers-position"
+  		panel="right-hand-fingers-position" json_name="configuracao">
+  		<img src="{{ server }}/img/hand-fingers-position-icon.png" />
+  	</div>
+  	<div class="icon_container" name="hand-orientation"
+  		panel="right-hand-orientation" json_name="orientacao">
+  		<img src="{{ server }}/img/hand-orientation-icon.png" />
+  	</div>
+  </div>
+
+  <div class="arrow icon_container col-sm-1" name="right-arrow">
+    <img src="{{ server }}/img/right-arrow-icon.png" />
+  </div>
+</div>
@@ -114,17 +114,6 @@
  
 					{{ facialConfig.selectionPanel() }}
  
-					<div class="subconfiguration-panel col-sm-12">
-						<div class="arrow icon_container col-sm-1" name="left-arrow">
-							<img src="{{ server }}/img/left-arrow-icon.png" />
-						</div>
-
-						{{ facialConfig.subconfigPanel() }}
-
-						<div class="arrow icon_container col-sm-1" name="right-arrow">
-							<img src="{{ server }}/img/right-arrow-icon.png" />
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>
@@ -191,9 +180,13 @@
 </div>
  
 <script src="{{ server }}/assets/js/js.cookie.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/wikilibras.js"></script>
 <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
+<script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script>
  
 <script type="text/javascript">
 	wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
...	...	@@ -11,7 +11,7 @@
11	11
12	12	function _setupModuleZ(hand, y) {
13	13	if (typeof y == "undefined") return;
14		- var articulation_z = "#" + hand + "-articulation .module-z";
	14	+ var articulation_z = "." + hand + "-articulation .module-z";
15	15	$(articulation_z + " .ball-selector").hide();
16	16	$(articulation_z + " .row-number-" + y + " .ball-selector").show();
17	17
...	...	@@ -23,8 +23,8 @@
23	23	}
24	24
25	25	function _setupBallSelector(hand) {
26		- var articulation_x_y = "#" + hand + "-articulation .module-x-y";
27		- $(articulation_x_y + " .ball-selector").on("click", function(a) {
	26	+ var articulation_x_y = "#" + hand + "-articulation-x-y .module-x-y";
	27	+ $(articulation_x_y + " .ball-selector").off("click").on("click", function(a) {
28	28	var b = $(a.target);
29	29	if (!b.hasClass("ball-selector")) return;
30	30	var c = b.parent(".grid-row"),
...	...	@@ -33,17 +33,19 @@
33	33	g = c.attr("data-y");
34	34	d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
35	35	_setupModuleZ(hand, g);
36		- _updateParameterJSON(hand);
	36	+ //_updateParameterJSON(hand);
	37	+ dynworkflow.nextSubConfig();
37	38	});
38		- var articulation_z = "#" + hand + "-articulation .module-z";
39		- $(articulation_z + " .ball-selector").on("click", function(a) {
	39	+ var articulation_z = "#" + hand + "-articulation-z .module-z";
	40	+ $(articulation_z + " .ball-selector").off("click").on("click", function(a) {
40	41	var b = $(a.target);
41	42	if (!b.hasClass("ball-selector")) return;
42	43	var c = b.parent(".grid-row"),
43	44	e = $(articulation_z),
44	45	h = b.attr("data-z");
45	46	b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
46		- _updateParameterJSON(hand);
	47	+ //_updateParameterJSON(hand);
	48	+ dynworkflow.nextSubConfig();
47	49	});
48	50	}
49	51
...	...	@@ -57,8 +59,8 @@
57	59	}
58	60
59	61	function _readValue(hand) {
60		- var articulation_x_y = "#" + hand + "-articulation .module-x-y";
61		- var articulation_z = "#" + hand + "-articulation .module-z";
	62	+ var articulation_x_y = "." + hand + "-articulation .module-x-y";
	63	+ var articulation_z = "." + hand + "-articulation .module-z";
62	64	var x = parseInt($(articulation_x_y).attr("data-x"));
63	65	var y = parseInt($(articulation_x_y).attr("data-y"));
64	66	var z = $(articulation_z).attr("data-z");
...	...
...	...	@@ -0,0 +1,24 @@
	1	+(function(configuration, $, undefined) {
	2	+
	3	+ configuration.setupFingersGroup = function() {
	4	+ $("#right-hand-fingers-position-group .selection-panel-option").off("click").on(
	5	+ "click", function() {
	6	+ $("#right-hand-fingers-position-group .selection-panel-option[select=true]")
	7	+ .removeAttr("select");
	8	+ $(this).attr("select", true);
	9	+ dynworkflow.nextSubConfig();
	10	+ });
	11	+ };
	12	+
	13	+ configuration.setupFingersPosition = function() {
	14	+ $("#right-hand-fingers-position .selection-panel-option").off("click").on(
	15	+ "click", function() {
	16	+ dynworkflow.nextSubConfig();
	17	+ });
	18	+
	19	+ var finger_group = $("#right-hand-fingers-position-group .selection-panel-option[select=true]").attr("group");
	20	+ $("#right-hand-fingers-position .finger-group").hide();
	21	+ $("#right-hand-fingers-position .finger-group[group=" + finger_group + "]").show();
	22	+ }
	23	+
	24	+}(window.configuration = window.configuration \|\| {}, jQuery));
0	25	\ No newline at end of file
...	...
...	...	@@ -5,12 +5,18 @@
5	5	return data.replace(/{{ server }}/g, url);
6	6	};
7	7
8		- dynengine.render = function(serverUrl, templatePath, target, callback) {
	8	+ dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
9	9	var url = serverUrl + templatePath;
10	10	$.get(url, function(data) {
11	11	// TODO replace or append boolean
12	12	console.log('got: ' + url);
13		- $(target).append(_preprocessHtml(data, serverUrl));
	13	+
	14	+ var processedHtml = _preprocessHtml(data, serverUrl);
	15	+ if (prepend) {
	16	+ $(target).prepend(processedHtml);
	17	+ } else {
	18	+ $(target).append(processedHtml);
	19	+ }
14	20	})
15	21	.done(function() {
16	22	callback && callback(); // call if defined
...	...	@@ -27,7 +33,7 @@
27	33	console.log('click right hand on panel');
28	34	});
29	35
30		- $('#avatar-body-right-hand').bind('click', function() {
	36	+ /*$('#avatar-body-right-hand').bind('click', function() {
31	37	console.log('click avatar hand');
32	38	dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() {
33	39	$('.movimento-pontual').bind('click', function() {
...	...	@@ -40,8 +46,8 @@
40	46	});
41	47	});
42	48
43		- });
	49	+ });*/
44	50
45	51	};
46	52
47		-}(window.dynengine = window.wikilibras \|\| {}, jQuery));
	53	+}(window.dynengine = window.dynengine \|\| {}, jQuery));
...	...
...	...	@@ -0,0 +1,121 @@
	1	+(function(dynworkflow, $, undefined) {
	2	+
	3	+ var jsonWF = {};
	4	+ var baseUrl = "";
	5	+
	6	+ var mainConfig = "";
	7	+ var currentSubconfigParent = "";
	8	+ var currentSubconfig = "";
	9	+ var currentSubConfigName = "";
	10	+ var currentStep = 0;
	11	+
	12	+ function _preprocessConfig(config) {
	13	+ config = config.replace("right-hand", "hand");
	14	+ config = config.replace("left-hand", "hand");
	15	+ return config;
	16	+ };
	17	+
	18	+ function _getFirstKey(json) {
	19	+ var first_key = undefined;
	20	+ for (first_key in json) break;
	21	+ return first_key;
	22	+ }
	23	+
	24	+ function _getAttributes(json) {
	25	+ var result = [];
	26	+ for (attr in json) {
	27	+ result.push(attr);
	28	+ }
	29	+ return result;
	30	+ }
	31	+
	32	+ function _getNextSubConfig() {
	33	+ var attrs = _getAttributes(currentSubconfigParent);
	34	+ for (var i = 0; i < attrs.length; i++) {
	35	+ if (attrs[i] == currentSubConfigName && i < attrs.length - 1) {
	36	+ return attrs[i+1];
	37	+ }
	38	+ }
	39	+ return -1;
	40	+ }
	41	+
	42	+ function _showCurrentSubconfig() {
	43	+ _showSubconfiguration(currentSubConfigName, currentSubconfig[currentStep]);
	44	+ }
	45	+
	46	+ function _showSubconfiguration(subconfig, step) {
	47	+ var step = typeof step == "undefined" ? "passo-1" : step;
	48	+ $(".selection-panel-body").hide();
	49	+ dynengine.render(baseUrl, "/" + mainConfig + "/" + subconfig +
	50	+ "/" + step + ".html", "#selection-panel", true);
	51	+ }
	52	+
	53	+ dynworkflow.selectMainConfig = function(config) {
	54	+ mainConfig = _preprocessConfig(config);
	55	+ currentSubConfigName = _getFirstKey(jsonWF[mainConfig]);
	56	+ currentSubconfig = jsonWF[mainConfig][currentSubConfigName];
	57	+ currentSubconfigParent = jsonWF[mainConfig];
	58	+ currentStep = 0;
	59	+
	60	+ _showCurrentSubconfig();
	61	+ }
	62	+
	63	+ dynworkflow.selectMovement = function(movement) {
	64	+ var subconfigJSON = currentSubconfig[movement]
	65	+ currentSubConfigName = _getFirstKey(subconfigJSON);
	66	+ currentSubconfigParent = subconfigJSON;
	67	+ currentSubconfig = subconfigJSON[currentSubConfigName];
	68	+ currentStep = 0;
	69	+
	70	+ _showCurrentSubconfig();
	71	+ }
	72	+
	73	+ dynworkflow.selectSubConfig = function(config) {
	74	+ currentSubConfigName = config;
	75	+ currentSubconfig = currentSubconfigParent[currentSubConfigName];
	76	+ currentStep = 0;
	77	+
	78	+ _showCurrentSubconfig();
	79	+ }
	80	+
	81	+ dynworkflow.nextSubConfig = function() {
	82	+ currentStep = currentStep + 1;
	83	+
	84	+ if (currentStep < currentSubconfig.length) {
	85	+ _showCurrentSubconfig();
	86	+ } else {
	87	+ var nextSubConfig = _getNextSubConfig();
	88	+
	89	+ if (nextSubConfig != -1) {
	90	+ dynworkflow.selectSubConfig(nextSubConfig);
	91	+ } else {
	92	+ wikilibras.hideSelectionPanel();
	93	+ }
	94	+ }
	95	+ }
	96	+
	97	+ dynworkflow.setupTimeline = function() {
	98	+ dynengine.render(baseUrl, "/" + mainConfig + "/timeline.html", "#selection-panel", false, function() {
	99	+ $(".subconfiguration-options .icon_container").hide();
	100	+
	101	+ for (var name in currentSubconfigParent) {
	102	+ $(".subconfiguration-options .icon_container[json_name=" + name + "]").show();
	103	+ }
	104	+ if (mainConfig == "hand") {
	105	+ $(".subconfiguration-options .icon_container[json_name=movimento]").show();
	106	+ }
	107	+
	108	+ $(".subconfiguration-panel").show();
	109	+ });
	110	+ }
	111	+
	112	+ dynworkflow.load = function() {
	113	+ baseUrl = $('#server-url').data('url');
	114	+ $.get(baseUrl + "/conf/selection-workflow-json", function(result) {
	115	+ jsonWF = $.parseJSON(result);
	116	+ }).fail(function() {
	117	+ console.log("Failed to load the workflow configuration");
	118	+ });
	119	+ }
	120	+
	121	+}(window.dynworkflow = window.dynworkflow \|\| {}, jQuery));
0	122	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,14 @@
	1	+(function(movement, $, undefined) {
	2	+
	3	+ var base_url = "";
	4	+
	5	+ movement.setup = function(serverhost) {
	6	+ base_url = serverhost;
	7	+
	8	+ $("#right-hand-moviment .selection-panel-option").off("click").on(
	9	+ "click", function() {
	10	+ dynworkflow.selectMovement($(this).attr("value"));
	11	+ dynworkflow.setupTimeline();
	12	+ });
	13	+ };
	14	+}(window.movement = window.movement \|\| {}, jQuery));
0	15	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,10 @@
	1	+(function(orientation, $, undefined) {
	2	+
	3	+ orientation.setup = function() {
	4	+ $("#right-hand-orientation .selection-panel-option").off("click").on(
	5	+ "click", function() {
	6	+ dynworkflow.nextSubConfig();
	7	+ });
	8	+ };
	9	+
	10	+}(window.orientation = window.orientation \|\| {}, jQuery));
0	11	\ No newline at end of file
...	...
...	...	@@ -178,6 +178,8 @@
178	178	_setupHandSelectionPanel(option);
179	179	}
180	180	_setupGUIOnSelection(option);
	181	+
	182	+ dynworkflow.selectMainConfig(option);
181	183	}
182	184
183	185	function _hideSelectionPanel() {
...	...	@@ -450,8 +452,7 @@
450	452	// JSON
451	453	function _getFirstKey(json) {
452	454	var first_key = undefined;
453		- for (first_key in json)
454		- ;
	455	+ for (first_key in json) break;
455	456	return first_key;
456	457	}
457	458
...	...	@@ -506,9 +507,9 @@
506	507	}
507	508
508	509	function _setupSelectionPanel() {
509		- // $("#selection-panel .x").off("click").on("click", function() {
510		- // _hideSelectionPanel();
511		- // });
	510	+ $("#selection-panel .x").off("click").on("click", function() {
	511	+ _hideSelectionPanel();
	512	+ });
512	513	// $(".selection-panel-body .selection-panel-option").off("click").on(
513	514	// "click", function() {
514	515	// _selectConfig(this);
...	...	@@ -594,6 +595,7 @@
594	595	$("#initial-screen").hide();
595	596	$("#configuration-screen").show();
596	597	dynengine.load();
	598	+ dynworkflow.load();
597	599	console.log('dynengine loaded');
598	600	});
599	601	$("#ready-button").off("click").on("click", function() {
...	...	@@ -623,8 +625,6 @@
623	625	_setupConfigurationPanel();
624	626	_setupSelectionPanel();
625	627	_setupMainScreen(task, deferred);
626		-
627		- articulation.setup(base_url);
628	628	}
629	629
630	630	function _saveAnswer(task, deferred) {
...	...	@@ -678,5 +678,11 @@
678	678	wikilibras.updateParameterJSON = function(config, value) {
679	679	_updateParameterJSON(config, value);
680	680	}
	681	+
	682	+ wikilibras.hideSelectionPanel = function() {
	683	+ _hideSelectionPanel();
	684	+ }
	685	+
	686	+
681	687
682	688	}(window.wikilibras = window.wikilibras \|\| {}, jQuery));
...	...
...	...	@@ -0,0 +1,25 @@
	1	+{
	2	+ "facial" : {
	3	+ "expressao" : ["passo-1"],
	4	+ "transicao" : ["passo-1"],
	5	+ "duracao" : ["passo-1"]
	6	+ },
	7	+ "hand" : {
	8	+ "movimento" : {
	9	+ "pontual" : {
	10	+ "articulacao" : ["passo-1", "passo-2"],
	11	+ "configuracao" : ["passo-1", "passo-2"],
	12	+ "orientacao" : ["passo-1"]
	13	+ },
	14	+ "circular" : {
	15	+ "articulacao" : ["passo-1", "passo-2"],
	16	+ "configuracao" : ["passo-1", "passo-2"],
	17	+ "orientacao" : ["passo-1"],
	18	+ "raio" : ["passo-1"],
	19	+ "velocidade" : ["passo-1"],
	20	+ "lado_oposto" : ["passo-1"],
	21	+ "sentido_inverso" : ["passo-1"]
	22	+ }
	23	+ }
	24	+ }
	25	+}
0	26	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,28 @@
	1	+<div class="subconfiguration-panel col-sm-12">
	2	+ <div class="arrow icon_container col-sm-1" name="left-arrow">
	3	+ <img src="{{ server }}/img/left-arrow-icon.png" />
	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	+ panel="facial-expression" previous="facial-expression"
	10	+ next="facial-expression-velocity">
	11	+ <img src="{{ server }}/img/facial-expression-icon.png" />
	12	+ </div>
	13	+ <div class="icon_container" name="facial-expression-velocity"
	14	+ panel="facial-expression-velocity" previous="facial-expression"
	15	+ next="facial-expression-duration">
	16	+ <img src="{{ server }}/img/facial-expression-velocity-icon.png" />
	17	+ </div>
	18	+ <div class="icon_container" name="facial-expression-duration"
	19	+ panel="facial-expression-duration"
	20	+ previous="facial-expression-velocity" next="end">
	21	+ <img src="{{ server }}/img/facial-expression-duration-icon.png" />
	22	+ </div>
	23	+ </div>
	24	+
	25	+ <div class="arrow icon_container col-sm-1" name="right-arrow">
	26	+ <img src="{{ server }}/img/right-arrow-icon.png" />
	27	+ </div>
	28	+</div>
...	...
...	...	@@ -0,0 +1,75 @@
	1	+<div id="right-hand-articulation-x-y" class="selection-panel-body">
	2	+ <div class="panel-header">
	3	+ <h8>Onde é feito o sinal?</h8>
	4	+ </div>
	5	+ <div class="selection-panel-inner-body">
	6	+ <div data-x="" data-y=""
	7	+ class="module-x-y grid gray-background right-hand-gray-front-avatar active">
	8	+ <div class=grid-selectors>
	9	+ <div class="grid-row row-number-1" data-y=1>
	10	+ <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
	11	+ <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
	12	+ <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
	13	+ <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
	14	+ <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
	15	+ <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
	16	+ <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
	17	+ <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
	18	+ <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
	19	+ <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
	20	+ </div>
	21	+ <div class="grid-row row-number-2" data-y=2>
	22	+ <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
	23	+ <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
	24	+ <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
	25	+ <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
	26	+ <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
	27	+ <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
	28	+ <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
	29	+ <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
	30	+ <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
	31	+ <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
	32	+ </div>
	33	+ <div class="grid-row row-number-3" data-y=3>
	34	+ <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
	35	+ <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
	36	+ <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
	37	+ <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
	38	+ <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
	39	+ <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
	40	+ <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
	41	+ <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
	42	+ <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
	43	+ <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
	44	+ </div>
	45	+ <div class="grid-row row-number-4" data-y=4>
	46	+ <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
	47	+ <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
	48	+ <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
	49	+ <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
	50	+ <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
	51	+ <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
	52	+ <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
	53	+ <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
	54	+ <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
	55	+ <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
	56	+ </div>
	57	+ <div class="grid-row row-number-5" data-y=5>
	58	+ <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
	59	+ <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
	60	+ <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
	61	+ <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
	62	+ <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
	63	+ <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
	64	+ <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
	65	+ <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
	66	+ <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
	67	+ <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
	68	+ </div>
	69	+ </div>
	70	+ </div>
	71	+ </div>
	72	+</div>
	73	+<script type="text/javascript">
	74	+ articulation.setup("{{ server }}");
	75	+</script>
0	76	\ No newline at end of file
...	...