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 363  
364 364 .single-column-option {
365 365 display: inline-block;
  366 + vertical-align: middle;
366 367 padding-right: 25px;
367 368 }
368 369  
369 370 /* Sub-Configuration Panel */
370   -#facial-subconfiguration-options {
371   - display: none;
372   -}
373   -
374 371 .subconfiguration-options {
375 372 overflow-x: hidden;
376 373 white-space: nowrap;
... ...
view/assets/js/articulation.js
... ... @@ -41,7 +41,8 @@
41 41 d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
42 42 selectedY = g;
43 43 _setupModuleZ(hand);
44   - //_updateParameterJSON(hand);
  44 +
  45 + wikilibras.updateTempParameterJSON("right-hand", "articulacao", "1", f + ";" + g);
45 46 dynworkflow.userSelectedAnOption();
46 47 });
47 48 }
... ... @@ -59,7 +60,8 @@
59 60 e = $(articulation_z),
60 61 h = b.attr("data-z");
61 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 65 dynworkflow.userSelectedAnOption();
64 66 });
65 67 }
... ... @@ -69,26 +71,26 @@
69 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 79 x = 10 - x + 1;
85 80 }
86   - z = z == "" ? 1 : parseInt(z);
87 81 var value = (z-1)*10 + x + 30*(y-1);
88 82 //console.log(value);
89 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 94 articulation.setupModuleXY = function(serverhost) {
93 95 server_host = serverhost;
94 96 _setupBallSelectorXY("right-hand");
... ...
view/assets/js/configuration.js
... ... @@ -18,7 +18,8 @@
18 18 });
19 19  
20 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 23 $(stepTwoBaseId + " .finger-group").hide();
23 24 $(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show();
24 25 }
... ...
view/assets/js/dynamic-selection-workflow.js
... ... @@ -8,7 +8,7 @@
8 8 var mainConfig = "";
9 9 // The converted Main Config (right/left-hand) to hand for using the same configuration
10 10 var preprocessedMainConfig = "";
11   - // Subconfigurations: Movimento, articulacao, configuracao, orientacao, etc
  11 + // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc
12 12 var currentSubconfig = "";
13 13 var currentSubConfigName = "";
14 14 var currentSubconfigParent = "";
... ... @@ -34,14 +34,39 @@
34 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 53 var attrs = _getAttributes(currentSubconfigParent);
39 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 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 72 function _showCurrentSubconfig() {
... ... @@ -76,27 +101,38 @@
76 101 }
77 102  
78 103 function _selectSubConfig(subConfig) {
  104 + if (currentSubConfigName == "movimento") {
  105 + _updateAndGetFirstMovementSubConfig();
  106 + }
79 107 currentSubConfigName = subConfig;
80 108 currentSubconfig = currentSubconfigParent[currentSubConfigName];
81 109 currentStep = 0;
82   -
83 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 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 126 _showCurrentSubconfig();
91 127 } else {
92   - var nextSubConfig = _getNextSubConfig();
  128 + var nextSubConfig = _getNextSubConfig(toForward);
93 129 if (nextSubConfig != -1) {
94 130 dynworkflow.selectSubConfig(nextSubConfig);
95 131 } else {
96 132 wikilibras.hideSelectionPanel();
97 133 }
98 134 }
99   - }
  135 + }
100 136  
101 137 // A callback function to be called when the user selects a option on a panel
102 138 function _userSelectedAnOption() {
... ... @@ -145,6 +181,22 @@
145 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 200 function _setupTimelineIcons(timelineBaseId) {
149 201 $(timelineBaseId + " .icon_container[json_name]").hide();
150 202  
... ... @@ -154,15 +206,10 @@
154 206 if (preprocessedMainConfig == "hand") {
155 207 $(timelineBaseId + " .icon_container[json_name=movimento]").show();
156 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 213 $(timelineBaseId).show();
167 214 }
168 215  
... ... @@ -182,13 +229,13 @@
182 229 dynworkflow.selectMainConfig = function(config) {
183 230 mainConfig = config;
184 231 preprocessedMainConfig = _preprocessMainConfig(mainConfig);
185   - currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]);
186   - currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName];
187 232 currentSubconfigParent = jsonWF[preprocessedMainConfig];
  233 + currentSubConfigName = _getFirstKey(currentSubconfigParent);
  234 + currentSubconfig = currentSubconfigParent[currentSubConfigName];
188 235 currentStep = 0;
189 236  
190 237 _showCurrentSubconfig();
191   -
  238 + // hide the timeline on the first subconfiguration for "hand"
192 239 if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) {
193 240 _setupTimeline();
194 241 }
... ... @@ -213,6 +260,14 @@
213 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 271 dynworkflow.load = function() {
217 272 baseUrl = $('#server-url').data('url');
218 273 $.get(baseUrl + "/conf/selection-workflow-json", function(result) {
... ...
view/assets/js/facial.js 0 → 100644
... ... @@ -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 13 \ No newline at end of file
... ...
view/assets/js/movement.js
1 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 8 movement.setup = function(serverhost) {
4 9 var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]";
... ...
view/assets/js/tmpJSONParser.js 0 → 100644
... ... @@ -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 73 \ No newline at end of file
... ...
view/assets/js/wikilibras.js
1 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 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 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 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 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 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 438 }(window.wikilibras = window.wikilibras || {}, jQuery));
... ...
view/facial-configuration.html
... ... @@ -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 @@
  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 39 \ No newline at end of file
... ...
view/facial/expressao/passo-1.html 0 → 100644
... ... @@ -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 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 2 <div class="arrow icon_container col-sm-1" name="left-arrow">
3 3 <img src="{{ server }}/img/left-arrow-icon.png" />
4 4 </div>
... ... @@ -6,18 +6,15 @@
6 6 <div id="facial-subconfiguration-options"
7 7 class="subconfiguration-options col-sm-10">
8 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 10 <img src="{{ server }}/img/facial-expression-icon.png" />
12 11 </div>
13 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 14 <img src="{{ server }}/img/facial-expression-velocity-icon.png" />
17 15 </div>
18 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 18 <img src="{{ server }}/img/facial-expression-duration-icon.png" />
22 19 </div>
23 20 </div>
... ...
view/facial/transicao/passo-1.html 0 → 100644
... ... @@ -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 40 \ No newline at end of file
... ...
view/hand-configuration.html
... ... @@ -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 5 <div class="selection-panel-inner-body">
6 6 <ul class="rig columns-3">
7 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 9 0.</li>
10 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 12 1.</li>
13 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 15 2.</li>
16 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 18 3.</li>
19 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 21 4.</li>
22 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 24 5.</li>
25 25 </ul>
26 26 </div>
... ...
view/hand/timeline.html
1 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 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 1 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
2   -
3   -{% import 'facial-configuration.html' as facialConfig with context %}
4   -
5 2 <span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>
6 3  
7 4 <div id="main-container" class="container">
... ... @@ -111,9 +108,6 @@
111 108 <div id="selection-container" class="col-sm-2">
112 109 <div id="selection-panel">
113 110 <div class="x btn-default"></div>
114   -
115   - {{ facialConfig.selectionPanel() }}
116   -
117 111 </div>
118 112 </div>
119 113 </div>
... ... @@ -180,16 +174,18 @@
180 174 </div>
181 175  
182 176 <script src="{{ server }}/assets/js/js.cookie.js"></script>
  177 +<script src="{{ server }}/assets/js/facial.js"></script>
183 178 <script src="{{ server }}/assets/js/movement.js"></script>
184 179 <script src="{{ server }}/assets/js/articulation.js"></script>
185 180 <script src="{{ server }}/assets/js/configuration.js"></script>
186 181 <script src="{{ server }}/assets/js/orientation.js"></script>
187   -<script src="{{ server }}/assets/js/wikilibras.js"></script>
188 182 <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
189 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 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 189 $( document ).ready(function() {
194 190 // Make it possible the elements trigger the show or hide event
195 191 (function ($) {
... ...