Commit 4423508ec1cc66481b31b648707cf5405ed3fb63
1 parent
9a208594
Exists in
master
and in
1 other branch
Tela de avaliação do sinal gerado por outro usuário.
Showing
5 changed files
with
547 additions
and
480 deletions
Show diff stats
view/assets/css/main.css
... | ... | @@ -46,7 +46,7 @@ body { |
46 | 46 | width: 100%; |
47 | 47 | margin: 0; |
48 | 48 | left: 0; |
49 | - background-color: #6958b4; | |
49 | + background-color: rgba(43, 40, 41, 0.95); | |
50 | 50 | opacity: 0.95; |
51 | 51 | } |
52 | 52 | |
... | ... | @@ -497,6 +497,11 @@ ul.rig.columns-4 li { |
497 | 497 | margin: auto; |
498 | 498 | } |
499 | 499 | |
500 | +#approval-msg { | |
501 | + display: none; | |
502 | + margin: 0px; | |
503 | +} | |
504 | + | |
500 | 505 | /* Thanks Screen */ |
501 | 506 | #thanks-screen h3 { |
502 | 507 | margin-bottom: 0px; | ... | ... |
view/assets/js/dynamic-loading-engine.js
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][active=true]').length; | |
84 | - var completed_config = $(baseId + ' .icon_container[active=true][complete=true]').length; | |
85 | - return completed_config != 0 && 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 | - 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, | |
118 | - function() { | |
119 | - $('#avatar-' + option).addClass( | |
120 | - 'avatar-' + option + | |
121 | - '-img-zoom-in'); | |
122 | - callback(); | |
123 | - }); | |
124 | - }); | |
125 | - } | |
126 | - | |
127 | - function _addZoomOutToAvatar(option, callback) { | |
128 | - $('#avatar-' + option).fadeOut( | |
129 | - 500, | |
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, | |
141 | - function() { | |
142 | - $('#avatar-' + option).removeClass( | |
143 | - 'avatar-' + option + '-img-zoom-in'); | |
144 | - $('#avatar-' + option).addClass( | |
145 | - 'avatar-img-zoom-out'); | |
146 | - callback(); | |
147 | - }); | |
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, function() { | |
169 | - dynworkflow.finishMainConfigSetup(option); | |
170 | - }); | |
171 | - dynworkflow.selectMainConfig(option); | |
172 | - } | |
173 | - | |
174 | - function _hideSelectionPanel() { | |
175 | - var config = _getCurrentMainConfiguration(); | |
176 | - _deselectIcon(config); | |
177 | - if (_isConfigurationComplete(config)) { | |
178 | - _finishConfiguration(config, true); | |
179 | - } else { | |
180 | - _finishConfiguration(config, false); | |
181 | - } | |
182 | - | |
183 | - _addZoomOutToAvatar(config, function() { | |
184 | - $('#ready-button').fadeIn(300); | |
185 | - $('.edit-container').fadeIn(300); | |
186 | - }); | |
187 | - $('#selection-panel').fadeOut(300); | |
188 | - } | |
189 | - | |
190 | - function _canRenderSignVideo() { | |
191 | - return _isConfigurationComplete('facial') && | |
192 | - (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); | |
193 | - } | |
194 | - | |
195 | - function _finishConfiguration(config, toFinish) { | |
196 | - _setupCheckIcon(config, toFinish); | |
197 | - _setupCheckIcon('avatar-' + config, toFinish); | |
198 | - | |
199 | - if (toFinish) { | |
200 | - $('#' + config + '-edit .check-icon').show(); | |
201 | - } else { | |
202 | - $('#' + config + '-edit .check-icon').hide(); | |
203 | - } | |
204 | - if (_canRenderSignVideo()) { | |
205 | - $('#ready-button').removeClass('disabled'); | |
206 | - } else { | |
207 | - $('#ready-button').addClass('disabled'); | |
208 | - } | |
209 | - } | |
210 | - | |
211 | - function _unfinishConfiguration(config, panel) { | |
212 | - _setupCheckIcon(config, false, panel); | |
213 | - _setupCheckIcon('avatar-' + config, false, panel); | |
214 | - $('#' + config + '-edit .check-icon').hide(); | |
215 | - | |
216 | - if (!_canRenderSignVideo()) { | |
217 | - $('#ready-button').addClass('disabled'); | |
218 | - } | |
219 | - } | |
220 | - | |
221 | - function _setupGUIOnSelection(option, finishCallback) { | |
222 | - $('#ready-button').fadeOut(300); | |
223 | - $('.edit-container').fadeOut(300); | |
224 | - _addZoomInToAvatar(option, function() { | |
225 | - $('#selection-panel').fadeIn(300, function() { | |
226 | - finishCallback(); | |
227 | - }); | |
228 | - }); | |
229 | - } | |
230 | - | |
231 | - function _setupConfigurationPanel() { | |
232 | - $('.icon_container').off('mouseover').on('mouseover', function() { | |
233 | - if (_canHover(this)) { | |
234 | - _enableIconHover(this, true); | |
235 | - } | |
236 | - }); | |
237 | - $('.icon_container').off('mouseout').on('mouseout', function() { | |
238 | - if (_canHover(this)) { | |
239 | - _enableIconHover(this, false); | |
240 | - } | |
241 | - }); | |
242 | - $('.config-panel-option').off('click').on('click', function() { | |
243 | - _showSelectionPanel($(this).attr('panel')); | |
244 | - }); | |
245 | - $('#minimize-icon-container').off('click').on('click', function() { | |
246 | - $('#ref-video-container').hide(); | |
247 | - $('#minimize-icon-container').hide(); | |
248 | - $('#maximize-icon-container').show(); | |
249 | - }); | |
250 | - $('#maximize-icon-container').off('click').on('click', function() { | |
251 | - $('#ref-video-container').show(); | |
252 | - $('#maximize-icon-container').hide(); | |
253 | - $('#minimize-icon-container').show(); | |
254 | - }); | |
255 | - } | |
256 | - | |
257 | - function _updateTempParameterJSON(mainConfig, subConfig, step, value) { | |
258 | - var subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; | |
259 | - if (typeof subConfigJSON == 'undefined') { | |
260 | - tmpParameterJSON[mainConfig][subConfig] = []; | |
261 | - subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; | |
262 | - } | |
263 | - | |
264 | - subConfigJSON[parseInt(step) - 1] = value; | |
265 | - } | |
266 | - | |
267 | - function _selectAnOption(parentId, el) { | |
268 | - $(parentId + ' .selection-panel-option[select=true]').removeAttr('select'); | |
269 | - $(el).attr('select', true); | |
270 | - | |
271 | - var mainConfig = $(parentId).attr('mainConfig'); | |
272 | - var subConfig = $(parentId).attr('subConfig'); | |
273 | - var step = $(parentId).attr('step'); | |
274 | - _updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr('value')); | |
275 | - } | |
276 | - | |
277 | - function _setupSelectionPanel() { | |
278 | - $('#selection-panel .x').off('click').on('click', function() { | |
279 | - _hideSelectionPanel(); | |
280 | - }); | |
281 | - } | |
282 | - | |
283 | - // Render Screen | |
284 | - function _submitParameterJSON(callback) { | |
285 | - parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); | |
286 | - console.log(parsedParameterJSON); | |
287 | - | |
288 | - $.ajax({ | |
289 | - type: 'POST', | |
290 | - url: api_url + '/sign', | |
291 | - data: JSON.stringify(parsedParameterJSON), | |
292 | - contentType: 'application/json', | |
293 | - success: function(response) { | |
294 | - console.log(response); | |
295 | - callback(); | |
296 | - }, | |
297 | - error: function(xhr, textStatus, error) { | |
298 | - alert(xhr.responseText); | |
299 | - } | |
300 | - }); | |
301 | - } | |
302 | - | |
303 | - function _getRenderedAvatarUrl(userId, signName) { | |
304 | - return api_url + '/public/' + userId + '/' + signName + ".webm"; | |
305 | - } | |
306 | - | |
307 | - function _showRenderedAvatar() { | |
308 | - var userId = parsedParameterJSON['userId']; | |
309 | - var signName = parsedParameterJSON['sinal']; | |
310 | - $("#render-avatar video").attr("src", _getRenderedAvatarUrl(userId, signName)); | |
311 | - $("#render-avatar").fadeIn(300); | |
312 | - } | |
313 | - | |
314 | - function _setupRenderScreen() { | |
315 | - $("#configuration-screen").hide(); | |
316 | - $("#render-avatar").hide(); | |
317 | - $("#render-screen").show(); | |
318 | - $("#render-loading").fadeIn(300); | |
319 | - $("#finish-button").addClass("disabled"); | |
320 | - $("#render-ref video").prop("controls", false); | |
321 | - $("#render-ref video").get(0).pause(); | |
322 | - | |
323 | - _submitParameterJSON(function() { | |
324 | - $("#render-loading").fadeOut(300); | |
325 | - $("#render-ref video").prop("controls", true); | |
326 | - $("#render-ref video").get(0).play(); | |
327 | - $("#finish-button").removeClass("disabled"); | |
328 | - _showRenderedAvatar(); | |
329 | - }); | |
330 | - //$("#finish-button").removeClass("disabled"); | |
331 | - } | |
332 | - | |
333 | - function _clearGUI() { | |
334 | - articulation.clean(); | |
335 | - $(".selection-panel-option").removeAttr('select'); | |
336 | - $(".icon_container").removeAttr("select"); | |
337 | - $(".icon_container[complete=true]").each( | |
338 | - function() { | |
339 | - _unfinishConfiguration($(this).attr("name"), $(this).attr( | |
340 | - "panel")); | |
341 | - }); | |
342 | - } | |
343 | - | |
344 | - function _setupMainScreen(task, deferred) { | |
345 | - $("#initial-screen").fadeIn(300); | |
346 | - $("#start-button").off("click").on("click", function() { | |
347 | - $("#initial-screen").hide(); | |
348 | - $("#configuration-screen").show(); | |
349 | - dynengine.load(); | |
350 | - console.log('dynengine loaded'); | |
351 | - dynworkflow.load(); | |
352 | - console.log('dynworkflow loaded'); | |
353 | - }); | |
354 | - $("#ready-button").off("click").on("click", function() { | |
355 | - if ($(this).hasClass('disabled')) { | |
356 | - event.preventDefault(); | |
357 | - return; | |
358 | - } | |
359 | - _setupRenderScreen(); | |
360 | - }); | |
361 | - $("#render-edit").off("click").on("click", function() { | |
362 | - $("#render-screen").hide(); | |
363 | - $("#configuration-screen").show(); | |
364 | - }); | |
365 | - $("#finish-button").off("click").on("click", function() { | |
366 | - if ($(this).hasClass('disabled')) { | |
367 | - event.preventDefault(); | |
368 | - return; | |
369 | - } | |
370 | - $("#render-screen").hide(); | |
371 | - $("#thanks-screen").show(); | |
372 | - _saveAnswer(task, deferred) | |
373 | - }); | |
374 | - } | |
375 | - | |
376 | - function _setupGUI(task, deferred) { | |
377 | - _clearGUI(); | |
378 | - _setupConfigurationPanel(); | |
379 | - _setupSelectionPanel(); | |
380 | - _setupMainScreen(task, deferred); | |
381 | - | |
382 | - submitSign.setup(); | |
383 | - } | |
384 | - | |
385 | - function _saveAnswer(task, deferred) { | |
386 | - var answer = {} | |
387 | - answer["status"] = "FINISHED"; | |
388 | - answer["parameter_json"] = parsedParameterJSON; | |
389 | - | |
390 | - /*pybossa.saveTask(task.id, answer).done(function() { | |
391 | - setTimeout(function() { | |
392 | - $("#thanks-screen").hide(); | |
393 | - deferred.resolve(); | |
394 | - }, 2500); | |
395 | - });*/ | |
396 | - setTimeout(function() { | |
397 | - $("#thanks-screen").hide(); | |
398 | - deferred.resolve(); | |
399 | - }, 2500); | |
400 | - } | |
401 | - | |
402 | - function _showCompletedAllTaskMsg() { | |
403 | - $("#completed-task-msg").hide(); | |
404 | - $("#completed-all-task-msg").show(); | |
405 | - $("#thanks-screen").fadeIn(300); | |
406 | - // It removes the PyBossa default message | |
407 | - $(".row .col-md-12 p").remove(); | |
408 | - } | |
409 | - | |
410 | - pybossa.presentTask(function(task, deferred) { | |
411 | - if (!$.isEmptyObject(task) && current_task_id != task.id) { | |
412 | - _loadTaskInfo(task); | |
413 | - _setupGUI(task, deferred) | |
414 | - $("#main-container").fadeIn(500); | |
415 | - } else { | |
416 | - _showCompletedAllTaskMsg(); | |
417 | - } | |
418 | - }); | |
419 | - | |
420 | - // Private methods | |
421 | - function _run(projectname) { | |
422 | - pybossa.run(projectname); | |
423 | - } | |
424 | - | |
425 | - // Public methods | |
426 | - wikilibras.run = function(serverhost, serverbackend, projectname, apihost) { | |
427 | - base_url = serverhost; | |
428 | - server_back_url = serverbackend; | |
429 | - videos_url = base_url + "/videos/"; | |
430 | - api_url = apihost; | |
431 | - _run(projectname); | |
432 | - }; | |
433 | - | |
434 | - wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, value) { | |
435 | - _updateTempParameterJSON(mainConfig, subConfig, step, value); | |
436 | - } | |
437 | - | |
438 | - wikilibras.hideSelectionPanel = function() { | |
439 | - _hideSelectionPanel(); | |
440 | - } | |
441 | - | |
442 | - wikilibras.selectAnOption = function(parentId, el) { | |
443 | - _selectAnOption(parentId, el); | |
444 | - } | |
445 | - | |
446 | - wikilibras.enableIconHover = function(container, isHover) { | |
447 | - _enableIconHover(container, isHover); | |
448 | - } | |
449 | - | |
450 | - wikilibras.enableIconCheck = function(container, isHover) { | |
451 | - _enableIconCheck(container, isHover); | |
452 | - } | |
453 | - | |
454 | - wikilibras.showTeachContainer = function() { | |
455 | - $(".sub-main-container").hide(); | |
456 | - $("#teach-container").show(); | |
457 | - } | |
458 | - | |
459 | - wikilibras.showSubmitSignContainer = function() { | |
460 | - $(".sub-main-container").hide(); | |
461 | - $("#submit-sign-container").show(); | |
462 | - } | |
463 | - | |
464 | - wikilibras.showTeachedSignsContainer = function() { | |
465 | - $(".sub-main-container").hide(); | |
466 | - $("#teached-signs-container").show(); | |
467 | - } | |
468 | - | |
469 | - wikilibras.showTutorialContainer = function() { | |
470 | - $(".sub-main-container").hide(); | |
471 | - $("#tutorial-container").show(); | |
472 | - } | |
473 | - | |
474 | -}(window.wikilibras = window.wikilibras || {}, jQuery)); | |
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 | |
84 | + + ' .icon_container[json_name][active=true]').length; | |
85 | + var completed_config = $(baseId | |
86 | + + ' .icon_container[active=true][complete=true]').length; | |
87 | + return completed_config != 0 && total_config == completed_config; | |
88 | + } | |
89 | + | |
90 | + function _canHover(el) { | |
91 | + var incompleteConfig = typeof $(el).attr('complete') == 'undefined' | |
92 | + || $(el).attr('complete') == 'false'; | |
93 | + return (!_isSelectingState() && incompleteConfig) | |
94 | + || (typeof $(el).attr('select') == 'undefined' && incompleteConfig); | |
95 | + } | |
96 | + | |
97 | + function _getCurrentMainConfiguration() { | |
98 | + return _isSelectingState() ? $( | |
99 | + '#configuration-panel .icon_container[select=true]').attr( | |
100 | + 'name') : ''; | |
101 | + } | |
102 | + | |
103 | + function _addZoomInToAvatar(option, callback) { | |
104 | + $('#avatar-default') | |
105 | + .fadeOut( | |
106 | + 500, | |
107 | + function() { | |
108 | + $('#avatar-container').removeClass('col-sm-7'); | |
109 | + $('#avatar-container').addClass('col-sm-5'); | |
110 | + $('#selection-container').removeClass('col-sm-2'); | |
111 | + $('#selection-container').addClass('col-sm-4'); | |
112 | + $('#avatar-container').removeClass( | |
113 | + 'avatar-container-zoom-out'); | |
114 | + $('#avatar-container').addClass( | |
115 | + 'avatar-container-zoom-in'); | |
116 | + $('#avatar-' + option).removeClass( | |
117 | + 'avatar-img-zoom-out'); | |
118 | + $('#avatar-' + option).fadeIn( | |
119 | + 500, | |
120 | + function() { | |
121 | + $('#avatar-' + option).addClass( | |
122 | + 'avatar-' + option | |
123 | + + '-img-zoom-in'); | |
124 | + callback(); | |
125 | + }); | |
126 | + }); | |
127 | + } | |
128 | + | |
129 | + function _addZoomOutToAvatar(option, callback) { | |
130 | + $('#avatar-' + option).fadeOut( | |
131 | + 500, | |
132 | + function() { | |
133 | + $('#selection-container').removeClass('col-sm-4'); | |
134 | + $('#selection-container').addClass('col-sm-2'); | |
135 | + $('#avatar-container').removeClass('col-sm-5'); | |
136 | + $('#avatar-container').addClass('col-sm-7'); | |
137 | + $('#avatar-container').removeClass( | |
138 | + 'avatar-container-zoom-in'); | |
139 | + $('#avatar-container') | |
140 | + .addClass('avatar-container-zoom-out'); | |
141 | + $('#avatar-default').fadeIn( | |
142 | + 500, | |
143 | + function() { | |
144 | + $('#avatar-' + option).removeClass( | |
145 | + 'avatar-' + option + '-img-zoom-in'); | |
146 | + $('#avatar-' + option).addClass( | |
147 | + 'avatar-img-zoom-out'); | |
148 | + callback(); | |
149 | + }); | |
150 | + }); | |
151 | + } | |
152 | + | |
153 | + function _clearPreviousSelection() { | |
154 | + $('.selection-panel-body').hide(); | |
155 | + $('.subconfiguration-panel').hide(); | |
156 | + | |
157 | + if (_isSelectingState()) { | |
158 | + var current_option = _getCurrentMainConfiguration(); | |
159 | + _selectIcon(current_option, false); | |
160 | + if (_isConfigurationComplete(current_option)) { | |
161 | + _setupCheckIcon(current_option, true); | |
162 | + } | |
163 | + $('#avatar-' + current_option).fadeOut(500); | |
164 | + } | |
165 | + } | |
166 | + | |
167 | + function _showSelectionPanel(option) { | |
168 | + _clearPreviousSelection(); | |
169 | + _selectIcon(option, true); | |
170 | + _setupGUIOnSelection(option, function() { | |
171 | + dynworkflow.finishMainConfigSetup(option); | |
172 | + }); | |
173 | + dynworkflow.selectMainConfig(option); | |
174 | + } | |
175 | + | |
176 | + function _hideSelectionPanel() { | |
177 | + var config = _getCurrentMainConfiguration(); | |
178 | + _deselectIcon(config); | |
179 | + if (_isConfigurationComplete(config)) { | |
180 | + _finishConfiguration(config, true); | |
181 | + } else { | |
182 | + _finishConfiguration(config, false); | |
183 | + } | |
184 | + | |
185 | + _addZoomOutToAvatar(config, function() { | |
186 | + $('#ready-button').fadeIn(300); | |
187 | + $('.edit-container').fadeIn(300); | |
188 | + }); | |
189 | + $('#selection-panel').fadeOut(300); | |
190 | + } | |
191 | + | |
192 | + function _canRenderSignVideo() { | |
193 | + return _isConfigurationComplete('facial') | |
194 | + && (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); | |
195 | + } | |
196 | + | |
197 | + function _finishConfiguration(config, toFinish) { | |
198 | + _setupCheckIcon(config, toFinish); | |
199 | + _setupCheckIcon('avatar-' + config, toFinish); | |
200 | + | |
201 | + if (toFinish) { | |
202 | + $('#' + config + '-edit .check-icon').show(); | |
203 | + } else { | |
204 | + $('#' + config + '-edit .check-icon').hide(); | |
205 | + } | |
206 | + if (_canRenderSignVideo()) { | |
207 | + $('#ready-button').removeClass('disabled'); | |
208 | + } else { | |
209 | + $('#ready-button').addClass('disabled'); | |
210 | + } | |
211 | + } | |
212 | + | |
213 | + function _unfinishConfiguration(config, panel) { | |
214 | + _setupCheckIcon(config, false, panel); | |
215 | + _setupCheckIcon('avatar-' + config, false, panel); | |
216 | + $('#' + config + '-edit .check-icon').hide(); | |
217 | + | |
218 | + if (!_canRenderSignVideo()) { | |
219 | + $('#ready-button').addClass('disabled'); | |
220 | + } | |
221 | + } | |
222 | + | |
223 | + function _setupGUIOnSelection(option, finishCallback) { | |
224 | + $('#ready-button').fadeOut(300); | |
225 | + $('.edit-container').fadeOut(300); | |
226 | + _addZoomInToAvatar(option, function() { | |
227 | + $('#selection-panel').fadeIn(300, function() { | |
228 | + finishCallback(); | |
229 | + }); | |
230 | + }); | |
231 | + } | |
232 | + | |
233 | + function _setupConfigurationPanel() { | |
234 | + $('.icon_container').off('mouseover').on('mouseover', function() { | |
235 | + if (_canHover(this)) { | |
236 | + _enableIconHover(this, true); | |
237 | + } | |
238 | + }); | |
239 | + $('.icon_container').off('mouseout').on('mouseout', function() { | |
240 | + if (_canHover(this)) { | |
241 | + _enableIconHover(this, false); | |
242 | + } | |
243 | + }); | |
244 | + $('.config-panel-option').off('click').on('click', function() { | |
245 | + _showSelectionPanel($(this).attr('panel')); | |
246 | + }); | |
247 | + $('#minimize-icon-container').off('click').on('click', function() { | |
248 | + $('#ref-video-container').hide(); | |
249 | + $('#minimize-icon-container').hide(); | |
250 | + $('#maximize-icon-container').show(); | |
251 | + }); | |
252 | + $('#maximize-icon-container').off('click').on('click', function() { | |
253 | + $('#ref-video-container').show(); | |
254 | + $('#maximize-icon-container').hide(); | |
255 | + $('#minimize-icon-container').show(); | |
256 | + }); | |
257 | + } | |
258 | + | |
259 | + function _updateTempParameterJSON(mainConfig, subConfig, step, value) { | |
260 | + var subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; | |
261 | + if (typeof subConfigJSON == 'undefined') { | |
262 | + tmpParameterJSON[mainConfig][subConfig] = []; | |
263 | + subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; | |
264 | + } | |
265 | + | |
266 | + subConfigJSON[parseInt(step) - 1] = value; | |
267 | + } | |
268 | + | |
269 | + function _selectAnOption(parentId, el) { | |
270 | + $(parentId + ' .selection-panel-option[select=true]').removeAttr( | |
271 | + 'select'); | |
272 | + $(el).attr('select', true); | |
273 | + | |
274 | + var mainConfig = $(parentId).attr('mainConfig'); | |
275 | + var subConfig = $(parentId).attr('subConfig'); | |
276 | + var step = $(parentId).attr('step'); | |
277 | + _updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr( | |
278 | + 'value')); | |
279 | + } | |
280 | + | |
281 | + function _setupSelectionPanel() { | |
282 | + $('#selection-panel .x').off('click').on('click', function() { | |
283 | + _hideSelectionPanel(); | |
284 | + }); | |
285 | + } | |
286 | + | |
287 | + // Render Screen | |
288 | + function _submitParameterJSON(callback) { | |
289 | + parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); | |
290 | + console.log(parsedParameterJSON); | |
291 | + | |
292 | + $.ajax({ | |
293 | + type : 'POST', | |
294 | + url : api_url + '/sign', | |
295 | + data : JSON.stringify(parsedParameterJSON), | |
296 | + contentType : 'application/json', | |
297 | + success : function(response) { | |
298 | + console.log(response); | |
299 | + callback(); | |
300 | + }, | |
301 | + error : function(xhr, textStatus, error) { | |
302 | + alert(xhr.responseText); | |
303 | + } | |
304 | + }); | |
305 | + } | |
306 | + | |
307 | + function _getRenderedAvatarUrl(userId, signName) { | |
308 | + return api_url + '/public/' + userId + '/' + signName + ".webm"; | |
309 | + } | |
310 | + | |
311 | + function _showRenderedAvatar(parameterJSON) { | |
312 | + var userId = parameterJSON['userId']; | |
313 | + var signName = parameterJSON['sinal']; | |
314 | + $("#render-avatar video").attr("src", | |
315 | + _getRenderedAvatarUrl(userId, signName)); | |
316 | + $("#render-avatar").fadeIn(300); | |
317 | + } | |
318 | + | |
319 | + function _setupRenderScreen() { | |
320 | + $("#configuration-screen").hide(); | |
321 | + $("#render-avatar").hide(); | |
322 | + $("#render-screen").show(); | |
323 | + $("#render-loading").fadeIn(300); | |
324 | + $("#render-ref video").prop("controls", false); | |
325 | + $("#render-ref video").get(0).pause(); | |
326 | + $("#render-button-container .btn").hide(); | |
327 | + $("#finish-button").addClass("disabled"); | |
328 | + $("#finish-button").show(); | |
329 | + | |
330 | + _submitParameterJSON(function() { | |
331 | + $("#render-loading").fadeOut(300); | |
332 | + $("#render-ref video").prop("controls", true); | |
333 | + $("#render-ref video").get(0).play(); | |
334 | + $("#finish-button").removeClass("disabled"); | |
335 | + _showRenderedAvatar(parsedParameterJSON); | |
336 | + }); | |
337 | + } | |
338 | + | |
339 | + function _setupApprovalScreen(parameterJSON) { | |
340 | + $("#render-button-container .btn").hide(); | |
341 | + $("#approval-button").show(); | |
342 | + $("#approval-msg").show(); | |
343 | + $("#render-ref video").get(0).play(); | |
344 | + | |
345 | + _showRenderedAvatar(parameterJSON); | |
346 | + $("#render-screen").fadeIn(300); | |
347 | + } | |
348 | + | |
349 | + function _submitAnswer(task, deferred, status) { | |
350 | + var answer = _createAnswer(task, status); | |
351 | + if (status == "APPROVED") { | |
352 | + _finishTask(task, deferred, answer); | |
353 | + } else { | |
354 | + _saveAnswer(task, deferred, answer); | |
355 | + } | |
356 | + $("#render-screen").hide(); | |
357 | + $("#thanks-screen").show(); | |
358 | + } | |
359 | + | |
360 | + function _clearGUI() { | |
361 | + articulation.clean(); | |
362 | + $(".selection-panel-option").removeAttr('select'); | |
363 | + $(".icon_container").removeAttr("select"); | |
364 | + $(".icon_container[complete=true]").each( | |
365 | + function() { | |
366 | + _unfinishConfiguration($(this).attr("name"), $(this).attr( | |
367 | + "panel")); | |
368 | + }); | |
369 | + } | |
370 | + | |
371 | + function _setupMainScreen(task, deferred) { | |
372 | + var last_answer = task.info.last_answer; | |
373 | + var hasLastAnswer = typeof last_answer != "undefined"; | |
374 | + if (hasLastAnswer) { | |
375 | + _setupApprovalScreen(last_answer.parameter_json); | |
376 | + } else { | |
377 | + $("#initial-screen").fadeIn(300); | |
378 | + } | |
379 | + | |
380 | + $("#start-button").off("click").on("click", function() { | |
381 | + $("#initial-screen").hide(); | |
382 | + $("#configuration-screen").show(); | |
383 | + }); | |
384 | + $("#ready-button").off("click").on("click", function() { | |
385 | + if ($(this).hasClass('disabled')) { | |
386 | + event.preventDefault(); | |
387 | + return; | |
388 | + } | |
389 | + _setupRenderScreen(); | |
390 | + }); | |
391 | + $("#render-edit").off("click").on("click", function() { | |
392 | + $("#render-screen").hide(); | |
393 | + $("#configuration-screen").show(); | |
394 | + }); | |
395 | + $("#finish-button").off("click").on("click", function() { | |
396 | + if ($(this).hasClass('disabled')) { | |
397 | + event.preventDefault(); | |
398 | + return; | |
399 | + } | |
400 | + _submitAnswer(task, deferred, "FINISHED"); | |
401 | + }); | |
402 | + $("#approval-button").off("click").on("click", function() { | |
403 | + _submitAnswer(task, deferred, "APPROVED"); | |
404 | + }); | |
405 | + } | |
406 | + | |
407 | + function _setupGUI(task, deferred) { | |
408 | + dynengine.load(); | |
409 | + dynworkflow.load(); | |
410 | + _clearGUI(); | |
411 | + _setupConfigurationPanel(); | |
412 | + _setupSelectionPanel(); | |
413 | + _setupMainScreen(task, deferred); | |
414 | + submitSign.setup(); | |
415 | + } | |
416 | + | |
417 | + function _createAnswer(task, status) { | |
418 | + var answer = {} | |
419 | + answer["status"] = status; | |
420 | + var last_answer = task.info.last_answer; | |
421 | + var hasLastAnswer = typeof last_answer != "undefined"; | |
422 | + | |
423 | + if (hasLastAnswer && status == "APPROVED") { | |
424 | + answer["number_of_approval"] = last_answer.number_of_approval + 1; | |
425 | + answer["parameter_json"] = last_answer.parameter_json; | |
426 | + } else { | |
427 | + answer["number_of_approval"] = 0; | |
428 | + answer["parameter_json"] = parsedParameterJSON; | |
429 | + } | |
430 | + return answer; | |
431 | + } | |
432 | + | |
433 | + function _finishTask(task, deferred, answer) { | |
434 | + $.ajax({ | |
435 | + type : "POST", | |
436 | + url : server_backend_url + "/finish_task", | |
437 | + data : { | |
438 | + "task_id" : task.id, | |
439 | + "project_id" : task.project_id, | |
440 | + "number_of_approval" : answer.number_of_approval, | |
441 | + }, | |
442 | + success : function(response) { | |
443 | + _saveAnswer(task, deferred, answer); | |
444 | + }, | |
445 | + error : function(xhr, textStatus, error) { | |
446 | + alert(xhr.responseText); | |
447 | + } | |
448 | + }); | |
449 | + } | |
450 | + | |
451 | + function _saveAnswer(task, deferred, answer) { | |
452 | + pybossa.saveTask(task.id, answer).done(function() { | |
453 | + setTimeout(function() { | |
454 | + $("#thanks-screen").hide(); | |
455 | + deferred.resolve(); | |
456 | + }, 2500); | |
457 | + }); | |
458 | + } | |
459 | + | |
460 | + function _showCompletedAllTaskMsg() { | |
461 | + $("#completed-task-msg").hide(); | |
462 | + $("#completed-all-task-msg").show(); | |
463 | + $("#thanks-screen").fadeIn(300); | |
464 | + // It removes the PyBossa default message | |
465 | + $(".row .col-md-12 p").remove(); | |
466 | + } | |
467 | + | |
468 | + pybossa.presentTask(function(task, deferred) { | |
469 | + if (!$.isEmptyObject(task) && current_task_id != task.id) { | |
470 | + _loadTaskInfo(task); | |
471 | + _setupGUI(task, deferred) | |
472 | + $("#main-container").fadeIn(500); | |
473 | + } else { | |
474 | + _showCompletedAllTaskMsg(); | |
475 | + } | |
476 | + }); | |
477 | + | |
478 | + // Private methods | |
479 | + function _run(projectname) { | |
480 | + pybossa.run(projectname); | |
481 | + } | |
482 | + | |
483 | + // Public methods | |
484 | + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) { | |
485 | + base_url = serverhost; | |
486 | + server_backend_url = serverbackend; | |
487 | + videos_url = base_url + "/videos/"; | |
488 | + api_url = apihost; | |
489 | + _run(projectname); | |
490 | + }; | |
491 | + | |
492 | + wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, | |
493 | + value) { | |
494 | + _updateTempParameterJSON(mainConfig, subConfig, step, value); | |
495 | + } | |
496 | + | |
497 | + wikilibras.hideSelectionPanel = function() { | |
498 | + _hideSelectionPanel(); | |
499 | + } | |
500 | + | |
501 | + wikilibras.selectAnOption = function(parentId, el) { | |
502 | + _selectAnOption(parentId, el); | |
503 | + } | |
504 | + | |
505 | + wikilibras.enableIconHover = function(container, isHover) { | |
506 | + _enableIconHover(container, isHover); | |
507 | + } | |
508 | + | |
509 | + wikilibras.enableIconCheck = function(container, isHover) { | |
510 | + _enableIconCheck(container, isHover); | |
511 | + } | |
512 | + | |
513 | + wikilibras.showTeachContainer = function() { | |
514 | + $(".sub-main-container").hide(); | |
515 | + $("#teach-container").show(); | |
516 | + } | |
517 | + | |
518 | + wikilibras.showSubmitSignContainer = function() { | |
519 | + $(".sub-main-container").hide(); | |
520 | + $("#submit-sign-container").show(); | |
521 | + } | |
522 | + | |
523 | + wikilibras.showTeachedSignsContainer = function() { | |
524 | + $(".sub-main-container").hide(); | |
525 | + $("#teached-signs-container").show(); | |
526 | + } | |
527 | + | |
528 | + wikilibras.showTutorialContainer = function() { | |
529 | + $(".sub-main-container").hide(); | |
530 | + $("#tutorial-container").show(); | |
531 | + } | |
532 | + | |
533 | +}(window.wikilibras = window.wikilibras || {}, jQuery)); | |
475 | 534 | \ No newline at end of file | ... | ... |
view/template.html
... | ... | @@ -156,6 +156,10 @@ |
156 | 156 | </div> |
157 | 157 | <div id="render-screen"> |
158 | 158 | <div id="render-main" class="row"> |
159 | + <h4 id="approval-msg"> | |
160 | + O sinal "<span class="sign-label"></span>" feito pelo avatar está | |
161 | + correto? | |
162 | + </h4> | |
159 | 163 | <div id="render-ref" class="col-sm-6"> |
160 | 164 | <h6>Vídeo de referência</h6> |
161 | 165 | <div class="col-sm-12"> |
... | ... | @@ -189,9 +193,11 @@ |
189 | 193 | </div> |
190 | 194 | </div> |
191 | 195 | </div> |
192 | - <div class="row"> | |
196 | + <div id="render-button-container" class="row"> | |
193 | 197 | <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR |
194 | 198 | SINAL</div> |
199 | + <div id="approval-button" class="btn btn-default pull-right">CONFIRMAR | |
200 | + SINAL</div> | |
195 | 201 | </div> |
196 | 202 | </div> |
197 | 203 | <div id="thanks-screen"> |
... | ... | @@ -215,7 +221,8 @@ |
215 | 221 | <form class="form-horizontal" method="post" |
216 | 222 | enctype="multipart/form-data"> |
217 | 223 | <div id="upload-success-msg" class="alert alert-success"> |
218 | - <strong>Envio concluído, muito obrigado! Em breve o seu sinal estará no dicionário WikiLibras.</strong> | |
224 | + <strong>Envio concluído, muito obrigado! Em breve o seu | |
225 | + sinal estará no dicionário WikiLibras.</strong> | |
219 | 226 | </div> |
220 | 227 | <fieldset> |
221 | 228 | <h2>Sentiu falta de algum sinal no dicionário? Grave e envie o | ... | ... |
wikilibras.py
... | ... | @@ -87,12 +87,10 @@ class Wikilibras: |
87 | 87 | task_id = request.form['task_id'] |
88 | 88 | project_id = request.form['project_id'] |
89 | 89 | number_of_approval = int(request.form['number_of_approval']) |
90 | - number_of_avatar_disapproval = int(request.form['number_of_avatar_disapproval']) | |
91 | - number_of_ref_disapproval = int(request.form['number_of_ref_disapproval']) | |
92 | 90 | agreement_number = self.config['AGREEMENT_NUMBER'] |
93 | 91 | result_msg = "" |
94 | 92 | code = 200 |
95 | - if (number_of_approval >= agreement_number or number_of_avatar_disapproval >= agreement_number or number_of_ref_disapproval >= agreement_number): | |
93 | + if (number_of_approval >= agreement_number): | |
96 | 94 | result_msg = self.__close_task(project_id, task_id) |
97 | 95 | else: |
98 | 96 | result_msg = "The task with ID=" + str(task_id) + " didn't reach the agreement number yet." | ... | ... |