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,7 +52,7 @@ body {
52	}	52	}
53		53
54	#initial-screen {	54	#initial-screen {
55	- display: block;	55	+ display: none;
56	}	56	}
57		57
58	#configuration-screen {	58	#configuration-screen {
	@@ -431,4 +431,8 @@ ul.rig.columns-4 li {		@@ -431,4 +431,8 @@ ul.rig.columns-4 li {
431		431
432	#thanks-screen img {	432	#thanks-screen img {
433	width: 100%;	433	width: 100%;
		434	+}
		435	+
		436	+#completed-all-task-msg {
		437	+ display: none;
434	}	438	}
435	\ No newline at end of file	439	\ No newline at end of file