Commit e1f58bf301d5f73cdcf5eec6847b5abc478dce42
1 parent
d4d0fe97
Exists in
master
and in
1 other branch
Lógica das setas de próximo/anterior e adaptação do código de expressão facial.
Showing
23 changed files
with
776 additions
and
779 deletions
Show diff stats
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) { | ... | ... |
... | ... | @@ -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]"; | ... | ... |
... | ... | @@ -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 %} |
... | ... | @@ -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 | ... | ... |
... | ... | @@ -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> | ... | ... |
... | ... | @@ -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> | ... | ... |
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
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 ($) { | ... | ... |