Ajustes na tela de configuração de ponto de articulação.

Adabriand Furtado
1 parent bb7233b2
Showing 4 changed files with 54 additions and 22 deletions Show diff stats
view/assets/css/articulation.css
view/assets/js/articulation.js
view/assets/js/wikilibras.js
view/hand-configuration.html
 .gray-background {
     background-repeat: no-repeat;
-    background-position: center 15px, 0 0;
     background-size: 67% 95%, 100% 100%;
     min-width: 285px;
     min-height: 361px
 }
-.gray-front-avatar {
+.right-hand-gray-front-avatar {
 	background-image: url(../../img/pa/gray-front-avatar.png), url(../../img/pa/default-base.png);
+	background-position: 100px 15px, 0 0;
+}
+
+.left-hand-gray-front-avatar {
+	background-image: url(../../img/pa/gray-front-avatar.png), url(../../img/pa/default-base.png);
+	background-position: 5px 15px, 0 0;
 }
 .gray-side-avatar {
 	background-image: url(../../img/pa/gray-side-avatar.png), url(../../img/pa/default-base.png);
+	background-position: center 15px, 0 0;
 }
 .module-x-y {
 (function(articulation, $, undefined) {
-	function _updateASelector(container, ballSelector, serverhost) {
+	var server_host = "";
+	
+	function _updateASelector(container, ballSelector) {
 	    $(container + " .ball-selector.active").each(function() {
 	        $(this).removeClass("active"), $(this).find(".point-a-selector").remove()
-	    }), ballSelector.addClass("active"), ballSelector.append('<div class="point-a-selector"><img src="' + serverhost +
+	    }), ballSelector.addClass("active"), ballSelector.append('<div class="point-a-selector"><img src="' + server_host +
 	    		'/img/pa/A-Seletor.png" class="point-a-selector" alt=""></div>')
 	}
@@ -12,27 +14,35 @@
 		var articulation_z = "#" + hand + "-articulation .module-z";
 		$(articulation_z + " .ball-selector").hide();
 		$(articulation_z + " .row-number-" + y + " .ball-selector").show();
+		
+		var z = $(articulation_z).attr("data-z");
+		if (typeof z != "undefined") {
+			var ball_selector = $(articulation_z + " .row-number-" + y + " .ball-" + z);
+			_updateASelector(articulation_z, ball_selector);
+		}
 	}
-	function _setupBallSelector(serverhost, hand) {
+	function _setupBallSelector(hand) {
 		var articulation_x_y = "#" + hand + "-articulation .module-x-y"; 
 		$(articulation_x_y + " .ball-selector").on("click", function(a) {
-		    var b = $(a.target),
-		        c = b.parent(".grid-row"),
+		    var b = $(a.target);
+		    if (!b.hasClass("ball-selector")) return;
+		    var c = b.parent(".grid-row"),
 		        d = $(articulation_x_y),
 		        f = b.attr("data-x"),
 		        g = c.attr("data-y");
-		    d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b, serverhost)
+		    d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
 		    _setupModuleZ(hand, g);
 		    _updateParameterJSON(hand);
 		});
 		var articulation_z = "#" + hand + "-articulation .module-z";
 		$(articulation_z + " .ball-selector").on("click", function(a) {
-		    var b = $(a.target),
-		        c = b.parent(".grid-row"),
+		    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, serverhost);
+		    b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
 		    _updateParameterJSON(hand);
 		});
 	}
@@ -42,20 +52,29 @@
 		wikilibras.updateParameterJSON("articulacao", value);
 	}
+	function _isRightHand(hand) {
+		return hand.indexOf("right-hand") != -1;
+	}
+	
 	function _readValue(hand) {
 		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");
-		z = z == ""? 1 : parseInt(z);
+		
+		if (!_isRightHand(hand)) {
+			x = 10 - x + 1; 
+		}
+		z = z == "" ? 1 : parseInt(z);
 		var value = (z-1)*10 + x + 30*(y-1);
 		//console.log(value);
 		return value;
 	}
 	articulation.setup = function(serverhost) {
-		_setupBallSelector(serverhost, "right-hand");
-		_setupBallSelector(serverhost, "left-hand");
+		server_host = serverhost;
+		_setupBallSelector("right-hand");
+		_setupBallSelector("left-hand");
 	};
 }(window.articulation = window.articulation || {}, jQuery));
 \ No newline at end of file
@@ -595,6 +595,10 @@
 			$("#configuration-screen").show();
 		});
 		$("#ready-button").off("click").on("click", function() {
+			if ($(this).hasClass('disabled')) {
+				event.preventDefault();
+				return;
+			}
 			_setupRenderScreen();
 		});
 		$("#render-edit").off("click").on("click", function() {
@@ -602,6 +606,10 @@
 			$("#configuration-screen").show();
 		});
 		$("#finish-button").off("click").on("click", function() {
+			if ($(this).hasClass('disabled')) {
+				event.preventDefault();
+				return;
+			}
 			$("#render-screen").hide();
 			$("#thanks-screen").show();
 			_saveAnswer(task, deferred)
@@ -10,12 +10,14 @@ else %} {% set fingers_position_dir = &quot;cme&quot; %} {% set orientation_dir =
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
+			<li><img class="box-panel-option selection-panel-option"
+				src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
+			<!--               
 			<li><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"
@@ -41,7 +43,7 @@ else %} {% set fingers_position_dir = &quot;cme&quot; %} {% set orientation_dir =
 		</div>
 		<div class="selection-panel-inner-body">
 			<div data-x="" data-y=""
-				class="module-x-y grid gray-background gray-front-avatar active">
+				class="module-x-y grid gray-background {{ name }}-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>
@@ -122,12 +124,9 @@ else %} {% set fingers_position_dir = &quot;cme&quot; %} {% set orientation_dir =
 			<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-number-1"
-							data-z=1></div>
-						<div class="ball-selector selection-panel-option ball-number-2"
-							data-z=2></div>
-						<div class="ball-selector selection-panel-option ball-number-3"
-							data-z=3></div>
+						<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>