diff --git a/view/assets/css/main.css b/view/assets/css/main.css index 2994053..e7714da 100644 --- a/view/assets/css/main.css +++ b/view/assets/css/main.css @@ -46,7 +46,7 @@ body { width: 100%; margin: 0; left: 0; - background-color: #6958b4; + background-color: rgba(43, 40, 41, 0.95); opacity: 0.95; } @@ -497,6 +497,11 @@ ul.rig.columns-4 li { margin: auto; } +#approval-msg { + display: none; + margin: 0px; +} + /* Thanks Screen */ #thanks-screen h3 { margin-bottom: 0px; diff --git a/view/assets/js/dynamic-loading-engine.js b/view/assets/js/dynamic-loading-engine.js index fcd543f..101c7f0 100644 --- a/view/assets/js/dynamic-loading-engine.js +++ b/view/assets/js/dynamic-loading-engine.js @@ -62,8 +62,6 @@ case 'orientacao-retilineo': goodData = replaceOrientationTag(data, currentMainConfig); break; - default: - console.log('No subConfig found'); } } goodData = replaceHandFolderTag(goodData, currentMainConfig); diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 1847cc8..8fea826 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -1,474 +1,533 @@ (function(wikilibras, $, undefined) { - var videos_url = ''; - var base_url = ''; - var server_backend_url = ''; - var api_url = ''; - var current_task_id = -1; - var tmpParameterJSON = {}; - var parsedParameterJSON = {}; - - function _setupTmpParameterJSON(sign_name) { - tmpParameterJSON = { - 'sinal': sign_name, - 'facial': {}, - 'right-hand': {}, - 'left-hand': {} - }; - parsedParameterJSON = {}; - } - - function _loadTaskInfo(task) { - current_task_id = task.id; - var sign_name = task.info.sign_name; - var ref_vid_link = videos_url + sign_name + '_REF.webm'; - $('.sign-label').text(sign_name); - $('.ref-video').attr('src', ref_vid_link); - - _setupTmpParameterJSON(task.info.sign_name); - } - - function _changeImage(img, url) { - img.attr('src', url); - } - - function _enableIconHover(container, isHover) { - var img = $(container).find('img').first(); - var hover_img_url = base_url + '/img/' + $(container).attr('name'); - if (isHover) { - hover_img_url += '-icon-hover.png'; - } else { - hover_img_url += '-icon.png'; - } - _changeImage(img, hover_img_url); - } - - function _selectIcon(iconName, isSelect, panel) { - panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']'; - var icon_id = '.icon_container[name=' + iconName + ']' + panel; - _enableIconHover(icon_id, isSelect); - $(icon_id).attr('select', isSelect); - } - - function _deselectIcon(iconName, parent) { - _selectIcon(iconName, false, parent); - } - - function _enableIconCheck(container, isCheck) { - var img = $(container).find('img').first(); - var check_img_url = base_url + '/img/' + $(container).attr('name'); - - if (isCheck) { - check_img_url += '-icon-check.png'; - } else { - check_img_url += '-icon.png'; - } - _changeImage(img, check_img_url); - } - - function _setupCheckIcon(option, isCheck, panel) { - panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']'; - var icon_id = '.icon_container[name=' + option + ']' + panel; - _enableIconCheck(icon_id, isCheck); - $('.icon_container[name=' + option + ']' + panel).attr('complete', - isCheck); - } - - function _isSelectingState() { - return $('#configuration-panel .icon_container[select=true]').length > 0; - } - - function _isConfigurationComplete(config) { - var baseId = '.subconfiguration-panel[mainConfig=' + config + ']'; - var total_config = $(baseId + ' .icon_container[json_name][active=true]').length; - var completed_config = $(baseId + ' .icon_container[active=true][complete=true]').length; - return completed_config != 0 && total_config == completed_config; - } - - function _canHover(el) { - var incompleteConfig = typeof $(el).attr('complete') == 'undefined' || - $(el).attr('complete') == 'false'; - return (!_isSelectingState() && incompleteConfig) || - (typeof $(el).attr('select') == 'undefined' && incompleteConfig); - } - - function _getCurrentMainConfiguration() { - return _isSelectingState() ? $( - '#configuration-panel .icon_container[select=true]').attr( - 'name') : ''; - } - - function _addZoomInToAvatar(option, callback) { - $('#avatar-default') - .fadeOut( - 500, - function() { - $('#avatar-container').removeClass('col-sm-7'); - $('#avatar-container').addClass('col-sm-5'); - $('#selection-container').removeClass('col-sm-2'); - $('#selection-container').addClass('col-sm-4'); - $('#avatar-container').removeClass( - 'avatar-container-zoom-out'); - $('#avatar-container').addClass( - 'avatar-container-zoom-in'); - $('#avatar-' + option).removeClass( - 'avatar-img-zoom-out'); - $('#avatar-' + option).fadeIn( - 500, - function() { - $('#avatar-' + option).addClass( - 'avatar-' + option + - '-img-zoom-in'); - callback(); - }); - }); - } - - function _addZoomOutToAvatar(option, callback) { - $('#avatar-' + option).fadeOut( - 500, - function() { - $('#selection-container').removeClass('col-sm-4'); - $('#selection-container').addClass('col-sm-2'); - $('#avatar-container').removeClass('col-sm-5'); - $('#avatar-container').addClass('col-sm-7'); - $('#avatar-container').removeClass( - 'avatar-container-zoom-in'); - $('#avatar-container') - .addClass('avatar-container-zoom-out'); - $('#avatar-default').fadeIn( - 500, - function() { - $('#avatar-' + option).removeClass( - 'avatar-' + option + '-img-zoom-in'); - $('#avatar-' + option).addClass( - 'avatar-img-zoom-out'); - callback(); - }); - }); - } - - function _clearPreviousSelection() { - $('.selection-panel-body').hide(); - $('.subconfiguration-panel').hide(); - - if (_isSelectingState()) { - var current_option = _getCurrentMainConfiguration(); - _selectIcon(current_option, false); - if (_isConfigurationComplete(current_option)) { - _setupCheckIcon(current_option, true); - } - $('#avatar-' + current_option).fadeOut(500); - } - } - - function _showSelectionPanel(option) { - _clearPreviousSelection(); - _selectIcon(option, true); - _setupGUIOnSelection(option, function() { - dynworkflow.finishMainConfigSetup(option); - }); - dynworkflow.selectMainConfig(option); - } - - function _hideSelectionPanel() { - var config = _getCurrentMainConfiguration(); - _deselectIcon(config); - if (_isConfigurationComplete(config)) { - _finishConfiguration(config, true); - } else { - _finishConfiguration(config, false); - } - - _addZoomOutToAvatar(config, function() { - $('#ready-button').fadeIn(300); - $('.edit-container').fadeIn(300); - }); - $('#selection-panel').fadeOut(300); - } - - function _canRenderSignVideo() { - return _isConfigurationComplete('facial') && - (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); - } - - function _finishConfiguration(config, toFinish) { - _setupCheckIcon(config, toFinish); - _setupCheckIcon('avatar-' + config, toFinish); - - if (toFinish) { - $('#' + config + '-edit .check-icon').show(); - } else { - $('#' + config + '-edit .check-icon').hide(); - } - if (_canRenderSignVideo()) { - $('#ready-button').removeClass('disabled'); - } else { - $('#ready-button').addClass('disabled'); - } - } - - function _unfinishConfiguration(config, panel) { - _setupCheckIcon(config, false, panel); - _setupCheckIcon('avatar-' + config, false, panel); - $('#' + config + '-edit .check-icon').hide(); - - if (!_canRenderSignVideo()) { - $('#ready-button').addClass('disabled'); - } - } - - function _setupGUIOnSelection(option, finishCallback) { - $('#ready-button').fadeOut(300); - $('.edit-container').fadeOut(300); - _addZoomInToAvatar(option, function() { - $('#selection-panel').fadeIn(300, function() { - finishCallback(); - }); - }); - } - - function _setupConfigurationPanel() { - $('.icon_container').off('mouseover').on('mouseover', function() { - if (_canHover(this)) { - _enableIconHover(this, true); - } - }); - $('.icon_container').off('mouseout').on('mouseout', function() { - if (_canHover(this)) { - _enableIconHover(this, false); - } - }); - $('.config-panel-option').off('click').on('click', function() { - _showSelectionPanel($(this).attr('panel')); - }); - $('#minimize-icon-container').off('click').on('click', function() { - $('#ref-video-container').hide(); - $('#minimize-icon-container').hide(); - $('#maximize-icon-container').show(); - }); - $('#maximize-icon-container').off('click').on('click', function() { - $('#ref-video-container').show(); - $('#maximize-icon-container').hide(); - $('#minimize-icon-container').show(); - }); - } - - function _updateTempParameterJSON(mainConfig, subConfig, step, value) { - var subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; - if (typeof subConfigJSON == 'undefined') { - tmpParameterJSON[mainConfig][subConfig] = []; - subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; - } - - subConfigJSON[parseInt(step) - 1] = value; - } - - function _selectAnOption(parentId, el) { - $(parentId + ' .selection-panel-option[select=true]').removeAttr('select'); - $(el).attr('select', true); - - var mainConfig = $(parentId).attr('mainConfig'); - var subConfig = $(parentId).attr('subConfig'); - var step = $(parentId).attr('step'); - _updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr('value')); - } - - function _setupSelectionPanel() { - $('#selection-panel .x').off('click').on('click', function() { - _hideSelectionPanel(); - }); - } - - // Render Screen - function _submitParameterJSON(callback) { - parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); - console.log(parsedParameterJSON); - - $.ajax({ - type: 'POST', - url: api_url + '/sign', - data: JSON.stringify(parsedParameterJSON), - contentType: 'application/json', - success: function(response) { - console.log(response); - callback(); - }, - error: function(xhr, textStatus, error) { - alert(xhr.responseText); - } - }); - } - - function _getRenderedAvatarUrl(userId, signName) { - return api_url + '/public/' + userId + '/' + signName + ".webm"; - } - - function _showRenderedAvatar() { - var userId = parsedParameterJSON['userId']; - var signName = parsedParameterJSON['sinal']; - $("#render-avatar video").attr("src", _getRenderedAvatarUrl(userId, signName)); - $("#render-avatar").fadeIn(300); - } - - function _setupRenderScreen() { - $("#configuration-screen").hide(); - $("#render-avatar").hide(); - $("#render-screen").show(); - $("#render-loading").fadeIn(300); - $("#finish-button").addClass("disabled"); - $("#render-ref video").prop("controls", false); - $("#render-ref video").get(0).pause(); - - _submitParameterJSON(function() { - $("#render-loading").fadeOut(300); - $("#render-ref video").prop("controls", true); - $("#render-ref video").get(0).play(); - $("#finish-button").removeClass("disabled"); - _showRenderedAvatar(); - }); - //$("#finish-button").removeClass("disabled"); - } - - function _clearGUI() { - articulation.clean(); - $(".selection-panel-option").removeAttr('select'); - $(".icon_container").removeAttr("select"); - $(".icon_container[complete=true]").each( - function() { - _unfinishConfiguration($(this).attr("name"), $(this).attr( - "panel")); - }); - } - - function _setupMainScreen(task, deferred) { - $("#initial-screen").fadeIn(300); - $("#start-button").off("click").on("click", function() { - $("#initial-screen").hide(); - $("#configuration-screen").show(); - dynengine.load(); - console.log('dynengine loaded'); - dynworkflow.load(); - console.log('dynworkflow loaded'); - }); - $("#ready-button").off("click").on("click", function() { - if ($(this).hasClass('disabled')) { - event.preventDefault(); - return; - } - _setupRenderScreen(); - }); - $("#render-edit").off("click").on("click", function() { - $("#render-screen").hide(); - $("#configuration-screen").show(); - }); - $("#finish-button").off("click").on("click", function() { - if ($(this).hasClass('disabled')) { - event.preventDefault(); - return; - } - $("#render-screen").hide(); - $("#thanks-screen").show(); - _saveAnswer(task, deferred) - }); - } - - function _setupGUI(task, deferred) { - _clearGUI(); - _setupConfigurationPanel(); - _setupSelectionPanel(); - _setupMainScreen(task, deferred); - - submitSign.setup(); - } - - function _saveAnswer(task, deferred) { - var answer = {} - answer["status"] = "FINISHED"; - answer["parameter_json"] = parsedParameterJSON; - - /*pybossa.saveTask(task.id, answer).done(function() { - setTimeout(function() { - $("#thanks-screen").hide(); - deferred.resolve(); - }, 2500); - });*/ - setTimeout(function() { - $("#thanks-screen").hide(); - deferred.resolve(); - }, 2500); - } - - function _showCompletedAllTaskMsg() { - $("#completed-task-msg").hide(); - $("#completed-all-task-msg").show(); - $("#thanks-screen").fadeIn(300); - // It removes the PyBossa default message - $(".row .col-md-12 p").remove(); - } - - pybossa.presentTask(function(task, deferred) { - if (!$.isEmptyObject(task) && current_task_id != task.id) { - _loadTaskInfo(task); - _setupGUI(task, deferred) - $("#main-container").fadeIn(500); - } else { - _showCompletedAllTaskMsg(); - } - }); - - // Private methods - function _run(projectname) { - pybossa.run(projectname); - } - - // Public methods - wikilibras.run = function(serverhost, serverbackend, projectname, apihost) { - base_url = serverhost; - server_back_url = serverbackend; - videos_url = base_url + "/videos/"; - api_url = apihost; - _run(projectname); - }; - - wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, value) { - _updateTempParameterJSON(mainConfig, subConfig, step, value); - } - - wikilibras.hideSelectionPanel = function() { - _hideSelectionPanel(); - } - - wikilibras.selectAnOption = function(parentId, el) { - _selectAnOption(parentId, el); - } - - wikilibras.enableIconHover = function(container, isHover) { - _enableIconHover(container, isHover); - } - - wikilibras.enableIconCheck = function(container, isHover) { - _enableIconCheck(container, isHover); - } - - wikilibras.showTeachContainer = function() { - $(".sub-main-container").hide(); - $("#teach-container").show(); - } - - wikilibras.showSubmitSignContainer = function() { - $(".sub-main-container").hide(); - $("#submit-sign-container").show(); - } - - wikilibras.showTeachedSignsContainer = function() { - $(".sub-main-container").hide(); - $("#teached-signs-container").show(); - } - - wikilibras.showTutorialContainer = function() { - $(".sub-main-container").hide(); - $("#tutorial-container").show(); - } - -}(window.wikilibras = window.wikilibras || {}, jQuery)); + var videos_url = ''; + var base_url = ''; + var server_backend_url = ''; + var api_url = ''; + var current_task_id = -1; + var tmpParameterJSON = {}; + var parsedParameterJSON = {}; + + function _setupTmpParameterJSON(sign_name) { + tmpParameterJSON = { + 'sinal' : sign_name, + 'facial' : {}, + 'right-hand' : {}, + 'left-hand' : {} + }; + parsedParameterJSON = {}; + } + + function _loadTaskInfo(task) { + current_task_id = task.id; + var sign_name = task.info.sign_name; + var ref_vid_link = videos_url + sign_name + '_REF.webm'; + $('.sign-label').text(sign_name); + $('.ref-video').attr('src', ref_vid_link); + + _setupTmpParameterJSON(task.info.sign_name); + } + + function _changeImage(img, url) { + img.attr('src', url); + } + + function _enableIconHover(container, isHover) { + var img = $(container).find('img').first(); + var hover_img_url = base_url + '/img/' + $(container).attr('name'); + if (isHover) { + hover_img_url += '-icon-hover.png'; + } else { + hover_img_url += '-icon.png'; + } + _changeImage(img, hover_img_url); + } + + function _selectIcon(iconName, isSelect, panel) { + panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']'; + var icon_id = '.icon_container[name=' + iconName + ']' + panel; + _enableIconHover(icon_id, isSelect); + $(icon_id).attr('select', isSelect); + } + + function _deselectIcon(iconName, parent) { + _selectIcon(iconName, false, parent); + } + + function _enableIconCheck(container, isCheck) { + var img = $(container).find('img').first(); + var check_img_url = base_url + '/img/' + $(container).attr('name'); + + if (isCheck) { + check_img_url += '-icon-check.png'; + } else { + check_img_url += '-icon.png'; + } + _changeImage(img, check_img_url); + } + + function _setupCheckIcon(option, isCheck, panel) { + panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']'; + var icon_id = '.icon_container[name=' + option + ']' + panel; + _enableIconCheck(icon_id, isCheck); + $('.icon_container[name=' + option + ']' + panel).attr('complete', + isCheck); + } + + function _isSelectingState() { + return $('#configuration-panel .icon_container[select=true]').length > 0; + } + + function _isConfigurationComplete(config) { + var baseId = '.subconfiguration-panel[mainConfig=' + config + ']'; + var total_config = $(baseId + + ' .icon_container[json_name][active=true]').length; + var completed_config = $(baseId + + ' .icon_container[active=true][complete=true]').length; + return completed_config != 0 && total_config == completed_config; + } + + function _canHover(el) { + var incompleteConfig = typeof $(el).attr('complete') == 'undefined' + || $(el).attr('complete') == 'false'; + return (!_isSelectingState() && incompleteConfig) + || (typeof $(el).attr('select') == 'undefined' && incompleteConfig); + } + + function _getCurrentMainConfiguration() { + return _isSelectingState() ? $( + '#configuration-panel .icon_container[select=true]').attr( + 'name') : ''; + } + + function _addZoomInToAvatar(option, callback) { + $('#avatar-default') + .fadeOut( + 500, + function() { + $('#avatar-container').removeClass('col-sm-7'); + $('#avatar-container').addClass('col-sm-5'); + $('#selection-container').removeClass('col-sm-2'); + $('#selection-container').addClass('col-sm-4'); + $('#avatar-container').removeClass( + 'avatar-container-zoom-out'); + $('#avatar-container').addClass( + 'avatar-container-zoom-in'); + $('#avatar-' + option).removeClass( + 'avatar-img-zoom-out'); + $('#avatar-' + option).fadeIn( + 500, + function() { + $('#avatar-' + option).addClass( + 'avatar-' + option + + '-img-zoom-in'); + callback(); + }); + }); + } + + function _addZoomOutToAvatar(option, callback) { + $('#avatar-' + option).fadeOut( + 500, + function() { + $('#selection-container').removeClass('col-sm-4'); + $('#selection-container').addClass('col-sm-2'); + $('#avatar-container').removeClass('col-sm-5'); + $('#avatar-container').addClass('col-sm-7'); + $('#avatar-container').removeClass( + 'avatar-container-zoom-in'); + $('#avatar-container') + .addClass('avatar-container-zoom-out'); + $('#avatar-default').fadeIn( + 500, + function() { + $('#avatar-' + option).removeClass( + 'avatar-' + option + '-img-zoom-in'); + $('#avatar-' + option).addClass( + 'avatar-img-zoom-out'); + callback(); + }); + }); + } + + function _clearPreviousSelection() { + $('.selection-panel-body').hide(); + $('.subconfiguration-panel').hide(); + + if (_isSelectingState()) { + var current_option = _getCurrentMainConfiguration(); + _selectIcon(current_option, false); + if (_isConfigurationComplete(current_option)) { + _setupCheckIcon(current_option, true); + } + $('#avatar-' + current_option).fadeOut(500); + } + } + + function _showSelectionPanel(option) { + _clearPreviousSelection(); + _selectIcon(option, true); + _setupGUIOnSelection(option, function() { + dynworkflow.finishMainConfigSetup(option); + }); + dynworkflow.selectMainConfig(option); + } + + function _hideSelectionPanel() { + var config = _getCurrentMainConfiguration(); + _deselectIcon(config); + if (_isConfigurationComplete(config)) { + _finishConfiguration(config, true); + } else { + _finishConfiguration(config, false); + } + + _addZoomOutToAvatar(config, function() { + $('#ready-button').fadeIn(300); + $('.edit-container').fadeIn(300); + }); + $('#selection-panel').fadeOut(300); + } + + function _canRenderSignVideo() { + return _isConfigurationComplete('facial') + && (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); + } + + function _finishConfiguration(config, toFinish) { + _setupCheckIcon(config, toFinish); + _setupCheckIcon('avatar-' + config, toFinish); + + if (toFinish) { + $('#' + config + '-edit .check-icon').show(); + } else { + $('#' + config + '-edit .check-icon').hide(); + } + if (_canRenderSignVideo()) { + $('#ready-button').removeClass('disabled'); + } else { + $('#ready-button').addClass('disabled'); + } + } + + function _unfinishConfiguration(config, panel) { + _setupCheckIcon(config, false, panel); + _setupCheckIcon('avatar-' + config, false, panel); + $('#' + config + '-edit .check-icon').hide(); + + if (!_canRenderSignVideo()) { + $('#ready-button').addClass('disabled'); + } + } + + function _setupGUIOnSelection(option, finishCallback) { + $('#ready-button').fadeOut(300); + $('.edit-container').fadeOut(300); + _addZoomInToAvatar(option, function() { + $('#selection-panel').fadeIn(300, function() { + finishCallback(); + }); + }); + } + + function _setupConfigurationPanel() { + $('.icon_container').off('mouseover').on('mouseover', function() { + if (_canHover(this)) { + _enableIconHover(this, true); + } + }); + $('.icon_container').off('mouseout').on('mouseout', function() { + if (_canHover(this)) { + _enableIconHover(this, false); + } + }); + $('.config-panel-option').off('click').on('click', function() { + _showSelectionPanel($(this).attr('panel')); + }); + $('#minimize-icon-container').off('click').on('click', function() { + $('#ref-video-container').hide(); + $('#minimize-icon-container').hide(); + $('#maximize-icon-container').show(); + }); + $('#maximize-icon-container').off('click').on('click', function() { + $('#ref-video-container').show(); + $('#maximize-icon-container').hide(); + $('#minimize-icon-container').show(); + }); + } + + function _updateTempParameterJSON(mainConfig, subConfig, step, value) { + var subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; + if (typeof subConfigJSON == 'undefined') { + tmpParameterJSON[mainConfig][subConfig] = []; + subConfigJSON = tmpParameterJSON[mainConfig][subConfig]; + } + + subConfigJSON[parseInt(step) - 1] = value; + } + + function _selectAnOption(parentId, el) { + $(parentId + ' .selection-panel-option[select=true]').removeAttr( + 'select'); + $(el).attr('select', true); + + var mainConfig = $(parentId).attr('mainConfig'); + var subConfig = $(parentId).attr('subConfig'); + var step = $(parentId).attr('step'); + _updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr( + 'value')); + } + + function _setupSelectionPanel() { + $('#selection-panel .x').off('click').on('click', function() { + _hideSelectionPanel(); + }); + } + + // Render Screen + function _submitParameterJSON(callback) { + parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); + console.log(parsedParameterJSON); + + $.ajax({ + type : 'POST', + url : api_url + '/sign', + data : JSON.stringify(parsedParameterJSON), + contentType : 'application/json', + success : function(response) { + console.log(response); + callback(); + }, + error : function(xhr, textStatus, error) { + alert(xhr.responseText); + } + }); + } + + function _getRenderedAvatarUrl(userId, signName) { + return api_url + '/public/' + userId + '/' + signName + ".webm"; + } + + function _showRenderedAvatar(parameterJSON) { + var userId = parameterJSON['userId']; + var signName = parameterJSON['sinal']; + $("#render-avatar video").attr("src", + _getRenderedAvatarUrl(userId, signName)); + $("#render-avatar").fadeIn(300); + } + + function _setupRenderScreen() { + $("#configuration-screen").hide(); + $("#render-avatar").hide(); + $("#render-screen").show(); + $("#render-loading").fadeIn(300); + $("#render-ref video").prop("controls", false); + $("#render-ref video").get(0).pause(); + $("#render-button-container .btn").hide(); + $("#finish-button").addClass("disabled"); + $("#finish-button").show(); + + _submitParameterJSON(function() { + $("#render-loading").fadeOut(300); + $("#render-ref video").prop("controls", true); + $("#render-ref video").get(0).play(); + $("#finish-button").removeClass("disabled"); + _showRenderedAvatar(parsedParameterJSON); + }); + } + + function _setupApprovalScreen(parameterJSON) { + $("#render-button-container .btn").hide(); + $("#approval-button").show(); + $("#approval-msg").show(); + $("#render-ref video").get(0).play(); + + _showRenderedAvatar(parameterJSON); + $("#render-screen").fadeIn(300); + } + + function _submitAnswer(task, deferred, status) { + var answer = _createAnswer(task, status); + if (status == "APPROVED") { + _finishTask(task, deferred, answer); + } else { + _saveAnswer(task, deferred, answer); + } + $("#render-screen").hide(); + $("#thanks-screen").show(); + } + + function _clearGUI() { + articulation.clean(); + $(".selection-panel-option").removeAttr('select'); + $(".icon_container").removeAttr("select"); + $(".icon_container[complete=true]").each( + function() { + _unfinishConfiguration($(this).attr("name"), $(this).attr( + "panel")); + }); + } + + function _setupMainScreen(task, deferred) { + var last_answer = task.info.last_answer; + var hasLastAnswer = typeof last_answer != "undefined"; + if (hasLastAnswer) { + _setupApprovalScreen(last_answer.parameter_json); + } else { + $("#initial-screen").fadeIn(300); + } + + $("#start-button").off("click").on("click", function() { + $("#initial-screen").hide(); + $("#configuration-screen").show(); + }); + $("#ready-button").off("click").on("click", function() { + if ($(this).hasClass('disabled')) { + event.preventDefault(); + return; + } + _setupRenderScreen(); + }); + $("#render-edit").off("click").on("click", function() { + $("#render-screen").hide(); + $("#configuration-screen").show(); + }); + $("#finish-button").off("click").on("click", function() { + if ($(this).hasClass('disabled')) { + event.preventDefault(); + return; + } + _submitAnswer(task, deferred, "FINISHED"); + }); + $("#approval-button").off("click").on("click", function() { + _submitAnswer(task, deferred, "APPROVED"); + }); + } + + function _setupGUI(task, deferred) { + dynengine.load(); + dynworkflow.load(); + _clearGUI(); + _setupConfigurationPanel(); + _setupSelectionPanel(); + _setupMainScreen(task, deferred); + submitSign.setup(); + } + + function _createAnswer(task, status) { + var answer = {} + answer["status"] = status; + var last_answer = task.info.last_answer; + var hasLastAnswer = typeof last_answer != "undefined"; + + if (hasLastAnswer && status == "APPROVED") { + answer["number_of_approval"] = last_answer.number_of_approval + 1; + answer["parameter_json"] = last_answer.parameter_json; + } else { + answer["number_of_approval"] = 0; + answer["parameter_json"] = parsedParameterJSON; + } + return answer; + } + + function _finishTask(task, deferred, answer) { + $.ajax({ + type : "POST", + url : server_backend_url + "/finish_task", + data : { + "task_id" : task.id, + "project_id" : task.project_id, + "number_of_approval" : answer.number_of_approval, + }, + success : function(response) { + _saveAnswer(task, deferred, answer); + }, + error : function(xhr, textStatus, error) { + alert(xhr.responseText); + } + }); + } + + function _saveAnswer(task, deferred, answer) { + pybossa.saveTask(task.id, answer).done(function() { + setTimeout(function() { + $("#thanks-screen").hide(); + deferred.resolve(); + }, 2500); + }); + } + + function _showCompletedAllTaskMsg() { + $("#completed-task-msg").hide(); + $("#completed-all-task-msg").show(); + $("#thanks-screen").fadeIn(300); + // It removes the PyBossa default message + $(".row .col-md-12 p").remove(); + } + + pybossa.presentTask(function(task, deferred) { + if (!$.isEmptyObject(task) && current_task_id != task.id) { + _loadTaskInfo(task); + _setupGUI(task, deferred) + $("#main-container").fadeIn(500); + } else { + _showCompletedAllTaskMsg(); + } + }); + + // Private methods + function _run(projectname) { + pybossa.run(projectname); + } + + // Public methods + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) { + base_url = serverhost; + server_backend_url = serverbackend; + videos_url = base_url + "/videos/"; + api_url = apihost; + _run(projectname); + }; + + wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step, + value) { + _updateTempParameterJSON(mainConfig, subConfig, step, value); + } + + wikilibras.hideSelectionPanel = function() { + _hideSelectionPanel(); + } + + wikilibras.selectAnOption = function(parentId, el) { + _selectAnOption(parentId, el); + } + + wikilibras.enableIconHover = function(container, isHover) { + _enableIconHover(container, isHover); + } + + wikilibras.enableIconCheck = function(container, isHover) { + _enableIconCheck(container, isHover); + } + + wikilibras.showTeachContainer = function() { + $(".sub-main-container").hide(); + $("#teach-container").show(); + } + + wikilibras.showSubmitSignContainer = function() { + $(".sub-main-container").hide(); + $("#submit-sign-container").show(); + } + + wikilibras.showTeachedSignsContainer = function() { + $(".sub-main-container").hide(); + $("#teached-signs-container").show(); + } + + wikilibras.showTutorialContainer = function() { + $(".sub-main-container").hide(); + $("#tutorial-container").show(); + } + +}(window.wikilibras = window.wikilibras || {}, jQuery)); \ No newline at end of file diff --git a/view/template.html b/view/template.html index 753794a..1e99d97 100755 --- a/view/template.html +++ b/view/template.html @@ -156,6 +156,10 @@