diff --git a/view/assets/css/main.css b/view/assets/css/main.css index 7650c58..43e178e 100644 --- a/view/assets/css/main.css +++ b/view/assets/css/main.css @@ -363,14 +363,11 @@ ul.rig.columns-4 li { .single-column-option { display: inline-block; + vertical-align: middle; padding-right: 25px; } /* Sub-Configuration Panel */ -#facial-subconfiguration-options { - display: none; -} - .subconfiguration-options { overflow-x: hidden; white-space: nowrap; diff --git a/view/assets/js/articulation.js b/view/assets/js/articulation.js index f4dff3a..f7a9d97 100644 --- a/view/assets/js/articulation.js +++ b/view/assets/js/articulation.js @@ -41,7 +41,8 @@ d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b) selectedY = g; _setupModuleZ(hand); - //_updateParameterJSON(hand); + + wikilibras.updateTempParameterJSON("right-hand", "articulacao", "1", f + ";" + g); dynworkflow.userSelectedAnOption(); }); } @@ -59,7 +60,8 @@ e = $(articulation_z), h = b.attr("data-z"); b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b); - //_updateParameterJSON(hand); + + wikilibras.updateTempParameterJSON("right-hand", "articulacao", "2", h); dynworkflow.userSelectedAnOption(); }); } @@ -69,26 +71,26 @@ wikilibras.updateParameterJSON("articulacao", value); } - function _isRightHand(hand) { - return hand.indexOf("right-hand") != -1; - } - - function _readValue(hand) { - 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"); - - if (!_isRightHand(hand)) { + function _calculateArticulationPointIndex(hand, xValue, yValue, zValue) { + var x = xValue; + var y = yValue; + var z = zValue; + if (hand == "left-hand") { x = 10 - x + 1; } - z = z == "" ? 1 : parseInt(z); var value = (z-1)*10 + x + 30*(y-1); //console.log(value); return value; } + articulation.processValue = function(hand, selectionArray) { + var xyValueSplit = selectionArray[0].split(";"); + var xValue = parseInt(xyValueSplit[0]); + var yValue = parseInt(xyValueSplit[1]); + var zValue = parseInt(selectionArray[1]); + return _calculateArticulationPointIndex(hand, xValue, yValue, zValue); + } + articulation.setupModuleXY = function(serverhost) { server_host = serverhost; _setupBallSelectorXY("right-hand"); diff --git a/view/assets/js/configuration.js b/view/assets/js/configuration.js index 6495183..d92e0b4 100644 --- a/view/assets/js/configuration.js +++ b/view/assets/js/configuration.js @@ -18,7 +18,8 @@ }); var stepOneBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]"; - var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("group"); + var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("value"); + finger_group = typeof finger_group == "undefined" ? "0" : finger_group; $(stepTwoBaseId + " .finger-group").hide(); $(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show(); } diff --git a/view/assets/js/dynamic-selection-workflow.js b/view/assets/js/dynamic-selection-workflow.js index fcd96b8..168e3ad 100644 --- a/view/assets/js/dynamic-selection-workflow.js +++ b/view/assets/js/dynamic-selection-workflow.js @@ -8,7 +8,7 @@ var mainConfig = ""; // The converted Main Config (right/left-hand) to hand for using the same configuration var preprocessedMainConfig = ""; - // Subconfigurations: Movimento, articulacao, configuracao, orientacao, etc + // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc var currentSubconfig = ""; var currentSubConfigName = ""; var currentSubconfigParent = ""; @@ -34,14 +34,39 @@ return result; } - function _getNextSubConfig() { + function _updateAndGetFirstMovementSubConfig() { + var selectedMovement = movement.getPreviousSelectedMovement(mainConfig); + if (typeof selectedMovement == "undefined") return -1; + + currentSubconfigParent = jsonWF[preprocessedMainConfig]["movimento"][selectedMovement]; + currentSubConfigName = _getFirstKey(currentSubconfigParent); + return currentSubConfigName; + } + + function _updateAndGetMovementConfig() { + currentSubconfigParent = jsonWF[preprocessedMainConfig]; + currentSubConfigName = _getFirstKey(currentSubconfigParent); + return currentSubConfigName; + } + + function _getNextSubConfig(toForward) { var attrs = _getAttributes(currentSubconfigParent); for (var i = 0; i < attrs.length; i++) { - if (attrs[i] == currentSubConfigName && i < attrs.length - 1) { + if (toForward && attrs[i] == currentSubConfigName && i < attrs.length - 1) { return attrs[i+1]; + } else if (!toForward && attrs[i] == currentSubConfigName && i >= 1) { + return attrs[i-1]; } } - return -1; + if (toForward && currentSubConfigName == "movimento") { + return _updateAndGetFirstMovementSubConfig(); + } else if (!toForward && preprocessedMainConfig == "hand") { + return _updateAndGetMovementConfig(); + } else if (!toForward) { + return currentSubConfigName; + } else { + return -1; + } } function _showCurrentSubconfig() { @@ -76,27 +101,38 @@ } function _selectSubConfig(subConfig) { + if (currentSubConfigName == "movimento") { + _updateAndGetFirstMovementSubConfig(); + } currentSubConfigName = subConfig; currentSubconfig = currentSubconfigParent[currentSubConfigName]; currentStep = 0; - _showCurrentSubconfig(); } - // It show the next selection panel on the workflow + // It shows the next selection panel on the workflow function _showNextSubConfig() { - currentStep = currentStep + 1; - if (currentStep < currentSubconfig.length) { + _walkOnTheWorklow(true); + } + + function _showPreviousSubConfig() { + _walkOnTheWorklow(false); + } + + function _walkOnTheWorklow(toForward) { + currentStep = toForward? currentStep + 1 : currentStep - 1; + + if (currentStep >= 0 && currentStep < currentSubconfig.length) { _showCurrentSubconfig(); } else { - var nextSubConfig = _getNextSubConfig(); + var nextSubConfig = _getNextSubConfig(toForward); if (nextSubConfig != -1) { dynworkflow.selectSubConfig(nextSubConfig); } else { wikilibras.hideSelectionPanel(); } } - } + } // A callback function to be called when the user selects a option on a panel function _userSelectedAnOption() { @@ -145,6 +181,22 @@ return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0; } + function _setupTimelineListeners(timelineBaseId) { + $(timelineBaseId + " .icon_container[json_name]").off("click").on("click", + function() { + var subConfig = $(this).attr("json_name"); + _selectSubConfig(subConfig); + }); + + $(timelineBaseId + " .arrow[name=right-arrow]").off("click").on("click", function() { + _showNextSubConfig(); + }); + + $(timelineBaseId + " .arrow[name=left-arrow]").off("click").on("click", function() { + _showPreviousSubConfig(); + }); + } + function _setupTimelineIcons(timelineBaseId) { $(timelineBaseId + " .icon_container[json_name]").hide(); @@ -154,15 +206,10 @@ if (preprocessedMainConfig == "hand") { $(timelineBaseId + " .icon_container[json_name=movimento]").show(); _setupCheckIcon(mainConfig, "movimento"); - //TODO Refact - _selectTimelineIcon(mainConfig, "articulacao"); + _selectTimelineIcon(mainConfig, currentSubConfigName); } - $(timelineBaseId + " .icon_container[json_name]").off("click").on("click", - function() { - var subConfig = $(this).attr("json_name"); - _selectSubConfig(subConfig); - }); + _setupTimelineListeners(timelineBaseId); $(timelineBaseId).show(); } @@ -182,13 +229,13 @@ dynworkflow.selectMainConfig = function(config) { mainConfig = config; preprocessedMainConfig = _preprocessMainConfig(mainConfig); - currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]); - currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName]; currentSubconfigParent = jsonWF[preprocessedMainConfig]; + currentSubConfigName = _getFirstKey(currentSubconfigParent); + currentSubconfig = currentSubconfigParent[currentSubConfigName]; currentStep = 0; _showCurrentSubconfig(); - + // hide the timeline on the first subconfiguration for "hand" if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) { _setupTimeline(); } @@ -213,6 +260,14 @@ _userSelectedAnOption(); } + dynworkflow.getFacialParameters = function() { + return _getAttributes(jsonWF["facial"]); + } + + dynworkflow.getMovementParameters = function(movementName) { + return _getAttributes(jsonWF["hand"]["movimento"][movementName]); + } + dynworkflow.load = function() { baseUrl = $('#server-url').data('url'); $.get(baseUrl + "/conf/selection-workflow-json", function(result) { diff --git a/view/assets/js/facial.js b/view/assets/js/facial.js new file mode 100644 index 0000000..e6829d8 --- /dev/null +++ b/view/assets/js/facial.js @@ -0,0 +1,12 @@ +(function(facial, $, undefined) { + + facial.setup = function() { + var baseId = ".selection-panel-body[mainConfig=facial]"; + $(baseId + " .selection-panel-option").off("click").on( + "click", function() { + wikilibras.selectAnOption(baseId, this); + dynworkflow.userSelectedAnOption(); + }); + }; + +}(window.facial = window.facial || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/movement.js b/view/assets/js/movement.js index cf20e47..4edfc61 100644 --- a/view/assets/js/movement.js +++ b/view/assets/js/movement.js @@ -1,4 +1,9 @@ (function(movement, $, undefined) { + + movement.getPreviousSelectedMovement = function(mainConfig) { + return $(".selection-panel-body[mainConfig=" + mainConfig + + "][subConfig=movimento][step=1] .selection-panel-option[select=true]").attr("value"); + }; movement.setup = function(serverhost) { var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]"; diff --git a/view/assets/js/tmpJSONParser.js b/view/assets/js/tmpJSONParser.js new file mode 100644 index 0000000..8b4ee70 --- /dev/null +++ b/view/assets/js/tmpJSONParser.js @@ -0,0 +1,72 @@ +(function(tmpJSONParser, $, undefined) { + + var base_parameter_json = {}; + var movement_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 _setupBaseParameterJSON(tmpJSON) { + base_parameter_json["userId"] = _getLoggedUser(); + base_parameter_json["sinal"] = tmpJSON["sinal"]; + base_parameter_json["interpolacao"] = "normal"; + base_parameter_json["movimentos"] = []; + movement_parameter_json = { + "facial" : {}, + "mao_direita" : {}, + "mao_esquerda" : {} + }; + base_parameter_json["movimentos"].push(movement_parameter_json); + } + + function _parseParameterValue(value) { + return !isNaN(value) ? parseInt(value) : value; + } + + function _parseTempFacialParameterJSON(tmpJSON) { + var attrs = dynworkflow.getFacialParameters(); + for (var i in attrs) { + var attr = attrs[i]; + parameterValue = tmpJSON["facial"][attr][0]; + movement_parameter_json["facial"][attr] = _parseParameterValue(parameterValue); + } + } + + function _parseTempMovementParameterJSON(tmpJSON, hand) { + var movimentConfig = tmpJSON[hand]["movimento"]; + if (typeof movimentConfig == "undefined") return; + + var movementName = movimentConfig[0]; + var attrs = dynworkflow.getMovementParameters(movementName); + var parsedHand = hand == "right-hand" ? "mao_direita" : hand; + parsedHand = hand == "left-hand" ? "mao_esquerda" : parsedHand; + movement_parameter_json[parsedHand][movementName] = {}; + + for (var i in attrs) { + var attr = attrs[i]; + var parameterValue = ""; + if (attr == "configuracao") { + parameterValue = tmpJSON[hand][attr][1]; + } else if (attr == "articulacao") { + parameterValue = articulation.processValue(hand, + tmpJSON[hand][attr]); + } else { + parameterValue = tmpJSON[hand][attr][0]; + } + movement_parameter_json[parsedHand][movementName][attr] = + _parseParameterValue(parameterValue); + } + } + + tmpJSONParser.parse = function(tmpJSON) { + _setupBaseParameterJSON(tmpJSON); + _parseTempFacialParameterJSON(tmpJSON); + _parseTempMovementParameterJSON(tmpJSON, "right-hand"); + return base_parameter_json; + }; + +}(window.tmpJSONParser = window.tmpJSONParser || {}, jQuery)); \ No newline at end of file diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 79b1911..1a5789d 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -1,543 +1,438 @@ (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 _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 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 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]:visible").length; + var completed_config = $(baseId + " .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); - - dynworkflow.selectMainConfig(option); - } - - function _hideSelectionPanel() { - 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"); - } - } - - 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) break; - 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 _selectAnOption(parentId, el) { - $(parentId + " .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(); - }); - // $(".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-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); + + dynworkflow.selectMainConfig(option); + } + + function _hideSelectionPanel() { + 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"); + } + } + + function _setupGUIOnSelection(option) { + $("#ready-button").fadeOut(300); + $(".edit-container").fadeOut(300); + _addZoomInToAvatar(option, function() { + $("#selection-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(); + }); + } + + 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; + //console.log(tmpParameterJSON); + } + + 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 _showRenderedAvatar() { + var user_id = parsedParameterJSON["userId"]; + var sign_name = parsedParameterJSON["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(); - dynengine.load(); - dynworkflow.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); - } - - 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); - } - - 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); - } - + } + + function _setupMainScreen(task, deferred) { + $("#initial-screen").fadeIn(300); + $("#start-button").off("click").on("click", function() { + $("#initial-screen").hide(); + $("#configuration-screen").show(); + dynengine.load(); + dynworkflow.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); + } + + 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); + } + + 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); + } + }(window.wikilibras = window.wikilibras || {}, jQuery)); diff --git a/view/facial-configuration.html b/view/facial-configuration.html deleted file mode 100644 index 5667344..0000000 --- a/view/facial-configuration.html +++ /dev/null @@ -1,133 +0,0 @@ -{% macro selectionPanel() -%} -
-
- Expressão -
-
- -
-
-
-
- Velocidade de Transição -
-
-
- -
- Lento -
-
-
- -
- Normal -
-
-
- -
- Rápido -
-
-
-
- Duração da Expressão -
-
-
- -
- Longa -
-
-
- -
- Normal -
-
-
- -
- Breve -
-
-{%- endmacro %} {%- macro subconfigPanel() -%} -
-
- -
-
- -
-
- -
-
-{%- endmacro %} diff --git a/view/facial/duracao/passo-1.html b/view/facial/duracao/passo-1.html new file mode 100644 index 0000000..6d519f9 --- /dev/null +++ b/view/facial/duracao/passo-1.html @@ -0,0 +1,38 @@ +
+
+ Duração da Expressão +
+
+
+
+ Longa +
+
+
+
+ Normal +
+
+
+
+ Breve +
+
+ \ No newline at end of file diff --git a/view/facial/expressao/passo-1.html b/view/facial/expressao/passo-1.html new file mode 100644 index 0000000..60d7bc9 --- /dev/null +++ b/view/facial/expressao/passo-1.html @@ -0,0 +1,54 @@ +
+
+ Expressão +
+
+ +
+
+ \ No newline at end of file diff --git a/view/facial/timeline.html b/view/facial/timeline.html index 45e7049..541a163 100644 --- a/view/facial/timeline.html +++ b/view/facial/timeline.html @@ -1,4 +1,4 @@ -
+
@@ -6,18 +6,15 @@
+ json_name="expressao">
+ json_name="transicao">
+ json_name="duracao">
diff --git a/view/facial/transicao/passo-1.html b/view/facial/transicao/passo-1.html new file mode 100644 index 0000000..a073250 --- /dev/null +++ b/view/facial/transicao/passo-1.html @@ -0,0 +1,39 @@ +
+
+ Velocidade de Transição +
+
+
+
+ Lento +
+
+
+
+ Normal +
+
+
+
+ Rápido +
+
+ \ No newline at end of file diff --git a/view/hand-configuration.html b/view/hand-configuration.html deleted file mode 100644 index 8baf3da..0000000 --- a/view/hand-configuration.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
- Escolha o movimento mais parecido -
-
-
    -
  • Pontual
    • - -
-
-
diff --git a/view/hand/configuracao/passo-1.html b/view/hand/configuracao/passo-1.html index f1abb8c..b8c5f9b 100644 --- a/view/hand/configuracao/passo-1.html +++ b/view/hand/configuracao/passo-1.html @@ -5,22 +5,22 @@
  • + src="{{ server }}/img/cmd/0007.png" value="0" /> 0.
  • + src="{{ server }}/img/cmd/0014.png" value="1" /> 1.
  • + src="{{ server }}/img/cmd/0045.png" value="2" /> 2.
  • + src="{{ server }}/img/cmd/0048.png" value="3" /> 3.
  • + src="{{ server }}/img/cmd/0040.png" value="4" /> 4.
  • + src="{{ server }}/img/cmd/0000.png" value="5" /> 5.
diff --git a/view/hand/timeline.html b/view/hand/timeline.html index 9f6354f..af23963 100644 --- a/view/hand/timeline.html +++ b/view/hand/timeline.html @@ -1,29 +1,27 @@
-
- -
+
+ +
-
-
- -
-
- -
-
- -
-
- -
-
+
+
+ +
+
+ +
+
+ +
+
+ +
+
-
- -
+
+ +
diff --git a/view/img/exf/duration-fast.webm b/view/img/exf/duration-fast.webm new file mode 100644 index 0000000..74cafb2 Binary files /dev/null and b/view/img/exf/duration-fast.webm differ diff --git a/view/img/exf/duration-normal.webm b/view/img/exf/duration-normal.webm new file mode 100644 index 0000000..88af30c Binary files /dev/null and b/view/img/exf/duration-normal.webm differ diff --git a/view/img/exf/duration-slow.webm b/view/img/exf/duration-slow.webm new file mode 100644 index 0000000..60b42ae Binary files /dev/null and b/view/img/exf/duration-slow.webm differ diff --git a/view/img/exf/velocity-fast.webm b/view/img/exf/velocity-fast.webm new file mode 100644 index 0000000..fe86aee Binary files /dev/null and b/view/img/exf/velocity-fast.webm differ diff --git a/view/img/exf/velocity-normal.webm b/view/img/exf/velocity-normal.webm new file mode 100644 index 0000000..88af30c Binary files /dev/null and b/view/img/exf/velocity-normal.webm differ diff --git a/view/img/exf/velocity-slow.webm b/view/img/exf/velocity-slow.webm new file mode 100644 index 0000000..1656357 Binary files /dev/null and b/view/img/exf/velocity-slow.webm differ diff --git a/view/template.html b/view/template.html index 6b2dafc..9a7dff8 100755 --- a/view/template.html +++ b/view/template.html @@ -1,7 +1,4 @@ - -{% import 'facial-configuration.html' as facialConfig with context %} -
@@ -111,9 +108,6 @@
- - {{ facialConfig.selectionPanel() }} -
@@ -180,16 +174,18 @@
+ - + +