diff --git a/view/assets/js/dynamic-loading-engine.js b/view/assets/js/dynamic-loading-engine.js index 6a453eb..fd48afe 100644 --- a/view/assets/js/dynamic-loading-engine.js +++ b/view/assets/js/dynamic-loading-engine.js @@ -1,43 +1,19 @@ (function(dynengine, $, undefined) { var setup = undefined; - function _setup() { - setup = { - 'mao_direita': { - 'movimentos': { - 'pontual': { - 'timeline': [ - { - 'ordem': 1, - 'timeline_icon': 'a', - 'templates': [ - { - 'url': 'http://url.com', - 'ordem': 1 - }, - { - 'url': 'http://url2.com', - 'ordem': 2 - } - ] - } - ] - }, - 'circular': {} - } - } - }; - }; - _preprocessHtml = function(data, url) { return data.replace(/{{ server }}/g, url); }; - dynengine.render = function(serverUrl, templatePath, target) { + dynengine.render = function(serverUrl, templatePath, target, callback) { var url = serverUrl + templatePath; $.get(url, function(data) { // TODO replace or append boolean + console.log('got: ' + url); $(target).append(_preprocessHtml(data, serverUrl)); + }) + .done(function() { + callback && callback(); // call if defined }); }, @@ -53,19 +29,18 @@ $('#avatar-body-right-hand').bind('click', function() { console.log('click avatar hand'); - $('#selection-panel').load(url + '/' + 'right-hand/movements.html', function () { + dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() { $('.movimento-pontual').bind('click', function() { console.log('movimento pontual'); dynengine.clean('#selection-panel'); - dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel'); dynengine.render(url, '/right-hand/pontual/passo-1.html', '#selection-panel'); dynengine.render(url, '/right-hand/pontual/passo-2.html', '#selection-panel'); dynengine.render(url, '/right-hand/pontual/passo-3.html', '#selection-panel'); - + dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel'); }); }); - }); + }); }; diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 00c283e..965dd1d 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -1,680 +1,682 @@ (function(wikilibras, $, undefined) { - var videos_url = ""; - var base_url = ""; - var server_backend_url = ""; - var api_url = ""; - var current_task_id = -1; - var base_parameter_json = {}; - var moviment_parameter_json = {}; - - function _getLoggedUser() { - var pybossa_rembember_token = Cookies.get("remember_token"); - var splitted_token_id = pybossa_rembember_token.split("|"); - return splitted_token_id.length > 0 ? splitted_token_id[0] - : "anonymous"; - } - - function _setupParameterJSON(sign_name) { - base_parameter_json["userId"] = _getLoggedUser(); - base_parameter_json["sinal"] = sign_name; - base_parameter_json["interpolacao"] = "normal"; - base_parameter_json["movimentos"] = []; - moviment_parameter_json = { - "facial" : {}, - "mao_direita" : {}, - "mao_esquerda" : {} - }; - } - - 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); - - _setupParameterJSON(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 _setupCheckIcon(option, isCheck, panel) { - panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]"; - var img = $(".icon_container[name=" + option + "]" + panel).find("img") - .first(); - var check_img_url = base_url + "/img/" + option; - - if (isCheck) { - check_img_url += "-icon-check.png"; - } else { - check_img_url += "-icon.png"; - } - - _changeImage(img, check_img_url); - $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck); - } - - function _isSelectingState() { - return $("#configuration-panel .icon_container[select=true]").length > 0; - } - - function _isConfigurationComplete(config) { - var total_config = $("#" + config - + "-subconfiguration-options .icon_container").length; - var completed_config = $("#" + config - + "-subconfiguration-options .icon_container[complete=true]").length; - return 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, + var videos_url = ''; + var base_url = ''; + var server_backend_url = ''; + var api_url = ''; + var current_task_id = -1; + var base_parameter_json = {}; + var moviment_parameter_json = {}; + + function _getLoggedUser() { + var pybossa_rembember_token = Cookies.get('remember_token'); + var splitted_token_id = pybossa_rembember_token.split('|'); + return splitted_token_id.length > 0 ? splitted_token_id[0] + : 'anonymous'; + } + + function _setupParameterJSON(sign_name) { + base_parameter_json['userId'] = _getLoggedUser(); + base_parameter_json['sinal'] = sign_name; + base_parameter_json['interpolacao'] = 'normal'; + base_parameter_json['movimentos'] = []; + moviment_parameter_json = { + "facial": {}, + "mao_direita": {}, + "mao_esquerda": {} + }; + } + + 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); + + _setupParameterJSON(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 _setupCheckIcon(option, isCheck, panel) { + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]"; + var img = $(".icon_container[name=" + option + "]" + panel).find("img") + .first(); + var check_img_url = base_url + "/img/" + option; + + if (isCheck) { + check_img_url += "-icon-check.png"; + } else { + check_img_url += "-icon.png"; + } + + _changeImage(img, check_img_url); + $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck); + } + + function _isSelectingState() { + return $("#configuration-panel .icon_container[select=true]").length > 0; + } + + function _isConfigurationComplete(config) { + var total_config = $("#" + config + + "-subconfiguration-options .icon_container").length; + var completed_config = $("#" + config + + "-subconfiguration-options .icon_container[complete=true]").length; + return 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, + $("#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(); + $("#avatar-" + option).addClass( + "avatar-" + option + + "-img-zoom-in"); + callback(); }); }); - } + } - function _addZoomOutToAvatar(option, callback) { - $("#avatar-" + option).fadeOut( - 500, + 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, + $("#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(); + $("#avatar-" + option).removeClass( + "avatar-" + option + "-img-zoom-in"); + $("#avatar-" + option).addClass( + "avatar-img-zoom-out"); + callback(); }); }); - } - - function _clearPreviousSelection() { - $(".selection-panel-body").hide(); - $(".subconfiguration-options").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); - if (option == "facial") { - _setupFacialSelectionPanel(); - } else { - _setupHandSelectionPanel(option); - } - _setupGUIOnSelection(option); - } - - function _hideSelectionPanel() { - _setupCurrentSubConfiguration(true, false); - - var config = _getCurrentMainConfiguration(); - _deselectIcon(config); - if (_isConfigurationComplete(config)) { - _finishConfiguration(config); - } - - _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) { - _setupCheckIcon(config, true); - _setupCheckIcon("avatar-" + config, true); - $("#" + config + "-edit .check-icon").show(); - - if (_canRenderSignVideo()) { - $("#ready-button").removeClass("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"); - } - } - ; - - // Subconfigurations - function _getCurrentSubConfiguration() { - var config = _getCurrentMainConfiguration(); - return $( - "#" - + config - + "-subconfiguration-options .icon_container[select=true]") - .attr("panel"); - } - - function _getNextSubConfiguration() { - var config = _getCurrentMainConfiguration(); - return $( - "#" - + config - + "-subconfiguration-options .icon_container[select=true]") - .attr("next"); - } - - function _getPreviousSubConfiguration() { - var config = _getCurrentMainConfiguration(); - return $( - "#" - + config - + "-subconfiguration-options .icon_container[select=true]") - .attr("previous"); - } - - function _setupCurrentSubConfiguration(onHide, onFinish) { - var current_subconfig = _getCurrentSubConfiguration(); - - if (!onHide) { - _selectSubConfigurationIcon(current_subconfig, false); - } - - // Add a check if the user finished a configuration - if (onFinish && _hasSelectedAnOption(current_subconfig)) { - _setupCheckSubConfigurationIcon(current_subconfig); - } - - // Hide the current selection panel - $("#" + current_subconfig).hide(); - } - - function _hasMultipleConfigurations(config) { - return $("#" + config).is("[multiple-config]"); - } - - function _handleFingersPositionSubConfiguration(main_config) { - var finger_group = $( - "#" - + main_config - + "-fingers-position-1 .selection-panel-option[select=true]") - .attr("group"); - $(".finger-group").hide(); - $(".finger-group[group=" + finger_group + "]").show(); - } - - function _setupMultipleConfiguration(config, selectEvent) { - var sub_config_id = "#" + config + " [sub-config]"; - var has_active_config = $(sub_config_id).is(":visible"); - - var main_config = _getCurrentMainConfiguration(); - var icon_name = _getSubConfigurationIconName(config); - var icon_id = "#" + main_config - + "-subconfiguration-options .icon_container[name=" + icon_name - + "]"; - var sub_config = ""; - - if (!has_active_config || !selectEvent) { - sub_config = config + "-1"; - if (!$(icon_id).is("[tmp-next]")) { - $(icon_id).attr("tmp-next", $(icon_id).attr("next")); - $(icon_id).attr("next", config); - } - } else { - sub_config = $(sub_config_id + ":visible").attr("next"); - } - $(sub_config_id).hide(); - - if (sub_config == "end") { - var tmp_next = $(icon_id).attr("tmp-next"); - $(icon_id).removeAttr("tmp-next"); - $(icon_id).attr("next", tmp_next); - config = tmp_next; - if (_hasMultipleConfigurations(config)) { - config = _setupMultipleConfiguration(config, selectEvent); - } - } else { - if (sub_config.indexOf("fingers-position-2") != -1) { - _handleFingersPositionSubConfiguration(main_config); - } - $("#" + sub_config).show(); - } - return config; - } - - function _getSubConfigurationIconName(subconfig) { - subconfig = subconfig.replace("right-hand", "hand"); - subconfig = subconfig.replace("left-hand", "hand"); - return subconfig; - } - - function _selectSubConfigurationIcon(subconfig, isSelect) { - var iconName = _getSubConfigurationIconName(subconfig); - _selectIcon(iconName, isSelect, subconfig); - } - - function _setupCheckSubConfigurationIcon(subconfig) { - var iconName = _getSubConfigurationIconName(subconfig); - _setupCheckIcon(iconName, true, subconfig); - } - - function _showSubConfiguration(next_config, selectEvent) { - var current_config = _getCurrentSubConfiguration(); - var next_has_multiple_config = _hasMultipleConfigurations(next_config); - - if (current_config == next_config && !next_has_multiple_config) - return; - - var onFinish = true; - if (next_has_multiple_config) { - next_config = _setupMultipleConfiguration(next_config, selectEvent); - onFinish = next_config != current_config; - } - - _setupCurrentSubConfiguration(false, onFinish); - - if (next_config != "end") { - _selectSubConfigurationIcon(next_config, true); - $("#" + next_config).show(); - - var main_config = _getCurrentMainConfiguration(); - if (_isHandMovimentComplete(main_config)) { - $(".subconfiguration-panel").fadeIn(300); - } - } else { - _hideSelectionPanel(); - } - } - - function _setupGUIOnSelection(option) { - $("#ready-button").fadeOut(300); - $(".edit-container").fadeOut(300); - _addZoomInToAvatar(option, function() { - $("#selection-panel").fadeIn(300); - }); - } - - function _setupFacialSelectionPanel() { - var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0; - if (previous_select) { - var subconfig = $( - "#facial-subconfiguration-options .icon_container[select=true]") - .attr("panel"); - $("#" + subconfig).fadeIn(300); - } else { - _selectIcon("facial-expression", true); - $("#facial-expression").fadeIn(300); - } - $("#facial-subconfiguration-options").fadeIn(300); - $(".subconfiguration-panel").fadeIn(300); - } - - function _isHandMovimentComplete(main_config) { - return $("#" + main_config - + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0; - } - - function _setupHandSelectionPanel(option) { - var previous_select = $("#" + option - + "-subconfiguration-options .icon_container[select=true]").length > 0; - if (previous_select) { - var subconfig = $( - "#" - + option - + "-subconfiguration-options .icon_container[select=true]") - .attr("panel"); - - if (_hasMultipleConfigurations(subconfig)) { - $("#" + subconfig + "-1").show(); - } - $("#" + subconfig).fadeIn(300); - } else { - _selectIcon("hand-moviment", true, option + "-moviment"); - $("#" + option + "-moviment").fadeIn(300); - } - - $("#" + option + "-subconfiguration-options").fadeIn(300); - if (_isHandMovimentComplete(option)) { - $(".subconfiguration-panel").fadeIn(300); - } - } - - 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(); - }); - } - - // Selection Panel - function _hasSelectedAnOption(subconfig) { - return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0; - } - - // JSON - function _getFirstKey(json) { - var first_key = undefined; - for (first_key in json) - ; - return first_key; - } - - function _updateParameterJSON(config, value) { - if (typeof config == "undefined" || typeof value == "undefined") - return; - - var current_main_config = _getCurrentMainConfiguration(); - current_main_config = current_main_config == "right-hand" ? "mao_direita" - : current_main_config; - current_main_config = current_main_config == "left-hand" ? "mao_esquerda" - : current_main_config; - value = !isNaN(value) ? parseInt(value) : value; - - if (config == "movimento") { - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); - if (typeof first_key == "undefined") { - moviment_parameter_json[current_main_config][value] = {}; - } else if (first_key != value) { - moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key]; - delete moviment_parameter_json[current_main_config][first_key]; - } - } else if (current_main_config.indexOf("mao") != -1) { - - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); - if (typeof first_key == "undefined") { - first_key = "placeholder"; - moviment_parameter_json[current_main_config][first_key] = {}; - } - moviment_parameter_json[current_main_config][first_key][config] = value; - } else { - moviment_parameter_json[current_main_config][config] = value; - } - } - - function _readConfigValue(el, config_name) { - if (typeof config_name == "undefined" || config_name == "articulacao") return; - - return $(el).attr("value"); - } - - function _selectConfig(el) { - var current_config_id = $(".selection-panel-body").has(el).attr("id"); - var current_config_name = $(".selection-panel-body").has(el).attr( - "name"); - $("#" + current_config_id + " .selection-panel-option[select=true]") - .removeAttr("select"); - $(el).attr("select", true); - - var config_value = _readConfigValue(el, current_config_name); - _updateParameterJSON(current_config_name, config_value); - } - - function _setupSelectionPanel() { - // $("#selection-panel .x").off("click").on("click", function() { - // _hideSelectionPanel(); - // }); - // $(".selection-panel-body .selection-panel-option").off("click").on( - // "click", function() { - // _selectConfig(this); - // var next = _getNextSubConfiguration(); - // _showSubConfiguration(next, true); - // }); - // $(".subconfiguration-options .icon_container").off("click").on("click", - // function() { - // var subconfig = $(this).attr("panel"); - // _showSubConfiguration(subconfig, false); - // }); - // $(".arrow[name=right-arrow]").off("click").on("click", function() { - // var next = _getNextSubConfiguration(); - // _showSubConfiguration(next, false); - // }); - // $(".arrow[name=left-arrow]").off("click").on("click", function() { - // var previous = _getPreviousSubConfiguration(); - // _showSubConfiguration(previous, false); - // }); - } - - // Render Screen - function _submitParameterJSON(callback) { - base_parameter_json["movimentos"] = []; - base_parameter_json["movimentos"].push(moviment_parameter_json); - console.log(base_parameter_json); - - $.ajax({ - type : "POST", - url : api_url + "/sign", - data : JSON.stringify(base_parameter_json), - contentType : "application/json", - success : function(response) { - console.log(response); - callback(); - }, - error : function(xhr, textStatus, error) { - alert(xhr.responseText); - } - }); - } - - function _showRenderedAvatar() { - var user_id = base_parameter_json["userId"]; - var sign_name = base_parameter_json["sinal"]; - var rendered_avatar_url = api_url + "/public/" + user_id + "/" - + sign_name + ".webm"; - $("#render-avatar video").attr("src", rendered_avatar_url); - $("#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(); - }); - } - - function _clearGUI() { - $(".selection-panel-option").removeAttr("select"); - $(".icon_container").removeAttr("select"); - $(".icon_container[complete=true]").each( + } + + function _clearPreviousSelection() { + $(".selection-panel-body").hide(); + $(".subconfiguration-options").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); + if (option == "facial") { + _setupFacialSelectionPanel(); + } else { + _setupHandSelectionPanel(option); + } + _setupGUIOnSelection(option); + } + + function _hideSelectionPanel() { + _setupCurrentSubConfiguration(true, false); + + var config = _getCurrentMainConfiguration(); + _deselectIcon(config); + if (_isConfigurationComplete(config)) { + _finishConfiguration(config); + } + + _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) { + _setupCheckIcon(config, true); + _setupCheckIcon("avatar-" + config, true); + $("#" + config + "-edit .check-icon").show(); + + if (_canRenderSignVideo()) { + $("#ready-button").removeClass("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"); + } + } + ; + + // Subconfigurations + function _getCurrentSubConfiguration() { + var config = _getCurrentMainConfiguration(); + return $( + "#" + + config + + "-subconfiguration-options .icon_container[select=true]") + .attr("panel"); + } + + function _getNextSubConfiguration() { + var config = _getCurrentMainConfiguration(); + return $( + "#" + + config + + "-subconfiguration-options .icon_container[select=true]") + .attr("next"); + } + + function _getPreviousSubConfiguration() { + var config = _getCurrentMainConfiguration(); + return $( + "#" + + config + + "-subconfiguration-options .icon_container[select=true]") + .attr("previous"); + } + + function _setupCurrentSubConfiguration(onHide, onFinish) { + var current_subconfig = _getCurrentSubConfiguration(); + + if (!onHide) { + _selectSubConfigurationIcon(current_subconfig, false); + } + + // Add a check if the user finished a configuration + if (onFinish && _hasSelectedAnOption(current_subconfig)) { + _setupCheckSubConfigurationIcon(current_subconfig); + } + + // Hide the current selection panel + $("#" + current_subconfig).hide(); + } + + function _hasMultipleConfigurations(config) { + return $("#" + config).is("[multiple-config]"); + } + + function _handleFingersPositionSubConfiguration(main_config) { + var finger_group = $( + "#" + + main_config + + "-fingers-position-1 .selection-panel-option[select=true]") + .attr("group"); + $(".finger-group").hide(); + $(".finger-group[group=" + finger_group + "]").show(); + } + + function _setupMultipleConfiguration(config, selectEvent) { + var sub_config_id = "#" + config + " [sub-config]"; + var has_active_config = $(sub_config_id).is(":visible"); + + var main_config = _getCurrentMainConfiguration(); + var icon_name = _getSubConfigurationIconName(config); + var icon_id = "#" + main_config + + "-subconfiguration-options .icon_container[name=" + icon_name + + "]"; + var sub_config = ""; + + if (!has_active_config || !selectEvent) { + sub_config = config + "-1"; + if (!$(icon_id).is("[tmp-next]")) { + $(icon_id).attr("tmp-next", $(icon_id).attr("next")); + $(icon_id).attr("next", config); + } + } else { + sub_config = $(sub_config_id + ":visible").attr("next"); + } + $(sub_config_id).hide(); + + if (sub_config == "end") { + var tmp_next = $(icon_id).attr("tmp-next"); + $(icon_id).removeAttr("tmp-next"); + $(icon_id).attr("next", tmp_next); + config = tmp_next; + if (_hasMultipleConfigurations(config)) { + config = _setupMultipleConfiguration(config, selectEvent); + } + } else { + if (sub_config.indexOf("fingers-position-2") != -1) { + _handleFingersPositionSubConfiguration(main_config); + } + $("#" + sub_config).show(); + } + return config; + } + + function _getSubConfigurationIconName(subconfig) { + subconfig = subconfig.replace("right-hand", "hand"); + subconfig = subconfig.replace("left-hand", "hand"); + return subconfig; + } + + function _selectSubConfigurationIcon(subconfig, isSelect) { + var iconName = _getSubConfigurationIconName(subconfig); + _selectIcon(iconName, isSelect, subconfig); + } + + function _setupCheckSubConfigurationIcon(subconfig) { + var iconName = _getSubConfigurationIconName(subconfig); + _setupCheckIcon(iconName, true, subconfig); + } + + function _showSubConfiguration(next_config, selectEvent) { + var current_config = _getCurrentSubConfiguration(); + var next_has_multiple_config = _hasMultipleConfigurations(next_config); + + if (current_config == next_config && !next_has_multiple_config) + return; + + var onFinish = true; + if (next_has_multiple_config) { + next_config = _setupMultipleConfiguration(next_config, selectEvent); + onFinish = next_config != current_config; + } + + _setupCurrentSubConfiguration(false, onFinish); + + if (next_config != "end") { + _selectSubConfigurationIcon(next_config, true); + $("#" + next_config).show(); + + var main_config = _getCurrentMainConfiguration(); + if (_isHandMovimentComplete(main_config)) { + $(".subconfiguration-panel").fadeIn(300); + } + } else { + _hideSelectionPanel(); + } + } + + function _setupGUIOnSelection(option) { + $("#ready-button").fadeOut(300); + $(".edit-container").fadeOut(300); + _addZoomInToAvatar(option, function() { + $("#selection-panel").fadeIn(300); + }); + } + + function _setupFacialSelectionPanel() { + var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0; + if (previous_select) { + var subconfig = $( + "#facial-subconfiguration-options .icon_container[select=true]") + .attr("panel"); + $("#" + subconfig).fadeIn(300); + } else { + _selectIcon("facial-expression", true); + $("#facial-expression").fadeIn(300); + } + $("#facial-subconfiguration-options").fadeIn(300); + $(".subconfiguration-panel").fadeIn(300); + } + + function _isHandMovimentComplete(main_config) { + return $("#" + main_config + + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0; + } + + function _setupHandSelectionPanel(option) { + var previous_select = $("#" + option + + "-subconfiguration-options .icon_container[select=true]").length > 0; + if (previous_select) { + var subconfig = $( + "#" + + option + + "-subconfiguration-options .icon_container[select=true]") + .attr("panel"); + + if (_hasMultipleConfigurations(subconfig)) { + $("#" + subconfig + "-1").show(); + } + $("#" + subconfig).fadeIn(300); + } else { + _selectIcon("hand-moviment", true, option + "-moviment"); + $("#" + option + "-moviment").fadeIn(300); + } + + $("#" + option + "-subconfiguration-options").fadeIn(300); + if (_isHandMovimentComplete(option)) { + $(".subconfiguration-panel").fadeIn(300); + } + } + + 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(); + }); + } + + // Selection Panel + function _hasSelectedAnOption(subconfig) { + return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0; + } + + // JSON + function _getFirstKey(json) { + var first_key = undefined; + for (first_key in json) + ; + return first_key; + } + + function _updateParameterJSON(config, value) { + if (typeof config == "undefined" || typeof value == "undefined") + return; + + var current_main_config = _getCurrentMainConfiguration(); + current_main_config = current_main_config == "right-hand" ? "mao_direita" + : current_main_config; + current_main_config = current_main_config == "left-hand" ? "mao_esquerda" + : current_main_config; + value = !isNaN(value) ? parseInt(value) : value; + + if (config == "movimento") { + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); + if (typeof first_key == "undefined") { + moviment_parameter_json[current_main_config][value] = {}; + } else if (first_key != value) { + moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key]; + delete moviment_parameter_json[current_main_config][first_key]; + } + } else if (current_main_config.indexOf("mao") != -1) { + + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); + if (typeof first_key == "undefined") { + first_key = "placeholder"; + moviment_parameter_json[current_main_config][first_key] = {}; + } + moviment_parameter_json[current_main_config][first_key][config] = value; + } else { + moviment_parameter_json[current_main_config][config] = value; + } + } + + function _readConfigValue(el, config_name) { + if (typeof config_name == "undefined" || config_name == "articulacao") return; + + return $(el).attr("value"); + } + + function _selectConfig(el) { + var current_config_id = $(".selection-panel-body").has(el).attr("id"); + var current_config_name = $(".selection-panel-body").has(el).attr( + "name"); + $("#" + current_config_id + " .selection-panel-option[select=true]") + .removeAttr("select"); + $(el).attr("select", true); + + var config_value = _readConfigValue(el, current_config_name); + _updateParameterJSON(current_config_name, config_value); + } + + function _setupSelectionPanel() { + // $("#selection-panel .x").off("click").on("click", function() { + // _hideSelectionPanel(); + // }); + // $(".selection-panel-body .selection-panel-option").off("click").on( + // "click", function() { + // _selectConfig(this); + // var next = _getNextSubConfiguration(); + // _showSubConfiguration(next, true); + // }); + // $(".subconfiguration-options .icon_container").off("click").on("click", + // function() { + // var subconfig = $(this).attr("panel"); + // _showSubConfiguration(subconfig, false); + // }); + // $(".arrow[name=right-arrow]").off("click").on("click", function() { + // var next = _getNextSubConfiguration(); + // _showSubConfiguration(next, false); + // }); + // $(".arrow[name=left-arrow]").off("click").on("click", function() { + // var previous = _getPreviousSubConfiguration(); + // _showSubConfiguration(previous, false); + // }); + } + + // Render Screen + function _submitParameterJSON(callback) { + base_parameter_json["movimentos"] = []; + base_parameter_json["movimentos"].push(moviment_parameter_json); + console.log(base_parameter_json); + + $.ajax({ + type: "POST", + url: api_url + "/sign", + data: JSON.stringify(base_parameter_json), + contentType: "application/json", + success: function(response) { + console.log(response); + callback(); + }, + error: function(xhr, textStatus, error) { + alert(xhr.responseText); + } + }); + } + + function _showRenderedAvatar() { + var user_id = base_parameter_json["userId"]; + var sign_name = base_parameter_json["sinal"]; + var rendered_avatar_url = api_url + "/public/" + user_id + "/" + + sign_name + ".webm"; + $("#render-avatar video").attr("src", rendered_avatar_url); + $("#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(); + }); + } + + function _clearGUI() { + $(".selection-panel-option").removeAttr("select"); + $(".icon_container").removeAttr("select"); + $(".icon_container[complete=true]").each( function() { - _unfinishConfiguration($(this).attr("name"), $(this).attr( - "panel")); + _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(); - }); - $("#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); - - articulation.setup(base_url); - } - - function _saveAnswer(task, deferred) { - var answer = {} - answer["status"] = "FINISHED"; - answer["parameter_json"] = base_parameter_json; - - /*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); - } - - 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.updateParameterJSON = function(config, value) { - _updateParameterJSON(config, value); - } + } + + 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'); + }); + $("#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); + + articulation.setup(base_url); + } + + function _saveAnswer(task, deferred) { + var answer = {} + answer["status"] = "FINISHED"; + answer["parameter_json"] = base_parameter_json; + + /*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); + } + + 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.updateParameterJSON = function(config, value) { + _updateParameterJSON(config, value); + } }(window.wikilibras = window.wikilibras || {}, jQuery)); diff --git a/view/right-hand/movements.html b/view/right-hand/movements.html index 4b11a31..ae16dde 100644 --- a/view/right-hand/movements.html +++ b/view/right-hand/movements.html @@ -5,26 +5,26 @@
diff --git a/view/right-hand/pontual/timeline.html b/view/right-hand/pontual/timeline.html index a26c04f..f780d89 100644 --- a/view/right-hand/pontual/timeline.html +++ b/view/right-hand/pontual/timeline.html @@ -1,6 +1,6 @@
- +
- +
- +
diff --git a/view/template.html b/view/template.html index 6cbe44e..c0b5e3d 100755 --- a/view/template.html +++ b/view/template.html @@ -113,7 +113,6 @@
{{ facialConfig.selectionPanel() }} - {% include 'hand-configuration.html' %}
@@ -199,6 +198,16 @@ -- libgit2 0.21.2