Commit e1f58bf301d5f73cdcf5eec6847b5abc478dce42

Authored by Adabriand Furtado
1 parent d4d0fe97
Exists in master and in 1 other branch dynamic

Lógica das setas de próximo/anterior e adaptação do código de expressão facial.

view/assets/css/main.css
@@ -363,14 +363,11 @@ ul.rig.columns-4 li { @@ -363,14 +363,11 @@ ul.rig.columns-4 li {
363 363
364 .single-column-option { 364 .single-column-option {
365 display: inline-block; 365 display: inline-block;
  366 + vertical-align: middle;
366 padding-right: 25px; 367 padding-right: 25px;
367 } 368 }
368 369
369 /* Sub-Configuration Panel */ 370 /* Sub-Configuration Panel */
370 -#facial-subconfiguration-options {  
371 - display: none;  
372 -}  
373 -  
374 .subconfiguration-options { 371 .subconfiguration-options {
375 overflow-x: hidden; 372 overflow-x: hidden;
376 white-space: nowrap; 373 white-space: nowrap;
view/assets/js/articulation.js
@@ -41,7 +41,8 @@ @@ -41,7 +41,8 @@
41 d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b) 41 d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
42 selectedY = g; 42 selectedY = g;
43 _setupModuleZ(hand); 43 _setupModuleZ(hand);
44 - //_updateParameterJSON(hand); 44 +
  45 + wikilibras.updateTempParameterJSON("right-hand", "articulacao", "1", f + ";" + g);
45 dynworkflow.userSelectedAnOption(); 46 dynworkflow.userSelectedAnOption();
46 }); 47 });
47 } 48 }
@@ -59,7 +60,8 @@ @@ -59,7 +60,8 @@
59 e = $(articulation_z), 60 e = $(articulation_z),
60 h = b.attr("data-z"); 61 h = b.attr("data-z");
61 b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b); 62 b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
62 - //_updateParameterJSON(hand); 63 +
  64 + wikilibras.updateTempParameterJSON("right-hand", "articulacao", "2", h);
63 dynworkflow.userSelectedAnOption(); 65 dynworkflow.userSelectedAnOption();
64 }); 66 });
65 } 67 }
@@ -69,26 +71,26 @@ @@ -69,26 +71,26 @@
69 wikilibras.updateParameterJSON("articulacao", value); 71 wikilibras.updateParameterJSON("articulacao", value);
70 } 72 }
71 73
72 - function _isRightHand(hand) {  
73 - return hand.indexOf("right-hand") != -1;  
74 - }  
75 -  
76 - function _readValue(hand) {  
77 - var articulation_x_y = "." + hand + "-articulation .module-x-y";  
78 - var articulation_z = "." + hand + "-articulation .module-z";  
79 - var x = parseInt($(articulation_x_y).attr("data-x"));  
80 - var y = parseInt($(articulation_x_y).attr("data-y"));  
81 - var z = $(articulation_z).attr("data-z");  
82 -  
83 - if (!_isRightHand(hand)) { 74 + function _calculateArticulationPointIndex(hand, xValue, yValue, zValue) {
  75 + var x = xValue;
  76 + var y = yValue;
  77 + var z = zValue;
  78 + if (hand == "left-hand") {
84 x = 10 - x + 1; 79 x = 10 - x + 1;
85 } 80 }
86 - z = z == "" ? 1 : parseInt(z);  
87 var value = (z-1)*10 + x + 30*(y-1); 81 var value = (z-1)*10 + x + 30*(y-1);
88 //console.log(value); 82 //console.log(value);
89 return value; 83 return value;
90 } 84 }
91 85
  86 + articulation.processValue = function(hand, selectionArray) {
  87 + var xyValueSplit = selectionArray[0].split(";");
  88 + var xValue = parseInt(xyValueSplit[0]);
  89 + var yValue = parseInt(xyValueSplit[1]);
  90 + var zValue = parseInt(selectionArray[1]);
  91 + return _calculateArticulationPointIndex(hand, xValue, yValue, zValue);
  92 + }
  93 +
92 articulation.setupModuleXY = function(serverhost) { 94 articulation.setupModuleXY = function(serverhost) {
93 server_host = serverhost; 95 server_host = serverhost;
94 _setupBallSelectorXY("right-hand"); 96 _setupBallSelectorXY("right-hand");
view/assets/js/configuration.js
@@ -18,7 +18,8 @@ @@ -18,7 +18,8 @@
18 }); 18 });
19 19
20 var stepOneBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]"; 20 var stepOneBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]";
21 - var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("group"); 21 + var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("value");
  22 + finger_group = typeof finger_group == "undefined" ? "0" : finger_group;
22 $(stepTwoBaseId + " .finger-group").hide(); 23 $(stepTwoBaseId + " .finger-group").hide();
23 $(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show(); 24 $(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show();
24 } 25 }
view/assets/js/dynamic-selection-workflow.js
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 var mainConfig = ""; 8 var mainConfig = "";
9 // The converted Main Config (right/left-hand) to hand for using the same configuration 9 // The converted Main Config (right/left-hand) to hand for using the same configuration
10 var preprocessedMainConfig = ""; 10 var preprocessedMainConfig = "";
11 - // Subconfigurations: Movimento, articulacao, configuracao, orientacao, etc 11 + // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc
12 var currentSubconfig = ""; 12 var currentSubconfig = "";
13 var currentSubConfigName = ""; 13 var currentSubConfigName = "";
14 var currentSubconfigParent = ""; 14 var currentSubconfigParent = "";
@@ -34,14 +34,39 @@ @@ -34,14 +34,39 @@
34 return result; 34 return result;
35 } 35 }
36 36
37 - function _getNextSubConfig() { 37 + function _updateAndGetFirstMovementSubConfig() {
  38 + var selectedMovement = movement.getPreviousSelectedMovement(mainConfig);
  39 + if (typeof selectedMovement == "undefined") return -1;
  40 +
  41 + currentSubconfigParent = jsonWF[preprocessedMainConfig]["movimento"][selectedMovement];
  42 + currentSubConfigName = _getFirstKey(currentSubconfigParent);
  43 + return currentSubConfigName;
  44 + }
  45 +
  46 + function _updateAndGetMovementConfig() {
  47 + currentSubconfigParent = jsonWF[preprocessedMainConfig];
  48 + currentSubConfigName = _getFirstKey(currentSubconfigParent);
  49 + return currentSubConfigName;
  50 + }
  51 +
  52 + function _getNextSubConfig(toForward) {
38 var attrs = _getAttributes(currentSubconfigParent); 53 var attrs = _getAttributes(currentSubconfigParent);
39 for (var i = 0; i < attrs.length; i++) { 54 for (var i = 0; i < attrs.length; i++) {
40 - if (attrs[i] == currentSubConfigName && i < attrs.length - 1) { 55 + if (toForward && attrs[i] == currentSubConfigName && i < attrs.length - 1) {
41 return attrs[i+1]; 56 return attrs[i+1];
  57 + } else if (!toForward && attrs[i] == currentSubConfigName && i >= 1) {
  58 + return attrs[i-1];
42 } 59 }
43 } 60 }
44 - return -1; 61 + if (toForward && currentSubConfigName == "movimento") {
  62 + return _updateAndGetFirstMovementSubConfig();
  63 + } else if (!toForward && preprocessedMainConfig == "hand") {
  64 + return _updateAndGetMovementConfig();
  65 + } else if (!toForward) {
  66 + return currentSubConfigName;
  67 + } else {
  68 + return -1;
  69 + }
45 } 70 }
46 71
47 function _showCurrentSubconfig() { 72 function _showCurrentSubconfig() {
@@ -76,27 +101,38 @@ @@ -76,27 +101,38 @@
76 } 101 }
77 102
78 function _selectSubConfig(subConfig) { 103 function _selectSubConfig(subConfig) {
  104 + if (currentSubConfigName == "movimento") {
  105 + _updateAndGetFirstMovementSubConfig();
  106 + }
79 currentSubConfigName = subConfig; 107 currentSubConfigName = subConfig;
80 currentSubconfig = currentSubconfigParent[currentSubConfigName]; 108 currentSubconfig = currentSubconfigParent[currentSubConfigName];
81 currentStep = 0; 109 currentStep = 0;
82 -  
83 _showCurrentSubconfig(); 110 _showCurrentSubconfig();
84 } 111 }
85 112
86 - // It show the next selection panel on the workflow 113 + // It shows the next selection panel on the workflow
87 function _showNextSubConfig() { 114 function _showNextSubConfig() {
88 - currentStep = currentStep + 1;  
89 - if (currentStep < currentSubconfig.length) { 115 + _walkOnTheWorklow(true);
  116 + }
  117 +
  118 + function _showPreviousSubConfig() {
  119 + _walkOnTheWorklow(false);
  120 + }
  121 +
  122 + function _walkOnTheWorklow(toForward) {
  123 + currentStep = toForward? currentStep + 1 : currentStep - 1;
  124 +
  125 + if (currentStep >= 0 && currentStep < currentSubconfig.length) {
90 _showCurrentSubconfig(); 126 _showCurrentSubconfig();
91 } else { 127 } else {
92 - var nextSubConfig = _getNextSubConfig(); 128 + var nextSubConfig = _getNextSubConfig(toForward);
93 if (nextSubConfig != -1) { 129 if (nextSubConfig != -1) {
94 dynworkflow.selectSubConfig(nextSubConfig); 130 dynworkflow.selectSubConfig(nextSubConfig);
95 } else { 131 } else {
96 wikilibras.hideSelectionPanel(); 132 wikilibras.hideSelectionPanel();
97 } 133 }
98 } 134 }
99 - } 135 + }
100 136
101 // A callback function to be called when the user selects a option on a panel 137 // A callback function to be called when the user selects a option on a panel
102 function _userSelectedAnOption() { 138 function _userSelectedAnOption() {
@@ -145,6 +181,22 @@ @@ -145,6 +181,22 @@
145 return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0; 181 return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0;
146 } 182 }
147 183
  184 + function _setupTimelineListeners(timelineBaseId) {
  185 + $(timelineBaseId + " .icon_container[json_name]").off("click").on("click",
  186 + function() {
  187 + var subConfig = $(this).attr("json_name");
  188 + _selectSubConfig(subConfig);
  189 + });
  190 +
  191 + $(timelineBaseId + " .arrow[name=right-arrow]").off("click").on("click", function() {
  192 + _showNextSubConfig();
  193 + });
  194 +
  195 + $(timelineBaseId + " .arrow[name=left-arrow]").off("click").on("click", function() {
  196 + _showPreviousSubConfig();
  197 + });
  198 + }
  199 +
148 function _setupTimelineIcons(timelineBaseId) { 200 function _setupTimelineIcons(timelineBaseId) {
149 $(timelineBaseId + " .icon_container[json_name]").hide(); 201 $(timelineBaseId + " .icon_container[json_name]").hide();
150 202
@@ -154,15 +206,10 @@ @@ -154,15 +206,10 @@
154 if (preprocessedMainConfig == "hand") { 206 if (preprocessedMainConfig == "hand") {
155 $(timelineBaseId + " .icon_container[json_name=movimento]").show(); 207 $(timelineBaseId + " .icon_container[json_name=movimento]").show();
156 _setupCheckIcon(mainConfig, "movimento"); 208 _setupCheckIcon(mainConfig, "movimento");
157 - //TODO Refact  
158 - _selectTimelineIcon(mainConfig, "articulacao"); 209 + _selectTimelineIcon(mainConfig, currentSubConfigName);
159 } 210 }
160 - $(timelineBaseId + " .icon_container[json_name]").off("click").on("click",  
161 - function() {  
162 - var subConfig = $(this).attr("json_name");  
163 - _selectSubConfig(subConfig);  
164 - });  
165 211
  212 + _setupTimelineListeners(timelineBaseId);
166 $(timelineBaseId).show(); 213 $(timelineBaseId).show();
167 } 214 }
168 215
@@ -182,13 +229,13 @@ @@ -182,13 +229,13 @@
182 dynworkflow.selectMainConfig = function(config) { 229 dynworkflow.selectMainConfig = function(config) {
183 mainConfig = config; 230 mainConfig = config;
184 preprocessedMainConfig = _preprocessMainConfig(mainConfig); 231 preprocessedMainConfig = _preprocessMainConfig(mainConfig);
185 - currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]);  
186 - currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName];  
187 currentSubconfigParent = jsonWF[preprocessedMainConfig]; 232 currentSubconfigParent = jsonWF[preprocessedMainConfig];
  233 + currentSubConfigName = _getFirstKey(currentSubconfigParent);
  234 + currentSubconfig = currentSubconfigParent[currentSubConfigName];
188 currentStep = 0; 235 currentStep = 0;
189 236
190 _showCurrentSubconfig(); 237 _showCurrentSubconfig();
191 - 238 + // hide the timeline on the first subconfiguration for "hand"
192 if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) { 239 if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) {
193 _setupTimeline(); 240 _setupTimeline();
194 } 241 }
@@ -213,6 +260,14 @@ @@ -213,6 +260,14 @@
213 _userSelectedAnOption(); 260 _userSelectedAnOption();
214 } 261 }
215 262
  263 + dynworkflow.getFacialParameters = function() {
  264 + return _getAttributes(jsonWF["facial"]);
  265 + }
  266 +
  267 + dynworkflow.getMovementParameters = function(movementName) {
  268 + return _getAttributes(jsonWF["hand"]["movimento"][movementName]);
  269 + }
  270 +
216 dynworkflow.load = function() { 271 dynworkflow.load = function() {
217 baseUrl = $('#server-url').data('url'); 272 baseUrl = $('#server-url').data('url');
218 $.get(baseUrl + "/conf/selection-workflow-json", function(result) { 273 $.get(baseUrl + "/conf/selection-workflow-json", function(result) {
view/assets/js/facial.js 0 → 100644
@@ -0,0 +1,12 @@ @@ -0,0 +1,12 @@
  1 +(function(facial, $, undefined) {
  2 +
  3 + facial.setup = function() {
  4 + var baseId = ".selection-panel-body[mainConfig=facial]";
  5 + $(baseId + " .selection-panel-option").off("click").on(
  6 + "click", function() {
  7 + wikilibras.selectAnOption(baseId, this);
  8 + dynworkflow.userSelectedAnOption();
  9 + });
  10 + };
  11 +
  12 +}(window.facial = window.facial || {}, jQuery));
0 \ No newline at end of file 13 \ No newline at end of file
view/assets/js/movement.js
1 (function(movement, $, undefined) { 1 (function(movement, $, undefined) {
  2 +
  3 + movement.getPreviousSelectedMovement = function(mainConfig) {
  4 + return $(".selection-panel-body[mainConfig=" + mainConfig +
  5 + "][subConfig=movimento][step=1] .selection-panel-option[select=true]").attr("value");
  6 + };
2 7
3 movement.setup = function(serverhost) { 8 movement.setup = function(serverhost) {
4 var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]"; 9 var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]";
view/assets/js/tmpJSONParser.js 0 → 100644
@@ -0,0 +1,72 @@ @@ -0,0 +1,72 @@
  1 +(function(tmpJSONParser, $, undefined) {
  2 +
  3 + var base_parameter_json = {};
  4 + var movement_parameter_json = {};
  5 +
  6 + function _getLoggedUser() {
  7 + var pybossa_rembember_token = Cookies.get('remember_token');
  8 + var splitted_token_id = pybossa_rembember_token.split('|');
  9 + return splitted_token_id.length > 0 ? splitted_token_id[0]
  10 + : 'anonymous';
  11 + }
  12 +
  13 + function _setupBaseParameterJSON(tmpJSON) {
  14 + base_parameter_json["userId"] = _getLoggedUser();
  15 + base_parameter_json["sinal"] = tmpJSON["sinal"];
  16 + base_parameter_json["interpolacao"] = "normal";
  17 + base_parameter_json["movimentos"] = [];
  18 + movement_parameter_json = {
  19 + "facial" : {},
  20 + "mao_direita" : {},
  21 + "mao_esquerda" : {}
  22 + };
  23 + base_parameter_json["movimentos"].push(movement_parameter_json);
  24 + }
  25 +
  26 + function _parseParameterValue(value) {
  27 + return !isNaN(value) ? parseInt(value) : value;
  28 + }
  29 +
  30 + function _parseTempFacialParameterJSON(tmpJSON) {
  31 + var attrs = dynworkflow.getFacialParameters();
  32 + for (var i in attrs) {
  33 + var attr = attrs[i];
  34 + parameterValue = tmpJSON["facial"][attr][0];
  35 + movement_parameter_json["facial"][attr] = _parseParameterValue(parameterValue);
  36 + }
  37 + }
  38 +
  39 + function _parseTempMovementParameterJSON(tmpJSON, hand) {
  40 + var movimentConfig = tmpJSON[hand]["movimento"];
  41 + if (typeof movimentConfig == "undefined") return;
  42 +
  43 + var movementName = movimentConfig[0];
  44 + var attrs = dynworkflow.getMovementParameters(movementName);
  45 + var parsedHand = hand == "right-hand" ? "mao_direita" : hand;
  46 + parsedHand = hand == "left-hand" ? "mao_esquerda" : parsedHand;
  47 + movement_parameter_json[parsedHand][movementName] = {};
  48 +
  49 + for (var i in attrs) {
  50 + var attr = attrs[i];
  51 + var parameterValue = "";
  52 + if (attr == "configuracao") {
  53 + parameterValue = tmpJSON[hand][attr][1];
  54 + } else if (attr == "articulacao") {
  55 + parameterValue = articulation.processValue(hand,
  56 + tmpJSON[hand][attr]);
  57 + } else {
  58 + parameterValue = tmpJSON[hand][attr][0];
  59 + }
  60 + movement_parameter_json[parsedHand][movementName][attr] =
  61 + _parseParameterValue(parameterValue);
  62 + }
  63 + }
  64 +
  65 + tmpJSONParser.parse = function(tmpJSON) {
  66 + _setupBaseParameterJSON(tmpJSON);
  67 + _parseTempFacialParameterJSON(tmpJSON);
  68 + _parseTempMovementParameterJSON(tmpJSON, "right-hand");
  69 + return base_parameter_json;
  70 + };
  71 +
  72 +}(window.tmpJSONParser = window.tmpJSONParser || {}, jQuery));
0 \ No newline at end of file 73 \ No newline at end of file
view/assets/js/wikilibras.js
1 (function(wikilibras, $, undefined) { 1 (function(wikilibras, $, undefined) {
2 2
3 - var videos_url = '';  
4 - var base_url = '';  
5 - var server_backend_url = '';  
6 - var api_url = '';  
7 - var current_task_id = -1;  
8 - var base_parameter_json = {};  
9 - var moviment_parameter_json = {};  
10 -  
11 - function _getLoggedUser() {  
12 - var pybossa_rembember_token = Cookies.get('remember_token');  
13 - var splitted_token_id = pybossa_rembember_token.split('|');  
14 - return splitted_token_id.length > 0 ? splitted_token_id[0]  
15 - : 'anonymous';  
16 - }  
17 -  
18 - function _setupParameterJSON(sign_name) {  
19 - base_parameter_json['userId'] = _getLoggedUser();  
20 - base_parameter_json['sinal'] = sign_name;  
21 - base_parameter_json['interpolacao'] = 'normal';  
22 - base_parameter_json['movimentos'] = [];  
23 - moviment_parameter_json = {  
24 - "facial": {},  
25 - "mao_direita": {},  
26 - "mao_esquerda": {}  
27 - };  
28 - }  
29 -  
30 - function _loadTaskInfo(task) {  
31 - current_task_id = task.id;  
32 - var sign_name = task.info.sign_name;  
33 - var ref_vid_link = videos_url + sign_name + "_REF.webm";  
34 - $(".sign-label").text(sign_name);  
35 - $(".ref-video").attr("src", ref_vid_link);  
36 -  
37 - _setupParameterJSON(task.info.sign_name);  
38 - }  
39 -  
40 - function _changeImage(img, url) {  
41 - img.attr("src", url);  
42 - }  
43 -  
44 - function _enableIconHover(container, isHover) {  
45 - var img = $(container).find("img").first();  
46 - var hover_img_url = base_url + "/img/" + $(container).attr("name");  
47 - if (isHover) {  
48 - hover_img_url += "-icon-hover.png";  
49 - } else {  
50 - hover_img_url += "-icon.png";  
51 - }  
52 - _changeImage(img, hover_img_url);  
53 - }  
54 -  
55 - function _selectIcon(iconName, isSelect, panel) {  
56 - panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";  
57 - var icon_id = ".icon_container[name=" + iconName + "]" + panel;  
58 - _enableIconHover(icon_id, isSelect);  
59 - $(icon_id).attr("select", isSelect);  
60 - }  
61 -  
62 - function _deselectIcon(iconName, parent) {  
63 - _selectIcon(iconName, false, parent);  
64 - }  
65 -  
66 - function _enableIconCheck(container, isCheck) {  
67 - var img = $(container).find("img").first();  
68 - var check_img_url = base_url + "/img/" + $(container).attr("name");  
69 -  
70 - if (isCheck) {  
71 - check_img_url += "-icon-check.png";  
72 - } else {  
73 - check_img_url += "-icon.png";  
74 - }  
75 - _changeImage(img, check_img_url);  
76 - }  
77 -  
78 - function _setupCheckIcon(option, isCheck, panel) {  
79 - panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";  
80 - var icon_id = ".icon_container[name=" + option + "]" + panel;  
81 - _enableIconCheck(icon_id, isCheck);  
82 - $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);  
83 - }  
84 -  
85 - function _isSelectingState() {  
86 - return $("#configuration-panel .icon_container[select=true]").length > 0;  
87 - }  
88 -  
89 - function _isConfigurationComplete(config) {  
90 - var total_config = $("#" + config +  
91 - "-subconfiguration-options .icon_container").length;  
92 - var completed_config = $("#" + config +  
93 - "-subconfiguration-options .icon_container[complete=true]").length;  
94 - return total_config == completed_config;  
95 - }  
96 -  
97 - function _canHover(el) {  
98 - var incompleteConfig = typeof $(el).attr("complete") == "undefined" ||  
99 - $(el).attr("complete") == "false";  
100 - return (!_isSelectingState() && incompleteConfig) ||  
101 - (typeof $(el).attr("select") == "undefined" && incompleteConfig);  
102 - }  
103 -  
104 - function _getCurrentMainConfiguration() {  
105 - return _isSelectingState() ? $(  
106 - "#configuration-panel .icon_container[select=true]").attr(  
107 - "name") : "";  
108 - }  
109 -  
110 - function _addZoomInToAvatar(option, callback) {  
111 - $("#avatar-default")  
112 - .fadeOut(  
113 - 500, 3 + var videos_url = '';
  4 + var base_url = '';
  5 + var server_backend_url = '';
  6 + var api_url = '';
  7 + var current_task_id = -1;
  8 + var tmpParameterJSON = {};
  9 + var parsedParameterJSON = {};
  10 +
  11 + function _setupTmpParameterJSON(sign_name) {
  12 + tmpParameterJSON = {
  13 + "sinal" : sign_name,
  14 + "facial" : {},
  15 + "right-hand" : {},
  16 + "left-hand" : {}
  17 + };
  18 + parsedParameterJSON = {};
  19 + }
  20 +
  21 + function _loadTaskInfo(task) {
  22 + current_task_id = task.id;
  23 + var sign_name = task.info.sign_name;
  24 + var ref_vid_link = videos_url + sign_name + "_REF.webm";
  25 + $(".sign-label").text(sign_name);
  26 + $(".ref-video").attr("src", ref_vid_link);
  27 +
  28 + _setupTmpParameterJSON(task.info.sign_name);
  29 + }
  30 +
  31 + function _changeImage(img, url) {
  32 + img.attr("src", url);
  33 + }
  34 +
  35 + function _enableIconHover(container, isHover) {
  36 + var img = $(container).find("img").first();
  37 + var hover_img_url = base_url + "/img/" + $(container).attr("name");
  38 + if (isHover) {
  39 + hover_img_url += "-icon-hover.png";
  40 + } else {
  41 + hover_img_url += "-icon.png";
  42 + }
  43 + _changeImage(img, hover_img_url);
  44 + }
  45 +
  46 + function _selectIcon(iconName, isSelect, panel) {
  47 + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
  48 + var icon_id = ".icon_container[name=" + iconName + "]" + panel;
  49 + _enableIconHover(icon_id, isSelect);
  50 + $(icon_id).attr("select", isSelect);
  51 + }
  52 +
  53 + function _deselectIcon(iconName, parent) {
  54 + _selectIcon(iconName, false, parent);
  55 + }
  56 +
  57 + function _enableIconCheck(container, isCheck) {
  58 + var img = $(container).find("img").first();
  59 + var check_img_url = base_url + "/img/" + $(container).attr("name");
  60 +
  61 + if (isCheck) {
  62 + check_img_url += "-icon-check.png";
  63 + } else {
  64 + check_img_url += "-icon.png";
  65 + }
  66 + _changeImage(img, check_img_url);
  67 + }
  68 +
  69 + function _setupCheckIcon(option, isCheck, panel) {
  70 + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
  71 + var icon_id = ".icon_container[name=" + option + "]" + panel;
  72 + _enableIconCheck(icon_id, isCheck);
  73 + $(".icon_container[name=" + option + "]" + panel).attr("complete",
  74 + isCheck);
  75 + }
  76 +
  77 + function _isSelectingState() {
  78 + return $("#configuration-panel .icon_container[select=true]").length > 0;
  79 + }
  80 +
  81 + function _isConfigurationComplete(config) {
  82 + var baseId = ".subconfiguration-panel[mainConfig=" + config + "]";
  83 + var total_config = $(baseId + " .icon_container[json_name]:visible").length;
  84 + var completed_config = $(baseId + " .icon_container[complete=true]").length;
  85 + return total_config == completed_config;
  86 + }
  87 +
  88 + function _canHover(el) {
  89 + var incompleteConfig = typeof $(el).attr("complete") == "undefined"
  90 + || $(el).attr("complete") == "false";
  91 + return (!_isSelectingState() && incompleteConfig)
  92 + || (typeof $(el).attr("select") == "undefined" && incompleteConfig);
  93 + }
  94 +
  95 + function _getCurrentMainConfiguration() {
  96 + return _isSelectingState() ? $(
  97 + "#configuration-panel .icon_container[select=true]").attr(
  98 + "name") : "";
  99 + }
  100 +
  101 + function _addZoomInToAvatar(option, callback) {
  102 + $("#avatar-default")
  103 + .fadeOut(
  104 + 500,
114 function() { 105 function() {
115 - $("#avatar-container").removeClass("col-sm-7");  
116 - $("#avatar-container").addClass("col-sm-5");  
117 - $("#selection-container").removeClass("col-sm-2");  
118 - $("#selection-container").addClass("col-sm-4");  
119 - $("#avatar-container").removeClass(  
120 - "avatar-container-zoom-out");  
121 - $("#avatar-container").addClass(  
122 - "avatar-container-zoom-in");  
123 - $("#avatar-" + option).removeClass(  
124 - "avatar-img-zoom-out");  
125 - $("#avatar-" + option).fadeIn(  
126 - 500, 106 + $("#avatar-container").removeClass("col-sm-7");
  107 + $("#avatar-container").addClass("col-sm-5");
  108 + $("#selection-container").removeClass("col-sm-2");
  109 + $("#selection-container").addClass("col-sm-4");
  110 + $("#avatar-container").removeClass(
  111 + "avatar-container-zoom-out");
  112 + $("#avatar-container").addClass(
  113 + "avatar-container-zoom-in");
  114 + $("#avatar-" + option).removeClass(
  115 + "avatar-img-zoom-out");
  116 + $("#avatar-" + option).fadeIn(
  117 + 500,
127 function() { 118 function() {
128 - $("#avatar-" + option).addClass(  
129 - "avatar-" + option +  
130 - "-img-zoom-in");  
131 - callback(); 119 + $("#avatar-" + option).addClass(
  120 + "avatar-" + option
  121 + + "-img-zoom-in");
  122 + callback();
132 }); 123 });
133 }); 124 });
134 - } 125 + }
135 126
136 - function _addZoomOutToAvatar(option, callback) {  
137 - $("#avatar-" + option).fadeOut(  
138 - 500, 127 + function _addZoomOutToAvatar(option, callback) {
  128 + $("#avatar-" + option).fadeOut(
  129 + 500,
139 function() { 130 function() {
140 - $("#selection-container").removeClass("col-sm-4");  
141 - $("#selection-container").addClass("col-sm-2");  
142 - $("#avatar-container").removeClass("col-sm-5");  
143 - $("#avatar-container").addClass("col-sm-7");  
144 - $("#avatar-container").removeClass(  
145 - "avatar-container-zoom-in");  
146 - $("#avatar-container")  
147 - .addClass("avatar-container-zoom-out");  
148 - $("#avatar-default").fadeIn(  
149 - 500, 131 + $("#selection-container").removeClass("col-sm-4");
  132 + $("#selection-container").addClass("col-sm-2");
  133 + $("#avatar-container").removeClass("col-sm-5");
  134 + $("#avatar-container").addClass("col-sm-7");
  135 + $("#avatar-container").removeClass(
  136 + "avatar-container-zoom-in");
  137 + $("#avatar-container")
  138 + .addClass("avatar-container-zoom-out");
  139 + $("#avatar-default").fadeIn(
  140 + 500,
150 function() { 141 function() {
151 - $("#avatar-" + option).removeClass(  
152 - "avatar-" + option + "-img-zoom-in");  
153 - $("#avatar-" + option).addClass(  
154 - "avatar-img-zoom-out");  
155 - callback(); 142 + $("#avatar-" + option).removeClass(
  143 + "avatar-" + option + "-img-zoom-in");
  144 + $("#avatar-" + option).addClass(
  145 + "avatar-img-zoom-out");
  146 + callback();
156 }); 147 });
157 }); 148 });
158 - }  
159 -  
160 - function _clearPreviousSelection() {  
161 - $(".selection-panel-body").hide();  
162 - $(".subconfiguration-options").hide();  
163 - $(".subconfiguration-panel").hide();  
164 -  
165 - if (_isSelectingState()) {  
166 - var current_option = _getCurrentMainConfiguration();  
167 - _selectIcon(current_option, false);  
168 - if (_isConfigurationComplete(current_option)) {  
169 - _setupCheckIcon(current_option, true);  
170 - }  
171 - $("#avatar-" + current_option).fadeOut(500);  
172 - }  
173 - }  
174 -  
175 - function _showSelectionPanel(option) {  
176 - _clearPreviousSelection();  
177 - _selectIcon(option, true);  
178 - if (option == "facial") {  
179 - _setupFacialSelectionPanel();  
180 - } else {  
181 - _setupHandSelectionPanel(option);  
182 - }  
183 - _setupGUIOnSelection(option);  
184 -  
185 - dynworkflow.selectMainConfig(option);  
186 - }  
187 -  
188 - function _hideSelectionPanel() {  
189 - var config = _getCurrentMainConfiguration();  
190 - _deselectIcon(config);  
191 - if (_isConfigurationComplete(config)) {  
192 - _finishConfiguration(config);  
193 - }  
194 -  
195 - _addZoomOutToAvatar(config, function() {  
196 - $("#ready-button").fadeIn(300);  
197 - $(".edit-container").fadeIn(300);  
198 - });  
199 - $("#selection-panel").fadeOut(300);  
200 - }  
201 -  
202 - function _canRenderSignVideo() {  
203 - return _isConfigurationComplete("facial") &&  
204 - (_isConfigurationComplete("right-hand") || _isConfigurationComplete("left-hand"));  
205 - }  
206 -  
207 - function _finishConfiguration(config) {  
208 - _setupCheckIcon(config, true);  
209 - _setupCheckIcon("avatar-" + config, true);  
210 - $("#" + config + "-edit .check-icon").show();  
211 -  
212 - if (_canRenderSignVideo()) {  
213 - $("#ready-button").removeClass("disabled");  
214 - }  
215 - }  
216 -  
217 - function _unfinishConfiguration(config, panel) {  
218 - _setupCheckIcon(config, false, panel);  
219 - _setupCheckIcon("avatar-" + config, false, panel);  
220 - $("#" + config + "-edit .check-icon").hide();  
221 -  
222 - if (!_canRenderSignVideo()) {  
223 - $("#ready-button").addClass("disabled");  
224 - }  
225 - }  
226 -  
227 - function _setupGUIOnSelection(option) {  
228 - $("#ready-button").fadeOut(300);  
229 - $(".edit-container").fadeOut(300);  
230 - _addZoomInToAvatar(option, function() {  
231 - $("#selection-panel").fadeIn(300);  
232 - });  
233 - }  
234 -  
235 - function _setupFacialSelectionPanel() {  
236 - var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;  
237 - if (previous_select) {  
238 - var subconfig = $(  
239 - "#facial-subconfiguration-options .icon_container[select=true]")  
240 - .attr("panel");  
241 - $("#" + subconfig).fadeIn(300);  
242 - } else {  
243 - _selectIcon("facial-expression", true);  
244 - $("#facial-expression").fadeIn(300);  
245 - }  
246 - $("#facial-subconfiguration-options").fadeIn(300);  
247 - $(".subconfiguration-panel").fadeIn(300);  
248 - }  
249 -  
250 - function _isHandMovimentComplete(main_config) {  
251 - return $("#" + main_config +  
252 - "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0;  
253 - }  
254 -  
255 - function _setupHandSelectionPanel(option) {  
256 - var previous_select = $("#" + option +  
257 - "-subconfiguration-options .icon_container[select=true]").length > 0;  
258 - if (previous_select) {  
259 - var subconfig = $(  
260 - "#" +  
261 - option +  
262 - "-subconfiguration-options .icon_container[select=true]")  
263 - .attr("panel");  
264 -  
265 - if (_hasMultipleConfigurations(subconfig)) {  
266 - $("#" + subconfig + "-1").show();  
267 - }  
268 - $("#" + subconfig).fadeIn(300);  
269 - } else {  
270 - _selectIcon("hand-moviment", true, option + "-moviment");  
271 - $("#" + option + "-moviment").fadeIn(300);  
272 - }  
273 -  
274 - $("#" + option + "-subconfiguration-options").fadeIn(300);  
275 - if (_isHandMovimentComplete(option)) {  
276 - $(".subconfiguration-panel").fadeIn(300);  
277 - }  
278 - }  
279 -  
280 - function _setupConfigurationPanel() {  
281 - $(".icon_container").off("mouseover").on("mouseover", function() {  
282 - if (_canHover(this)) {  
283 - _enableIconHover(this, true);  
284 - }  
285 - });  
286 - $(".icon_container").off("mouseout").on("mouseout", function() {  
287 - if (_canHover(this)) {  
288 - _enableIconHover(this, false);  
289 - }  
290 - });  
291 - $(".config-panel-option").off("click").on("click", function() {  
292 - _showSelectionPanel($(this).attr("panel"));  
293 - });  
294 - $("#minimize-icon-container").off("click").on("click", function() {  
295 - $("#ref-video-container").hide();  
296 - $("#minimize-icon-container").hide();  
297 - $("#maximize-icon-container").show();  
298 - });  
299 - $("#maximize-icon-container").off("click").on("click", function() {  
300 - $("#ref-video-container").show();  
301 - $("#maximize-icon-container").hide();  
302 - $("#minimize-icon-container").show();  
303 - });  
304 - }  
305 -  
306 - // Selection Panel  
307 - function _hasSelectedAnOption(subconfig) {  
308 - return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0;  
309 - }  
310 -  
311 - // JSON  
312 - function _getFirstKey(json) {  
313 - var first_key = undefined;  
314 - for (first_key in json) break;  
315 - return first_key;  
316 - }  
317 -  
318 - function _updateParameterJSON(config, value) {  
319 - if (typeof config == "undefined" || typeof value == "undefined")  
320 - return;  
321 -  
322 - var current_main_config = _getCurrentMainConfiguration();  
323 - current_main_config = current_main_config == "right-hand" ? "mao_direita"  
324 - : current_main_config;  
325 - current_main_config = current_main_config == "left-hand" ? "mao_esquerda"  
326 - : current_main_config;  
327 - value = !isNaN(value) ? parseInt(value) : value;  
328 -  
329 - if (config == "movimento") {  
330 - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);  
331 - if (typeof first_key == "undefined") {  
332 - moviment_parameter_json[current_main_config][value] = {};  
333 - } else if (first_key != value) {  
334 - moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];  
335 - delete moviment_parameter_json[current_main_config][first_key];  
336 - }  
337 - } else if (current_main_config.indexOf("mao") != -1) {  
338 -  
339 - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);  
340 - if (typeof first_key == "undefined") {  
341 - first_key = "placeholder";  
342 - moviment_parameter_json[current_main_config][first_key] = {};  
343 - }  
344 - moviment_parameter_json[current_main_config][first_key][config] = value;  
345 - } else {  
346 - moviment_parameter_json[current_main_config][config] = value;  
347 - }  
348 - }  
349 -  
350 - function _readConfigValue(el, config_name) {  
351 - if (typeof config_name == "undefined" || config_name == "articulacao") return;  
352 -  
353 - return $(el).attr("value");  
354 - }  
355 -  
356 - function _selectAnOption(parentId, el) {  
357 - $(parentId + " .selection-panel-option[select=true]")  
358 - .removeAttr("select");  
359 - $(el).attr("select", true);  
360 -  
361 - //var config_value = _readConfigValue(el, current_config_name);  
362 - //_updateParameterJSON(current_config_name, config_value);  
363 - }  
364 -  
365 - function _setupSelectionPanel() {  
366 - $("#selection-panel .x").off("click").on("click", function() {  
367 - _hideSelectionPanel();  
368 - });  
369 - // $(".arrow[name=right-arrow]").off("click").on("click", function() {  
370 - // var next = _getNextSubConfiguration();  
371 - // _showSubConfiguration(next, false);  
372 - // });  
373 - // $(".arrow[name=left-arrow]").off("click").on("click", function() {  
374 - // var previous = _getPreviousSubConfiguration();  
375 - // _showSubConfiguration(previous, false);  
376 - // });  
377 - }  
378 -  
379 - // Render Screen  
380 - function _submitParameterJSON(callback) {  
381 - base_parameter_json["movimentos"] = [];  
382 - base_parameter_json["movimentos"].push(moviment_parameter_json);  
383 - console.log(base_parameter_json);  
384 -  
385 - $.ajax({  
386 - type: "POST",  
387 - url: api_url + "/sign",  
388 - data: JSON.stringify(base_parameter_json),  
389 - contentType: "application/json",  
390 - success: function(response) {  
391 - console.log(response);  
392 - callback();  
393 - },  
394 - error: function(xhr, textStatus, error) {  
395 - alert(xhr.responseText);  
396 - }  
397 - });  
398 - }  
399 -  
400 - function _showRenderedAvatar() {  
401 - var user_id = base_parameter_json["userId"];  
402 - var sign_name = base_parameter_json["sinal"];  
403 - var rendered_avatar_url = api_url + "/public/" + user_id + "/" +  
404 - sign_name + ".webm";  
405 - $("#render-avatar video").attr("src", rendered_avatar_url);  
406 - $("#render-avatar").fadeIn(300);  
407 - }  
408 -  
409 - function _setupRenderScreen() {  
410 - $("#configuration-screen").hide();  
411 - $("#render-avatar").hide();  
412 - $("#render-screen").show();  
413 - $("#render-loading").fadeIn(300);  
414 - $("#finish-button").addClass("disabled");  
415 - $("#render-ref video").prop("controls", false);  
416 - $("#render-ref video").get(0).pause();  
417 -  
418 - _submitParameterJSON(function() {  
419 - $("#render-loading").fadeOut(300);  
420 - $("#render-ref video").prop("controls", true);  
421 - $("#render-ref video").get(0).play();  
422 - $("#finish-button").removeClass("disabled");  
423 - _showRenderedAvatar();  
424 - });  
425 - }  
426 -  
427 - function _clearGUI() {  
428 - $(".selection-panel-option").removeAttr("select");  
429 - $(".icon_container").removeAttr("select");  
430 - $(".icon_container[complete=true]").each( 149 + }
  150 +
  151 + function _clearPreviousSelection() {
  152 + $(".selection-panel-body").hide();
  153 + $(".subconfiguration-panel").hide();
  154 +
  155 + if (_isSelectingState()) {
  156 + var current_option = _getCurrentMainConfiguration();
  157 + _selectIcon(current_option, false);
  158 + if (_isConfigurationComplete(current_option)) {
  159 + _setupCheckIcon(current_option, true);
  160 + }
  161 + $("#avatar-" + current_option).fadeOut(500);
  162 + }
  163 + }
  164 +
  165 + function _showSelectionPanel(option) {
  166 + _clearPreviousSelection();
  167 + _selectIcon(option, true);
  168 + _setupGUIOnSelection(option);
  169 +
  170 + dynworkflow.selectMainConfig(option);
  171 + }
  172 +
  173 + function _hideSelectionPanel() {
  174 + var config = _getCurrentMainConfiguration();
  175 + _deselectIcon(config);
  176 + if (_isConfigurationComplete(config)) {
  177 + _finishConfiguration(config);
  178 + }
  179 +
  180 + _addZoomOutToAvatar(config, function() {
  181 + $("#ready-button").fadeIn(300);
  182 + $(".edit-container").fadeIn(300);
  183 + });
  184 + $("#selection-panel").fadeOut(300);
  185 + }
  186 +
  187 + function _canRenderSignVideo() {
  188 + return _isConfigurationComplete("facial")
  189 + && (_isConfigurationComplete("right-hand") || _isConfigurationComplete("left-hand"));
  190 + }
  191 +
  192 + function _finishConfiguration(config) {
  193 + _setupCheckIcon(config, true);
  194 + _setupCheckIcon("avatar-" + config, true);
  195 + $("#" + config + "-edit .check-icon").show();
  196 +
  197 + if (_canRenderSignVideo()) {
  198 + $("#ready-button").removeClass("disabled");
  199 + }
  200 + }
  201 +
  202 + function _unfinishConfiguration(config, panel) {
  203 + _setupCheckIcon(config, false, panel);
  204 + _setupCheckIcon("avatar-" + config, false, panel);
  205 + $("#" + config + "-edit .check-icon").hide();
  206 +
  207 + if (!_canRenderSignVideo()) {
  208 + $("#ready-button").addClass("disabled");
  209 + }
  210 + }
  211 +
  212 + function _setupGUIOnSelection(option) {
  213 + $("#ready-button").fadeOut(300);
  214 + $(".edit-container").fadeOut(300);
  215 + _addZoomInToAvatar(option, function() {
  216 + $("#selection-panel").fadeIn(300);
  217 + });
  218 + }
  219 +
  220 + function _setupConfigurationPanel() {
  221 + $(".icon_container").off("mouseover").on("mouseover", function() {
  222 + if (_canHover(this)) {
  223 + _enableIconHover(this, true);
  224 + }
  225 + });
  226 + $(".icon_container").off("mouseout").on("mouseout", function() {
  227 + if (_canHover(this)) {
  228 + _enableIconHover(this, false);
  229 + }
  230 + });
  231 + $(".config-panel-option").off("click").on("click", function() {
  232 + _showSelectionPanel($(this).attr("panel"));
  233 + });
  234 + $("#minimize-icon-container").off("click").on("click", function() {
  235 + $("#ref-video-container").hide();
  236 + $("#minimize-icon-container").hide();
  237 + $("#maximize-icon-container").show();
  238 + });
  239 + $("#maximize-icon-container").off("click").on("click", function() {
  240 + $("#ref-video-container").show();
  241 + $("#maximize-icon-container").hide();
  242 + $("#minimize-icon-container").show();
  243 + });
  244 + }
  245 +
  246 + function _updateTempParameterJSON(mainConfig, subConfig, step, value) {
  247 + var subConfigJSON = tmpParameterJSON[mainConfig][subConfig];
  248 +
  249 + if (typeof subConfigJSON == "undefined") {
  250 + tmpParameterJSON[mainConfig][subConfig] = [];
  251 + subConfigJSON = tmpParameterJSON[mainConfig][subConfig];
  252 + }
  253 +
  254 + subConfigJSON[parseInt(step)-1] = value;
  255 + //console.log(tmpParameterJSON);
  256 + }
  257 +
  258 + function _selectAnOption(parentId, el) {
  259 + $(parentId + " .selection-panel-option[select=true]").removeAttr(
  260 + "select");
  261 + $(el).attr("select", true);
  262 +
  263 + var mainConfig = $(parentId).attr("mainConfig");
  264 + var subConfig = $(parentId).attr("subConfig");
  265 + var step = $(parentId).attr("step");
  266 + _updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr("value"));
  267 + }
  268 +
  269 + function _setupSelectionPanel() {
  270 + $("#selection-panel .x").off("click").on("click", function() {
  271 + _hideSelectionPanel();
  272 + });
  273 + }
  274 +
  275 + // Render Screen
  276 + function _submitParameterJSON(callback) {
  277 + parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON);
  278 + //console.log(parsedParameterJSON);
  279 +
  280 + $.ajax({
  281 + type : "POST",
  282 + url : api_url + "/sign",
  283 + data : JSON.stringify(parsedParameterJSON),
  284 + contentType : "application/json",
  285 + success : function(response) {
  286 + console.log(response);
  287 + callback();
  288 + },
  289 + error : function(xhr, textStatus, error) {
  290 + alert(xhr.responseText);
  291 + }
  292 + });
  293 + }
  294 +
  295 + function _showRenderedAvatar() {
  296 + var user_id = parsedParameterJSON["userId"];
  297 + var sign_name = parsedParameterJSON["sinal"];
  298 + var rendered_avatar_url = api_url + "/public/" + user_id + "/"
  299 + + sign_name + ".webm";
  300 + $("#render-avatar video").attr("src", rendered_avatar_url);
  301 + $("#render-avatar").fadeIn(300);
  302 + }
  303 +
  304 + function _setupRenderScreen() {
  305 + $("#configuration-screen").hide();
  306 + $("#render-avatar").hide();
  307 + $("#render-screen").show();
  308 + $("#render-loading").fadeIn(300);
  309 + $("#finish-button").addClass("disabled");
  310 + $("#render-ref video").prop("controls", false);
  311 + $("#render-ref video").get(0).pause();
  312 +
  313 + _submitParameterJSON(function() {
  314 + $("#render-loading").fadeOut(300);
  315 + $("#render-ref video").prop("controls", true);
  316 + $("#render-ref video").get(0).play();
  317 + $("#finish-button").removeClass("disabled");
  318 + _showRenderedAvatar();
  319 + });
  320 + }
  321 +
  322 + function _clearGUI() {
  323 + $(".selection-panel-option").removeAttr("select");
  324 + $(".icon_container").removeAttr("select");
  325 + $(".icon_container[complete=true]").each(
431 function() { 326 function() {
432 - _unfinishConfiguration($(this).attr("name"), $(this).attr(  
433 - "panel")); 327 + _unfinishConfiguration($(this).attr("name"), $(this).attr(
  328 + "panel"));
434 }); 329 });
435 - }  
436 -  
437 - function _setupMainScreen(task, deferred) {  
438 - $("#initial-screen").fadeIn(300);  
439 - $("#start-button").off("click").on("click", function() {  
440 - $("#initial-screen").hide();  
441 - $("#configuration-screen").show();  
442 - dynengine.load();  
443 - dynworkflow.load();  
444 - console.log('dynengine loaded');  
445 - });  
446 - $("#ready-button").off("click").on("click", function() {  
447 - if ($(this).hasClass('disabled')) {  
448 - event.preventDefault();  
449 - return;  
450 - }  
451 - _setupRenderScreen();  
452 - });  
453 - $("#render-edit").off("click").on("click", function() {  
454 - $("#render-screen").hide();  
455 - $("#configuration-screen").show();  
456 - });  
457 - $("#finish-button").off("click").on("click", function() {  
458 - if ($(this).hasClass('disabled')) {  
459 - event.preventDefault();  
460 - return;  
461 - }  
462 - $("#render-screen").hide();  
463 - $("#thanks-screen").show();  
464 - _saveAnswer(task, deferred)  
465 - });  
466 - }  
467 -  
468 - function _setupGUI(task, deferred) {  
469 - _clearGUI();  
470 - _setupConfigurationPanel();  
471 - _setupSelectionPanel();  
472 - _setupMainScreen(task, deferred);  
473 - }  
474 -  
475 - function _saveAnswer(task, deferred) {  
476 - var answer = {}  
477 - answer["status"] = "FINISHED";  
478 - answer["parameter_json"] = base_parameter_json;  
479 -  
480 - /*pybossa.saveTask(task.id, answer).done(function() {  
481 - setTimeout(function() {  
482 - $("#thanks-screen").hide();  
483 - deferred.resolve();  
484 - }, 2500);  
485 - });*/  
486 -  
487 - setTimeout(function() {  
488 - $("#thanks-screen").hide();  
489 - deferred.resolve();  
490 - }, 2500);  
491 - }  
492 -  
493 - function _showCompletedAllTaskMsg() {  
494 - $("#completed-task-msg").hide();  
495 - $("#completed-all-task-msg").show();  
496 - $("#thanks-screen").fadeIn(300);  
497 - }  
498 -  
499 - pybossa.presentTask(function(task, deferred) {  
500 - if (!$.isEmptyObject(task) && current_task_id != task.id) {  
501 - _loadTaskInfo(task);  
502 - _setupGUI(task, deferred)  
503 - $("#main-container").fadeIn(500);  
504 - } else {  
505 - _showCompletedAllTaskMsg();  
506 - }  
507 - });  
508 -  
509 - // Private methods  
510 - function _run(projectname) {  
511 - pybossa.run(projectname);  
512 - }  
513 -  
514 - // Public methods  
515 - wikilibras.run = function(serverhost, serverbackend, projectname, apihost) {  
516 - base_url = serverhost;  
517 - server_back_url = serverbackend;  
518 - videos_url = base_url + "/videos/";  
519 - api_url = apihost;  
520 - _run(projectname);  
521 - };  
522 -  
523 - wikilibras.updateParameterJSON = function(config, value) {  
524 - _updateParameterJSON(config, value);  
525 - }  
526 -  
527 - wikilibras.hideSelectionPanel = function() {  
528 - _hideSelectionPanel();  
529 - }  
530 -  
531 - wikilibras.selectAnOption = function(parentId, el) {  
532 - _selectAnOption(parentId, el);  
533 - }  
534 -  
535 - wikilibras.enableIconHover = function(container, isHover) {  
536 - _enableIconHover(container, isHover);  
537 - }  
538 -  
539 - wikilibras.enableIconCheck = function(container, isHover) {  
540 - _enableIconCheck(container, isHover);  
541 - }  
542 - 330 + }
  331 +
  332 + function _setupMainScreen(task, deferred) {
  333 + $("#initial-screen").fadeIn(300);
  334 + $("#start-button").off("click").on("click", function() {
  335 + $("#initial-screen").hide();
  336 + $("#configuration-screen").show();
  337 + dynengine.load();
  338 + dynworkflow.load();
  339 + console.log('dynengine loaded');
  340 + });
  341 + $("#ready-button").off("click").on("click", function() {
  342 + if ($(this).hasClass('disabled')) {
  343 + event.preventDefault();
  344 + return;
  345 + }
  346 + _setupRenderScreen();
  347 + });
  348 + $("#render-edit").off("click").on("click", function() {
  349 + $("#render-screen").hide();
  350 + $("#configuration-screen").show();
  351 + });
  352 + $("#finish-button").off("click").on("click", function() {
  353 + if ($(this).hasClass('disabled')) {
  354 + event.preventDefault();
  355 + return;
  356 + }
  357 + $("#render-screen").hide();
  358 + $("#thanks-screen").show();
  359 + _saveAnswer(task, deferred)
  360 + });
  361 + }
  362 +
  363 + function _setupGUI(task, deferred) {
  364 + _clearGUI();
  365 + _setupConfigurationPanel();
  366 + _setupSelectionPanel();
  367 + _setupMainScreen(task, deferred);
  368 + }
  369 +
  370 + function _saveAnswer(task, deferred) {
  371 + var answer = {}
  372 + answer["status"] = "FINISHED";
  373 + answer["parameter_json"] = parsedParameterJSON;
  374 +
  375 + /*pybossa.saveTask(task.id, answer).done(function() {
  376 + setTimeout(function() {
  377 + $("#thanks-screen").hide();
  378 + deferred.resolve();
  379 + }, 2500);
  380 + });*/
  381 +
  382 + setTimeout(function() {
  383 + $("#thanks-screen").hide();
  384 + deferred.resolve();
  385 + }, 2500);
  386 + }
  387 +
  388 + function _showCompletedAllTaskMsg() {
  389 + $("#completed-task-msg").hide();
  390 + $("#completed-all-task-msg").show();
  391 + $("#thanks-screen").fadeIn(300);
  392 + }
  393 +
  394 + pybossa.presentTask(function(task, deferred) {
  395 + if (!$.isEmptyObject(task) && current_task_id != task.id) {
  396 + _loadTaskInfo(task);
  397 + _setupGUI(task, deferred)
  398 + $("#main-container").fadeIn(500);
  399 + } else {
  400 + _showCompletedAllTaskMsg();
  401 + }
  402 + });
  403 +
  404 + // Private methods
  405 + function _run(projectname) {
  406 + pybossa.run(projectname);
  407 + }
  408 +
  409 + // Public methods
  410 + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) {
  411 + base_url = serverhost;
  412 + server_back_url = serverbackend;
  413 + videos_url = base_url + "/videos/";
  414 + api_url = apihost;
  415 + _run(projectname);
  416 + };
  417 +
  418 + wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, value) {
  419 + _updateTempParameterJSON(mainConfig, subConfig, step, value);
  420 + }
  421 +
  422 + wikilibras.hideSelectionPanel = function() {
  423 + _hideSelectionPanel();
  424 + }
  425 +
  426 + wikilibras.selectAnOption = function(parentId, el) {
  427 + _selectAnOption(parentId, el);
  428 + }
  429 +
  430 + wikilibras.enableIconHover = function(container, isHover) {
  431 + _enableIconHover(container, isHover);
  432 + }
  433 +
  434 + wikilibras.enableIconCheck = function(container, isHover) {
  435 + _enableIconCheck(container, isHover);
  436 + }
  437 +
543 }(window.wikilibras = window.wikilibras || {}, jQuery)); 438 }(window.wikilibras = window.wikilibras || {}, jQuery));
view/facial-configuration.html
@@ -1,133 +0,0 @@ @@ -1,133 +0,0 @@
1 -{% macro selectionPanel() -%}  
2 -<div id="facial-expression" class="selection-panel-body" panel="facial"  
3 - name="expressao">  
4 - <div class="panel-header">  
5 - <h8>Expressão</h8>  
6 - </div>  
7 - <div class="selection-panel-inner-body">  
8 - <ul class="rig columns-3">  
9 - <li><img class="box-panel-option selection-panel-option"  
10 - src="{{ server }}/img/exf/0000.png" value="0" /> 1.</li>  
11 - <li><img class="box-panel-option selection-panel-option"  
12 - src="{{ server }}/img/exf/0001.png" value="1" /> 2.</li>  
13 - <li><img class="box-panel-option selection-panel-option"  
14 - src="{{ server }}/img/exf/0002.png" value="2" /> 3.</li>  
15 - <li><img class="box-panel-option selection-panel-option"  
16 - src="{{ server }}/img/exf/0003.png" value="3" /> 4.</li>  
17 - <li><img class="box-panel-option selection-panel-option"  
18 - src="{{ server }}/img/exf/0004.png" value="4" /> 5.</li>  
19 - <li><img class="box-panel-option selection-panel-option"  
20 - src="{{ server }}/img/exf/0005.png" value="5" /> 6.</li>  
21 - <li><img class="box-panel-option selection-panel-option"  
22 - src="{{ server }}/img/exf/0006.png" value="6" /> 7.</li>  
23 - <li><img class="box-panel-option selection-panel-option"  
24 - src="{{ server }}/img/exf/0007.png" value="7" /> 8.</li>  
25 - <li><img class="box-panel-option selection-panel-option"  
26 - src="{{ server }}/img/exf/0008.png" value="8" /> 9.</li>  
27 - <li><img class="box-panel-option selection-panel-option"  
28 - src="{{ server }}/img/exf/0009.png" value="9" />10.</li>  
29 - <li><img class="box-panel-option selection-panel-option"  
30 - src="{{ server }}/img/exf/0010.png" value="10" />11.</li>  
31 - <li><img class="box-panel-option selection-panel-option"  
32 - src="{{ server }}/img/exf/0011.png" value="11" />12.</li>  
33 - <li><img class="box-panel-option selection-panel-option"  
34 - src="{{ server }}/img/exf/0012.png" value="12" />13.</li>  
35 - <li><img class="box-panel-option selection-panel-option"  
36 - src="{{ server }}/img/exf/0013.png" value="13" />14.</li>  
37 - <li><img class="box-panel-option selection-panel-option"  
38 - src="{{ server }}/img/exf/0014.png" value="14" />15.</li>  
39 - <li><img class="box-panel-option selection-panel-option"  
40 - src="{{ server }}/img/exf/0015.png" value="15" />16.</li>  
41 - <li><img class="box-panel-option selection-panel-option"  
42 - src="{{ server }}/img/exf/0016.png" value="16" />17.</li>  
43 - <li><img class="box-panel-option selection-panel-option"  
44 - src="{{ server }}/img/exf/0017.png" value="17" />18.</li>  
45 - <li><img class="box-panel-option selection-panel-option"  
46 - src="{{ server }}/img/exf/0018.png" value="18" />19.</li>  
47 - <li><img class="box-panel-option selection-panel-option"  
48 - src="{{ server }}/img/exf/0019.png" value="19" />20.</li>  
49 - <li><img class="box-panel-option selection-panel-option"  
50 - src="{{ server }}/img/exf/0020.png" value="20" />21.</li>  
51 - </ul>  
52 - </div>  
53 -</div>  
54 -<div id="facial-expression-velocity" class="selection-panel-body"  
55 - panel="facial" name="transicao">  
56 - <div class="panel-header">  
57 - <h8>Velocidade de Transição</h8>  
58 - </div>  
59 - <div class="single-column-option-container">  
60 - <div class="single-column-option">  
61 - <img class="box-panel-option selection-panel-option"  
62 - src="{{ server }}/img/exf/0000.png" value="lento" />  
63 - </div>  
64 - <img class="single-column-option"  
65 - src="{{ server }}/img/slow-velocity-icon.png" /> Lento  
66 - </div>  
67 - <div class="single-column-option-container">  
68 - <div class="single-column-option">  
69 - <img class="box-panel-option selection-panel-option"  
70 - src="{{ server }}/img/exf/0000.png" value="normal" />  
71 - </div>  
72 - <img class="single-column-option"  
73 - src="{{ server }}/img/normal-velocity-icon.png" /> Normal  
74 - </div>  
75 - <div class="single-column-option-container">  
76 - <div class="single-column-option">  
77 - <img class="box-panel-option selection-panel-option"  
78 - src="{{ server }}/img/exf/0000.png" value="rapido" />  
79 - </div>  
80 - <img class="single-column-option"  
81 - src="{{ server }}/img/fast-velocity-icon.png" /> Rápido  
82 - </div>  
83 -</div>  
84 -<div id="facial-expression-duration" class="selection-panel-body"  
85 - panel="facial" name="duracao">  
86 - <div class="panel-header">  
87 - <h8>Duração da Expressão</h8>  
88 - </div>  
89 - <div class="single-column-option-container">  
90 - <div class="single-column-option">  
91 - <img class="box-panel-option selection-panel-option"  
92 - src="{{ server }}/img/exf/0000.png" value="lento" />  
93 - </div>  
94 - <img class="single-column-option"  
95 - src="{{ server }}/img/long-duration-icon.png" /> Longa  
96 - </div>  
97 - <div class="single-column-option-container">  
98 - <div class="single-column-option">  
99 - <img class="box-panel-option selection-panel-option"  
100 - src="{{ server }}/img/exf/0000.png" value="normal" />  
101 - </div>  
102 - <img class="single-column-option"  
103 - src="{{ server }}/img/normal-duration-icon.png" /> Normal  
104 - </div>  
105 - <div class="single-column-option-container">  
106 - <div class="single-column-option">  
107 - <img class="box-panel-option selection-panel-option"  
108 - src="{{ server }}/img/exf/0000.png" value="rapido" />  
109 - </div>  
110 - <img class="single-column-option"  
111 - src="{{ server }}/img/short-duration-icon.png" /> Breve  
112 - </div>  
113 -</div>  
114 -{%- endmacro %} {%- macro subconfigPanel() -%}  
115 -<div id="facial-subconfiguration-options"  
116 - class="subconfiguration-options col-sm-10">  
117 - <div class="icon_container" name="facial-expression"  
118 - panel="facial-expression" previous="facial-expression"  
119 - next="facial-expression-velocity">  
120 - <img src="{{ server }}/img/facial-expression-icon.png" />  
121 - </div>  
122 - <div class="icon_container" name="facial-expression-velocity"  
123 - panel="facial-expression-velocity" previous="facial-expression"  
124 - next="facial-expression-duration">  
125 - <img src="{{ server }}/img/facial-expression-velocity-icon.png" />  
126 - </div>  
127 - <div class="icon_container" name="facial-expression-duration"  
128 - panel="facial-expression-duration"  
129 - previous="facial-expression-velocity" next="end">  
130 - <img src="{{ server }}/img/facial-expression-duration-icon.png" />  
131 - </div>  
132 -</div>  
133 -{%- endmacro %}  
view/facial/duracao/passo-1.html 0 → 100644
@@ -0,0 +1,38 @@ @@ -0,0 +1,38 @@
  1 +<div class="selection-panel-body" mainConfig="facial" subConfig="duracao" step="1">
  2 + <div class="panel-header">
  3 + <h8>Duração da Expressão</h8>
  4 + </div>
  5 + <div class="single-column-option-container">
  6 + <div class="single-column-option">
  7 + <video src="{{ server }}/img/exf/duration-slow.webm"
  8 + preload="metadata" value="lento"
  9 + class="box-panel-option selection-panel-option" autoplay loop>
  10 + <source type="video/webm">
  11 + </div>
  12 + <img class="single-column-option"
  13 + src="{{ server }}/img/long-duration-icon.png" /> Longa
  14 + </div>
  15 + <div class="single-column-option-container">
  16 + <div class="single-column-option">
  17 + <video src="{{ server }}/img/exf/duration-normal.webm"
  18 + preload="metadata" value="normal"
  19 + class="box-panel-option selection-panel-option" autoplay loop>
  20 + <source type="video/webm">
  21 + </div>
  22 + <img class="single-column-option"
  23 + src="{{ server }}/img/normal-duration-icon.png" /> Normal
  24 + </div>
  25 + <div class="single-column-option-container">
  26 + <div class="single-column-option">
  27 + <video src="{{ server }}/img/exf/duration-fast.webm"
  28 + preload="metadata" value="rapido"
  29 + class="box-panel-option selection-panel-option" autoplay loop>
  30 + <source type="video/webm">
  31 + </div>
  32 + <img class="single-column-option"
  33 + src="{{ server }}/img/short-duration-icon.png" /> Breve
  34 + </div>
  35 +</div>
  36 +<script type="text/javascript">
  37 + facial.setup();
  38 +</script>
0 \ No newline at end of file 39 \ No newline at end of file
view/facial/expressao/passo-1.html 0 → 100644
@@ -0,0 +1,54 @@ @@ -0,0 +1,54 @@
  1 +<div class="selection-panel-body" mainConfig="facial" subConfig="expressao" step="1">
  2 + <div class="panel-header">
  3 + <h8>Expressão</h8>
  4 + </div>
  5 + <div class="selection-panel-inner-body">
  6 + <ul class="rig columns-3">
  7 + <li><img class="box-panel-option selection-panel-option"
  8 + src="{{ server }}/img/exf/0000.png" value="0" /> 1.</li>
  9 + <li><img class="box-panel-option selection-panel-option"
  10 + src="{{ server }}/img/exf/0001.png" value="1" /> 2.</li>
  11 + <li><img class="box-panel-option selection-panel-option"
  12 + src="{{ server }}/img/exf/0002.png" value="2" /> 3.</li>
  13 + <li><img class="box-panel-option selection-panel-option"
  14 + src="{{ server }}/img/exf/0003.png" value="3" /> 4.</li>
  15 + <li><img class="box-panel-option selection-panel-option"
  16 + src="{{ server }}/img/exf/0004.png" value="4" /> 5.</li>
  17 + <li><img class="box-panel-option selection-panel-option"
  18 + src="{{ server }}/img/exf/0005.png" value="5" /> 6.</li>
  19 + <li><img class="box-panel-option selection-panel-option"
  20 + src="{{ server }}/img/exf/0006.png" value="6" /> 7.</li>
  21 + <li><img class="box-panel-option selection-panel-option"
  22 + src="{{ server }}/img/exf/0007.png" value="7" /> 8.</li>
  23 + <li><img class="box-panel-option selection-panel-option"
  24 + src="{{ server }}/img/exf/0008.png" value="8" /> 9.</li>
  25 + <li><img class="box-panel-option selection-panel-option"
  26 + src="{{ server }}/img/exf/0009.png" value="9" />10.</li>
  27 + <li><img class="box-panel-option selection-panel-option"
  28 + src="{{ server }}/img/exf/0010.png" value="10" />11.</li>
  29 + <li><img class="box-panel-option selection-panel-option"
  30 + src="{{ server }}/img/exf/0011.png" value="11" />12.</li>
  31 + <li><img class="box-panel-option selection-panel-option"
  32 + src="{{ server }}/img/exf/0012.png" value="12" />13.</li>
  33 + <li><img class="box-panel-option selection-panel-option"
  34 + src="{{ server }}/img/exf/0013.png" value="13" />14.</li>
  35 + <li><img class="box-panel-option selection-panel-option"
  36 + src="{{ server }}/img/exf/0014.png" value="14" />15.</li>
  37 + <li><img class="box-panel-option selection-panel-option"
  38 + src="{{ server }}/img/exf/0015.png" value="15" />16.</li>
  39 + <li><img class="box-panel-option selection-panel-option"
  40 + src="{{ server }}/img/exf/0016.png" value="16" />17.</li>
  41 + <li><img class="box-panel-option selection-panel-option"
  42 + src="{{ server }}/img/exf/0017.png" value="17" />18.</li>
  43 + <li><img class="box-panel-option selection-panel-option"
  44 + src="{{ server }}/img/exf/0018.png" value="18" />19.</li>
  45 + <li><img class="box-panel-option selection-panel-option"
  46 + src="{{ server }}/img/exf/0019.png" value="19" />20.</li>
  47 + <li><img class="box-panel-option selection-panel-option"
  48 + src="{{ server }}/img/exf/0020.png" value="20" />21.</li>
  49 + </ul>
  50 + </div>
  51 +</div>
  52 +<script type="text/javascript">
  53 + facial.setup();
  54 +</script>
0 \ No newline at end of file 55 \ No newline at end of file
view/facial/timeline.html
1 -<div class="subconfiguration-panel col-sm-12"> 1 +<div class="subconfiguration-panel col-sm-12" mainConfig="facial">
2 <div class="arrow icon_container col-sm-1" name="left-arrow"> 2 <div class="arrow icon_container col-sm-1" name="left-arrow">
3 <img src="{{ server }}/img/left-arrow-icon.png" /> 3 <img src="{{ server }}/img/left-arrow-icon.png" />
4 </div> 4 </div>
@@ -6,18 +6,15 @@ @@ -6,18 +6,15 @@
6 <div id="facial-subconfiguration-options" 6 <div id="facial-subconfiguration-options"
7 class="subconfiguration-options col-sm-10"> 7 class="subconfiguration-options col-sm-10">
8 <div class="icon_container" name="facial-expression" 8 <div class="icon_container" name="facial-expression"
9 - panel="facial-expression" previous="facial-expression"  
10 - next="facial-expression-velocity"> 9 + json_name="expressao">
11 <img src="{{ server }}/img/facial-expression-icon.png" /> 10 <img src="{{ server }}/img/facial-expression-icon.png" />
12 </div> 11 </div>
13 <div class="icon_container" name="facial-expression-velocity" 12 <div class="icon_container" name="facial-expression-velocity"
14 - panel="facial-expression-velocity" previous="facial-expression"  
15 - next="facial-expression-duration"> 13 + json_name="transicao">
16 <img src="{{ server }}/img/facial-expression-velocity-icon.png" /> 14 <img src="{{ server }}/img/facial-expression-velocity-icon.png" />
17 </div> 15 </div>
18 <div class="icon_container" name="facial-expression-duration" 16 <div class="icon_container" name="facial-expression-duration"
19 - panel="facial-expression-duration"  
20 - previous="facial-expression-velocity" next="end"> 17 + json_name="duracao">
21 <img src="{{ server }}/img/facial-expression-duration-icon.png" /> 18 <img src="{{ server }}/img/facial-expression-duration-icon.png" />
22 </div> 19 </div>
23 </div> 20 </div>
view/facial/transicao/passo-1.html 0 → 100644
@@ -0,0 +1,39 @@ @@ -0,0 +1,39 @@
  1 +<div class="selection-panel-body" mainConfig="facial"
  2 + subConfig="transicao" step="1">
  3 + <div class="panel-header">
  4 + <h8>Velocidade de Transição</h8>
  5 + </div>
  6 + <div class="single-column-option-container">
  7 + <div class="single-column-option">
  8 + <video src="{{ server }}/img/exf/velocity-slow.webm"
  9 + preload="metadata" value="lento"
  10 + class="box-panel-option selection-panel-option" autoplay loop>
  11 + <source type="video/webm">
  12 + </div>
  13 + <img class="single-column-option"
  14 + src="{{ server }}/img/slow-velocity-icon.png" /> Lento
  15 + </div>
  16 + <div class="single-column-option-container">
  17 + <div class="single-column-option">
  18 + <video src="{{ server }}/img/exf/velocity-normal.webm"
  19 + preload="metadata" value="normal"
  20 + class="box-panel-option selection-panel-option" autoplay loop>
  21 + <source type="video/webm">
  22 + </div>
  23 + <img class="single-column-option"
  24 + src="{{ server }}/img/normal-velocity-icon.png" /> Normal
  25 + </div>
  26 + <div class="single-column-option-container">
  27 + <div class="single-column-option">
  28 + <video src="{{ server }}/img/exf/velocity-fast.webm"
  29 + preload="metadata" value="rapido"
  30 + class="box-panel-option selection-panel-option" autoplay loop>
  31 + <source type="video/webm">
  32 + </div>
  33 + <img class="single-column-option"
  34 + src="{{ server }}/img/fast-velocity-icon.png" /> Rápido
  35 + </div>
  36 +</div>
  37 +<script type="text/javascript">
  38 + facial.setup();
  39 +</script>
0 \ No newline at end of file 40 \ No newline at end of file
view/hand-configuration.html
@@ -1,31 +0,0 @@ @@ -1,31 +0,0 @@
1 -<div id="right-hand-moviment" class="selection-panel-body"  
2 - name="movimento">  
3 - <div class="panel-header">  
4 - <h8>Escolha o movimento mais parecido</h8>  
5 - </div>  
6 - <div class="selection-panel-inner-body">  
7 - <ul class="rig columns-2">  
8 - <li class='movimento-pontual'><img class="box-panel-option selection-panel-option"  
9 - src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>  
10 - <!--  
11 - <li><video src="{{ server }}/img/mov/PONTUAL.webm"  
12 - preload="metadata" value="pontual"  
13 - class="box-panel-option selection-panel-option" autoplay loop>  
14 - <source type="video/webm">  
15 - </video> Pontual</li>  
16 - <li><img class="box-panel-option selection-panel-option"  
17 - src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>  
18 - <li><img class="box-panel-option selection-panel-option"  
19 - src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>  
20 - <li><img class="box-panel-option selection-panel-option"  
21 - src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>  
22 - <li><img class="box-panel-option selection-panel-option"  
23 - src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>  
24 - <li><img class="box-panel-option selection-panel-option"  
25 - src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>  
26 - <li><img class="box-panel-option selection-panel-option"  
27 - src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>  
28 - -->  
29 - </ul>  
30 - </div>  
31 -</div>  
view/hand/configuracao/passo-1.html
@@ -5,22 +5,22 @@ @@ -5,22 +5,22 @@
5 <div class="selection-panel-inner-body"> 5 <div class="selection-panel-inner-body">
6 <ul class="rig columns-3"> 6 <ul class="rig columns-3">
7 <li><img class="box-panel-option selection-panel-option" 7 <li><img class="box-panel-option selection-panel-option"
8 - src="{{ server }}/img/cmd/0007.png" group="0" /> 8 + src="{{ server }}/img/cmd/0007.png" value="0" />
9 0.</li> 9 0.</li>
10 <li><img class="box-panel-option selection-panel-option" 10 <li><img class="box-panel-option selection-panel-option"
11 - src="{{ server }}/img/cmd/0014.png" group="1" /> 11 + src="{{ server }}/img/cmd/0014.png" value="1" />
12 1.</li> 12 1.</li>
13 <li><img class="box-panel-option selection-panel-option" 13 <li><img class="box-panel-option selection-panel-option"
14 - src="{{ server }}/img/cmd/0045.png" group="2" /> 14 + src="{{ server }}/img/cmd/0045.png" value="2" />
15 2.</li> 15 2.</li>
16 <li><img class="box-panel-option selection-panel-option" 16 <li><img class="box-panel-option selection-panel-option"
17 - src="{{ server }}/img/cmd/0048.png" group="3" /> 17 + src="{{ server }}/img/cmd/0048.png" value="3" />
18 3.</li> 18 3.</li>
19 <li><img class="box-panel-option selection-panel-option" 19 <li><img class="box-panel-option selection-panel-option"
20 - src="{{ server }}/img/cmd/0040.png" group="4" /> 20 + src="{{ server }}/img/cmd/0040.png" value="4" />
21 4.</li> 21 4.</li>
22 <li><img class="box-panel-option selection-panel-option" 22 <li><img class="box-panel-option selection-panel-option"
23 - src="{{ server }}/img/cmd/0000.png" group="5" /> 23 + src="{{ server }}/img/cmd/0000.png" value="5" />
24 5.</li> 24 5.</li>
25 </ul> 25 </ul>
26 </div> 26 </div>
view/hand/timeline.html
1 <div class="subconfiguration-panel col-sm-12" mainConfig="right-hand"> 1 <div class="subconfiguration-panel col-sm-12" mainConfig="right-hand">
2 - <div class="arrow icon_container col-sm-1" name="left-arrow">  
3 - <img src="{{ server }}/img/left-arrow-icon.png" />  
4 - </div> 2 + <div class="arrow icon_container col-sm-1" name="left-arrow">
  3 + <img src="{{ server }}/img/left-arrow-icon.png" />
  4 + </div>
5 5
6 - <div id="right-hand-subconfiguration-options"  
7 - class="subconfiguration-options col-sm-10">  
8 - <div class="icon_container" name="hand-moviment"  
9 - panel="right-hand-moviment" json_name="movimento">  
10 - <img src="{{ server }}/img/hand-moviment-icon.png" />  
11 - </div>  
12 - <div class="icon_container" name="hand-articulation"  
13 - panel="right-hand-articulation" json_name="articulacao">  
14 - <img src="{{ server }}/img/hand-articulation-icon.png" />  
15 - </div>  
16 - <div class="icon_container" name="hand-fingers-position"  
17 - panel="right-hand-fingers-position" json_name="configuracao">  
18 - <img src="{{ server }}/img/hand-fingers-position-icon.png" />  
19 - </div>  
20 - <div class="icon_container" name="hand-orientation"  
21 - panel="right-hand-orientation" json_name="orientacao">  
22 - <img src="{{ server }}/img/hand-orientation-icon.png" />  
23 - </div>  
24 - </div> 6 + <div class="subconfiguration-options col-sm-10">
  7 + <div class="icon_container" name="hand-moviment" json_name="movimento">
  8 + <img src="{{ server }}/img/hand-moviment-icon.png" />
  9 + </div>
  10 + <div class="icon_container" name="hand-articulation"
  11 + json_name="articulacao">
  12 + <img src="{{ server }}/img/hand-articulation-icon.png" />
  13 + </div>
  14 + <div class="icon_container" name="hand-fingers-position"
  15 + json_name="configuracao">
  16 + <img src="{{ server }}/img/hand-fingers-position-icon.png" />
  17 + </div>
  18 + <div class="icon_container" name="hand-orientation"
  19 + json_name="orientacao">
  20 + <img src="{{ server }}/img/hand-orientation-icon.png" />
  21 + </div>
  22 + </div>
25 23
26 - <div class="arrow icon_container col-sm-1" name="right-arrow">  
27 - <img src="{{ server }}/img/right-arrow-icon.png" />  
28 - </div> 24 + <div class="arrow icon_container col-sm-1" name="right-arrow">
  25 + <img src="{{ server }}/img/right-arrow-icon.png" />
  26 + </div>
29 </div> 27 </div>
view/img/exf/duration-fast.webm 0 → 100644
No preview for this file type
view/img/exf/duration-normal.webm 0 → 100644
No preview for this file type
view/img/exf/duration-slow.webm 0 → 100644
No preview for this file type
view/img/exf/velocity-fast.webm 0 → 100644
No preview for this file type
view/img/exf/velocity-normal.webm 0 → 100644
No preview for this file type
view/img/exf/velocity-slow.webm 0 → 100644
No preview for this file type
view/template.html
1 <link rel="stylesheet" href="{{ server }}/assets/css/main.css"> 1 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
2 -  
3 -{% import 'facial-configuration.html' as facialConfig with context %}  
4 -  
5 <span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span> 2 <span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>
6 3
7 <div id="main-container" class="container"> 4 <div id="main-container" class="container">
@@ -111,9 +108,6 @@ @@ -111,9 +108,6 @@
111 <div id="selection-container" class="col-sm-2"> 108 <div id="selection-container" class="col-sm-2">
112 <div id="selection-panel"> 109 <div id="selection-panel">
113 <div class="x btn-default"></div> 110 <div class="x btn-default"></div>
114 -  
115 - {{ facialConfig.selectionPanel() }}  
116 -  
117 </div> 111 </div>
118 </div> 112 </div>
119 </div> 113 </div>
@@ -180,16 +174,18 @@ @@ -180,16 +174,18 @@
180 </div> 174 </div>
181 175
182 <script src="{{ server }}/assets/js/js.cookie.js"></script> 176 <script src="{{ server }}/assets/js/js.cookie.js"></script>
  177 +<script src="{{ server }}/assets/js/facial.js"></script>
183 <script src="{{ server }}/assets/js/movement.js"></script> 178 <script src="{{ server }}/assets/js/movement.js"></script>
184 <script src="{{ server }}/assets/js/articulation.js"></script> 179 <script src="{{ server }}/assets/js/articulation.js"></script>
185 <script src="{{ server }}/assets/js/configuration.js"></script> 180 <script src="{{ server }}/assets/js/configuration.js"></script>
186 <script src="{{ server }}/assets/js/orientation.js"></script> 181 <script src="{{ server }}/assets/js/orientation.js"></script>
187 -<script src="{{ server }}/assets/js/wikilibras.js"></script>  
188 <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script> 182 <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
189 <script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script> 183 <script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script>
  184 +<script src="{{ server }}/assets/js/tmpJSONParser.js"></script>
  185 +<script src="{{ server }}/assets/js/wikilibras.js"></script>
190 186
191 <script type="text/javascript"> 187 <script type="text/javascript">
192 - wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}"); 188 + wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
193 $( document ).ready(function() { 189 $( document ).ready(function() {
194 // Make it possible the elements trigger the show or hide event 190 // Make it possible the elements trigger the show or hide event
195 (function ($) { 191 (function ($) {