diff --git a/view/assets/css/main.css b/view/assets/css/main.css index 4972ff5..1189f43 100755 --- a/view/assets/css/main.css +++ b/view/assets/css/main.css @@ -52,7 +52,7 @@ body { } #initial-screen { - display: block; + display: none; } #configuration-screen { @@ -431,4 +431,8 @@ ul.rig.columns-4 li { #thanks-screen img { width: 100%; +} + +#completed-all-task-msg { + display: none; } \ No newline at end of file diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 1a64918..f84a434 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -19,6 +19,7 @@ base_parameter_json["sinal"] = sign_name; base_parameter_json["interpolacao"] = "normal"; base_parameter_json["movimentos"] = []; + // TODO remover propriedade articulação moviment_parameter_json = { "facial" : {}, "mao_direita" : {}, @@ -51,9 +52,9 @@ _changeImage(img, hover_img_url); } - function _selectIcon(iconName, isSelect, parent) { - parent = typeof parent == "undefined" ? "" : parent + " "; - var icon_id = parent + ".icon_container[name=" + iconName + "]"; + 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); } @@ -62,13 +63,20 @@ _selectIcon(iconName, false, parent); } - function _setupCheckIcon(option, parent) { - parent = typeof parent == "undefined" ? "" : parent + " "; - var img = $(parent + ".icon_container[name=" + option + "]") - .find("img").first(); - var check_img_url = base_url + "/img/" + option + "-icon-check.png"; + 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 + "]").attr("complete", true); + $(".icon_container[name=" + option + "]").attr("complete", isCheck); } function _isSelectingState() { @@ -84,7 +92,8 @@ } function _canHover(el) { - var incompleteConfig = typeof $(el).attr("complete") == "undefined"; + var incompleteConfig = typeof $(el).attr("complete") == "undefined" + || $(el).attr("complete") == "false"; return (!_isSelectingState() && incompleteConfig) || (typeof $(el).attr("select") == "undefined" && incompleteConfig); } @@ -152,7 +161,7 @@ var current_option = _getCurrentMainConfiguration(); _selectIcon(current_option, false); if (_isConfigurationComplete(current_option)) { - _setupCheckIcon(current_option); + _setupCheckIcon(current_option, true); } $("#avatar-" + current_option).fadeOut(500); } @@ -191,8 +200,8 @@ } function _finishConfiguration(config) { - _setupCheckIcon(config); - _setupCheckIcon("avatar-" + config); + _setupCheckIcon(config, true); + _setupCheckIcon("avatar-" + config, true); $("#" + config + "-edit .check-icon").show(); if (_canRenderSignVideo()) { @@ -200,6 +209,17 @@ } } + 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(); @@ -290,24 +310,20 @@ return config; } - function _selectSubConfigurationIcon(subconfig, isSelect) { - var iconName = _getSubConfigurationIconName(subconfig); - var main_config = _getCurrentMainConfiguration(); - var parent = "#" + main_config + "-subconfiguration-options"; - _selectIcon(iconName, isSelect, parent); - } - 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); - var main_config = _getCurrentMainConfiguration(); - var parent = "#" + main_config + "-subconfiguration-options"; - _setupCheckIcon(iconName, parent); + _setupCheckIcon(iconName, true, subconfig); } function _showSubConfiguration(next_config) { @@ -341,7 +357,7 @@ }); } - // REFACT + // TODO REFACT function _setupFacialSelectionPanel() { var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0; if (previous_select) { @@ -356,7 +372,7 @@ $("#facial-subconfiguration-options").fadeIn(300); } - // REFACT + // TODO REFACT function _setupHandSelectionPanel(option) { var previous_select = $("#" + option + "-subconfiguration-options .icon_container[select=true]").length > 0; @@ -372,8 +388,7 @@ } $("#" + subconfig).fadeIn(300); } else { - _selectIcon("hand-moviment", true, "#" + option - + "-subconfiguration-options"); + _selectIcon("hand-moviment", true, option + "-moviment"); $("#" + option + "-moviment").fadeIn(300); } $("#" + option + "-subconfiguration-options").fadeIn(300); @@ -411,6 +426,13 @@ } // 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; @@ -423,17 +445,25 @@ value = !isNaN(value) ? parseInt(value) : value; if (config == "movimento") { - moviment_parameter_json[current_main_config] = {}; - // TODO remover - moviment_parameter_json[current_main_config][value] = { - "articulacao" : 71 - }; + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); + if (typeof first_key == "undefined") { + moviment_parameter_json[current_main_config][value] = { + "articulacao" : 71 + }; + } 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) { - for (first_key in moviment_parameter_json[current_main_config]) - ; + 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] = { + "articulacao" : 71 + }; + } moviment_parameter_json[current_main_config][first_key][config] = value; - } else { moviment_parameter_json[current_main_config][config] = value; } @@ -480,7 +510,7 @@ // Render Screen function _submitParameterJSON(callback) { - base_parameter_json["movimentos"] = []; + base_parameter_json["movimentos"] = []; base_parameter_json["movimentos"].push(moviment_parameter_json); console.log(base_parameter_json); @@ -525,21 +555,27 @@ _showRenderedAvatar(); }); } - + + function _cleanGUI() { + $(".selection-panel-option").removeAttr("select"); + $(".icon_container[complete=true]").each( + function() { + _unfinishConfiguration($(this).attr("name"), $(this).attr( + "panel")); + }); + } + function _setupGUI(task, deferred) { + _cleanGUI(); + _setupConfigurationPanel(); + _setupSelectionPanel(); + $("#initial-screen").fadeIn(300); - $("#start-button").off("click").on("click", function() { $("#initial-screen").hide(); $("#configuration-screen").show(); }); - - _setupConfigurationPanel(); - _setupSelectionPanel(); - $("#ready-button").off("click").on("click", function() { - //base_parameter_json["movimentos"].push(moviment_parameter_json); - //console.log(base_parameter_json); _setupRenderScreen(); }); $("#render-edit").off("click").on("click", function() { @@ -552,27 +588,35 @@ _saveAnswer(task, deferred) }); } - + 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(); - }, 1500); + }, 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); + console.log(base_parameter_json); + console.log(moviment_parameter_json); } else { - $("#main-container").hide(); + _showCompletedAllTaskMsg(); } }); diff --git a/view/hand-configuration.html b/view/hand-configuration.html index fcc56ac..8622942 100644 --- a/view/hand-configuration.html +++ b/view/hand-configuration.html @@ -1,6 +1,11 @@ -{% macro selectionPanel(name) -%} {% if name == 'right-hand' %} {% set -fingers_position_dir = "cmd" %} {% else %} {% set fingers_position_dir = -"cme" %} {% endif %} +{% macro selectionPanel(name) -%} +{% if name == 'right-hand' %} +{% set fingers_position_dir = "cmd" %} +{% set orientation_dir = "ord" %} +{% else %} +{% set fingers_position_dir = "cme" %} +{% set orientation_dir = "ore" %} +{% endif %}