Commit 5334472663d585fdae1e9e4177c86e5a6ac8016b
1 parent
e1f58bf3
Exists in
master
and in
1 other branch
log when dynflow is loaded and changed tabs to spaces
Showing
3 changed files
with
660 additions
and
658 deletions
Show diff stats
view/assets/js/dynamic-loading-engine.js
... | ... | @@ -10,12 +10,12 @@ |
10 | 10 | $.get(url, function(data) { |
11 | 11 | // TODO replace or append boolean |
12 | 12 | console.log('got: ' + url); |
13 | - | |
13 | + | |
14 | 14 | var processedHtml = _preprocessHtml(data, serverUrl); |
15 | 15 | if (prepend) { |
16 | - $(target).prepend(processedHtml); | |
16 | + $(target).prepend(processedHtml); | |
17 | 17 | } else { |
18 | - $(target).append(processedHtml); | |
18 | + $(target).append(processedHtml); | |
19 | 19 | } |
20 | 20 | }) |
21 | 21 | .done(function() { | ... | ... |
view/assets/js/dynamic-selection-workflow.js
1 | 1 | (function(dynworkflow, $, undefined) { |
2 | 2 | |
3 | - // Workflow configuration | |
4 | - var jsonWF = {}; | |
5 | - var baseUrl = ""; | |
6 | - | |
3 | + // Workflow configuration | |
4 | + var jsonWF = {}; | |
5 | + var baseUrl = ''; | |
6 | + | |
7 | 7 | // Main configurations: right-hand, left-hand and facial |
8 | - var mainConfig = ""; | |
9 | - // The converted Main Config (right/left-hand) to hand for using the same configuration | |
10 | - var preprocessedMainConfig = ""; | |
11 | - // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc | |
12 | - var currentSubconfig = ""; | |
13 | - var currentSubConfigName = ""; | |
14 | - var currentSubconfigParent = ""; | |
15 | - var currentStep = 0; | |
16 | - | |
8 | + var mainConfig = ''; | |
9 | + // The converted Main Config (right/left-hand) to hand for using the same configuration | |
10 | + var preprocessedMainConfig = ''; | |
11 | + // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc | |
12 | + var currentSubconfig = ''; | |
13 | + var currentSubConfigName = ''; | |
14 | + var currentSubconfigParent = ''; | |
15 | + var currentStep = 0; | |
16 | + | |
17 | 17 | function _preprocessMainConfig(config) { |
18 | - config = config.replace("right-hand", "hand"); | |
19 | - config = config.replace("left-hand", "hand"); | |
20 | - return config; | |
21 | - } | |
22 | - | |
18 | + config = config.replace('right-hand', 'hand'); | |
19 | + config = config.replace('left-hand', 'hand'); | |
20 | + return config; | |
21 | + } | |
22 | + | |
23 | 23 | function _getFirstKey(json) { |
24 | - var first_key = undefined; | |
25 | - for (first_key in json) break; | |
26 | - return first_key; | |
27 | - } | |
28 | - | |
24 | + var first_key = undefined; | |
25 | + for (first_key in json) break; | |
26 | + return first_key; | |
27 | + } | |
28 | + | |
29 | 29 | function _getAttributes(json) { |
30 | - var result = []; | |
31 | - for (attr in json) { | |
32 | - result.push(attr); | |
33 | - } | |
34 | - return result; | |
35 | - } | |
36 | - | |
30 | + var result = []; | |
31 | + for (attr in json) { | |
32 | + result.push(attr); | |
33 | + } | |
34 | + return result; | |
35 | + } | |
36 | + | |
37 | 37 | function _updateAndGetFirstMovementSubConfig() { |
38 | - var selectedMovement = movement.getPreviousSelectedMovement(mainConfig); | |
39 | - if (typeof selectedMovement == "undefined") return -1; | |
40 | - | |
38 | + var selectedMovement = movement.getPreviousSelectedMovement(mainConfig); | |
39 | + if (typeof selectedMovement == "undefined") return -1; | |
40 | + | |
41 | 41 | currentSubconfigParent = jsonWF[preprocessedMainConfig]["movimento"][selectedMovement]; |
42 | - currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
43 | - return currentSubConfigName; | |
44 | - } | |
45 | - | |
42 | + currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
43 | + return currentSubConfigName; | |
44 | + } | |
45 | + | |
46 | 46 | function _updateAndGetMovementConfig() { |
47 | - currentSubconfigParent = jsonWF[preprocessedMainConfig]; | |
48 | - currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
49 | - return currentSubConfigName; | |
50 | - } | |
51 | - | |
47 | + currentSubconfigParent = jsonWF[preprocessedMainConfig]; | |
48 | + currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
49 | + return currentSubConfigName; | |
50 | + } | |
51 | + | |
52 | 52 | function _getNextSubConfig(toForward) { |
53 | - var attrs = _getAttributes(currentSubconfigParent); | |
54 | - for (var i = 0; i < attrs.length; i++) { | |
55 | - if (toForward && attrs[i] == currentSubConfigName && i < attrs.length - 1) { | |
56 | - return attrs[i+1]; | |
57 | - } else if (!toForward && attrs[i] == currentSubConfigName && i >= 1) { | |
58 | - return attrs[i-1]; | |
59 | - } | |
60 | - } | |
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 | - } | |
70 | - } | |
71 | - | |
53 | + var attrs = _getAttributes(currentSubconfigParent); | |
54 | + for (var i = 0; i < attrs.length; i++) { | |
55 | + if (toForward && attrs[i] == currentSubConfigName && i < attrs.length - 1) { | |
56 | + return attrs[i + 1]; | |
57 | + } else if (!toForward && attrs[i] == currentSubConfigName && i >= 1) { | |
58 | + return attrs[i - 1]; | |
59 | + } | |
60 | + } | |
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 | + } | |
70 | + } | |
71 | + | |
72 | 72 | function _showCurrentSubconfig() { |
73 | - _showSubconfiguration(mainConfig, currentSubConfigName, currentStep); | |
74 | - } | |
75 | - | |
73 | + _showSubconfiguration(mainConfig, currentSubConfigName, currentStep); | |
74 | + } | |
75 | + | |
76 | 76 | // It checks if a selection panel is already loaded |
77 | - function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) { | |
78 | - var stepNumber = stepNumber + 1; | |
79 | - return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig + | |
80 | - "][step=" + stepNumber + "]").length > 0; | |
81 | - } | |
82 | - | |
77 | + function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) { | |
78 | + var stepNumber = stepNumber + 1; | |
79 | + return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig + | |
80 | + "][step=" + stepNumber + "]").length > 0; | |
81 | + } | |
82 | + | |
83 | 83 | function _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber) { |
84 | - var stepNumber = stepNumber + 1; | |
85 | - return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig + | |
86 | - "][step=" + stepNumber + "]").show(); | |
87 | - } | |
88 | - | |
84 | + var stepNumber = stepNumber + 1; | |
85 | + return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig + | |
86 | + "][step=" + stepNumber + "]").show(); | |
87 | + } | |
88 | + | |
89 | 89 | // It renders or shows the requested selection panel |
90 | - function _showSubconfiguration(mainConfig, subConfig, stepNumber) { | |
91 | - $(".selection-panel-body").hide(); | |
92 | - if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) { | |
93 | - _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber); | |
94 | - } else { | |
95 | - var step = currentSubconfig[stepNumber]; | |
96 | - step = typeof step == "undefined" ? "passo-1" : step; | |
97 | - dynengine.render(baseUrl, "/" + preprocessedMainConfig + "/" + subConfig + | |
98 | - "/" + step + ".html", "#selection-panel", true); | |
99 | - } | |
100 | - _selectTimelineIcon(mainConfig, subConfig, true); | |
101 | - } | |
102 | - | |
90 | + function _showSubconfiguration(mainConfig, subConfig, stepNumber) { | |
91 | + $(".selection-panel-body").hide(); | |
92 | + if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) { | |
93 | + _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber); | |
94 | + } else { | |
95 | + var step = currentSubconfig[stepNumber]; | |
96 | + step = typeof step == "undefined" ? "passo-1" : step; | |
97 | + dynengine.render(baseUrl, "/" + preprocessedMainConfig + "/" + subConfig + | |
98 | + "/" + step + ".html", "#selection-panel", true); | |
99 | + } | |
100 | + _selectTimelineIcon(mainConfig, subConfig, true); | |
101 | + } | |
102 | + | |
103 | 103 | function _selectSubConfig(subConfig) { |
104 | - if (currentSubConfigName == "movimento") { | |
105 | - _updateAndGetFirstMovementSubConfig(); | |
106 | - } | |
107 | - currentSubConfigName = subConfig; | |
108 | - currentSubconfig = currentSubconfigParent[currentSubConfigName]; | |
109 | - currentStep = 0; | |
110 | - _showCurrentSubconfig(); | |
111 | - } | |
112 | - | |
104 | + if (currentSubConfigName == "movimento") { | |
105 | + _updateAndGetFirstMovementSubConfig(); | |
106 | + } | |
107 | + currentSubConfigName = subConfig; | |
108 | + currentSubconfig = currentSubconfigParent[currentSubConfigName]; | |
109 | + currentStep = 0; | |
110 | + _showCurrentSubconfig(); | |
111 | + } | |
112 | + | |
113 | 113 | // It shows the next selection panel on the workflow |
114 | - function _showNextSubConfig() { | |
115 | - _walkOnTheWorklow(true); | |
116 | - } | |
117 | - | |
114 | + function _showNextSubConfig() { | |
115 | + _walkOnTheWorklow(true); | |
116 | + } | |
117 | + | |
118 | 118 | function _showPreviousSubConfig() { |
119 | - _walkOnTheWorklow(false); | |
120 | - } | |
121 | - | |
119 | + _walkOnTheWorklow(false); | |
120 | + } | |
121 | + | |
122 | 122 | function _walkOnTheWorklow(toForward) { |
123 | - currentStep = toForward? currentStep + 1 : currentStep - 1; | |
124 | - | |
123 | + currentStep = toForward ? currentStep + 1 : currentStep - 1; | |
124 | + | |
125 | 125 | if (currentStep >= 0 && currentStep < currentSubconfig.length) { |
126 | - _showCurrentSubconfig(); | |
127 | - } else { | |
128 | - var nextSubConfig = _getNextSubConfig(toForward); | |
129 | - if (nextSubConfig != -1) { | |
130 | - dynworkflow.selectSubConfig(nextSubConfig); | |
131 | - } else { | |
132 | - wikilibras.hideSelectionPanel(); | |
133 | - } | |
134 | - } | |
135 | - } | |
136 | - | |
126 | + _showCurrentSubconfig(); | |
127 | + } else { | |
128 | + var nextSubConfig = _getNextSubConfig(toForward); | |
129 | + if (nextSubConfig != -1) { | |
130 | + dynworkflow.selectSubConfig(nextSubConfig); | |
131 | + } else { | |
132 | + wikilibras.hideSelectionPanel(); | |
133 | + } | |
134 | + } | |
135 | + } | |
136 | + | |
137 | 137 | // A callback function to be called when the user selects a option on a panel |
138 | - function _userSelectedAnOption() { | |
139 | - if (currentStep == currentSubconfig.length - 1) { | |
140 | - _setupCheckIcon(mainConfig, currentSubConfigName); | |
141 | - } | |
142 | - _showNextSubConfig(); | |
138 | + function _userSelectedAnOption() { | |
139 | + if (currentStep == currentSubconfig.length - 1) { | |
140 | + _setupCheckIcon(mainConfig, currentSubConfigName); | |
141 | + } | |
142 | + _showNextSubConfig(); | |
143 | 143 | } |
144 | - | |
144 | + | |
145 | 145 | // Timeline functions |
146 | - function _selectTimelineIcon(mainConfig, subConfig) { | |
147 | - var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig + | |
148 | - "] .icon_container[json_name=" + subConfig + "]"; | |
149 | - | |
150 | - var previousSelected = $(".subconfiguration-panel[mainConfig=" + mainConfig | |
151 | - + "] .icon_container[select=true]").attr("json_name"); | |
152 | - if (typeof previousSelected != "undefined") { | |
153 | - _deselectTimelineIcon(mainConfig, previousSelected); | |
154 | - } | |
155 | - | |
146 | + function _selectTimelineIcon(mainConfig, subConfig) { | |
147 | + var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig + | |
148 | + "] .icon_container[json_name=" + subConfig + "]"; | |
149 | + | |
150 | + var previousSelected = $(".subconfiguration-panel[mainConfig=" + mainConfig | |
151 | + + | |
152 | + "] .icon_container[select=true]").attr("json_name"); | |
153 | + if (typeof previousSelected != "undefined") { | |
154 | + _deselectTimelineIcon(mainConfig, previousSelected); | |
155 | + } | |
156 | + | |
156 | 157 | wikilibras.enableIconHover($(icon_id), true); |
157 | - $(icon_id).attr("select", true); | |
158 | - } | |
159 | - | |
158 | + $(icon_id).attr("select", true); | |
159 | + } | |
160 | + | |
160 | 161 | function _deselectTimelineIcon(mainConfig, subConfig) { |
161 | - var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig + | |
162 | - "] .icon_container[json_name=" + subConfig + "]"; | |
163 | - | |
162 | + var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig + | |
163 | + "] .icon_container[json_name=" + subConfig + "]"; | |
164 | + | |
164 | 165 | if ($(icon_id + "[complete=true]").length > 0) { |
165 | - _setupCheckIcon(mainConfig, subConfig); | |
166 | - } else { | |
167 | - wikilibras.enableIconHover($(icon_id), false); | |
168 | - $(icon_id).attr("select", false); | |
169 | - } | |
170 | - } | |
171 | - | |
166 | + _setupCheckIcon(mainConfig, subConfig); | |
167 | + } else { | |
168 | + wikilibras.enableIconHover($(icon_id), false); | |
169 | + $(icon_id).attr("select", false); | |
170 | + } | |
171 | + } | |
172 | + | |
172 | 173 | function _setupCheckIcon(mainConfig, subConfig) { |
173 | - var icon_id = $(".subconfiguration-panel[mainConfig=" + mainConfig + | |
174 | - "] .icon_container[json_name=" + subConfig + "]"); | |
175 | - wikilibras.enableIconCheck(icon_id, true); | |
176 | - $(icon_id).attr("complete", true); | |
177 | - $(icon_id).attr("select", false); | |
178 | - } | |
179 | - | |
174 | + var icon_id = $(".subconfiguration-panel[mainConfig=" + mainConfig + | |
175 | + "] .icon_container[json_name=" + subConfig + "]"); | |
176 | + wikilibras.enableIconCheck(icon_id, true); | |
177 | + $(icon_id).attr("complete", true); | |
178 | + $(icon_id).attr("select", false); | |
179 | + } | |
180 | + | |
180 | 181 | function _isTimelineLoaded() { |
181 | - return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0; | |
182 | - } | |
183 | - | |
182 | + return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0; | |
183 | + } | |
184 | + | |
184 | 185 | function _setupTimelineListeners(timelineBaseId) { |
185 | - $(timelineBaseId + " .icon_container[json_name]").off("click").on("click", | |
186 | + $(timelineBaseId + " .icon_container[json_name]").off("click").on("click", | |
186 | 187 | function() { |
187 | - var subConfig = $(this).attr("json_name"); | |
188 | - _selectSubConfig(subConfig); | |
188 | + var subConfig = $(this).attr("json_name"); | |
189 | + _selectSubConfig(subConfig); | |
189 | 190 | }); |
190 | - | |
191 | + | |
191 | 192 | $(timelineBaseId + " .arrow[name=right-arrow]").off("click").on("click", function() { |
192 | - _showNextSubConfig(); | |
193 | - }); | |
194 | - | |
193 | + _showNextSubConfig(); | |
194 | + }); | |
195 | + | |
195 | 196 | $(timelineBaseId + " .arrow[name=left-arrow]").off("click").on("click", function() { |
196 | - _showPreviousSubConfig(); | |
197 | - }); | |
198 | - } | |
199 | - | |
197 | + _showPreviousSubConfig(); | |
198 | + }); | |
199 | + } | |
200 | + | |
200 | 201 | function _setupTimelineIcons(timelineBaseId) { |
201 | - $(timelineBaseId + " .icon_container[json_name]").hide(); | |
202 | - | |
202 | + $(timelineBaseId + " .icon_container[json_name]").hide(); | |
203 | + | |
203 | 204 | for (var name in currentSubconfigParent) { |
204 | - $(timelineBaseId + " .icon_container[json_name=" + name + "]").show(); | |
205 | - } | |
206 | - if (preprocessedMainConfig == "hand") { | |
207 | - $(timelineBaseId + " .icon_container[json_name=movimento]").show(); | |
208 | - _setupCheckIcon(mainConfig, "movimento"); | |
209 | - _selectTimelineIcon(mainConfig, currentSubConfigName); | |
210 | - } | |
211 | - | |
205 | + $(timelineBaseId + " .icon_container[json_name=" + name + "]").show(); | |
206 | + } | |
207 | + if (preprocessedMainConfig == "hand") { | |
208 | + $(timelineBaseId + " .icon_container[json_name=movimento]").show(); | |
209 | + _setupCheckIcon(mainConfig, "movimento"); | |
210 | + _selectTimelineIcon(mainConfig, currentSubConfigName); | |
211 | + } | |
212 | + | |
212 | 213 | _setupTimelineListeners(timelineBaseId); |
213 | - $(timelineBaseId).show(); | |
214 | - } | |
215 | - | |
214 | + $(timelineBaseId).show(); | |
215 | + } | |
216 | + | |
216 | 217 | function _setupTimeline() { |
217 | - var timelineBaseId = ".subconfiguration-panel[mainConfig=" + mainConfig + "]"; | |
218 | - if (_isTimelineLoaded()) { | |
219 | - $(timelineBaseId).show(); | |
220 | - } else { | |
221 | - dynengine.render(baseUrl, "/" + preprocessedMainConfig + | |
218 | + var timelineBaseId = ".subconfiguration-panel[mainConfig=" + mainConfig + "]"; | |
219 | + if (_isTimelineLoaded()) { | |
220 | + $(timelineBaseId).show(); | |
221 | + } else { | |
222 | + dynengine.render(baseUrl, "/" + preprocessedMainConfig + | |
222 | 223 | "/timeline.html", "#selection-panel", false, function() { |
223 | - _setupTimelineIcons(timelineBaseId); | |
224 | + _setupTimelineIcons(timelineBaseId); | |
224 | 225 | }); |
225 | - } | |
226 | - } | |
227 | - | |
226 | + } | |
227 | + } | |
228 | + | |
228 | 229 | // Public methods |
229 | - dynworkflow.selectMainConfig = function(config) { | |
230 | - mainConfig = config; | |
231 | - preprocessedMainConfig = _preprocessMainConfig(mainConfig); | |
232 | - currentSubconfigParent = jsonWF[preprocessedMainConfig]; | |
233 | - currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
234 | - currentSubconfig = currentSubconfigParent[currentSubConfigName]; | |
235 | - currentStep = 0; | |
236 | - | |
230 | + dynworkflow.selectMainConfig = function(config) { | |
231 | + mainConfig = config; | |
232 | + preprocessedMainConfig = _preprocessMainConfig(mainConfig); | |
233 | + currentSubconfigParent = jsonWF[preprocessedMainConfig]; | |
234 | + currentSubConfigName = _getFirstKey(currentSubconfigParent); | |
235 | + currentSubconfig = currentSubconfigParent[currentSubConfigName]; | |
236 | + currentStep = 0; | |
237 | + | |
237 | 238 | _showCurrentSubconfig(); |
238 | - // hide the timeline on the first subconfiguration for "hand" | |
239 | - if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) { | |
240 | - _setupTimeline(); | |
241 | - } | |
242 | - } | |
243 | - | |
239 | + // hide the timeline on the first subconfiguration for "hand" | |
240 | + if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) { | |
241 | + _setupTimeline(); | |
242 | + } | |
243 | + } | |
244 | + | |
244 | 245 | dynworkflow.selectMovement = function(movement) { |
245 | - var subconfigJSON = currentSubconfig[movement] | |
246 | - currentSubConfigName = _getFirstKey(subconfigJSON); | |
247 | - currentSubconfigParent = subconfigJSON; | |
248 | - currentSubconfig = subconfigJSON[currentSubConfigName]; | |
249 | - currentStep = 0; | |
250 | - | |
246 | + var subconfigJSON = currentSubconfig[movement] | |
247 | + currentSubConfigName = _getFirstKey(subconfigJSON); | |
248 | + currentSubconfigParent = subconfigJSON; | |
249 | + currentSubconfig = subconfigJSON[currentSubConfigName]; | |
250 | + currentStep = 0; | |
251 | + | |
251 | 252 | _showCurrentSubconfig(); |
252 | - _setupTimeline(); | |
253 | - } | |
254 | - | |
253 | + _setupTimeline(); | |
254 | + } | |
255 | + | |
255 | 256 | dynworkflow.selectSubConfig = function(subConfig) { |
256 | - _selectSubConfig(subConfig); | |
257 | - } | |
258 | - | |
257 | + _selectSubConfig(subConfig); | |
258 | + } | |
259 | + | |
259 | 260 | dynworkflow.userSelectedAnOption = function() { |
260 | - _userSelectedAnOption(); | |
261 | - } | |
262 | - | |
261 | + _userSelectedAnOption(); | |
262 | + } | |
263 | + | |
263 | 264 | dynworkflow.getFacialParameters = function() { |
264 | - return _getAttributes(jsonWF["facial"]); | |
265 | - } | |
266 | - | |
265 | + return _getAttributes(jsonWF["facial"]); | |
266 | + } | |
267 | + | |
267 | 268 | dynworkflow.getMovementParameters = function(movementName) { |
268 | - return _getAttributes(jsonWF["hand"]["movimento"][movementName]); | |
269 | - } | |
270 | - | |
269 | + return _getAttributes(jsonWF["hand"]["movimento"][movementName]); | |
270 | + } | |
271 | + | |
271 | 272 | dynworkflow.load = function() { |
272 | - baseUrl = $('#server-url').data('url'); | |
273 | - $.get(baseUrl + "/conf/selection-workflow-json", function(result) { | |
274 | - jsonWF = $.parseJSON(result); | |
275 | - }).fail(function() { | |
276 | - console.log("Failed to load the workflow configuration"); | |
277 | - }); | |
278 | - } | |
273 | + baseUrl = $('#server-url').data('url'); | |
274 | + $.get(baseUrl + "/conf/selection-workflow-json", function(result) { | |
275 | + jsonWF = $.parseJSON(result); | |
276 | + }).fail(function() { | |
277 | + console.log("Failed to load the workflow configuration"); | |
278 | + }); | |
279 | + } | |
279 | 280 | |
280 | -}(window.dynworkflow = window.dynworkflow || {}, jQuery)); | |
281 | 281 | \ No newline at end of file |
282 | +}(window.dynworkflow = window.dynworkflow || {}, jQuery)); | ... | ... |
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 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, | |
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, | |
105 | 105 | function() { |
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, | |
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, | |
118 | 118 | function() { |
119 | - $("#avatar-" + option).addClass( | |
120 | - "avatar-" + option | |
121 | - + "-img-zoom-in"); | |
122 | - callback(); | |
119 | + $('#avatar-' + option).addClass( | |
120 | + 'avatar-' + option + | |
121 | + '-img-zoom-in'); | |
122 | + callback(); | |
123 | 123 | }); |
124 | 124 | }); |
125 | - } | |
125 | + } | |
126 | 126 | |
127 | - function _addZoomOutToAvatar(option, callback) { | |
128 | - $("#avatar-" + option).fadeOut( | |
129 | - 500, | |
127 | + function _addZoomOutToAvatar(option, callback) { | |
128 | + $('#avatar-' + option).fadeOut( | |
129 | + 500, | |
130 | 130 | function() { |
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, | |
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, | |
141 | 141 | function() { |
142 | - $("#avatar-" + option).removeClass( | |
143 | - "avatar-" + option + "-img-zoom-in"); | |
144 | - $("#avatar-" + option).addClass( | |
145 | - "avatar-img-zoom-out"); | |
146 | - callback(); | |
142 | + $('#avatar-' + option).removeClass( | |
143 | + 'avatar-' + option + '-img-zoom-in'); | |
144 | + $('#avatar-' + option).addClass( | |
145 | + 'avatar-img-zoom-out'); | |
146 | + callback(); | |
147 | 147 | }); |
148 | 148 | }); |
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( | |
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( | |
326 | 326 | function() { |
327 | - _unfinishConfiguration($(this).attr("name"), $(this).attr( | |
328 | - "panel")); | |
327 | + _unfinishConfiguration($(this).attr("name"), $(this).attr( | |
328 | + "panel")); | |
329 | 329 | }); |
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 | - } | |
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 | + console.log('dynengine loaded'); | |
339 | + dynworkflow.load(); | |
340 | + console.log('dynworkflow loaded'); | |
341 | + }); | |
342 | + $("#ready-button").off("click").on("click", function() { | |
343 | + if ($(this).hasClass('disabled')) { | |
344 | + event.preventDefault(); | |
345 | + return; | |
346 | + } | |
347 | + _setupRenderScreen(); | |
348 | + }); | |
349 | + $("#render-edit").off("click").on("click", function() { | |
350 | + $("#render-screen").hide(); | |
351 | + $("#configuration-screen").show(); | |
352 | + }); | |
353 | + $("#finish-button").off("click").on("click", function() { | |
354 | + if ($(this).hasClass('disabled')) { | |
355 | + event.preventDefault(); | |
356 | + return; | |
357 | + } | |
358 | + $("#render-screen").hide(); | |
359 | + $("#thanks-screen").show(); | |
360 | + _saveAnswer(task, deferred) | |
361 | + }); | |
362 | + } | |
363 | + | |
364 | + function _setupGUI(task, deferred) { | |
365 | + _clearGUI(); | |
366 | + _setupConfigurationPanel(); | |
367 | + _setupSelectionPanel(); | |
368 | + _setupMainScreen(task, deferred); | |
369 | + } | |
370 | + | |
371 | + function _saveAnswer(task, deferred) { | |
372 | + var answer = {} | |
373 | + answer["status"] = "FINISHED"; | |
374 | + answer["parameter_json"] = parsedParameterJSON; | |
375 | + | |
376 | + /*pybossa.saveTask(task.id, answer).done(function() { | |
377 | + setTimeout(function() { | |
378 | + $("#thanks-screen").hide(); | |
379 | + deferred.resolve(); | |
380 | + }, 2500); | |
381 | + });*/ | |
382 | + | |
383 | + setTimeout(function() { | |
384 | + $("#thanks-screen").hide(); | |
385 | + deferred.resolve(); | |
386 | + }, 2500); | |
387 | + } | |
388 | + | |
389 | + function _showCompletedAllTaskMsg() { | |
390 | + $("#completed-task-msg").hide(); | |
391 | + $("#completed-all-task-msg").show(); | |
392 | + $("#thanks-screen").fadeIn(300); | |
393 | + } | |
394 | + | |
395 | + pybossa.presentTask(function(task, deferred) { | |
396 | + if (!$.isEmptyObject(task) && current_task_id != task.id) { | |
397 | + _loadTaskInfo(task); | |
398 | + _setupGUI(task, deferred) | |
399 | + $("#main-container").fadeIn(500); | |
400 | + } else { | |
401 | + _showCompletedAllTaskMsg(); | |
402 | + } | |
403 | + }); | |
404 | + | |
405 | + // Private methods | |
406 | + function _run(projectname) { | |
407 | + pybossa.run(projectname); | |
408 | + } | |
409 | + | |
410 | + // Public methods | |
411 | + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) { | |
412 | + base_url = serverhost; | |
413 | + server_back_url = serverbackend; | |
414 | + videos_url = base_url + "/videos/"; | |
415 | + api_url = apihost; | |
416 | + _run(projectname); | |
417 | + }; | |
418 | + | |
419 | + wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, value) { | |
420 | + _updateTempParameterJSON(mainConfig, subConfig, step, value); | |
421 | + } | |
422 | + | |
423 | + wikilibras.hideSelectionPanel = function() { | |
424 | + _hideSelectionPanel(); | |
425 | + } | |
426 | + | |
427 | + wikilibras.selectAnOption = function(parentId, el) { | |
428 | + _selectAnOption(parentId, el); | |
429 | + } | |
430 | + | |
431 | + wikilibras.enableIconHover = function(container, isHover) { | |
432 | + _enableIconHover(container, isHover); | |
433 | + } | |
434 | + | |
435 | + wikilibras.enableIconCheck = function(container, isHover) { | |
436 | + _enableIconCheck(container, isHover); | |
437 | + } | |
437 | 438 | |
438 | 439 | }(window.wikilibras = window.wikilibras || {}, jQuery)); | ... | ... |