From 59474b00e3a86269b7ad1a2484e5f0eb848631fc Mon Sep 17 00:00:00 2001 From: Adabriand Furtado Date: Fri, 18 Dec 2015 01:56:04 -0300 Subject: [PATCH] Lógica das tarefas executadas em sequência e imagens de orientação da mão esquerda. --- view/assets/css/main.css | 6 +++++- view/assets/js/wikilibras.js | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------ view/hand-configuration.html | 35 ++++++++++++++++++++--------------- view/img/avatar-left-hand.png | Bin 0 -> 220914 bytes view/img/ore/01.png | Bin 0 -> 90910 bytes view/img/ore/02.png | Bin 0 -> 59184 bytes view/img/ore/03.png | Bin 0 -> 104786 bytes view/img/ore/04.png | Bin 0 -> 109837 bytes view/img/ore/05.png | Bin 0 -> 94254 bytes view/img/ore/06.png | Bin 0 -> 64599 bytes view/img/ore/07.png | Bin 0 -> 123140 bytes view/img/ore/08.png | Bin 0 -> 83313 bytes view/img/ore/09.png | Bin 0 -> 123580 bytes view/img/ore/10.png | Bin 0 -> 52794 bytes view/img/ore/11.png | Bin 0 -> 97698 bytes view/img/ore/12.png | Bin 0 -> 64784 bytes view/template.html | 33 +++++++++++++++++---------------- 17 files changed, 134 insertions(+), 80 deletions(-) create mode 100644 view/img/avatar-left-hand.png create mode 100644 view/img/ore/01.png create mode 100644 view/img/ore/02.png create mode 100644 view/img/ore/03.png create mode 100644 view/img/ore/04.png create mode 100644 view/img/ore/05.png create mode 100644 view/img/ore/06.png create mode 100644 view/img/ore/07.png create mode 100644 view/img/ore/08.png create mode 100644 view/img/ore/09.png create mode 100644 view/img/ore/10.png create mode 100644 view/img/ore/11.png create mode 100644 view/img/ore/12.png 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 %}
@@ -214,29 +219,29 @@ fingers_position_dir = "cmd" %} {% else %} {% set fingers_position_dir =
  • 1.
    • + src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68"/>1.
  • 2.
    • + src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66"/>2.
  • 3.
    • + src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64"/>3.
  • 4.
    • + src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2"/>4.
  • 5.
    • + src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9"/>5.
  • 6.
    • + src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16"/>6.
  • 7.
    • + src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92"/>7.
  • 8.
    • + src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90"/>8.
  • 9.
    • + src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88"/>9.
  • 10.
    • + src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4"/>10.
  • 11.
    • + src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11"/>11.
  • 12.
    • + src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18"/>12.
diff --git a/view/img/avatar-left-hand.png b/view/img/avatar-left-hand.png new file mode 100644 index 0000000..37c48d6 Binary files /dev/null and b/view/img/avatar-left-hand.png differ diff --git a/view/img/ore/01.png b/view/img/ore/01.png new file mode 100644 index 0000000..9533c4e Binary files /dev/null and b/view/img/ore/01.png differ diff --git a/view/img/ore/02.png b/view/img/ore/02.png new file mode 100644 index 0000000..4ce1fb2 Binary files /dev/null and b/view/img/ore/02.png differ diff --git a/view/img/ore/03.png b/view/img/ore/03.png new file mode 100644 index 0000000..ba778ad Binary files /dev/null and b/view/img/ore/03.png differ diff --git a/view/img/ore/04.png b/view/img/ore/04.png new file mode 100644 index 0000000..3b7a1c0 Binary files /dev/null and b/view/img/ore/04.png differ diff --git a/view/img/ore/05.png b/view/img/ore/05.png new file mode 100644 index 0000000..77466cc Binary files /dev/null and b/view/img/ore/05.png differ diff --git a/view/img/ore/06.png b/view/img/ore/06.png new file mode 100644 index 0000000..c87fc87 Binary files /dev/null and b/view/img/ore/06.png differ diff --git a/view/img/ore/07.png b/view/img/ore/07.png new file mode 100644 index 0000000..0ab9f72 Binary files /dev/null and b/view/img/ore/07.png differ diff --git a/view/img/ore/08.png b/view/img/ore/08.png new file mode 100644 index 0000000..07a01e7 Binary files /dev/null and b/view/img/ore/08.png differ diff --git a/view/img/ore/09.png b/view/img/ore/09.png new file mode 100644 index 0000000..4d4ca1f Binary files /dev/null and b/view/img/ore/09.png differ diff --git a/view/img/ore/10.png b/view/img/ore/10.png new file mode 100644 index 0000000..ee449a3 Binary files /dev/null and b/view/img/ore/10.png differ diff --git a/view/img/ore/11.png b/view/img/ore/11.png new file mode 100644 index 0000000..9c341ed Binary files /dev/null and b/view/img/ore/11.png differ diff --git a/view/img/ore/12.png b/view/img/ore/12.png new file mode 100644 index 0000000..46ff4e5 Binary files /dev/null and b/view/img/ore/12.png differ diff --git a/view/template.html b/view/template.html index 2f6407d..b190a67 100755 --- a/view/template.html +++ b/view/template.html @@ -108,7 +108,7 @@ import 'facial-configuration.html' as facialConfig with context %} id="avatar-right-hand" class="avatar-img avatar-img-zoom-out" src="{{ server }}/img/avatar-right-hand.png"> + src="{{ server }}/img/avatar-left-hand.png">
@@ -135,20 +135,17 @@ import 'facial-configuration.html' as facialConfig with context %}
-
GERAR +
GERAR SINAL
-
- Vídeo de referência -
+
Vídeo de referência
@@ -158,9 +155,8 @@ import 'facial-configuration.html' as facialConfig with context %}
Sinal "" construído
-
-- libgit2 0.21.2