Lógica das tarefas executadas em sequência e imagens de orientação da mão esquerda.

Adabriand Furtado
1 parent 951f66be
Showing 17 changed files with 134 additions and 80 deletions Show diff stats
view/assets/css/main.css
view/assets/js/wikilibras.js
view/hand-configuration.html
view/img/avatar-left-hand.png
view/img/ore/01.png
view/img/ore/02.png
view/img/ore/03.png
view/img/ore/04.png
view/img/ore/05.png
view/img/ore/06.png
view/img/ore/07.png
view/img/ore/08.png
view/img/ore/09.png
view/img/ore/10.png
view/img/ore/11.png
view/img/ore/12.png
view/template.html
@@ -52,7 +52,7 @@ body {
 }
  
 #initial-screen {
-	display: block;
+	display: none;
 }
  
 #configuration-screen {
@@ -431,4 +431,8 @@ ul.rig.columns-4 li {
  
 #thanks-screen img {
 	width: 100%;
+}
+
+#completed-all-task-msg {
+	display: none;	
 }
 \ No newline at end of file
@@ -19,6 +19,7 @@
 		base_parameter_json["sinal"] = sign_name;
 		base_parameter_json["interpolacao"] = "normal";
 		base_parameter_json["movimentos"] = [];
+		// TODO remover propriedade articulação
 		moviment_parameter_json = {
 			"facial" : {},
 			"mao_direita" : {},
@@ -51,9 +52,9 @@
 		_changeImage(img, hover_img_url);
 	}
  
-	function _selectIcon(iconName, isSelect, parent) {
-		parent = typeof parent == "undefined" ? "" : parent + " ";
-		var icon_id = parent + ".icon_container[name=" + iconName + "]";
+	function _selectIcon(iconName, isSelect, panel) {
+		panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
+		var icon_id = ".icon_container[name=" + iconName + "]" + panel;
 		_enableIconHover(icon_id, isSelect);
 		$(icon_id).attr("select", isSelect);
 	}
@@ -62,13 +63,20 @@
 		_selectIcon(iconName, false, parent);
 	}
  
-	function _setupCheckIcon(option, parent) {
-		parent = typeof parent == "undefined" ? "" : parent + " ";
-		var img = $(parent + ".icon_container[name=" + option + "]")
-				.find("img").first();
-		var check_img_url = base_url + "/img/" + option + "-icon-check.png";
+	function _setupCheckIcon(option, isCheck, panel) {
+		panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
+		var img = $(".icon_container[name=" + option + "]" + panel).find("img")
+				.first();
+		var check_img_url = base_url + "/img/" + option;
+
+		if (isCheck) {
+			check_img_url += "-icon-check.png";
+		} else {
+			check_img_url += "-icon.png";
+		}
+
 		_changeImage(img, check_img_url);
-		$(".icon_container[name=" + option + "]").attr("complete", true);
+		$(".icon_container[name=" + option + "]").attr("complete", isCheck);
 	}
  
 	function _isSelectingState() {
@@ -84,7 +92,8 @@
 	}
  
 	function _canHover(el) {
-		var incompleteConfig = typeof $(el).attr("complete") == "undefined";
+		var incompleteConfig = typeof $(el).attr("complete") == "undefined"
+				|| $(el).attr("complete") == "false";
 		return (!_isSelectingState() && incompleteConfig)
 				|| (typeof $(el).attr("select") == "undefined" && incompleteConfig);
 	}
@@ -152,7 +161,7 @@
 			var current_option = _getCurrentMainConfiguration();
 			_selectIcon(current_option, false);
 			if (_isConfigurationComplete(current_option)) {
-				_setupCheckIcon(current_option);
+				_setupCheckIcon(current_option, true);
 			}
 			$("#avatar-" + current_option).fadeOut(500);
 		}
@@ -191,8 +200,8 @@
 	}
  
 	function _finishConfiguration(config) {
-		_setupCheckIcon(config);
-		_setupCheckIcon("avatar-" + config);
+		_setupCheckIcon(config, true);
+		_setupCheckIcon("avatar-" + config, true);
 		$("#" + config + "-edit .check-icon").show();
  
 		if (_canRenderSignVideo()) {
@@ -200,6 +209,17 @@
 		}
 	}
  
+	function _unfinishConfiguration(config, panel) {
+		_setupCheckIcon(config, false, panel);
+		_setupCheckIcon("avatar-" + config, false, panel);
+		$("#" + config + "-edit .check-icon").hide();
+
+		if (!_canRenderSignVideo()) {
+			$("#ready-button").addClass("disabled");
+		}
+	}
+	;
+
 	// Subconfigurations
 	function _getCurrentSubConfiguration() {
 		var config = _getCurrentMainConfiguration();
@@ -290,24 +310,20 @@
 		return config;
 	}
  
-	function _selectSubConfigurationIcon(subconfig, isSelect) {
-		var iconName = _getSubConfigurationIconName(subconfig);
-		var main_config = _getCurrentMainConfiguration();
-		var parent = "#" + main_config + "-subconfiguration-options";
-		_selectIcon(iconName, isSelect, parent);
-	}
-
 	function _getSubConfigurationIconName(subconfig) {
 		subconfig = subconfig.replace("right-hand", "hand");
 		subconfig = subconfig.replace("left-hand", "hand");
 		return subconfig;
 	}
  
+	function _selectSubConfigurationIcon(subconfig, isSelect) {
+		var iconName = _getSubConfigurationIconName(subconfig);
+		_selectIcon(iconName, isSelect, subconfig);
+	}
+
 	function _setupCheckSubConfigurationIcon(subconfig) {
 		var iconName = _getSubConfigurationIconName(subconfig);
-		var main_config = _getCurrentMainConfiguration();
-		var parent = "#" + main_config + "-subconfiguration-options";
-		_setupCheckIcon(iconName, parent);
+		_setupCheckIcon(iconName, true, subconfig);
 	}
  
 	function _showSubConfiguration(next_config) {
@@ -341,7 +357,7 @@
 		});
 	}
  
-	// REFACT
+	// TODO REFACT
 	function _setupFacialSelectionPanel() {
 		var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;
 		if (previous_select) {
@@ -356,7 +372,7 @@
 		$("#facial-subconfiguration-options").fadeIn(300);
 	}
  
-	// REFACT
+	// TODO REFACT
 	function _setupHandSelectionPanel(option) {
 		var previous_select = $("#" + option
 				+ "-subconfiguration-options .icon_container[select=true]").length > 0;
@@ -372,8 +388,7 @@
 			}
 			$("#" + subconfig).fadeIn(300);
 		} else {
-			_selectIcon("hand-moviment", true, "#" + option
-					+ "-subconfiguration-options");
+			_selectIcon("hand-moviment", true, option + "-moviment");
 			$("#" + option + "-moviment").fadeIn(300);
 		}
 		$("#" + option + "-subconfiguration-options").fadeIn(300);
@@ -411,6 +426,13 @@
 	}
  
 	// JSON
+	function _getFirstKey(json) {
+		var first_key = undefined;
+		for (first_key in json)
+			;
+		return first_key;
+	}
+
 	function _updateParameterJSON(config, value) {
 		if (typeof config == "undefined" || typeof value == "undefined")
 			return;
@@ -423,17 +445,25 @@
 		value = !isNaN(value) ? parseInt(value) : value;
  
 		if (config == "movimento") {
-			moviment_parameter_json[current_main_config] = {};
-			// TODO remover
-			moviment_parameter_json[current_main_config][value] = {
-				"articulacao" : 71
-			};
+			var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
+			if (typeof first_key == "undefined") {
+				moviment_parameter_json[current_main_config][value] = {
+					"articulacao" : 71
+				};
+			} else if (first_key != value) {
+				moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];
+				delete moviment_parameter_json[current_main_config][first_key];
+			}
 		} else if (current_main_config.indexOf("mao") != -1) {
  
-			for (first_key in moviment_parameter_json[current_main_config])
-				;
+			var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
+			if (typeof first_key == "undefined") {
+				first_key = "placeholder";
+				moviment_parameter_json[current_main_config][first_key] = {
+					"articulacao" : 71
+				};
+			}
 			moviment_parameter_json[current_main_config][first_key][config] = value;
-
 		} else {
 			moviment_parameter_json[current_main_config][config] = value;
 		}
@@ -480,7 +510,7 @@
  
 	// Render Screen
 	function _submitParameterJSON(callback) {
-		base_parameter_json["movimentos"] = []; 
+		base_parameter_json["movimentos"] = [];
 		base_parameter_json["movimentos"].push(moviment_parameter_json);
 		console.log(base_parameter_json);
  
@@ -525,21 +555,27 @@
 			_showRenderedAvatar();
 		});
 	}
-	
+
+	function _cleanGUI() {
+		$(".selection-panel-option").removeAttr("select");
+		$(".icon_container[complete=true]").each(
+				function() {
+					_unfinishConfiguration($(this).attr("name"), $(this).attr(
+							"panel"));
+				});
+	}
+
 	function _setupGUI(task, deferred) {
+		_cleanGUI();
+		_setupConfigurationPanel();
+		_setupSelectionPanel();
+
 		$("#initial-screen").fadeIn(300);
-		
 		$("#start-button").off("click").on("click", function() {
 			$("#initial-screen").hide();
 			$("#configuration-screen").show();
 		});
-
-		_setupConfigurationPanel();
-		_setupSelectionPanel();
-
 		$("#ready-button").off("click").on("click", function() {
-			//base_parameter_json["movimentos"].push(moviment_parameter_json);
-			//console.log(base_parameter_json);
 			_setupRenderScreen();
 		});
 		$("#render-edit").off("click").on("click", function() {
@@ -552,27 +588,35 @@
 			_saveAnswer(task, deferred)
 		});
 	}
-	
+
 	function _saveAnswer(task, deferred) {
 		var answer = {}
 		answer["status"] = "FINISHED";
 		answer["parameter_json"] = base_parameter_json;
-		
+
 		pybossa.saveTask(task.id, answer).done(function() {
 			setTimeout(function() {
 				$("#thanks-screen").hide();
 				deferred.resolve();
-			}, 1500);
+			}, 2500);
 		});
 	}
  
+	function _showCompletedAllTaskMsg() {
+		$("#completed-task-msg").hide();
+		$("#completed-all-task-msg").show();
+		$("#thanks-screen").fadeIn(300);
+	}
+
 	pybossa.presentTask(function(task, deferred) {
 		if (!$.isEmptyObject(task) && current_task_id != task.id) {
 			_loadTaskInfo(task);
 			_setupGUI(task, deferred)
 			$("#main-container").fadeIn(500);
+			console.log(base_parameter_json);
+			console.log(moviment_parameter_json);
 		} else {
-			$("#main-container").hide();
+			_showCompletedAllTaskMsg();
 		}
 	});
  
-{% macro selectionPanel(name) -%} {% if name == 'right-hand' %} {% set
-fingers_position_dir = "cmd" %} {% else %} {% set fingers_position_dir =
-"cme" %} {% endif %}
+{% macro selectionPanel(name) -%} 
+{% if name == 'right-hand' %} 
+{% set fingers_position_dir = "cmd" %} 
+{% set orientation_dir = "ord" %} 
+{% else %} 
+{% set fingers_position_dir = "cme" %}
+{% set orientation_dir = "ore" %} 
+{% endif %}
  
 <div id="{{ name }}-moviment" class="selection-panel-body" name="movimento">
 	<div class="panel-header">
@@ -214,29 +219,29 @@ fingers_position_dir = &quot;cmd&quot; %} {% else %} {% set fingers_position_dir =
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-3">
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/01.png" value="68"/>1.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68"/>1.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/02.png" value="66"/>2.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66"/>2.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/03.png" value="64"/>3.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64"/>3.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/04.png" value="2"/>4.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2"/>4.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/05.png" value="9"/>5.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9"/>5.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/06.png" value="16"/>6.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16"/>6.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/07.png" value="92"/>7.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92"/>7.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/08.png" value="90"/>8.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90"/>8.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/09.png" value="88"/>9.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88"/>9.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/10.png" value="4"/>10.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4"/>10.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/11.png" value="11"/>11.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11"/>11.</li>
 			<li><img class="selection-panel-option"
-				src="{{ server }}/img/ord/12.png" value="18"/>12.</li>
+				src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18"/>12.</li>
 		</ul>
 	</div>
 </div>
@@ -108,7 +108,7 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
 					id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
 					src="{{ server }}/img/avatar-right-hand.png"></img> <img
 					id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
-					src="{{ server }}/img/avatar-right-hand.png"></img>
+					src="{{ server }}/img/avatar-left-hand.png"></img>
 			</div>
 			<div id="selection-container" class="col-sm-2">
 				<div id="selection-panel">
@@ -135,20 +135,17 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
 			</div>
 		</div>
 		<div class="row">
-			<div id="ready-button" class="btn btn-default pull-right">GERAR
+			<div id="ready-button" class="btn btn-default pull-right disabled">GERAR
 				SINAL</div>
 		</div>
 	</div>
 	<div id="render-screen">
 		<div id="render-main" class="row">
 			<div id="render-ref" class="col-sm-6">
-				<h6>
-					Vídeo de referência
-				</h6>
+				<h6>Vídeo de referência</h6>
 				<div class="col-sm-12">
 					<video src="" preload="metadata"
-						class="ref-video video-body-main video-border" loop
-						controls>
+						class="ref-video video-body-main video-border" loop controls>
 						<source type="video/webm">
 					</video>
 				</div>
@@ -158,9 +155,8 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
 					<h6>
 						Sinal "<span class="sign-label"></span>" construído
 					</h6>
-					<video src=""
-						preload="metadata" class="video-body-main video-border" autoplay
-						loop controls>
+					<video src="" preload="metadata"
+						class="video-body-main video-border" autoplay loop controls>
 						<source type="video/webm">
 					</video>
 					<div id="render-edit" class="icon_container" name="big-edit">
@@ -182,13 +178,18 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
 	</div>
 	<div id="thanks-screen">
 		<div class="col-sm-6 col-centered">
-			<h3 class="text-center">
-				Obrigado,
-				</h4>
+			<div id="completed-task-msg">
+				<h3 class="text-center">Obrigado,</h3>
 				<h6 class="text-center">você configurou o sinal com sucesso!</h6>
-				<div class="col-sm-11 col-centered">
-					<img src="{{ server }}/img/avatar-thanks.png"></img>
-				</div>
+			</div>
+			<div id="completed-all-task-msg">
+				<h3 class="text-center">Parabéns,</h3>
+				<h6 class="text-center">você configurou todos os sinais
+					disponíveis!</h6>
+			</div>
+			<div class="col-sm-11 col-centered">
+				<img src="{{ server }}/img/avatar-thanks.png"></img>
+			</div>
 		</div>
 	</div>
 </div>
...	...	@@ -52,7 +52,7 @@ body {
52	52	}
53	53
54	54	#initial-screen {
55		- display: block;
	55	+ display: none;
56	56	}
57	57
58	58	#configuration-screen {
...	...	@@ -431,4 +431,8 @@ ul.rig.columns-4 li {
431	431
432	432	#thanks-screen img {
433	433	width: 100%;
	434	+}
	435	+
	436	+#completed-all-task-msg {
	437	+ display: none;
434	438	}
435	439	\ No newline at end of file
...	...
...	...	@@ -19,6 +19,7 @@
19	19	base_parameter_json["sinal"] = sign_name;
20	20	base_parameter_json["interpolacao"] = "normal";
21	21	base_parameter_json["movimentos"] = [];
	22	+ // TODO remover propriedade articulação
22	23	moviment_parameter_json = {
23	24	"facial" : {},
24	25	"mao_direita" : {},
...	...	@@ -51,9 +52,9 @@
51	52	_changeImage(img, hover_img_url);
52	53	}
53	54
54		- function _selectIcon(iconName, isSelect, parent) {
55		- parent = typeof parent == "undefined" ? "" : parent + " ";
56		- var icon_id = parent + ".icon_container[name=" + iconName + "]";
	55	+ function _selectIcon(iconName, isSelect, panel) {
	56	+ panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
	57	+ var icon_id = ".icon_container[name=" + iconName + "]" + panel;
57	58	_enableIconHover(icon_id, isSelect);
58	59	$(icon_id).attr("select", isSelect);
59	60	}
...	...	@@ -62,13 +63,20 @@
62	63	_selectIcon(iconName, false, parent);
63	64	}
64	65
65		- function _setupCheckIcon(option, parent) {
66		- parent = typeof parent == "undefined" ? "" : parent + " ";
67		- var img = $(parent + ".icon_container[name=" + option + "]")
68		- .find("img").first();
69		- var check_img_url = base_url + "/img/" + option + "-icon-check.png";
	66	+ function _setupCheckIcon(option, isCheck, panel) {
	67	+ panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
	68	+ var img = $(".icon_container[name=" + option + "]" + panel).find("img")
	69	+ .first();
	70	+ var check_img_url = base_url + "/img/" + option;
	71	+
	72	+ if (isCheck) {
	73	+ check_img_url += "-icon-check.png";
	74	+ } else {
	75	+ check_img_url += "-icon.png";
	76	+ }
	77	+
70	78	_changeImage(img, check_img_url);
71		- $(".icon_container[name=" + option + "]").attr("complete", true);
	79	+ $(".icon_container[name=" + option + "]").attr("complete", isCheck);
72	80	}
73	81
74	82	function _isSelectingState() {
...	...	@@ -84,7 +92,8 @@
84	92	}
85	93
86	94	function _canHover(el) {
87		- var incompleteConfig = typeof $(el).attr("complete") == "undefined";
	95	+ var incompleteConfig = typeof $(el).attr("complete") == "undefined"
	96	+ \|\| $(el).attr("complete") == "false";
88	97	return (!_isSelectingState() && incompleteConfig)
89	98	\|\| (typeof $(el).attr("select") == "undefined" && incompleteConfig);
90	99	}
...	...	@@ -152,7 +161,7 @@
152	161	var current_option = _getCurrentMainConfiguration();
153	162	_selectIcon(current_option, false);
154	163	if (_isConfigurationComplete(current_option)) {
155		- _setupCheckIcon(current_option);
	164	+ _setupCheckIcon(current_option, true);
156	165	}
157	166	$("#avatar-" + current_option).fadeOut(500);
158	167	}
...	...	@@ -191,8 +200,8 @@
191	200	}
192	201
193	202	function _finishConfiguration(config) {
194		- _setupCheckIcon(config);
195		- _setupCheckIcon("avatar-" + config);
	203	+ _setupCheckIcon(config, true);
	204	+ _setupCheckIcon("avatar-" + config, true);
196	205	$("#" + config + "-edit .check-icon").show();
197	206
198	207	if (_canRenderSignVideo()) {
...	...	@@ -200,6 +209,17 @@
200	209	}
201	210	}
202	211
	212	+ function _unfinishConfiguration(config, panel) {
	213	+ _setupCheckIcon(config, false, panel);
	214	+ _setupCheckIcon("avatar-" + config, false, panel);
	215	+ $("#" + config + "-edit .check-icon").hide();
	216	+
	217	+ if (!_canRenderSignVideo()) {
	218	+ $("#ready-button").addClass("disabled");
	219	+ }
	220	+ }
	221	+ ;
	222	+
203	223	// Subconfigurations
204	224	function _getCurrentSubConfiguration() {
205	225	var config = _getCurrentMainConfiguration();
...	...	@@ -290,24 +310,20 @@
290	310	return config;
291	311	}
292	312
293		- function _selectSubConfigurationIcon(subconfig, isSelect) {
294		- var iconName = _getSubConfigurationIconName(subconfig);
295		- var main_config = _getCurrentMainConfiguration();
296		- var parent = "#" + main_config + "-subconfiguration-options";
297		- _selectIcon(iconName, isSelect, parent);
298		- }
299		-
300	313	function _getSubConfigurationIconName(subconfig) {
301	314	subconfig = subconfig.replace("right-hand", "hand");
302	315	subconfig = subconfig.replace("left-hand", "hand");
303	316	return subconfig;
304	317	}
305	318
	319	+ function _selectSubConfigurationIcon(subconfig, isSelect) {
	320	+ var iconName = _getSubConfigurationIconName(subconfig);
	321	+ _selectIcon(iconName, isSelect, subconfig);
	322	+ }
	323	+
306	324	function _setupCheckSubConfigurationIcon(subconfig) {
307	325	var iconName = _getSubConfigurationIconName(subconfig);
308		- var main_config = _getCurrentMainConfiguration();
309		- var parent = "#" + main_config + "-subconfiguration-options";
310		- _setupCheckIcon(iconName, parent);
	326	+ _setupCheckIcon(iconName, true, subconfig);
311	327	}
312	328
313	329	function _showSubConfiguration(next_config) {
...	...	@@ -341,7 +357,7 @@
341	357	});
342	358	}
343	359
344		- // REFACT
	360	+ // TODO REFACT
345	361	function _setupFacialSelectionPanel() {
346	362	var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;
347	363	if (previous_select) {
...	...	@@ -356,7 +372,7 @@
356	372	$("#facial-subconfiguration-options").fadeIn(300);
357	373	}
358	374
359		- // REFACT
	375	+ // TODO REFACT
360	376	function _setupHandSelectionPanel(option) {
361	377	var previous_select = $("#" + option
362	378	+ "-subconfiguration-options .icon_container[select=true]").length > 0;
...	...	@@ -372,8 +388,7 @@
372	388	}
373	389	$("#" + subconfig).fadeIn(300);
374	390	} else {
375		- _selectIcon("hand-moviment", true, "#" + option
376		- + "-subconfiguration-options");
	391	+ _selectIcon("hand-moviment", true, option + "-moviment");
377	392	$("#" + option + "-moviment").fadeIn(300);
378	393	}
379	394	$("#" + option + "-subconfiguration-options").fadeIn(300);
...	...	@@ -411,6 +426,13 @@
411	426	}
412	427
413	428	// JSON
	429	+ function _getFirstKey(json) {
	430	+ var first_key = undefined;
	431	+ for (first_key in json)
	432	+ ;
	433	+ return first_key;
	434	+ }
	435	+
414	436	function _updateParameterJSON(config, value) {
415	437	if (typeof config == "undefined" \|\| typeof value == "undefined")
416	438	return;
...	...	@@ -423,17 +445,25 @@
423	445	value = !isNaN(value) ? parseInt(value) : value;
424	446
425	447	if (config == "movimento") {
426		- moviment_parameter_json[current_main_config] = {};
427		- // TODO remover
428		- moviment_parameter_json[current_main_config][value] = {
429		- "articulacao" : 71
430		- };
	448	+ var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
	449	+ if (typeof first_key == "undefined") {
	450	+ moviment_parameter_json[current_main_config][value] = {
	451	+ "articulacao" : 71
	452	+ };
	453	+ } else if (first_key != value) {
	454	+ moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];
	455	+ delete moviment_parameter_json[current_main_config][first_key];
	456	+ }
431	457	} else if (current_main_config.indexOf("mao") != -1) {
432	458
433		- for (first_key in moviment_parameter_json[current_main_config])
434		- ;
	459	+ var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
	460	+ if (typeof first_key == "undefined") {
	461	+ first_key = "placeholder";
	462	+ moviment_parameter_json[current_main_config][first_key] = {
	463	+ "articulacao" : 71
	464	+ };
	465	+ }
435	466	moviment_parameter_json[current_main_config][first_key][config] = value;
436		-
437	467	} else {
438	468	moviment_parameter_json[current_main_config][config] = value;
439	469	}
...	...	@@ -480,7 +510,7 @@
480	510
481	511	// Render Screen
482	512	function _submitParameterJSON(callback) {
483		- base_parameter_json["movimentos"] = [];
	513	+ base_parameter_json["movimentos"] = [];
484	514	base_parameter_json["movimentos"].push(moviment_parameter_json);
485	515	console.log(base_parameter_json);
486	516
...	...	@@ -525,21 +555,27 @@
525	555	_showRenderedAvatar();
526	556	});
527	557	}
528		-
	558	+
	559	+ function _cleanGUI() {
	560	+ $(".selection-panel-option").removeAttr("select");
	561	+ $(".icon_container[complete=true]").each(
	562	+ function() {
	563	+ _unfinishConfiguration($(this).attr("name"), $(this).attr(
	564	+ "panel"));
	565	+ });
	566	+ }
	567	+
529	568	function _setupGUI(task, deferred) {
	569	+ _cleanGUI();
	570	+ _setupConfigurationPanel();
	571	+ _setupSelectionPanel();
	572	+
530	573	$("#initial-screen").fadeIn(300);
531		-
532	574	$("#start-button").off("click").on("click", function() {
533	575	$("#initial-screen").hide();
534	576	$("#configuration-screen").show();
535	577	});
536		-
537		- _setupConfigurationPanel();
538		- _setupSelectionPanel();
539		-
540	578	$("#ready-button").off("click").on("click", function() {
541		- //base_parameter_json["movimentos"].push(moviment_parameter_json);
542		- //console.log(base_parameter_json);
543	579	_setupRenderScreen();
544	580	});
545	581	$("#render-edit").off("click").on("click", function() {
...	...	@@ -552,27 +588,35 @@
552	588	_saveAnswer(task, deferred)
553	589	});
554	590	}
555		-
	591	+
556	592	function _saveAnswer(task, deferred) {
557	593	var answer = {}
558	594	answer["status"] = "FINISHED";
559	595	answer["parameter_json"] = base_parameter_json;
560		-
	596	+
561	597	pybossa.saveTask(task.id, answer).done(function() {
562	598	setTimeout(function() {
563	599	$("#thanks-screen").hide();
564	600	deferred.resolve();
565		- }, 1500);
	601	+ }, 2500);
566	602	});
567	603	}
568	604
	605	+ function _showCompletedAllTaskMsg() {
	606	+ $("#completed-task-msg").hide();
	607	+ $("#completed-all-task-msg").show();
	608	+ $("#thanks-screen").fadeIn(300);
	609	+ }
	610	+
569	611	pybossa.presentTask(function(task, deferred) {
570	612	if (!$.isEmptyObject(task) && current_task_id != task.id) {
571	613	_loadTaskInfo(task);
572	614	_setupGUI(task, deferred)
573	615	$("#main-container").fadeIn(500);
	616	+ console.log(base_parameter_json);
	617	+ console.log(moviment_parameter_json);
574	618	} else {
575		- $("#main-container").hide();
	619	+ _showCompletedAllTaskMsg();
576	620	}
577	621	});
578	622
...	...
1		-{% macro selectionPanel(name) -%} {% if name == 'right-hand' %} {% set
2		-fingers_position_dir = "cmd" %} {% else %} {% set fingers_position_dir =
3		-"cme" %} {% endif %}
	1	+{% macro selectionPanel(name) -%}
	2	+{% if name == 'right-hand' %}
	3	+{% set fingers_position_dir = "cmd" %}
	4	+{% set orientation_dir = "ord" %}
	5	+{% else %}
	6	+{% set fingers_position_dir = "cme" %}
	7	+{% set orientation_dir = "ore" %}
	8	+{% endif %}
4	9
5	10	<div id="{{ name }}-moviment" class="selection-panel-body" name="movimento">
6	11	<div class="panel-header">
...	...	@@ -214,29 +219,29 @@ fingers_position_dir = "cmd" %} {% else %} {% set fingers_position_dir =
214	219	<div class="selection-panel-inner-body">
215	220	<ul class="rig columns-3">
216	221	<li><img class="selection-panel-option"
217		- src="{{ server }}/img/ord/01.png" value="68"/>1.</li>
	222	+ src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68"/>1.</li>
218	223	<li><img class="selection-panel-option"
219		- src="{{ server }}/img/ord/02.png" value="66"/>2.</li>
	224	+ src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66"/>2.</li>
220	225	<li><img class="selection-panel-option"
221		- src="{{ server }}/img/ord/03.png" value="64"/>3.</li>
	226	+ src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64"/>3.</li>
222	227	<li><img class="selection-panel-option"
223		- src="{{ server }}/img/ord/04.png" value="2"/>4.</li>
	228	+ src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2"/>4.</li>
224	229	<li><img class="selection-panel-option"
225		- src="{{ server }}/img/ord/05.png" value="9"/>5.</li>
	230	+ src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9"/>5.</li>
226	231	<li><img class="selection-panel-option"
227		- src="{{ server }}/img/ord/06.png" value="16"/>6.</li>
	232	+ src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16"/>6.</li>
228	233	<li><img class="selection-panel-option"
229		- src="{{ server }}/img/ord/07.png" value="92"/>7.</li>
	234	+ src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92"/>7.</li>
230	235	<li><img class="selection-panel-option"
231		- src="{{ server }}/img/ord/08.png" value="90"/>8.</li>
	236	+ src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90"/>8.</li>
232	237	<li><img class="selection-panel-option"
233		- src="{{ server }}/img/ord/09.png" value="88"/>9.</li>
	238	+ src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88"/>9.</li>
234	239	<li><img class="selection-panel-option"
235		- src="{{ server }}/img/ord/10.png" value="4"/>10.</li>
	240	+ src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4"/>10.</li>
236	241	<li><img class="selection-panel-option"
237		- src="{{ server }}/img/ord/11.png" value="11"/>11.</li>
	242	+ src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11"/>11.</li>
238	243	<li><img class="selection-panel-option"
239		- src="{{ server }}/img/ord/12.png" value="18"/>12.</li>
	244	+ src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18"/>12.</li>
240	245	</ul>
241	246	</div>
242	247	</div>
...	...
...	...	@@ -108,7 +108,7 @@ import 'facial-configuration.html' as facialConfig with context %}
108	108	id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
109	109	src="{{ server }}/img/avatar-right-hand.png"></img> <img
110	110	id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
111		- src="{{ server }}/img/avatar-right-hand.png"></img>
	111	+ src="{{ server }}/img/avatar-left-hand.png"></img>
112	112	</div>
113	113	<div id="selection-container" class="col-sm-2">
114	114	<div id="selection-panel">
...	...	@@ -135,20 +135,17 @@ import 'facial-configuration.html' as facialConfig with context %}
135	135	</div>
136	136	</div>
137	137	<div class="row">
138		- <div id="ready-button" class="btn btn-default pull-right">GERAR
	138	+ <div id="ready-button" class="btn btn-default pull-right disabled">GERAR
139	139	SINAL</div>
140	140	</div>
141	141	</div>
142	142	<div id="render-screen">
143	143	<div id="render-main" class="row">
144	144	<div id="render-ref" class="col-sm-6">
145		- <h6>
146		- Vídeo de referência
147		- </h6>
	145	+ <h6>Vídeo de referência</h6>
148	146	<div class="col-sm-12">
149	147	<video src="" preload="metadata"
150		- class="ref-video video-body-main video-border" loop
151		- controls>
	148	+ class="ref-video video-body-main video-border" loop controls>
152	149	<source type="video/webm">
153	150	</video>
154	151	</div>
...	...	@@ -158,9 +155,8 @@ import 'facial-configuration.html' as facialConfig with context %}
158	155	<h6>
159	156	Sinal "<span class="sign-label"></span>" construído
160	157	</h6>
161		- <video src=""
162		- preload="metadata" class="video-body-main video-border" autoplay
163		- loop controls>
	158	+ <video src="" preload="metadata"
	159	+ class="video-body-main video-border" autoplay loop controls>
164	160	<source type="video/webm">
165	161	</video>
166	162	<div id="render-edit" class="icon_container" name="big-edit">
...	...	@@ -182,13 +178,18 @@ import 'facial-configuration.html' as facialConfig with context %}
182	178	</div>
183	179	<div id="thanks-screen">
184	180	<div class="col-sm-6 col-centered">
185		- <h3 class="text-center">
186		- Obrigado,
187		- </h4>
	181	+ <div id="completed-task-msg">
	182	+ <h3 class="text-center">Obrigado,</h3>
188	183	<h6 class="text-center">você configurou o sinal com sucesso!</h6>
189		- <div class="col-sm-11 col-centered">
190		- <img src="{{ server }}/img/avatar-thanks.png"></img>
191		- </div>
	184	+ </div>
	185	+ <div id="completed-all-task-msg">
	186	+ <h3 class="text-center">Parabéns,</h3>
	187	+ <h6 class="text-center">você configurou todos os sinais
	188	+ disponíveis!</h6>
	189	+ </div>
	190	+ <div class="col-sm-11 col-centered">
	191	+ <img src="{{ server }}/img/avatar-thanks.png"></img>
	192	+ </div>
192	193	</div>
193	194	</div>
194	195	</div>
...	...