From 9cf393737711e681f9f2dfdcfb2f9d246127aa63 Mon Sep 17 00:00:00 2001 From: Adabriand Furtado Date: Sat, 30 Jan 2016 18:24:26 -0300 Subject: [PATCH] Versão inicial do módulo de controle do workflow de seleção. --- view/assets/js/articulation.js | 20 +++++++++++--------- view/assets/js/configuration.js | 24 ++++++++++++++++++++++++ view/assets/js/dynamic-loading-engine.js | 16 +++++++++++----- view/assets/js/dynamic-selection-workflow.js | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ view/assets/js/movement.js | 14 ++++++++++++++ view/assets/js/orientation.js | 10 ++++++++++ view/assets/js/wikilibras.js | 20 +++++++++++++------- view/conf/selection-workflow-json | 25 +++++++++++++++++++++++++ view/facial/timeline.html | 28 ++++++++++++++++++++++++++++ view/hand/articulacao/passo-1.html | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ view/hand/articulacao/passo-2.html | 37 +++++++++++++++++++++++++++++++++++++ view/hand/configuracao/passo-1.html | 30 ++++++++++++++++++++++++++++++ view/hand/configuracao/passo-2.html | 214 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ view/hand/movimento/passo-1.html | 35 +++++++++++++++++++++++++++++++++++ view/hand/orientacao/passo-1.html | 37 +++++++++++++++++++++++++++++++++++++ view/hand/timeline.html | 29 +++++++++++++++++++++++++++++ view/template.html | 15 ++++----------- 17 files changed, 718 insertions(+), 32 deletions(-) create mode 100644 view/assets/js/configuration.js create mode 100644 view/assets/js/dynamic-selection-workflow.js create mode 100644 view/assets/js/movement.js create mode 100644 view/assets/js/orientation.js create mode 100644 view/conf/selection-workflow-json create mode 100644 view/facial/timeline.html create mode 100644 view/hand/articulacao/passo-1.html create mode 100644 view/hand/articulacao/passo-2.html create mode 100644 view/hand/configuracao/passo-1.html create mode 100644 view/hand/configuracao/passo-2.html create mode 100644 view/hand/movimento/passo-1.html create mode 100644 view/hand/orientacao/passo-1.html create mode 100644 view/hand/timeline.html diff --git a/view/assets/js/articulation.js b/view/assets/js/articulation.js index 34fc2b4..060d88a 100644 --- a/view/assets/js/articulation.js +++ b/view/assets/js/articulation.js @@ -11,7 +11,7 @@ function _setupModuleZ(hand, y) { if (typeof y == "undefined") return; - var articulation_z = "#" + hand + "-articulation .module-z"; + var articulation_z = "." + hand + "-articulation .module-z"; $(articulation_z + " .ball-selector").hide(); $(articulation_z + " .row-number-" + y + " .ball-selector").show(); @@ -23,8 +23,8 @@ } function _setupBallSelector(hand) { - var articulation_x_y = "#" + hand + "-articulation .module-x-y"; - $(articulation_x_y + " .ball-selector").on("click", function(a) { + var articulation_x_y = "#" + hand + "-articulation-x-y .module-x-y"; + $(articulation_x_y + " .ball-selector").off("click").on("click", function(a) { var b = $(a.target); if (!b.hasClass("ball-selector")) return; var c = b.parent(".grid-row"), @@ -33,17 +33,19 @@ g = c.attr("data-y"); d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b) _setupModuleZ(hand, g); - _updateParameterJSON(hand); + //_updateParameterJSON(hand); + dynworkflow.nextSubConfig(); }); - var articulation_z = "#" + hand + "-articulation .module-z"; - $(articulation_z + " .ball-selector").on("click", function(a) { + var articulation_z = "#" + hand + "-articulation-z .module-z"; + $(articulation_z + " .ball-selector").off("click").on("click", function(a) { var b = $(a.target); if (!b.hasClass("ball-selector")) return; var c = b.parent(".grid-row"), e = $(articulation_z), h = b.attr("data-z"); b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b); - _updateParameterJSON(hand); + //_updateParameterJSON(hand); + dynworkflow.nextSubConfig(); }); } @@ -57,8 +59,8 @@ } function _readValue(hand) { - var articulation_x_y = "#" + hand + "-articulation .module-x-y"; - var articulation_z = "#" + hand + "-articulation .module-z"; + var articulation_x_y = "." + hand + "-articulation .module-x-y"; + var articulation_z = "." + hand + "-articulation .module-z"; var x = parseInt($(articulation_x_y).attr("data-x")); var y = parseInt($(articulation_x_y).attr("data-y")); var z = $(articulation_z).attr("data-z"); diff --git a/view/assets/js/configuration.js b/view/assets/js/configuration.js new file mode 100644 index 0000000..5be6e8e --- /dev/null +++ b/view/assets/js/configuration.js @@ -0,0 +1,24 @@ +(function(configuration, $, undefined) { + + configuration.setupFingersGroup = function() { + $("#right-hand-fingers-position-group .selection-panel-option").off("click").on( + "click", function() { + $("#right-hand-fingers-position-group .selection-panel-option[select=true]") + .removeAttr("select"); + $(this).attr("select", true); + dynworkflow.nextSubConfig(); + }); + }; + + configuration.setupFingersPosition = function() { + $("#right-hand-fingers-position .selection-panel-option").off("click").on( + "click", function() { + dynworkflow.nextSubConfig(); + }); + + var finger_group = $("#right-hand-fingers-position-group .selection-panel-option[select=true]").attr("group"); + $("#right-hand-fingers-position .finger-group").hide(); + $("#right-hand-fingers-position .finger-group[group=" + finger_group + "]").show(); + } + +}(window.configuration = window.configuration || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/dynamic-loading-engine.js b/view/assets/js/dynamic-loading-engine.js index fd48afe..e092389 100644 --- a/view/assets/js/dynamic-loading-engine.js +++ b/view/assets/js/dynamic-loading-engine.js @@ -5,12 +5,18 @@ return data.replace(/{{ server }}/g, url); }; - dynengine.render = function(serverUrl, templatePath, target, callback) { + dynengine.render = function(serverUrl, templatePath, target, prepend, callback) { var url = serverUrl + templatePath; $.get(url, function(data) { // TODO replace or append boolean console.log('got: ' + url); - $(target).append(_preprocessHtml(data, serverUrl)); + + var processedHtml = _preprocessHtml(data, serverUrl); + if (prepend) { + $(target).prepend(processedHtml); + } else { + $(target).append(processedHtml); + } }) .done(function() { callback && callback(); // call if defined @@ -27,7 +33,7 @@ console.log('click right hand on panel'); }); - $('#avatar-body-right-hand').bind('click', function() { + /*$('#avatar-body-right-hand').bind('click', function() { console.log('click avatar hand'); dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() { $('.movimento-pontual').bind('click', function() { @@ -40,8 +46,8 @@ }); }); - }); + });*/ }; -}(window.dynengine = window.wikilibras || {}, jQuery)); +}(window.dynengine = window.dynengine || {}, jQuery)); diff --git a/view/assets/js/dynamic-selection-workflow.js b/view/assets/js/dynamic-selection-workflow.js new file mode 100644 index 0000000..9c67a77 --- /dev/null +++ b/view/assets/js/dynamic-selection-workflow.js @@ -0,0 +1,121 @@ +(function(dynworkflow, $, undefined) { + + var jsonWF = {}; + var baseUrl = ""; + + var mainConfig = ""; + var currentSubconfigParent = ""; + var currentSubconfig = ""; + var currentSubConfigName = ""; + var currentStep = 0; + + function _preprocessConfig(config) { + config = config.replace("right-hand", "hand"); + config = config.replace("left-hand", "hand"); + return config; + }; + + function _getFirstKey(json) { + var first_key = undefined; + for (first_key in json) break; + return first_key; + } + + function _getAttributes(json) { + var result = []; + for (attr in json) { + result.push(attr); + } + return result; + } + + function _getNextSubConfig() { + var attrs = _getAttributes(currentSubconfigParent); + for (var i = 0; i < attrs.length; i++) { + if (attrs[i] == currentSubConfigName && i < attrs.length - 1) { + return attrs[i+1]; + } + } + return -1; + } + + function _showCurrentSubconfig() { + _showSubconfiguration(currentSubConfigName, currentSubconfig[currentStep]); + } + + function _showSubconfiguration(subconfig, step) { + var step = typeof step == "undefined" ? "passo-1" : step; + $(".selection-panel-body").hide(); + dynengine.render(baseUrl, "/" + mainConfig + "/" + subconfig + + "/" + step + ".html", "#selection-panel", true); + } + + dynworkflow.selectMainConfig = function(config) { + mainConfig = _preprocessConfig(config); + currentSubConfigName = _getFirstKey(jsonWF[mainConfig]); + currentSubconfig = jsonWF[mainConfig][currentSubConfigName]; + currentSubconfigParent = jsonWF[mainConfig]; + currentStep = 0; + + _showCurrentSubconfig(); + } + + dynworkflow.selectMovement = function(movement) { + var subconfigJSON = currentSubconfig[movement] + currentSubConfigName = _getFirstKey(subconfigJSON); + currentSubconfigParent = subconfigJSON; + currentSubconfig = subconfigJSON[currentSubConfigName]; + currentStep = 0; + + _showCurrentSubconfig(); + } + + dynworkflow.selectSubConfig = function(config) { + currentSubConfigName = config; + currentSubconfig = currentSubconfigParent[currentSubConfigName]; + currentStep = 0; + + _showCurrentSubconfig(); + } + + dynworkflow.nextSubConfig = function() { + currentStep = currentStep + 1; + + if (currentStep < currentSubconfig.length) { + _showCurrentSubconfig(); + } else { + var nextSubConfig = _getNextSubConfig(); + + if (nextSubConfig != -1) { + dynworkflow.selectSubConfig(nextSubConfig); + } else { + wikilibras.hideSelectionPanel(); + } + } + } + + dynworkflow.setupTimeline = function() { + dynengine.render(baseUrl, "/" + mainConfig + "/timeline.html", "#selection-panel", false, function() { + $(".subconfiguration-options .icon_container").hide(); + + for (var name in currentSubconfigParent) { + $(".subconfiguration-options .icon_container[json_name=" + name + "]").show(); + } + if (mainConfig == "hand") { + $(".subconfiguration-options .icon_container[json_name=movimento]").show(); + } + + $(".subconfiguration-panel").show(); + }); + } + + dynworkflow.load = function() { + baseUrl = $('#server-url').data('url'); + $.get(baseUrl + "/conf/selection-workflow-json", function(result) { + jsonWF = $.parseJSON(result); + }).fail(function() { + console.log("Failed to load the workflow configuration"); + }); + } + +}(window.dynworkflow = window.dynworkflow || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/movement.js b/view/assets/js/movement.js new file mode 100644 index 0000000..82d97ee --- /dev/null +++ b/view/assets/js/movement.js @@ -0,0 +1,14 @@ +(function(movement, $, undefined) { + + var base_url = ""; + + movement.setup = function(serverhost) { + base_url = serverhost; + + $("#right-hand-moviment .selection-panel-option").off("click").on( + "click", function() { + dynworkflow.selectMovement($(this).attr("value")); + dynworkflow.setupTimeline(); + }); + }; +}(window.movement = window.movement || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/orientation.js b/view/assets/js/orientation.js new file mode 100644 index 0000000..70ebc68 --- /dev/null +++ b/view/assets/js/orientation.js @@ -0,0 +1,10 @@ +(function(orientation, $, undefined) { + + orientation.setup = function() { + $("#right-hand-orientation .selection-panel-option").off("click").on( + "click", function() { + dynworkflow.nextSubConfig(); + }); + }; + +}(window.orientation = window.orientation || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 965dd1d..20b79ef 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -178,6 +178,8 @@ _setupHandSelectionPanel(option); } _setupGUIOnSelection(option); + + dynworkflow.selectMainConfig(option); } function _hideSelectionPanel() { @@ -450,8 +452,7 @@ // JSON function _getFirstKey(json) { var first_key = undefined; - for (first_key in json) - ; + for (first_key in json) break; return first_key; } @@ -506,9 +507,9 @@ } function _setupSelectionPanel() { - // $("#selection-panel .x").off("click").on("click", function() { - // _hideSelectionPanel(); - // }); + $("#selection-panel .x").off("click").on("click", function() { + _hideSelectionPanel(); + }); // $(".selection-panel-body .selection-panel-option").off("click").on( // "click", function() { // _selectConfig(this); @@ -594,6 +595,7 @@ $("#initial-screen").hide(); $("#configuration-screen").show(); dynengine.load(); + dynworkflow.load(); console.log('dynengine loaded'); }); $("#ready-button").off("click").on("click", function() { @@ -623,8 +625,6 @@ _setupConfigurationPanel(); _setupSelectionPanel(); _setupMainScreen(task, deferred); - - articulation.setup(base_url); } function _saveAnswer(task, deferred) { @@ -678,5 +678,11 @@ wikilibras.updateParameterJSON = function(config, value) { _updateParameterJSON(config, value); } + + wikilibras.hideSelectionPanel = function() { + _hideSelectionPanel(); + } + + }(window.wikilibras = window.wikilibras || {}, jQuery)); diff --git a/view/conf/selection-workflow-json b/view/conf/selection-workflow-json new file mode 100644 index 0000000..4709b9e --- /dev/null +++ b/view/conf/selection-workflow-json @@ -0,0 +1,25 @@ +{ + "facial" : { + "expressao" : ["passo-1"], + "transicao" : ["passo-1"], + "duracao" : ["passo-1"] + }, + "hand" : { + "movimento" : { + "pontual" : { + "articulacao" : ["passo-1", "passo-2"], + "configuracao" : ["passo-1", "passo-2"], + "orientacao" : ["passo-1"] + }, + "circular" : { + "articulacao" : ["passo-1", "passo-2"], + "configuracao" : ["passo-1", "passo-2"], + "orientacao" : ["passo-1"], + "raio" : ["passo-1"], + "velocidade" : ["passo-1"], + "lado_oposto" : ["passo-1"], + "sentido_inverso" : ["passo-1"] + } + } + } +} \ No newline at end of file diff --git a/view/facial/timeline.html b/view/facial/timeline.html new file mode 100644 index 0000000..45e7049 --- /dev/null +++ b/view/facial/timeline.html @@ -0,0 +1,28 @@ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
diff --git a/view/hand/articulacao/passo-1.html b/view/hand/articulacao/passo-1.html new file mode 100644 index 0000000..9461ef7 --- /dev/null +++ b/view/hand/articulacao/passo-1.html @@ -0,0 +1,75 @@ +
+
+ Onde é feito o sinal? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/view/hand/articulacao/passo-2.html b/view/hand/articulacao/passo-2.html new file mode 100644 index 0000000..ad58c65 --- /dev/null +++ b/view/hand/articulacao/passo-2.html @@ -0,0 +1,37 @@ +
+
+ Escolha a distância entre a mão e o corpo +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/view/hand/configuracao/passo-1.html b/view/hand/configuracao/passo-1.html new file mode 100644 index 0000000..50f4304 --- /dev/null +++ b/view/hand/configuracao/passo-1.html @@ -0,0 +1,30 @@ +
+
+ Escolha a posição mais parecida dos dedos +
+
+
    +
  • + 0.
    • +
  • + 1.
    • +
  • + 2.
    • +
  • + 3.
    • +
  • + 4.
    • +
  • + 5.
    • +
+
+
+ \ No newline at end of file diff --git a/view/hand/configuracao/passo-2.html b/view/hand/configuracao/passo-2.html new file mode 100644 index 0000000..d5a8e7f --- /dev/null +++ b/view/hand/configuracao/passo-2.html @@ -0,0 +1,214 @@ +
+
+ Escolha a posição dos dedos +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
  • 9.
    • +
  • 10.
    • +
  • 11.
    • +
  • 12.
    • +
  • 13.
    • +
  • 14.
    • +
  • 15.
    • +
  • 16.
    • +
  • 17.
    • +
  • 18.
    • +
  • 19.
    • +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
  • 9.
    • +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
  • 9.
    • +
  • 10.
    • +
  • 11.
    • +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
+
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
  • 9.
    • +
+
+
+
+ \ No newline at end of file diff --git a/view/hand/movimento/passo-1.html b/view/hand/movimento/passo-1.html new file mode 100644 index 0000000..dc9daef --- /dev/null +++ b/view/hand/movimento/passo-1.html @@ -0,0 +1,35 @@ +
+
+ Escolha o movimento mais parecido +
+
+
    +
  • Pontual
    • + +
+
+
+ diff --git a/view/hand/orientacao/passo-1.html b/view/hand/orientacao/passo-1.html new file mode 100644 index 0000000..8c19649 --- /dev/null +++ b/view/hand/orientacao/passo-1.html @@ -0,0 +1,37 @@ +
+
+ Palma da mão +
+
+
    +
  • 1.
    • +
  • 2.
    • +
  • 3.
    • +
  • 4.
    • +
  • 5.
    • +
  • 6.
    • +
  • 7.
    • +
  • 8.
    • +
  • 9.
    • +
  • 10.
    • +
  • 11.
    • +
  • 12.
    • +
+
+
+ \ No newline at end of file diff --git a/view/hand/timeline.html b/view/hand/timeline.html new file mode 100644 index 0000000..51d8c6b --- /dev/null +++ b/view/hand/timeline.html @@ -0,0 +1,29 @@ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
diff --git a/view/template.html b/view/template.html index c0b5e3d..6b2dafc 100755 --- a/view/template.html +++ b/view/template.html @@ -114,17 +114,6 @@ {{ facialConfig.selectionPanel() }} -
-
- -
- - {{ facialConfig.subconfigPanel() }} - -
- -
-
@@ -191,9 +180,13 @@ + + + +