",
- options: {
- disabled: false,
-
- // callbacks
- create: null
- },
- _createWidget: function( options, element ) {
- element = $( element || this.defaultElement || this )[ 0 ];
- this.element = $( element );
- this.uuid = widget_uuid++;
- this.eventNamespace = "." + this.widgetName + this.uuid;
-
- this.bindings = $();
- this.hoverable = $();
- this.focusable = $();
-
- if ( element !== this ) {
- $.data( element, this.widgetFullName, this );
- this._on( true, this.element, {
- remove: function( event ) {
- if ( event.target === element ) {
- this.destroy();
- }
- }
- });
- this.document = $( element.style ?
- // element within the document
- element.ownerDocument :
- // element is window or document
- element.document || element );
- this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
- }
-
- this.options = $.widget.extend( {},
- this.options,
- this._getCreateOptions(),
- options );
-
- this._create();
- this._trigger( "create", null, this._getCreateEventData() );
- this._init();
- },
- _getCreateOptions: $.noop,
- _getCreateEventData: $.noop,
- _create: $.noop,
- _init: $.noop,
-
- destroy: function() {
- this._destroy();
- // we can probably remove the unbind calls in 2.0
- // all event bindings should go through this._on()
- this.element
- .unbind( this.eventNamespace )
- .removeData( this.widgetFullName )
- // support: jquery <1.6.3
- // http://bugs.jquery.com/ticket/9413
- .removeData( $.camelCase( this.widgetFullName ) );
- this.widget()
- .unbind( this.eventNamespace )
- .removeAttr( "aria-disabled" )
- .removeClass(
- this.widgetFullName + "-disabled " +
- "ui-state-disabled" );
-
- // clean up events and states
- this.bindings.unbind( this.eventNamespace );
- this.hoverable.removeClass( "ui-state-hover" );
- this.focusable.removeClass( "ui-state-focus" );
- },
- _destroy: $.noop,
-
- widget: function() {
- return this.element;
- },
-
- option: function( key, value ) {
- var options = key,
- parts,
- curOption,
- i;
-
- if ( arguments.length === 0 ) {
- // don't return a reference to the internal hash
- return $.widget.extend( {}, this.options );
- }
-
- if ( typeof key === "string" ) {
- // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
- options = {};
- parts = key.split( "." );
- key = parts.shift();
- if ( parts.length ) {
- curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
- for ( i = 0; i < parts.length - 1; i++ ) {
- curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
- curOption = curOption[ parts[ i ] ];
- }
- key = parts.pop();
- if ( arguments.length === 1 ) {
- return curOption[ key ] === undefined ? null : curOption[ key ];
- }
- curOption[ key ] = value;
- } else {
- if ( arguments.length === 1 ) {
- return this.options[ key ] === undefined ? null : this.options[ key ];
- }
- options[ key ] = value;
- }
- }
-
- this._setOptions( options );
-
- return this;
- },
- _setOptions: function( options ) {
- var key;
-
- for ( key in options ) {
- this._setOption( key, options[ key ] );
- }
-
- return this;
- },
- _setOption: function( key, value ) {
- this.options[ key ] = value;
-
- if ( key === "disabled" ) {
- this.widget()
- .toggleClass( this.widgetFullName + "-disabled", !!value );
-
- // If the widget is becoming disabled, then nothing is interactive
- if ( value ) {
- this.hoverable.removeClass( "ui-state-hover" );
- this.focusable.removeClass( "ui-state-focus" );
- }
- }
-
- return this;
- },
-
- enable: function() {
- return this._setOptions({ disabled: false });
- },
- disable: function() {
- return this._setOptions({ disabled: true });
- },
-
- _on: function( suppressDisabledCheck, element, handlers ) {
- var delegateElement,
- instance = this;
-
- // no suppressDisabledCheck flag, shuffle arguments
- if ( typeof suppressDisabledCheck !== "boolean" ) {
- handlers = element;
- element = suppressDisabledCheck;
- suppressDisabledCheck = false;
- }
-
- // no element argument, shuffle and use this.element
- if ( !handlers ) {
- handlers = element;
- element = this.element;
- delegateElement = this.widget();
- } else {
- element = delegateElement = $( element );
- this.bindings = this.bindings.add( element );
- }
-
- $.each( handlers, function( event, handler ) {
- function handlerProxy() {
- // allow widgets to customize the disabled handling
- // - disabled as an array instead of boolean
- // - disabled class as method for disabling individual parts
- if ( !suppressDisabledCheck &&
- ( instance.options.disabled === true ||
- $( this ).hasClass( "ui-state-disabled" ) ) ) {
- return;
- }
- return ( typeof handler === "string" ? instance[ handler ] : handler )
- .apply( instance, arguments );
- }
-
- // copy the guid so direct unbinding works
- if ( typeof handler !== "string" ) {
- handlerProxy.guid = handler.guid =
- handler.guid || handlerProxy.guid || $.guid++;
- }
-
- var match = event.match( /^([\w:-]*)\s*(.*)$/ ),
- eventName = match[1] + instance.eventNamespace,
- selector = match[2];
- if ( selector ) {
- delegateElement.delegate( selector, eventName, handlerProxy );
- } else {
- element.bind( eventName, handlerProxy );
- }
- });
- },
-
- _off: function( element, eventName ) {
- eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) +
- this.eventNamespace;
- element.unbind( eventName ).undelegate( eventName );
-
- // Clear the stack to avoid memory leaks (#10056)
- this.bindings = $( this.bindings.not( element ).get() );
- this.focusable = $( this.focusable.not( element ).get() );
- this.hoverable = $( this.hoverable.not( element ).get() );
- },
-
- _delay: function( handler, delay ) {
- function handlerProxy() {
- return ( typeof handler === "string" ? instance[ handler ] : handler )
- .apply( instance, arguments );
- }
- var instance = this;
- return setTimeout( handlerProxy, delay || 0 );
- },
-
- _hoverable: function( element ) {
- this.hoverable = this.hoverable.add( element );
- this._on( element, {
- mouseenter: function( event ) {
- $( event.currentTarget ).addClass( "ui-state-hover" );
- },
- mouseleave: function( event ) {
- $( event.currentTarget ).removeClass( "ui-state-hover" );
- }
- });
- },
-
- _focusable: function( element ) {
- this.focusable = this.focusable.add( element );
- this._on( element, {
- focusin: function( event ) {
- $( event.currentTarget ).addClass( "ui-state-focus" );
- },
- focusout: function( event ) {
- $( event.currentTarget ).removeClass( "ui-state-focus" );
- }
- });
- },
-
- _trigger: function( type, event, data ) {
- var prop, orig,
- callback = this.options[ type ];
-
- data = data || {};
- event = $.Event( event );
- event.type = ( type === this.widgetEventPrefix ?
- type :
- this.widgetEventPrefix + type ).toLowerCase();
- // the original event may come from any element
- // so we need to reset the target on the new event
- event.target = this.element[ 0 ];
-
- // copy original event properties over to the new event
- orig = event.originalEvent;
- if ( orig ) {
- for ( prop in orig ) {
- if ( !( prop in event ) ) {
- event[ prop ] = orig[ prop ];
- }
- }
- }
-
- this.element.trigger( event, data );
- return !( $.isFunction( callback ) &&
- callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
- event.isDefaultPrevented() );
- }
-};
-
-$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
- $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
- if ( typeof options === "string" ) {
- options = { effect: options };
- }
- var hasOptions,
- effectName = !options ?
- method :
- options === true || typeof options === "number" ?
- defaultEffect :
- options.effect || defaultEffect;
- options = options || {};
- if ( typeof options === "number" ) {
- options = { duration: options };
- }
- hasOptions = !$.isEmptyObject( options );
- options.complete = callback;
- if ( options.delay ) {
- element.delay( options.delay );
- }
- if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
- element[ method ]( options );
- } else if ( effectName !== method && element[ effectName ] ) {
- element[ effectName ]( options.duration, options.easing, callback );
- } else {
- element.queue(function( next ) {
- $( this )[ method ]();
- if ( callback ) {
- callback.call( element[ 0 ] );
- }
- next();
- });
- }
- };
-});
-
-var widget = $.widget;
-
-
-
-}));
diff --git a/view/assets/js/js.cookie.js b/view/assets/js/js.cookie.js
deleted file mode 100644
index e808108..0000000
--- a/view/assets/js/js.cookie.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/*!
- * JavaScript Cookie v2.0.4
- * https://github.com/js-cookie/js-cookie
- *
- * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
- * Released under the MIT license
- */
-(function(factory) {
- if (typeof define === 'function' && define.amd) {
- define(factory);
- } else if (typeof exports === 'object') {
- module.exports = factory();
- } else {
- var _OldCookies = window.Cookies;
- var api = window.Cookies = factory();
- api.noConflict = function() {
- window.Cookies = _OldCookies;
- return api;
- };
- }
-}(function() {
- function extend() {
- var i = 0;
- var result = {};
- for (; i < arguments.length; i++) {
- var attributes = arguments[ i ];
- for (var key in attributes) {
- result[key] = attributes[key];
- }
- }
- return result;
- }
-
- function init(converter) {
- function api(key, value, attributes) {
- var result;
-
- // Write
-
- if (arguments.length > 1) {
- attributes = extend({
- path: '/'
- }, api.defaults, attributes);
-
- if (typeof attributes.expires === 'number') {
- var expires = new Date();
- expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
- attributes.expires = expires;
- }
-
- try {
- result = JSON.stringify(value);
- if (/^[\{\[]/.test(result)) {
- value = result;
- }
- } catch (e) {}
-
- if (!converter.write) {
- value = encodeURIComponent(String(value))
- .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
- } else {
- value = converter.write(value, key);
- }
-
- key = encodeURIComponent(String(key));
- key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
- key = key.replace(/[\(\)]/g, escape);
-
- return (document.cookie = [
- key, '=', value,
- attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
- attributes.path && '; path=' + attributes.path,
- attributes.domain && '; domain=' + attributes.domain,
- attributes.secure ? '; secure' : ''
- ].join(''));
- }
-
- // Read
-
- if (!key) {
- result = {};
- }
-
- // To prevent the for loop in the first place assign an empty array
- // in case there are no cookies at all. Also prevents odd result when
- // calling "get()"
- var cookies = document.cookie ? document.cookie.split('; ') : [];
- var rdecode = /(%[0-9A-Z]{2})+/g;
- var i = 0;
-
- for (; i < cookies.length; i++) {
- var parts = cookies[i].split('=');
- var name = parts[0].replace(rdecode, decodeURIComponent);
- var cookie = parts.slice(1).join('=');
-
- if (cookie.charAt(0) === '"') {
- cookie = cookie.slice(1, -1);
- }
-
- try {
- cookie = converter.read ?
- converter.read(cookie, name) : converter(cookie, name) ||
- cookie.replace(rdecode, decodeURIComponent);
-
- if (this.json) {
- try {
- cookie = JSON.parse(cookie);
- } catch (e) {}
- }
-
- if (key === name) {
- result = cookie;
- break;
- }
-
- if (!key) {
- result[name] = cookie;
- }
- } catch (e) {}
- }
-
- return result;
- }
-
- api.get = api.set = api;
- api.getJSON = function() {
- return api.apply({
- json: true
- }, [].slice.call(arguments));
- };
- api.defaults = {};
-
- api.remove = function(key, attributes) {
- api(key, '', extend(attributes, {
- expires: -1
- }));
- };
-
- api.withConverter = init;
-
- return api;
- }
-
- return init(function() {});
-}));
diff --git a/view/assets/js/movement.js b/view/assets/js/movement.js
deleted file mode 100644
index bf77dc0..0000000
--- a/view/assets/js/movement.js
+++ /dev/null
@@ -1,24 +0,0 @@
-(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, hand) {
- var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=movimento][step=1]';
- $(baseId + ' .selection-panel-option').off('click').on(
- 'click', function() {
- wikilibras.selectAnOption(baseId, this);
- dynworkflow.selectMovement($(this).attr('value'));
- });
- $(baseId + ' .video-panel-option').off('mouseenter').on('mouseenter',
- function(event) {
- $(this).addClass('video-panel-option-hover');
- });
- $(baseId + ' .video-panel-option').off('mouseleave').on('mouseleave',
- function(event) {
- $(this).removeClass('video-panel-option-hover');
- });
- };
-}(window.movement = window.movement || {}, jQuery));
diff --git a/view/assets/js/orientation.js b/view/assets/js/orientation.js
deleted file mode 100644
index 9af260f..0000000
--- a/view/assets/js/orientation.js
+++ /dev/null
@@ -1,13 +0,0 @@
-(function(orientation, $, undefined) {
-
- orientation.setup = function(hand, subConfig, step) {
- var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
- subConfig + '][step=' + step + ']';
- $(baseId + ' .selection-panel-option').off('click').on(
- 'click', function() {
- wikilibras.selectAnOption(baseId, this);
- dynworkflow.userSelectedAnOption();
- });
- };
-
-}(window.orientation = window.orientation || {}, jQuery));
diff --git a/view/assets/js/render-sign.js b/view/assets/js/render-sign.js
new file mode 100644
index 0000000..be2e7a1
--- /dev/null
+++ b/view/assets/js/render-sign.js
@@ -0,0 +1,84 @@
+(function(renderSign, $, undefined) {
+
+ var api_url = '';
+
+ function _submitParameterJSON(parsedParameterJSON, callback) {
+ console.log(parsedParameterJSON);
+
+ $.ajax({
+ type : 'POST',
+ url : api_url + '/sign',
+ data : JSON.stringify(parsedParameterJSON),
+ contentType : 'application/json',
+ success : function(response) {
+ console.log(response);
+ callback(parsedParameterJSON);
+ },
+ error : function(xhr, textStatus, error) {
+ alert(xhr.responseText);
+ }
+ });
+ }
+
+ function _showRenderedAvatar(parameterJSON) {
+ var userId = parameterJSON['userId'];
+ var signName = parameterJSON['sinal'];
+ $("#render-avatar video").attr("src",
+ _getRenderedAvatarUrl(userId, signName));
+ $("#render-avatar").fadeIn(300);
+ }
+
+ function _showRenderScreen(toShow) {
+ if (toShow) {
+ $("#render-screen").fadeIn(300);
+ videoHelper.play("#render-ref video");
+ videoHelper.play("#render-avatar video");
+ } else {
+ $("#render-screen").hide();
+ videoHelper.pause("#render-ref video");
+ videoHelper.pause("#render-avatar video");
+ }
+ }
+
+ function _getRenderedAvatarUrl(userId, signName) {
+ return api_url + '/public/' + userId + '/' + signName + ".webm";
+ }
+
+ renderSign.showRenderedAvatar = function(parameterJSON) {
+ _showRenderedAvatar(parameterJSON);
+ _showRenderScreen(true);
+ }
+
+ renderSign.showRenderScreen = function(toShow) {
+ _showRenderScreen(toShow);
+ }
+
+ renderSign.getRenderedAvatarUrl = function(userId, signName) {
+ return _getRenderedAvatarUrl(userId, signName);
+ }
+
+ renderSign.submit = function(parsedParameterJSON) {
+ configurationScreen.show(false);
+ _showRenderScreen(true);
+ $("#render-avatar").hide();
+ $("#render-loading").fadeIn(300);
+ $("#render-button-container .btn").hide();
+ $("#finish-button").addClass("disabled");
+ $("#finish-button").show();
+
+ _submitParameterJSON(parsedParameterJSON, function(parsedParameterJSON) {
+ $("#render-loading").fadeOut(300);
+ $("#finish-button").removeClass("disabled");
+ _showRenderedAvatar(parsedParameterJSON);
+ });
+ };
+
+ renderSign.setup = function(apiUrl) {
+ api_url = apiUrl;
+ $("#render-edit").off("click").on("click", function() {
+ _showRenderScreen(false);
+ configurationScreen.show(true);
+ });
+ }
+
+}(window.renderSign = window.renderSign || {}, jQuery));
diff --git a/view/assets/js/selection-panel/articulation.js b/view/assets/js/selection-panel/articulation.js
new file mode 100644
index 0000000..cdefabd
--- /dev/null
+++ b/view/assets/js/selection-panel/articulation.js
@@ -0,0 +1,143 @@
+(function(articulation, $, undefined) {
+
+ var server_host = '';
+ var MAX_COLUMNS = 14;
+
+ function _updateASelector(container, ballSelector, step) {
+ var pointSelector = parseInt(step) == 2 ? 'A' : 'B';
+ $(container + ' .ball-selector.active').each(function() {
+ $(this).removeClass('active');
+ $(this).find('.point-selector').remove();
+ });
+ ballSelector.addClass('active');
+ ballSelector.append('
');
+ $(container + ' .selection-panel-option[select=true]').attr('select',
+ false);
+ $(ballSelector).attr('select', true);
+ }
+
+ function _getSelectedY(hand, subConfig, step) {
+ step = parseInt(step) - 1;
+ var previousStepId = '.selection-panel-body[mainConfig=' + hand
+ + '][subConfig=' + subConfig + '][step=' + step
+ + '] .module-x-y';
+ return $(previousStepId).attr('data-y');
+ }
+
+ function _setupModuleZ(hand, subConfig, step, selectedY) {
+ if (typeof selectedY == 'undefined' || selectedY == '')
+ return;
+
+ var base_id = '.selection-panel-body[mainConfig=' + hand
+ + '][subConfig=' + subConfig + '][step=' + step + ']';
+ var articulation_z = base_id + ' .module-z';
+ $(articulation_z + ' .ball-selector').hide();
+ $(articulation_z + ' .row-number-' + selectedY + ' .ball-selector')
+ .show();
+
+ var z = $(articulation_z).attr('data-z');
+ if (typeof z != 'undefined') {
+ var ball_selector = $(articulation_z + ' .row-number-' + selectedY
+ + ' .ball-' + z);
+ _updateASelector(articulation_z, ball_selector, step);
+ }
+ }
+
+ function _setupBallSelectorXY(hand, subConfig, step) {
+ var base_id = '.selection-panel-body[mainConfig=' + hand
+ + '][subConfig=' + subConfig + '][step=' + step + ']';
+ var articulation_x_y = base_id + ' .module-x-y';
+ $(articulation_x_y + ' .ball-selector')
+ .off('click')
+ .on(
+ 'click',
+ function(a) {
+ var b = $(a.target);
+ if (!b.hasClass('ball-selector')) {
+ dynworkflow.userSelectedAnOption();
+ return;
+ }
+ var c = b.parent('.grid-row'), d = $(articulation_x_y), f = b
+ .attr('data-x'), g = c.attr('data-y');
+ d.attr('data-x', f), d.attr('data-y', g);
+
+ var nextStep = parseInt(step) + 1;
+ _updateASelector(articulation_x_y, b, nextStep);
+ _setupModuleZ(hand, subConfig, nextStep, g);
+
+ wikilibras.updateTempParameterJSON(hand, subConfig,
+ step, f + ';' + g);
+ dynworkflow.userSelectedAnOption();
+ });
+ }
+
+ function _setupBallSelectorZ(hand, subConfig, step) {
+ var base_id = '.selection-panel-body[mainConfig=' + hand
+ + '][subConfig=' + subConfig + '][step=' + step + ']';
+ var articulation_z = base_id + ' .module-z';
+ $(articulation_z + ' .ball-selector').off('click').on(
+ 'click',
+ function(a) {
+ var b = $(a.target);
+ if (!b.hasClass('ball-selector')) {
+ dynworkflow.userSelectedAnOption();
+ 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, step);
+
+ wikilibras
+ .updateTempParameterJSON(hand, subConfig, step, h);
+ dynworkflow.userSelectedAnOption();
+ });
+ }
+
+ function _calculateArticulationPointIndex(hand, xValue, yValue, zValue) {
+ var x = xValue;
+ var y = yValue;
+ var z = zValue;
+ if (hand == 'left-hand') {
+ x = MAX_COLUMNS - x + 1;
+ }
+
+ var value = (z - 1) * MAX_COLUMNS + x + 3 * MAX_COLUMNS * (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, hand, subConfig, step) {
+ server_host = serverhost;
+ _setupBallSelectorXY(hand, subConfig, step);
+ };
+
+ articulation.setupModuleZ = function(serverhost, hand, subConfig, step) {
+ server_host = serverhost;
+ _setupBallSelectorZ(hand, subConfig, step);
+
+ var selectedY = _getSelectedY(hand, subConfig, step);
+ _setupModuleZ(hand, subConfig, step, selectedY);
+ };
+
+ articulation.clean = function() {
+ $('.ball-selector.active').each(function() {
+ $(this).removeClass('active');
+ $(this).find('.point-selector').remove();
+ });
+ $('.module-x-y').attr('data-x', '');
+ $('.module-x-y').attr('data-y', '');
+ $('.module-z').attr('data-z', '');
+ }
+
+}(window.articulation = window.articulation || {}, jQuery));
diff --git a/view/assets/js/selection-panel/configuration.js b/view/assets/js/selection-panel/configuration.js
new file mode 100644
index 0000000..8e0e3d0
--- /dev/null
+++ b/view/assets/js/selection-panel/configuration.js
@@ -0,0 +1,43 @@
+(function(configuration, $, undefined) {
+
+ configuration.setupFingersGroup = function(hand, subConfig, step) {
+ var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + ']';
+ $(baseId + ' .selection-panel-option'
+ ).off('click').on('click', function() {
+ selectionPanel.selectAnOption(baseId, this);
+ _setupFingersToShow(hand, subConfig, step);
+
+ dynworkflow.userSelectedAnOption();
+ });
+ };
+
+ function _setupFingersToShow(hand, subConfig, step) {
+ var stepOneBaseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + ']';
+ var nextStep = parseInt(step) + 1;
+ var stepTwoBaseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + nextStep + ']';
+
+ var finger_group = $(stepOneBaseId + ' .selection-panel-option[select=true]').attr('value');
+ finger_group = typeof finger_group == 'undefined' ? '0' : finger_group;
+
+ // clean next step
+ dynworkflow.cleanStep(hand, subConfig, nextStep);
+ $(stepTwoBaseId + ' .finger-group').hide();
+ $(stepTwoBaseId + ' .finger-group[group=' + finger_group + ']').show();
+ }
+
+ configuration.setupFingersPosition = function(hand, subConfig, step) {
+ var stepTwoBaseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + ']';
+ $(stepTwoBaseId + ' .selection-panel-option').off('click').on(
+ 'click', function() {
+ selectionPanel.selectAnOption(stepTwoBaseId, this);
+ dynworkflow.userSelectedAnOption();
+ });
+ var previousStep = parseInt(step) - 1;
+ _setupFingersToShow(hand, subConfig, previousStep);
+ };
+
+}(window.configuration = window.configuration || {}, jQuery));
diff --git a/view/assets/js/selection-panel/default-configuration-handler.js b/view/assets/js/selection-panel/default-configuration-handler.js
new file mode 100644
index 0000000..93c4283
--- /dev/null
+++ b/view/assets/js/selection-panel/default-configuration-handler.js
@@ -0,0 +1,27 @@
+(function(defaultConfigurationHandler, $, undefined) {
+
+ defaultConfigurationHandler.setup = function(hand, subConfig, step) {
+ var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + ']';
+ $(baseId + ' .selection-panel-option').off('click').on(
+ 'click', function() {
+ selectionPanel.selectAnOption(baseId, this);
+ dynworkflow.userSelectedAnOption();
+ });
+ };
+
+ function _startVideoLoop(hand, subConfig, step, timeBetweenLoops) {
+ setTimeout(function(){
+ $('.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + '] video').each(function(){
+ videoHelper.play(this);
+ });
+ _startVideoLoop(hand, subConfig, step, timeBetweenLoops);
+ }, timeBetweenLoops);
+ }
+
+ defaultConfigurationHandler.startVideoLoop = function(hand, subConfig, step, timeBetweenLoops) {
+ _startVideoLoop(hand, subConfig, step, timeBetweenLoops);
+ }
+
+}(window.defaultConfigurationHandler = window.defaultConfigurationHandler || {}, jQuery));
diff --git a/view/assets/js/selection-panel/dynamic-loading-engine.js b/view/assets/js/selection-panel/dynamic-loading-engine.js
new file mode 100644
index 0000000..101c7f0
--- /dev/null
+++ b/view/assets/js/selection-panel/dynamic-loading-engine.js
@@ -0,0 +1,96 @@
+(function(dynengine, $, undefined) {
+ var setup = undefined;
+
+ _preprocessHtml = function(data, url) {
+ var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/);
+ var currentMainConfig = dynworkflow.getMainConfig(); // right-hand or left-hand
+ var goodData = data;
+
+ var isRightHand = function(hand) {
+ return hand === 'right-hand';
+ };
+
+ var replaceConfigurationTag = function(data, mainConfig) {
+ if (isRightHand(mainConfig)) {
+ return data.replace(/{{ configuracao }}/g, 'cmd');
+ } else {
+ return data.replace(/{{ configuracao }}/g, 'cme');
+ }
+ }
+
+ var replaceOrientationTag = function(data, mainConfig) {
+ if (isRightHand(mainConfig)) {
+ return data.replace(/{{ orientacao }}/g, 'ord');
+ } else {
+ return data.replace(/{{ orientacao }}/g, 'ore');
+ }
+ }
+
+ var replaceHandFolderTag = function(data, mainConfig) {
+ if (isRightHand(mainConfig)) {
+ return data.replace(/{{ hand-folder }}/g, 'md');
+ } else {
+ return data.replace(/{{ hand-folder }}/g, 'me');
+ }
+ }
+
+ var replaceMovementNameTag = function(data, mainConfig) {
+ var selectedMovement = movement.getPreviousSelectedMovement(mainConfig);
+ if (typeof selectedMovement != "undefined") {
+ return data.replace(/{{ movement-name }}/g, selectedMovement);
+ }
+ return data
+ }
+
+ if (matchSubConfig) { // case defined
+ // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao
+ // Specific configurations: configuracao, orientacao
+ // possible values on the side as comment
+ var subConfig = matchSubConfig[1]; // articulacao | configuracao | duracao | expressao | movimento | orientacao | transicao
+
+ // possible subconfigs that need changing
+ switch (subConfig) {
+ case 'configuracao':
+ goodData = replaceConfigurationTag(data, currentMainConfig);
+ break;
+ case 'configuracao-retilineo':
+ goodData = replaceConfigurationTag(data, currentMainConfig);
+ break;
+ case 'orientacao':
+ goodData = replaceOrientationTag(data, currentMainConfig);
+ break;
+ case 'orientacao-retilineo':
+ goodData = replaceOrientationTag(data, currentMainConfig);
+ break;
+ }
+ }
+ goodData = replaceHandFolderTag(goodData, currentMainConfig);
+ goodData = replaceMovementNameTag(goodData, currentMainConfig);
+ goodData = goodData.replace(/{{ hand }}/g, currentMainConfig);
+ return goodData.replace(/{{ server }}/g, url);
+ };
+
+ dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
+ var url = serverUrl + templatePath;
+ $.get(url, function(data) {
+ var processedHtml = _preprocessHtml(data, serverUrl);
+ if (prepend) {
+ $(target).prepend(processedHtml);
+ } else {
+ $(target).append(processedHtml);
+ }
+ })
+ .done(function() {
+ callback && callback(); // call if defined
+ });
+ };
+
+ dynengine.clean = function(target) {
+ $(target).html('');
+ };
+
+ dynengine.load = function() {
+ var url = $('#server-url').data('url');
+ };
+
+}(window.dynengine = window.dynengine || {}, jQuery));
diff --git a/view/assets/js/selection-panel/dynamic-selection-workflow.js b/view/assets/js/selection-panel/dynamic-selection-workflow.js
new file mode 100644
index 0000000..7ede68e
--- /dev/null
+++ b/view/assets/js/selection-panel/dynamic-selection-workflow.js
@@ -0,0 +1,369 @@
+(function(dynworkflow, $, undefined) {
+
+ // Workflow configuration
+ var jsonWF = {};
+ var baseUrl = '';
+
+ // Main configurations: right-hand, left-hand and facial
+ var mainConfig = '';
+ // The converted Main Config (right/left-hand) to hand for using the same configuration
+ var preprocessedMainConfig = '';
+ // Subconfigurations: movimento, articulacao, configuracao, orientacao, etc
+ var currentSubconfig = '';
+ var currentSubConfigName = '';
+ var currentSubconfigParent = '';
+ var currentStep = 0;
+
+ function _preprocessMainConfig(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 _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 (toForward && attrs[i] == currentSubConfigName
+ && i < attrs.length - 1) {
+ return attrs[i + 1];
+ } else if (!toForward && attrs[i] == currentSubConfigName && i >= 1) {
+ return attrs[i - 1];
+ }
+ }
+ if (toForward && currentSubConfigName == 'movimento') {
+ return _updateAndGetFirstMovementSubConfig();
+ } else if (!toForward && preprocessedMainConfig == 'hand') {
+ return _updateAndGetMovementConfig();
+ } else if (!toForward) {
+ return currentSubConfigName;
+ } else {
+ return -1;
+ }
+ }
+
+ function _showCurrentSubconfig() {
+ _showSubconfiguration(mainConfig, currentSubConfigName, currentStep);
+ }
+
+ // It checks if a selection panel is already loaded
+ function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) {
+ var stepNumber = stepNumber + 1;
+ return $('.selection-panel-body[mainConfig=' + mainConfig
+ + '][subConfig=' + subConfig + '][step=' + stepNumber + ']').length > 0;
+ }
+
+ function _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber) {
+ var stepNumber = stepNumber + 1;
+ return $(
+ '.selection-panel-body[mainConfig=' + mainConfig
+ + '][subConfig=' + subConfig + '][step=' + stepNumber
+ + ']').show();
+ }
+
+ // It renders or shows the requested selection panel
+ function _showSubconfiguration(mainConfig, subConfig, stepNumber) {
+ $('.selection-panel-body').hide();
+ if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) {
+ _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber);
+ } else {
+ var step = currentSubconfig[stepNumber];
+ step = typeof step == 'undefined' ? 'passo-1' : step;
+ dynengine.render(baseUrl, '/' + preprocessedMainConfig + '/'
+ + subConfig + '/' + step + '.html', '#selection-panel',
+ true);
+ }
+ _selectTimelineIcon(mainConfig, subConfig, true);
+ }
+
+ function _selectSubConfig(subConfig) {
+ if (subConfig == 'movimento') {
+ _updateAndGetMovementConfig();
+ } else if (currentSubConfigName == 'movimento') {
+ _updateAndGetFirstMovementSubConfig();
+ }
+ currentSubConfigName = subConfig;
+ currentSubconfig = currentSubconfigParent[currentSubConfigName];
+ currentStep = 0;
+ _showCurrentSubconfig();
+ }
+
+ // It shows the next selection panel on the workflow
+ function _showNextSubConfig() {
+ _walkOnTheWorkflow(true);
+ }
+
+ function _showPreviousSubConfig() {
+ _walkOnTheWorkflow(false);
+ }
+
+ function _walkOnTheWorkflow(toForward) {
+ currentStep = toForward ? currentStep + 1 : currentStep - 1;
+
+ if (currentStep >= 0 && currentStep < currentSubconfig.length) {
+ _showCurrentSubconfig();
+ } else {
+ var nextSubConfig = _getNextSubConfig(toForward);
+ if (nextSubConfig != -1) {
+ _selectSubConfig(nextSubConfig);
+ } else {
+ selectionPanel.hide();
+ }
+ }
+ }
+
+ function _checkIfFinished(mainConfig, currentSubConfigName) {
+ var numberOfSteps = currentSubconfig.length;
+ var completedSteps = $('.selection-panel-body[mainConfig=' + mainConfig
+ + '][subConfig=' + currentSubConfigName
+ + '] .selection-panel-option[select=true]').length;
+ return completedSteps != 0 && completedSteps == numberOfSteps;
+ }
+
+ // A callback function to be called when the user selects a option on a panel
+ function _userSelectedAnOption() {
+ if (_checkIfFinished(mainConfig, currentSubConfigName)) {
+ _setupCheckIcon(mainConfig, currentSubConfigName);
+ }
+ _showNextSubConfig();
+ }
+
+ function _cleanStep(mainConfig, subConfig, step) {
+ var baseId = '.selection-panel-body[mainConfig=' + mainConfig
+ + '][subConfig=' + subConfig + '][step=' + step + ']';
+ $(baseId + ' .selection-panel-option').removeAttr('select');
+ var icon_id = '.subconfiguration-panel[mainConfig=' + mainConfig
+ + '] .icon_container[json_name=' + subConfig + ']';
+ $(icon_id).removeAttr('complete');
+ }
+
+ // Timeline functions
+ function _selectTimelineIcon(mainConfig, subConfig) {
+ var baseId = '.subconfiguration-panel[mainConfig=' + mainConfig
+ + '] .subconfiguration-options';
+ var iconContainer = '.icon_container[json_name=' + subConfig + ']';
+ var iconId = baseId + ' ' + iconContainer;
+
+ var previousSelected = $(baseId + ' .icon_container[select=true]')
+ .attr('json_name');
+ if (typeof previousSelected != 'undefined') {
+ _deselectTimelineIcon(mainConfig, previousSelected);
+ }
+
+ iconHelper.enableIconHover($(iconId), true);
+ $(iconId).attr('select', true);
+ $(baseId).scrollTo(iconContainer, {
+ 'offset' : -60,
+ 'duration' : 750
+ });
+ }
+
+ function _deselectTimelineIcon(mainConfig, subConfig) {
+ var icon_id = '.subconfiguration-panel[mainConfig=' + mainConfig
+ + '] .icon_container[json_name=' + subConfig + ']';
+
+ if ($(icon_id + '[complete=true]').length > 0) {
+ _setupCheckIcon(mainConfig, subConfig);
+ } else {
+ iconHelper.enableIconHover($(icon_id), false);
+ $(icon_id).removeAttr('select');
+ }
+ }
+
+ function _setupCheckIcon(mainConfig, subConfig) {
+ var icon_id = $('.subconfiguration-panel[mainConfig=' + mainConfig
+ + '] .icon_container[json_name=' + subConfig + ']');
+ iconHelper.enableIconCheck(icon_id, true);
+ $(icon_id).attr('complete', true);
+ $(icon_id).attr('select', false);
+ }
+
+ function _isTimelineLoaded() {
+ 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 + ' .icon_container[json_name]').off('mouseover').on(
+ 'mouseover', function() {
+ if (iconHelper.canHover(this)) {
+ iconHelper.enableIconHover(this, true);
+ }
+ });
+ $(timelineBaseId + ' .icon_container[json_name]').off('mouseout').on(
+ 'mouseout', function() {
+ if (iconHelper.canHover(this)) {
+ iconHelper.enableIconHover(this, false);
+ }
+ });
+ $(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, toUpdate) {
+ if (!toUpdate) {
+ $(timelineBaseId).show();
+ $(timelineBaseId + " .subconfiguration-options").scrollTo(0, 0);
+ return;
+ }
+
+ $(timelineBaseId + ' .icon_container[json_name]').attr("active",
+ "false");
+ for ( var name in currentSubconfigParent) {
+ $(timelineBaseId + ' .icon_container[json_name=' + name + ']')
+ .attr("active", "true");
+ }
+
+ if (preprocessedMainConfig == 'hand') {
+ $(timelineBaseId + ' .icon_container[json_name=movimento]').attr(
+ "active", "true");
+ _setupCheckIcon(mainConfig, 'movimento');
+ }
+ _selectTimelineIcon(mainConfig, currentSubConfigName);
+ _setupTimelineListeners(timelineBaseId);
+ $(timelineBaseId).show();
+ }
+
+ function _setupTimeline(toUpdate) {
+ var timelineBaseId = '.subconfiguration-panel[mainConfig=' + mainConfig
+ + ']';
+ if (_isTimelineLoaded()) {
+ _setupTimelineIcons(timelineBaseId, toUpdate);
+ } else {
+ dynengine.render(baseUrl, '/' + preprocessedMainConfig
+ + '/timeline.html', '#selection-panel', false, function() {
+ _setupTimelineIcons(timelineBaseId, true);
+ });
+ }
+ }
+
+ function _initTimeline() {
+ if (preprocessedMainConfig != 'hand' || _isTimelineLoaded()) {
+ _setupTimeline(false);
+ }
+ }
+
+ function _cleanTimeline() {
+ $(".subconfiguration-panel").remove();
+ }
+
+ function _cleanPreviousLoadedPanel() {
+ $('.selection-panel-body[mainConfig=' + mainConfig + ']').each(
+ function() {
+ var subConfigName = $(this).attr("subConfig");
+ if (subConfigName.indexOf("articulacao") != -1
+ || subConfigName.indexOf("configuracao") != -1
+ || subConfigName.indexOf("orientacao") != -1
+ || subConfigName.indexOf("movimento") != -1) {
+ return;
+ }
+ $(
+ '.selection-panel-body[mainConfig=' + mainConfig
+ + '][subConfig=' + subConfigName + ']')
+ .remove();
+ });
+ }
+
+ // Public methods
+ dynworkflow.selectMainConfig = function(config) {
+ mainConfig = config;
+ preprocessedMainConfig = _preprocessMainConfig(mainConfig);
+ currentSubconfigParent = jsonWF[preprocessedMainConfig];
+ currentSubConfigName = _getFirstKey(currentSubconfigParent);
+ currentSubconfig = currentSubconfigParent[currentSubConfigName];
+ currentStep = 0;
+
+ _showCurrentSubconfig();
+ };
+
+ dynworkflow.selectMovement = function(movement) {
+ var subconfigJSON = currentSubconfig[movement];
+ currentSubConfigName = _getFirstKey(subconfigJSON);
+ currentSubconfigParent = subconfigJSON;
+ currentSubconfig = subconfigJSON[currentSubConfigName];
+ currentStep = 0;
+
+ _cleanPreviousLoadedPanel();
+ _showCurrentSubconfig();
+ _setupTimeline(true);
+ };
+
+ dynworkflow.selectSubConfig = function(subConfig) {
+ _selectSubConfig(subConfig);
+ };
+
+ dynworkflow.userSelectedAnOption = function() {
+ _userSelectedAnOption();
+ };
+
+ dynworkflow.cleanStep = function(mainConfig, subConfig, step) {
+ _cleanStep(mainConfig, subConfig, step);
+ };
+
+ dynworkflow.getFacialParameters = function() {
+ return _getAttributes(jsonWF['facial']);
+ };
+
+ dynworkflow.getMovementParameters = function(movementName) {
+ return _getAttributes(jsonWF['hand']['movimento'][movementName]);
+ };
+
+ dynworkflow.getMainConfig = function() {
+ return mainConfig;
+ };
+
+ dynworkflow.initTimeline = function() {
+ _initTimeline();
+ };
+
+ 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');
+ });
+ _cleanTimeline();
+ };
+
+}(window.dynworkflow = window.dynworkflow || {}, jQuery));
diff --git a/view/assets/js/selection-panel/facial.js b/view/assets/js/selection-panel/facial.js
new file mode 100644
index 0000000..0958ddb
--- /dev/null
+++ b/view/assets/js/selection-panel/facial.js
@@ -0,0 +1,21 @@
+(function(facial, $, undefined) {
+
+ facial.setup = function(subConfig) {
+ var baseId = '.selection-panel-body[mainConfig=facial][subConfig='
+ + subConfig + ']';
+ $(baseId + ' .selection-panel-option').off('click').on('click',
+ function() {
+ selectionPanel.selectAnOption(baseId, this);
+ dynworkflow.userSelectedAnOption();
+ });
+ $(baseId + ' .video-panel-option').off('mouseenter').on('mouseenter',
+ function(event) {
+ $(this).addClass('video-panel-option-hover');
+ });
+ $(baseId + ' .video-panel-option').off('mouseleave').on('mouseleave',
+ function(event) {
+ $(this).removeClass('video-panel-option-hover');
+ });
+ };
+
+}(window.facial = window.facial || {}, jQuery));
diff --git a/view/assets/js/selection-panel/movement.js b/view/assets/js/selection-panel/movement.js
new file mode 100644
index 0000000..6b5fd48
--- /dev/null
+++ b/view/assets/js/selection-panel/movement.js
@@ -0,0 +1,24 @@
+(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, hand) {
+ var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=movimento][step=1]';
+ $(baseId + ' .selection-panel-option').off('click').on(
+ 'click', function() {
+ selectionPanel.selectAnOption(baseId, this);
+ dynworkflow.selectMovement($(this).attr('value'));
+ });
+ $(baseId + ' .video-panel-option').off('mouseenter').on('mouseenter',
+ function(event) {
+ $(this).addClass('video-panel-option-hover');
+ });
+ $(baseId + ' .video-panel-option').off('mouseleave').on('mouseleave',
+ function(event) {
+ $(this).removeClass('video-panel-option-hover');
+ });
+ };
+}(window.movement = window.movement || {}, jQuery));
diff --git a/view/assets/js/selection-panel/orientation.js b/view/assets/js/selection-panel/orientation.js
new file mode 100644
index 0000000..ed3da57
--- /dev/null
+++ b/view/assets/js/selection-panel/orientation.js
@@ -0,0 +1,13 @@
+(function(orientation, $, undefined) {
+
+ orientation.setup = function(hand, subConfig, step) {
+ var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' +
+ subConfig + '][step=' + step + ']';
+ $(baseId + ' .selection-panel-option').off('click').on(
+ 'click', function() {
+ selectionPanel.selectAnOption(baseId, this);
+ dynworkflow.userSelectedAnOption();
+ });
+ };
+
+}(window.orientation = window.orientation || {}, jQuery));
diff --git a/view/assets/js/selection-panel/selection-panel.js b/view/assets/js/selection-panel/selection-panel.js
new file mode 100644
index 0000000..cfcc8b1
--- /dev/null
+++ b/view/assets/js/selection-panel/selection-panel.js
@@ -0,0 +1,194 @@
+(function(selectionPanel, $, undefined) {
+
+ 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');
+ wikilibras.updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr(
+ 'value'));
+ }
+
+ function _canRenderSignVideo() {
+ return _isConfigurationComplete('facial') &&
+ (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand'));
+ }
+
+ function _isConfigurationComplete(config) {
+ var baseId = '.subconfiguration-panel[mainConfig=' + config + ']';
+ var total_config = $(baseId
+ + ' .icon_container[json_name][active=true]').length;
+ var completed_config = $(baseId
+ + ' .icon_container[active=true][complete=true]').length;
+ return completed_config != 0 && total_config == completed_config;
+ }
+
+ function _clearPreviousSelection() {
+ $('.selection-panel-body').hide();
+ $('.subconfiguration-panel').hide();
+
+ if (configurationScreen.isMenuSelected()) {
+ var current_option = configurationScreen.getCurrentMainConfiguration();
+ iconHelper.selectIcon(current_option, false);
+ if (_isConfigurationComplete(current_option)) {
+ iconHelper.setupCheckIcon(current_option, true);
+ }
+ $('#avatar-' + current_option).fadeOut(500);
+ }
+ }
+
+ function _finishConfiguration(config, toFinish) {
+ iconHelper.setupCheckIcon(config, toFinish);
+ iconHelper.setupCheckIcon('avatar-' + config, toFinish);
+
+ if (toFinish) {
+ $('#' + config + '-edit .check-icon').show();
+ } else {
+ $('#' + config + '-edit .check-icon').hide();
+ }
+ if (_canRenderSignVideo()) {
+ $('#ready-button').removeClass('disabled');
+ } else {
+ $('#ready-button').addClass('disabled');
+ }
+ }
+
+ function _unfinishConfiguration(config, panel) {
+ iconHelper.setupCheckIcon(config, false, panel);
+ iconHelper.setupCheckIcon('avatar-' + config, false, panel);
+ $('#' + config + '-edit .check-icon').hide();
+
+ if (!_canRenderSignVideo()) {
+ $('#ready-button').addClass('disabled');
+ }
+ }
+
+ 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,
+ function() {
+ $('#avatar-' + option).addClass(
+ 'avatar-' + option
+ + '-img-zoom-in');
+ callback();
+ });
+ });
+ }
+
+ 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,
+ function() {
+ $('#avatar-' + option).removeClass(
+ 'avatar-' + option + '-img-zoom-in');
+ $('#avatar-' + option).addClass(
+ 'avatar-img-zoom-out');
+ callback();
+ });
+ });
+ }
+
+ function _hide() {
+ var config = configurationScreen.getCurrentMainConfiguration();
+ if (config === '') return;
+
+ iconHelper.deselectIcon(config);
+ if (_isConfigurationComplete(config)) {
+ _finishConfiguration(config, true);
+ } else {
+ _finishConfiguration(config, false);
+ }
+
+ _addZoomOutToAvatar(config, function() {
+ $('#ready-button').fadeIn(300);
+ $('.edit-container').fadeIn(300);
+ });
+ $('#selection-panel').fadeOut(300);
+ }
+
+ function _setupGUIOnSelection(option, finishCallback) {
+ $('#ready-button').fadeOut(300);
+ $('.edit-container').fadeOut(300);
+ _addZoomInToAvatar(option, function() {
+ $('#selection-panel').fadeIn(300, function() {
+ finishCallback();
+ });
+ });
+ }
+
+ function _show(option) {
+ _clearPreviousSelection();
+ iconHelper.selectIcon(option, true);
+ dynworkflow.selectMainConfig(option);
+ _setupGUIOnSelection(option, function() {
+ dynworkflow.initTimeline();
+ });
+ }
+
+ selectionPanel.selectAnOption = function (parentId, el) {
+ _selectAnOption(parentId, el);
+ }
+
+ selectionPanel.unfinishConfiguration = function(config, panel) {
+ return _unfinishConfiguration(config, panel);
+ }
+
+ selectionPanel.isConfigurationComplete = function(config) {
+ return _isConfigurationComplete(config);
+ }
+
+ selectionPanel.hide = function() {
+ return _hide();
+ }
+
+ selectionPanel.show = function(option) {
+ _show(option);
+ }
+
+ selectionPanel.clean = function() {
+ articulation.clean();
+ $(".selection-panel-option").removeAttr('select');
+ $(".icon_container").removeAttr("select");
+ $(".icon_container[complete=true]").each(
+ function() {
+ _unfinishConfiguration($(this).attr("name"), $(this).attr(
+ "panel"));
+ });
+ }
+
+ selectionPanel.setup = function(url) {
+ $('#selection-panel .x').off('click').on('click', function() {
+ _hide();
+ });
+ selectionPanel.clean();
+ };
+
+}(window.selectionPanel = window.selectionPanel || {}, jQuery));
diff --git a/view/assets/js/submit-sign.js b/view/assets/js/submit-sign.js
index 6871b30..c8b200c 100644
--- a/view/assets/js/submit-sign.js
+++ b/view/assets/js/submit-sign.js
@@ -32,6 +32,11 @@
$('#upload-progress-container').hide();
$('#input-sign-upload').show();
}
+
+ submitSign.show = function() {
+ $(".sub-main-container").hide();
+ $("#submit-sign-container").show();
+ }
submitSign.setup = function(uploadSignHost) {
submitUrl = uploadSignHost;
diff --git a/view/assets/js/teached-signs.js b/view/assets/js/teached-signs.js
index 14f4c66..25086ee 100644
--- a/view/assets/js/teached-signs.js
+++ b/view/assets/js/teached-signs.js
@@ -51,7 +51,7 @@
function _addSign(answer) {
var signName = answer.parameter_json.sinal;
var apiUserId = answer.parameter_json.userId;
- var videoUrl = wikilibras.getRenderedAvatarUrl(apiUserId, signName);
+ var videoUrl = renderSign.getRenderedAvatarUrl(apiUserId, signName);
$("#signs-list-container").append(
'
0;
- }
-
- function _isConfigurationComplete(config) {
- var baseId = '.subconfiguration-panel[mainConfig=' + config + ']';
- var total_config = $(baseId
- + ' .icon_container[json_name][active=true]').length;
- var completed_config = $(baseId
- + ' .icon_container[active=true][complete=true]').length;
- return completed_config != 0 && 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,
- function() {
- $('#avatar-' + option).addClass(
- 'avatar-' + option
- + '-img-zoom-in');
- callback();
- });
- });
- }
-
- 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,
- function() {
- $('#avatar-' + option).removeClass(
- 'avatar-' + option + '-img-zoom-in');
- $('#avatar-' + option).addClass(
- 'avatar-img-zoom-out');
- callback();
- });
- });
- }
-
- 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);
- dynworkflow.selectMainConfig(option);
- _setupGUIOnSelection(option, function() {
- dynworkflow.initTimeline();
- });
- }
-
- function _hideSelectionPanel() {
- var config = _getCurrentMainConfiguration();
- _deselectIcon(config);
- if (_isConfigurationComplete(config)) {
- _finishConfiguration(config, true);
- } else {
- _finishConfiguration(config, false);
- }
-
- _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, toFinish) {
- _setupCheckIcon(config, toFinish);
- _setupCheckIcon('avatar-' + config, toFinish);
-
- if (toFinish) {
- $('#' + config + '-edit .check-icon').show();
- } else {
- $('#' + config + '-edit .check-icon').hide();
- }
- if (_canRenderSignVideo()) {
- $('#ready-button').removeClass('disabled');
- } else {
- $('#ready-button').addClass('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, finishCallback) {
- $('#ready-button').fadeOut(300);
- $('.edit-container').fadeOut(300);
- _addZoomInToAvatar(option, function() {
- $('#selection-panel').fadeIn(300, function() {
- finishCallback();
- });
- });
- }
-
- 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') {
@@ -275,132 +47,34 @@
subConfigJSON[parseInt(step) - 1] = value;
}
- 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 _getRenderedAvatarUrl(userId, signName) {
- return api_url + '/public/' + userId + '/' + signName + ".webm";
+ function _parseTmpParameterJSON() {
+ parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON,
+ selectionPanel.isConfigurationComplete('right-hand'),
+ selectionPanel.isConfigurationComplete('left-hand'));
+ return parsedParameterJSON;
}
- function _showRenderedAvatar(parameterJSON) {
- var userId = parameterJSON['userId'];
- var signName = parameterJSON['sinal'];
- $("#render-avatar video").attr("src",
- _getRenderedAvatarUrl(userId, signName));
- $("#render-avatar").fadeIn(300);
- }
-
- function _controlVideo(elId, toPlay) {
- var videoSrc = $(elId).attr("src");
- if (typeof videoSrc == "undefined" ||
- (typeof videoSrc != "undefined" && videoSrc === ""))
- return;
- if (toPlay) {
- $(elId).get(0).play();
- } else {
- $(elId).get(0).pause();
- }
- }
-
- function _playVideo(elId) {
- _controlVideo(elId, true);
- }
-
- function _pauseVideo(elId) {
- _controlVideo(elId, false);
- }
-
function _showInitialScreen(toShow) {
if (toShow) {
$("#initial-screen").fadeIn(300);
- _playVideo("#initial-screen video");
+ videoHelper.play("#initial-screen video");
} else {
$("#initial-screen").hide();
- _pauseVideo("#initial-screen video");
+ videoHelper.pause("#initial-screen video");
}
}
- function _showConfigurationScreen(toShow) {
+ function _showApprovalScreen(toShow, parameterJSON) {
if (toShow) {
- $("#configuration-screen").show();
- _playVideo("#ref-video-container video");
+ $("#render-button-container .btn").hide();
+ $("#approval-button").show();
+ $("#approval-msg").show();
+ renderSign.showRenderedAvatar(parameterJSON);
} else {
- $("#configuration-screen").hide();
- _pauseVideo("#ref-video-container video");
+ $("#approval-button").hide();
+ $("#approval-msg").hide();
}
}
-
- function _showRenderScreen(toShow) {
- if (toShow) {
- $("#render-screen").fadeIn(300);
- _playVideo("#render-ref video");
- _playVideo("#render-avatar video");
- } else {
- $("#render-screen").hide();
- _pauseVideo("#render-ref video");
- _pauseVideo("#render-avatar video");
- }
- }
-
- function _setupRenderScreen() {
- _showConfigurationScreen(false);
- _showRenderScreen(true);
- $("#render-avatar").hide();
- $("#render-loading").fadeIn(300);
- $("#render-button-container .btn").hide();
- $("#finish-button").addClass("disabled");
- $("#finish-button").show();
-
- _submitParameterJSON(function() {
- $("#render-loading").fadeOut(300);
- $("#finish-button").removeClass("disabled");
- _showRenderedAvatar(parsedParameterJSON);
- });
- }
-
- function _setupApprovalScreen(parameterJSON) {
- $("#render-button-container .btn").hide();
- $("#approval-button").show();
- $("#approval-msg").show();
-
- _showRenderedAvatar(parameterJSON);
- _showRenderScreen(true);
- }
function _submitAnswer(task, deferred, status) {
var answer = _createAnswer(task, status);
@@ -409,44 +83,29 @@
} else {
_saveAnswer(task, deferred, answer);
}
- _showRenderScreen(false);
+ renderSign.showRenderScreen(false);
$("#thanks-screen").show();
}
- function _clearGUI() {
- articulation.clean();
- $(".selection-panel-option").removeAttr('select');
- $(".icon_container").removeAttr("select");
- $(".icon_container[complete=true]").each(
- function() {
- _unfinishConfiguration($(this).attr("name"), $(this).attr(
- "panel"));
- });
- }
-
function _setupMainScreen(task, deferred) {
var last_answer = task.info.last_answer;
var hasLastAnswer = typeof last_answer != "undefined";
if (hasLastAnswer) {
- _setupApprovalScreen(last_answer.parameter_json);
+ _showApprovalScreen(true, last_answer.parameter_json);
} else {
+ _showApprovalScreen(false);
_showInitialScreen(true);
}
-
$("#start-button").off("click").on("click", function() {
_showInitialScreen(false);
- _showConfigurationScreen(true);
+ configurationScreen.show(true);
});
$("#ready-button").off("click").on("click", function() {
if ($(this).hasClass('disabled')) {
event.preventDefault();
return;
}
- _setupRenderScreen();
- });
- $("#render-edit").off("click").on("click", function() {
- _showRenderScreen(false);
- _showConfigurationScreen(true);
+ renderSign.submit(_parseTmpParameterJSON());
});
$("#finish-button").off("click").on("click", function() {
if ($(this).hasClass('disabled')) {
@@ -461,9 +120,7 @@
}
function _setupGUI(task, deferred) {
- _clearGUI();
- _setupConfigurationPanel();
- _setupSelectionPanel();
+ configurationScreen.setup();
_setupMainScreen(task, deferred);
}
@@ -532,10 +189,12 @@
}
function _loadMainComponents() {
+ iconHelper.setup(base_url);
dynengine.load();
dynworkflow.load();
submitSign.setup(upload_signs_url);
teachedSigns.setup();
+ renderSign.setup(api_url);
_setupLoginContainer();
}
@@ -572,45 +231,11 @@
_updateTempParameterJSON(mainConfig, subConfig, step, value);
}
- wikilibras.hideSelectionPanel = function() {
- _hideSelectionPanel();
- }
-
- wikilibras.selectAnOption = function(parentId, el) {
- _selectAnOption(parentId, el);
- }
-
- wikilibras.enableIconCheck = function(container, isHover) {
- _enableIconCheck(container, isHover);
- }
-
- wikilibras.canHover = function(container) {
- return _canHover(container);
- }
-
- wikilibras.enableIconHover = function(container, isHover) {
- _enableIconHover(container, isHover);
- }
-
- wikilibras.getRenderedAvatarUrl = function(userId, signName) {
- return _getRenderedAvatarUrl(userId, signName);
- }
-
wikilibras.showTeachContainer = function() {
$(".sub-main-container").hide();
$("#teach-container").show();
}
- wikilibras.showSubmitSignContainer = function() {
- $(".sub-main-container").hide();
- $("#submit-sign-container").show();
- }
-
- wikilibras.showTeachedSignsContainer = function() {
- $(".sub-main-container").hide();
- $("#teached-signs-container").show();
- }
-
wikilibras.showTutorialContainer = function() {
$(".sub-main-container").hide();
$("#tutorial-container").show();
diff --git a/view/template.html b/view/template.html
index 9884cbf..89a8f5a 100755
--- a/view/template.html
+++ b/view/template.html
@@ -23,9 +23,9 @@
Ensinar
Enviar sinal
+ onclick="submitSign.show()">Enviar sinal
Sinais
+ onclick="teachedSigns.show()">Sinais
ensinados
Tutorial
@@ -76,21 +76,21 @@
Expressão
+ class="configuration-menu-label">Expressão
Mão direita
+ class="configuration-menu-label">Mão direita
Mão esquerda
+ class="configuration-menu-label">Mão esquerda
- 
