Download as
Browse Code »

Commit 4423508ec1cc66481b31b648707cf5405ed3fb63

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

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
  Diff comments   View file @4423508
@@ -46,7 +46,7 @@ body { @@ -46,7 +46,7 @@ body {
46 width: 100%; 46 width: 100%;
47 margin: 0; 47 margin: 0;
48 left: 0; 48 left: 0;
49 - background-color: #6958b4; 49 + background-color: rgba(43, 40, 41, 0.95);
50 opacity: 0.95; 50 opacity: 0.95;
51 } 51 }
52 52
@@ -497,6 +497,11 @@ ul.rig.columns-4 li { @@ -497,6 +497,11 @@ ul.rig.columns-4 li {
497 margin: auto; 497 margin: auto;
498 } 498 }
499 499
  500 +#approval-msg {
  501 + display: none;
  502 + margin: 0px;
  503 +}
  504 +
500 /* Thanks Screen */ 505 /* Thanks Screen */
501 #thanks-screen h3 { 506 #thanks-screen h3 {
502 margin-bottom: 0px; 507 margin-bottom: 0px;
view/assets/js/dynamic-loading-engine.js
  Diff comments   View file @4423508
@@ -62,8 +62,6 @@ @@ -62,8 +62,6 @@
62 case 'orientacao-retilineo': 62 case 'orientacao-retilineo':
63 goodData = replaceOrientationTag(data, currentMainConfig); 63 goodData = replaceOrientationTag(data, currentMainConfig);
64 break; 64 break;
65 - default:  
66 - console.log('No subConfig found');  
67 } 65 }
68 } 66 }
69 goodData = replaceHandFolderTag(goodData, currentMainConfig); 67 goodData = replaceHandFolderTag(goodData, currentMainConfig);
view/assets/js/wikilibras.js
  Diff comments   View file @4423508
1 (function(wikilibras, $, undefined) { 1 (function(wikilibras, $, undefined) {
2 2
3 - var videos_url = '';  
4 - var base_url = '';  
5 - var server_backend_url = '';  
6 - var api_url = '';  
7 - var current_task_id = -1;  
8 - var 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 \ No newline at end of file 534 \ No newline at end of file
view/template.html
  Diff comments   View file @4423508
@@ -156,6 +156,10 @@ @@ -156,6 +156,10 @@
156 </div> 156 </div>
157 <div id="render-screen"> 157 <div id="render-screen">
158 <div id="render-main" class="row"> 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 <div id="render-ref" class="col-sm-6"> 163 <div id="render-ref" class="col-sm-6">
160 <h6>Vídeo de referência</h6> 164 <h6>Vídeo de referência</h6>
161 <div class="col-sm-12"> 165 <div class="col-sm-12">
@@ -189,9 +193,11 @@ @@ -189,9 +193,11 @@
189 </div> 193 </div>
190 </div> 194 </div>
191 </div> 195 </div>
192 - <div class="row"> 196 + <div id="render-button-container" class="row">
193 <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR 197 <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
194 SINAL</div> 198 SINAL</div>
  199 + <div id="approval-button" class="btn btn-default pull-right">CONFIRMAR
  200 + SINAL</div>
195 </div> 201 </div>
196 </div> 202 </div>
197 <div id="thanks-screen"> 203 <div id="thanks-screen">
@@ -215,7 +221,8 @@ @@ -215,7 +221,8 @@
215 <form class="form-horizontal" method="post" 221 <form class="form-horizontal" method="post"
216 enctype="multipart/form-data"> 222 enctype="multipart/form-data">
217 <div id="upload-success-msg" class="alert alert-success"> 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 </div> 226 </div>
220 <fieldset> 227 <fieldset>
221 <h2>Sentiu falta de algum sinal no dicionário? Grave e envie o 228 <h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
@@ -87,12 +87,10 @@ class Wikilibras: @@ -87,12 +87,10 @@ class Wikilibras:
87 task_id = request.form['task_id'] 87 task_id = request.form['task_id']
88 project_id = request.form['project_id'] 88 project_id = request.form['project_id']
89 number_of_approval = int(request.form['number_of_approval']) 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 agreement_number = self.config['AGREEMENT_NUMBER'] 90 agreement_number = self.config['AGREEMENT_NUMBER']
93 result_msg = "" 91 result_msg = ""
94 code = 200 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 result_msg = self.__close_task(project_id, task_id) 94 result_msg = self.__close_task(project_id, task_id)
97 else: 95 else:
98 result_msg = "The task with ID=" + str(task_id) + " didn't reach the agreement number yet." 96 result_msg = "The task with ID=" + str(task_id) + " didn't reach the agreement number yet."