Commit e99cffae97b39125b64741feb65025afb3abcbb6
1 parent
35e767cd
Exists in
master
and in
1 other branch
Versão inicial do movimento circular.
Showing
31 changed files
with
520 additions
and
107 deletions
Show diff stats
main.py
| ... | ... | @@ -7,7 +7,6 @@ import os |
| 7 | 7 | import pyutil |
| 8 | 8 | |
| 9 | 9 | app = Flask(__name__) |
| 10 | -CORS(app) | |
| 11 | 10 | controller = None |
| 12 | 11 | |
| 13 | 12 | @app.route("/update_project") |
| ... | ... | @@ -55,6 +54,7 @@ def setup_controller(): |
| 55 | 54 | |
| 56 | 55 | def setup_static_files_service(app): |
| 57 | 56 | if not app.config['APACHE_HOST']: |
| 57 | + CORS(app) | |
| 58 | 58 | @app.route("/<path:path>") |
| 59 | 59 | def send_static_files(path): |
| 60 | 60 | root_dir = os.path.abspath(os.path.dirname(__file__)) | ... | ... |
view/assets/css/main.css
| ... | ... | @@ -317,11 +317,8 @@ ul.rig.columns-4 li { |
| 317 | 317 | width: 20%; |
| 318 | 318 | } |
| 319 | 319 | |
| 320 | -.selection-panel-body[mainconfig=right-hand] ul.rig.columns-2 li { | |
| 321 | - width: 60%; | |
| 322 | -} | |
| 323 | - | |
| 324 | -.selection-panel-body[mainconfig=left-hand] ul.rig.columns-2 li { | |
| 320 | +.selection-panel-body[mainconfig=right-hand] ul.rig.columns-1 li, | |
| 321 | + .selection-panel-body[mainconfig=left-hand] ul.rig.columns-1 li { | |
| 325 | 322 | width: 60%; |
| 326 | 323 | } |
| 327 | 324 | |
| ... | ... | @@ -373,10 +370,15 @@ ul.rig.columns-4 li { |
| 373 | 370 | |
| 374 | 371 | /* Sub-Configuration Panel */ |
| 375 | 372 | .subconfiguration-options { |
| 376 | - overflow-x: hidden; | |
| 373 | + overflow-x: scroll; | |
| 377 | 374 | white-space: nowrap; |
| 378 | 375 | } |
| 379 | 376 | |
| 377 | +.subconfiguration-options-container { | |
| 378 | + height: 45px; | |
| 379 | + overflow: hidden; | |
| 380 | +} | |
| 381 | + | |
| 380 | 382 | .subconfiguration-panel { |
| 381 | 383 | display: none; |
| 382 | 384 | padding: 10px; | ... | ... |
| ... | ... | @@ -0,0 +1,13 @@ |
| 1 | +(function(defaultConfigurationHandler, $, undefined) { | |
| 2 | + | |
| 3 | + defaultConfigurationHandler.setup = function(hand, subConfig, step) { | |
| 4 | + var baseId = '.selection-panel-body[mainConfig=' + hand + '][subConfig=' + | |
| 5 | + subConfig + '][step=' + step + ']'; | |
| 6 | + $(baseId + ' .selection-panel-option').off('click').on( | |
| 7 | + 'click', function() { | |
| 8 | + wikilibras.selectAnOption(baseId, this); | |
| 9 | + dynworkflow.userSelectedAnOption(); | |
| 10 | + }); | |
| 11 | + }; | |
| 12 | + | |
| 13 | +}(window.defaultConfigurationHandler = window.defaultConfigurationHandler || {}, jQuery)); | ... | ... |
view/assets/js/dynamic-selection-workflow.js
| ... | ... | @@ -101,9 +101,10 @@ |
| 101 | 101 | } |
| 102 | 102 | |
| 103 | 103 | function _selectSubConfig(subConfig) { |
| 104 | - if (currentSubConfigName == 'movimento') { | |
| 104 | + /*if (subConfig != 'movimento' && | |
| 105 | + currentSubConfigName == 'movimento') { | |
| 105 | 106 | _updateAndGetFirstMovementSubConfig(); |
| 106 | - } | |
| 107 | + }*/ | |
| 107 | 108 | currentSubConfigName = subConfig; |
| 108 | 109 | currentSubconfig = currentSubconfigParent[currentSubConfigName]; |
| 109 | 110 | currentStep = 0; |
| ... | ... | @@ -112,14 +113,14 @@ |
| 112 | 113 | |
| 113 | 114 | // It shows the next selection panel on the workflow |
| 114 | 115 | function _showNextSubConfig() { |
| 115 | - _walkOnTheWorklow(true); | |
| 116 | + _walkOnTheWorkflow(true); | |
| 116 | 117 | } |
| 117 | 118 | |
| 118 | 119 | function _showPreviousSubConfig() { |
| 119 | - _walkOnTheWorklow(false); | |
| 120 | + _walkOnTheWorkflow(false); | |
| 120 | 121 | } |
| 121 | 122 | |
| 122 | - function _walkOnTheWorklow(toForward) { | |
| 123 | + function _walkOnTheWorkflow(toForward) { | |
| 123 | 124 | currentStep = toForward ? currentStep + 1 : currentStep - 1; |
| 124 | 125 | |
| 125 | 126 | if (currentStep >= 0 && currentStep < currentSubconfig.length) { |
| ... | ... | @@ -127,7 +128,7 @@ |
| 127 | 128 | } else { |
| 128 | 129 | var nextSubConfig = _getNextSubConfig(toForward); |
| 129 | 130 | if (nextSubConfig != -1) { |
| 130 | - dynworkflow.selectSubConfig(nextSubConfig); | |
| 131 | + _selectSubConfig(nextSubConfig); | |
| 131 | 132 | } else { |
| 132 | 133 | wikilibras.hideSelectionPanel(); |
| 133 | 134 | } |
| ... | ... | @@ -144,17 +145,19 @@ |
| 144 | 145 | |
| 145 | 146 | // Timeline functions |
| 146 | 147 | function _selectTimelineIcon(mainConfig, subConfig) { |
| 147 | - var icon_id = '.subconfiguration-panel[mainConfig=' + mainConfig + | |
| 148 | - '] .icon_container[json_name=' + subConfig + ']'; | |
| 148 | + var baseId = '.subconfiguration-panel[mainConfig=' + mainConfig + '] .subconfiguration-options'; | |
| 149 | + var iconContainer = '.icon_container[json_name=' + subConfig + ']'; | |
| 150 | + var iconId = baseId + ' ' + iconContainer; | |
| 149 | 151 | |
| 150 | - var previousSelected = $('.subconfiguration-panel[mainConfig=' + mainConfig + | |
| 151 | - '] .icon_container[select=true]').attr('json_name'); | |
| 152 | + var previousSelected = $(baseId + ' .icon_container[select=true]').attr('json_name'); | |
| 152 | 153 | if (typeof previousSelected != 'undefined') { |
| 153 | 154 | _deselectTimelineIcon(mainConfig, previousSelected); |
| 154 | 155 | } |
| 155 | 156 | |
| 156 | - wikilibras.enableIconHover($(icon_id), true); | |
| 157 | - $(icon_id).attr('select', true); | |
| 157 | + wikilibras.enableIconHover($(iconId), true); | |
| 158 | + $(iconId).attr('select', true); | |
| 159 | + // scrollTo icon | |
| 160 | + $(baseId).scrollTo(iconContainer, {'offset': -60, 'duration': 750}); | |
| 158 | 161 | } |
| 159 | 162 | |
| 160 | 163 | function _deselectTimelineIcon(mainConfig, subConfig) { |
| ... | ... | @@ -197,9 +200,14 @@ |
| 197 | 200 | }); |
| 198 | 201 | } |
| 199 | 202 | |
| 200 | - function _setupTimelineIcons(timelineBaseId) { | |
| 203 | + function _setupTimelineIcons(timelineBaseId, toUpdate) { | |
| 204 | + if (!toUpdate) { | |
| 205 | + $(timelineBaseId).show(); | |
| 206 | + $(timelineBaseId + " .subconfiguration-options").scrollTo(0, 0); | |
| 207 | + return; | |
| 208 | + } | |
| 209 | + | |
| 201 | 210 | $(timelineBaseId + ' .icon_container[json_name]').attr("active", "false"); |
| 202 | - | |
| 203 | 211 | for (var name in currentSubconfigParent) { |
| 204 | 212 | $(timelineBaseId + ' .icon_container[json_name=' + name + ']').attr("active", "true"); |
| 205 | 213 | } |
| ... | ... | @@ -207,21 +215,20 @@ |
| 207 | 215 | if (preprocessedMainConfig == 'hand') { |
| 208 | 216 | $(timelineBaseId + ' .icon_container[json_name=movimento]').attr("active", "true"); |
| 209 | 217 | _setupCheckIcon(mainConfig, 'movimento'); |
| 210 | - _selectTimelineIcon(mainConfig, currentSubConfigName); | |
| 211 | 218 | } |
| 212 | - | |
| 219 | + _selectTimelineIcon(mainConfig, currentSubConfigName); | |
| 213 | 220 | _setupTimelineListeners(timelineBaseId); |
| 214 | 221 | $(timelineBaseId).show(); |
| 215 | 222 | } |
| 216 | 223 | |
| 217 | - function _setupTimeline() { | |
| 224 | + function _setupTimeline(toUpdate) { | |
| 218 | 225 | var timelineBaseId = '.subconfiguration-panel[mainConfig=' + mainConfig + ']'; |
| 219 | 226 | if (_isTimelineLoaded()) { |
| 220 | - $(timelineBaseId).show(); | |
| 227 | + _setupTimelineIcons(timelineBaseId, toUpdate); | |
| 221 | 228 | } else { |
| 222 | 229 | dynengine.render(baseUrl, '/' + preprocessedMainConfig + |
| 223 | 230 | '/timeline.html', '#selection-panel', false, function() { |
| 224 | - _setupTimelineIcons(timelineBaseId); | |
| 231 | + _setupTimelineIcons(timelineBaseId, true); | |
| 225 | 232 | }); |
| 226 | 233 | } |
| 227 | 234 | } |
| ... | ... | @@ -236,9 +243,12 @@ |
| 236 | 243 | currentStep = 0; |
| 237 | 244 | |
| 238 | 245 | _showCurrentSubconfig(); |
| 246 | + }; | |
| 247 | + | |
| 248 | + dynworkflow.finishMainConfigSetup = function(subConfig) { | |
| 239 | 249 | // hide the timeline on the first subconfiguration for "hand" |
| 240 | 250 | if (preprocessedMainConfig != 'hand' || _isTimelineLoaded()) { |
| 241 | - _setupTimeline(); | |
| 251 | + _setupTimeline(false); | |
| 242 | 252 | } |
| 243 | 253 | }; |
| 244 | 254 | |
| ... | ... | @@ -250,13 +260,13 @@ |
| 250 | 260 | currentStep = 0; |
| 251 | 261 | |
| 252 | 262 | _showCurrentSubconfig(); |
| 253 | - _setupTimeline(); | |
| 263 | + _setupTimeline(true); | |
| 254 | 264 | }; |
| 255 | 265 | |
| 256 | 266 | dynworkflow.selectSubConfig = function(subConfig) { |
| 257 | 267 | _selectSubConfig(subConfig); |
| 258 | 268 | }; |
| 259 | - | |
| 269 | + | |
| 260 | 270 | dynworkflow.userSelectedAnOption = function() { |
| 261 | 271 | _userSelectedAnOption(); |
| 262 | 272 | }; | ... | ... |
| ... | ... | @@ -0,0 +1,210 @@ |
| 1 | +/*! | |
| 2 | + * jQuery.scrollTo | |
| 3 | + * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com | |
| 4 | + * Licensed under MIT | |
| 5 | + * http://flesler.blogspot.com/2007/10/jqueryscrollto.html | |
| 6 | + * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery | |
| 7 | + * @author Ariel Flesler | |
| 8 | + * @version 2.1.2 | |
| 9 | + */ | |
| 10 | +;(function(factory) { | |
| 11 | + 'use strict'; | |
| 12 | + if (typeof define === 'function' && define.amd) { | |
| 13 | + // AMD | |
| 14 | + define(['jquery'], factory); | |
| 15 | + } else if (typeof module !== 'undefined' && module.exports) { | |
| 16 | + // CommonJS | |
| 17 | + module.exports = factory(require('jquery')); | |
| 18 | + } else { | |
| 19 | + // Global | |
| 20 | + factory(jQuery); | |
| 21 | + } | |
| 22 | +})(function($) { | |
| 23 | + 'use strict'; | |
| 24 | + | |
| 25 | + var $scrollTo = $.scrollTo = function(target, duration, settings) { | |
| 26 | + return $(window).scrollTo(target, duration, settings); | |
| 27 | + }; | |
| 28 | + | |
| 29 | + $scrollTo.defaults = { | |
| 30 | + axis:'xy', | |
| 31 | + duration: 0, | |
| 32 | + limit:true | |
| 33 | + }; | |
| 34 | + | |
| 35 | + function isWin(elem) { | |
| 36 | + return !elem.nodeName || | |
| 37 | + $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1; | |
| 38 | + } | |
| 39 | + | |
| 40 | + $.fn.scrollTo = function(target, duration, settings) { | |
| 41 | + if (typeof duration === 'object') { | |
| 42 | + settings = duration; | |
| 43 | + duration = 0; | |
| 44 | + } | |
| 45 | + if (typeof settings === 'function') { | |
| 46 | + settings = { onAfter:settings }; | |
| 47 | + } | |
| 48 | + if (target === 'max') { | |
| 49 | + target = 9e9; | |
| 50 | + } | |
| 51 | + | |
| 52 | + settings = $.extend({}, $scrollTo.defaults, settings); | |
| 53 | + // Speed is still recognized for backwards compatibility | |
| 54 | + duration = duration || settings.duration; | |
| 55 | + // Make sure the settings are given right | |
| 56 | + var queue = settings.queue && settings.axis.length > 1; | |
| 57 | + if (queue) { | |
| 58 | + // Let's keep the overall duration | |
| 59 | + duration /= 2; | |
| 60 | + } | |
| 61 | + settings.offset = both(settings.offset); | |
| 62 | + settings.over = both(settings.over); | |
| 63 | + | |
| 64 | + return this.each(function() { | |
| 65 | + // Null target yields nothing, just like jQuery does | |
| 66 | + if (target === null) return; | |
| 67 | + | |
| 68 | + var win = isWin(this), | |
| 69 | + elem = win ? this.contentWindow || window : this, | |
| 70 | + $elem = $(elem), | |
| 71 | + targ = target, | |
| 72 | + attr = {}, | |
| 73 | + toff; | |
| 74 | + | |
| 75 | + switch (typeof targ) { | |
| 76 | + // A number will pass the regex | |
| 77 | + case 'number': | |
| 78 | + case 'string': | |
| 79 | + if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) { | |
| 80 | + targ = both(targ); | |
| 81 | + // We are done | |
| 82 | + break; | |
| 83 | + } | |
| 84 | + // Relative/Absolute selector | |
| 85 | + targ = win ? $(targ) : $(targ, elem); | |
| 86 | + /* falls through */ | |
| 87 | + case 'object': | |
| 88 | + if (targ.length === 0) return; | |
| 89 | + // DOMElement / jQuery | |
| 90 | + if (targ.is || targ.style) { | |
| 91 | + // Get the real position of the target | |
| 92 | + toff = (targ = $(targ)).offset(); | |
| 93 | + } | |
| 94 | + } | |
| 95 | + | |
| 96 | + var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset; | |
| 97 | + | |
| 98 | + $.each(settings.axis.split(''), function(i, axis) { | |
| 99 | + var Pos = axis === 'x' ? 'Left' : 'Top', | |
| 100 | + pos = Pos.toLowerCase(), | |
| 101 | + key = 'scroll' + Pos, | |
| 102 | + prev = $elem[key](), | |
| 103 | + max = $scrollTo.max(elem, axis); | |
| 104 | + | |
| 105 | + if (toff) {// jQuery / DOMElement | |
| 106 | + attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]); | |
| 107 | + | |
| 108 | + // If it's a dom element, reduce the margin | |
| 109 | + if (settings.margin) { | |
| 110 | + attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0; | |
| 111 | + attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0; | |
| 112 | + } | |
| 113 | + | |
| 114 | + attr[key] += offset[pos] || 0; | |
| 115 | + | |
| 116 | + if (settings.over[pos]) { | |
| 117 | + // Scroll to a fraction of its width/height | |
| 118 | + attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos]; | |
| 119 | + } | |
| 120 | + } else { | |
| 121 | + var val = targ[pos]; | |
| 122 | + // Handle percentage values | |
| 123 | + attr[key] = val.slice && val.slice(-1) === '%' ? | |
| 124 | + parseFloat(val) / 100 * max | |
| 125 | + : val; | |
| 126 | + } | |
| 127 | + | |
| 128 | + // Number or 'number' | |
| 129 | + if (settings.limit && /^\d+$/.test(attr[key])) { | |
| 130 | + // Check the limits | |
| 131 | + attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max); | |
| 132 | + } | |
| 133 | + | |
| 134 | + // Don't waste time animating, if there's no need. | |
| 135 | + if (!i && settings.axis.length > 1) { | |
| 136 | + if (prev === attr[key]) { | |
| 137 | + // No animation needed | |
| 138 | + attr = {}; | |
| 139 | + } else if (queue) { | |
| 140 | + // Intermediate animation | |
| 141 | + animate(settings.onAfterFirst); | |
| 142 | + // Don't animate this axis again in the next iteration. | |
| 143 | + attr = {}; | |
| 144 | + } | |
| 145 | + } | |
| 146 | + }); | |
| 147 | + | |
| 148 | + animate(settings.onAfter); | |
| 149 | + | |
| 150 | + function animate(callback) { | |
| 151 | + var opts = $.extend({}, settings, { | |
| 152 | + // The queue setting conflicts with animate() | |
| 153 | + // Force it to always be true | |
| 154 | + queue: true, | |
| 155 | + duration: duration, | |
| 156 | + complete: callback && function() { | |
| 157 | + callback.call(elem, targ, settings); | |
| 158 | + } | |
| 159 | + }); | |
| 160 | + $elem.animate(attr, opts); | |
| 161 | + } | |
| 162 | + }); | |
| 163 | + }; | |
| 164 | + | |
| 165 | + // Max scrolling position, works on quirks mode | |
| 166 | + // It only fails (not too badly) on IE, quirks mode. | |
| 167 | + $scrollTo.max = function(elem, axis) { | |
| 168 | + var Dim = axis === 'x' ? 'Width' : 'Height', | |
| 169 | + scroll = 'scroll'+Dim; | |
| 170 | + | |
| 171 | + if (!isWin(elem)) | |
| 172 | + return elem[scroll] - $(elem)[Dim.toLowerCase()](); | |
| 173 | + | |
| 174 | + var size = 'client' + Dim, | |
| 175 | + doc = elem.ownerDocument || elem.document, | |
| 176 | + html = doc.documentElement, | |
| 177 | + body = doc.body; | |
| 178 | + | |
| 179 | + return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]); | |
| 180 | + }; | |
| 181 | + | |
| 182 | + function both(val) { | |
| 183 | + return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val }; | |
| 184 | + } | |
| 185 | + | |
| 186 | + // Add special hooks so that window scroll properties can be animated | |
| 187 | + $.Tween.propHooks.scrollLeft = | |
| 188 | + $.Tween.propHooks.scrollTop = { | |
| 189 | + get: function(t) { | |
| 190 | + return $(t.elem)[t.prop](); | |
| 191 | + }, | |
| 192 | + set: function(t) { | |
| 193 | + var curr = this.get(t); | |
| 194 | + // If interrupt is true and user scrolled, stop animating | |
| 195 | + if (t.options.interrupt && t._last && t._last !== curr) { | |
| 196 | + return $(t.elem).stop(); | |
| 197 | + } | |
| 198 | + var next = Math.round(t.now); | |
| 199 | + // Don't waste CPU | |
| 200 | + // Browsers don't render floating point scroll | |
| 201 | + if (curr !== next) { | |
| 202 | + $(t.elem)[t.prop](next); | |
| 203 | + t._last = this.get(t); | |
| 204 | + } | |
| 205 | + } | |
| 206 | + }; | |
| 207 | + | |
| 208 | + // AMD requirement | |
| 209 | + return $scrollTo; | |
| 210 | +}); | ... | ... |
view/assets/js/tmpJSONParser.js
| ... | ... | @@ -24,7 +24,13 @@ |
| 24 | 24 | } |
| 25 | 25 | |
| 26 | 26 | function _parseParameterValue(value) { |
| 27 | - return !isNaN(value) ? parseInt(value) : value; | |
| 27 | + if (typeof value == "string" && value.toLowerCase() == 'true') { | |
| 28 | + return true; | |
| 29 | + } else if (typeof value == "string" && value.toLowerCase() == 'false') { | |
| 30 | + return false; | |
| 31 | + } else { | |
| 32 | + return !isNaN(value) ? parseInt(value) : value; | |
| 33 | + } | |
| 28 | 34 | } |
| 29 | 35 | |
| 30 | 36 | function _parseTempFacialParameterJSON(tmpJSON) { | ... | ... |
view/assets/js/wikilibras.js
| ... | ... | @@ -81,7 +81,7 @@ |
| 81 | 81 | function _isConfigurationComplete(config) { |
| 82 | 82 | var baseId = '.subconfiguration-panel[mainConfig=' + config + ']'; |
| 83 | 83 | var total_config = $(baseId + ' .icon_container[json_name][active=true]').length; |
| 84 | - var completed_config = $(baseId + ' .icon_container[complete=true]').length; | |
| 84 | + var completed_config = $(baseId + ' .icon_container[active=true][complete=true]').length; | |
| 85 | 85 | return completed_config != 0 && total_config == completed_config; |
| 86 | 86 | } |
| 87 | 87 | |
| ... | ... | @@ -165,8 +165,9 @@ |
| 165 | 165 | function _showSelectionPanel(option) { |
| 166 | 166 | _clearPreviousSelection(); |
| 167 | 167 | _selectIcon(option, true); |
| 168 | - _setupGUIOnSelection(option); | |
| 169 | - | |
| 168 | + _setupGUIOnSelection(option, function() { | |
| 169 | + dynworkflow.finishMainConfigSetup(option); | |
| 170 | + }); | |
| 170 | 171 | dynworkflow.selectMainConfig(option); |
| 171 | 172 | } |
| 172 | 173 | |
| ... | ... | @@ -174,7 +175,9 @@ |
| 174 | 175 | var config = _getCurrentMainConfiguration(); |
| 175 | 176 | _deselectIcon(config); |
| 176 | 177 | if (_isConfigurationComplete(config)) { |
| 177 | - _finishConfiguration(config); | |
| 178 | + _finishConfiguration(config, true); | |
| 179 | + } else { | |
| 180 | + _finishConfiguration(config, false); | |
| 178 | 181 | } |
| 179 | 182 | |
| 180 | 183 | _addZoomOutToAvatar(config, function() { |
| ... | ... | @@ -189,13 +192,19 @@ |
| 189 | 192 | (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand')); |
| 190 | 193 | } |
| 191 | 194 | |
| 192 | - function _finishConfiguration(config) { | |
| 193 | - _setupCheckIcon(config, true); | |
| 194 | - _setupCheckIcon('avatar-' + config, true); | |
| 195 | - $('#' + config + '-edit .check-icon').show(); | |
| 196 | - | |
| 195 | + function _finishConfiguration(config, toFinish) { | |
| 196 | + _setupCheckIcon(config, toFinish); | |
| 197 | + _setupCheckIcon('avatar-' + config, toFinish); | |
| 198 | + | |
| 199 | + if (toFinish) { | |
| 200 | + $('#' + config + '-edit .check-icon').show(); | |
| 201 | + } else { | |
| 202 | + $('#' + config + '-edit .check-icon').hide(); | |
| 203 | + } | |
| 197 | 204 | if (_canRenderSignVideo()) { |
| 198 | 205 | $('#ready-button').removeClass('disabled'); |
| 206 | + } else { | |
| 207 | + $('#ready-button').addClass('disabled'); | |
| 199 | 208 | } |
| 200 | 209 | } |
| 201 | 210 | |
| ... | ... | @@ -209,11 +218,13 @@ |
| 209 | 218 | } |
| 210 | 219 | } |
| 211 | 220 | |
| 212 | - function _setupGUIOnSelection(option) { | |
| 221 | + function _setupGUIOnSelection(option, finishCallback) { | |
| 213 | 222 | $('#ready-button').fadeOut(300); |
| 214 | 223 | $('.edit-container').fadeOut(300); |
| 215 | 224 | _addZoomInToAvatar(option, function() { |
| 216 | - $('#selection-panel').fadeIn(300); | |
| 225 | + $('#selection-panel').fadeIn(300, function() { | |
| 226 | + finishCallback(); | |
| 227 | + }); | |
| 217 | 228 | }); |
| 218 | 229 | } |
| 219 | 230 | |
| ... | ... | @@ -274,7 +285,7 @@ |
| 274 | 285 | // Render Screen |
| 275 | 286 | function _submitParameterJSON(callback) { |
| 276 | 287 | parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON); |
| 277 | - //console.log(parsedParameterJSON); | |
| 288 | + console.log(parsedParameterJSON); | |
| 278 | 289 | |
| 279 | 290 | $.ajax({ |
| 280 | 291 | type: 'POST', | ... | ... |
view/conf/selection-workflow-json
| ... | ... | @@ -15,10 +15,11 @@ |
| 15 | 15 | "articulacao" : ["passo-1", "passo-2"], |
| 16 | 16 | "configuracao" : ["passo-1", "passo-2"], |
| 17 | 17 | "orientacao" : ["passo-1"], |
| 18 | + "plano": ["passo-1"], | |
| 18 | 19 | "raio" : ["passo-1"], |
| 19 | 20 | "velocidade" : ["passo-1"], |
| 20 | - "lado_oposto" : ["passo-1"], | |
| 21 | - "sentido_inverso" : ["passo-1"] | |
| 21 | + "sentido_inverso" : ["passo-1"], | |
| 22 | + "lado_oposto" : ["passo-1"] | |
| 22 | 23 | }, |
| 23 | 24 | "retilineo" : { |
| 24 | 25 | "articulacao-retilineo": ["passo-1", "passo-2", "passo-3", "passo-4"], | ... | ... |
view/facial/timeline.html
| ... | ... | @@ -2,23 +2,22 @@ |
| 2 | 2 | <div class="arrow icon_container col-sm-1" name="left-arrow"> |
| 3 | 3 | <img src="{{ server }}/img/left-arrow-icon.png" /> |
| 4 | 4 | </div> |
| 5 | - | |
| 6 | - <div id="facial-subconfiguration-options" | |
| 7 | - class="subconfiguration-options col-sm-10"> | |
| 8 | - <div class="icon_container" name="facial-expression" | |
| 9 | - json_name="expressao"> | |
| 10 | - <img src="{{ server }}/img/facial-expression-icon.png" /> | |
| 11 | - </div> | |
| 12 | - <div class="icon_container" name="facial-expression-velocity" | |
| 13 | - json_name="transicao"> | |
| 14 | - <img src="{{ server }}/img/facial-expression-velocity-icon.png" /> | |
| 15 | - </div> | |
| 16 | - <div class="icon_container" name="facial-expression-duration" | |
| 17 | - json_name="duracao"> | |
| 18 | - <img src="{{ server }}/img/facial-expression-duration-icon.png" /> | |
| 5 | + <div class="subconfiguration-options-container col-sm-10"> | |
| 6 | + <div class="subconfiguration-options col-sm-12"> | |
| 7 | + <div class="icon_container" name="facial-expression" | |
| 8 | + json_name="expressao"> | |
| 9 | + <img src="{{ server }}/img/facial-expression-icon.png" /> | |
| 10 | + </div> | |
| 11 | + <div class="icon_container" name="facial-expression-velocity" | |
| 12 | + json_name="transicao"> | |
| 13 | + <img src="{{ server }}/img/facial-expression-velocity-icon.png" /> | |
| 14 | + </div> | |
| 15 | + <div class="icon_container" name="facial-expression-duration" | |
| 16 | + json_name="duracao"> | |
| 17 | + <img src="{{ server }}/img/facial-expression-duration-icon.png" /> | |
| 18 | + </div> | |
| 19 | 19 | </div> |
| 20 | 20 | </div> |
| 21 | - | |
| 22 | 21 | <div class="arrow icon_container col-sm-1" name="right-arrow"> |
| 23 | 22 | <img src="{{ server }}/img/right-arrow-icon.png" /> |
| 24 | 23 | </div> | ... | ... |
| ... | ... | @@ -0,0 +1,23 @@ |
| 1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
| 2 | + subConfig="lado_oposto" step="1"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>O movimento começa pelo lado oposto?</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 9 | + preload="metadata" value="false" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video>Não</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 14 | + preload="metadata" value="true" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video>Sim</li> | |
| 18 | + </ul> | |
| 19 | + </div> | |
| 20 | +</div> | |
| 21 | +<script type="text/javascript"> | |
| 22 | + defaultConfigurationHandler.setup("{{ hand }}", "lado_oposto", "1"); | |
| 23 | +</script> | ... | ... |
view/hand/movimento/passo-1.html
| ... | ... | @@ -4,24 +4,23 @@ |
| 4 | 4 | <h8>Escolha o movimento mais parecido</h8> |
| 5 | 5 | </div> |
| 6 | 6 | <div class="selection-panel-inner-body"> |
| 7 | - <ul class="rig columns-2"> | |
| 8 | - <li><img | |
| 9 | - class="box-panel-option selection-panel-option" | |
| 10 | - src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li> | |
| 11 | - | |
| 12 | - <li><img | |
| 13 | - class="box-panel-option selection-panel-option" | |
| 14 | - src="{{ server }}/img/mov/CALAR.gif" value="retilineo" />Retilíneo</li> | |
| 7 | + <ul class="rig columns-1"> | |
| 8 | + <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
| 9 | + preload="metadata" value="pontual" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video> Pontual</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
| 14 | + preload="metadata" value="retilineo" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video> Retilíneo</li> | |
| 18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 19 | + preload="metadata" value="circular" | |
| 20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 21 | + <source type="video/webm"> | |
| 22 | + </video> Circular</li> | |
| 15 | 23 | <!-- |
| 16 | - <li><video src="{{ server }}/img/mov/PONTUAL.webm" | |
| 17 | - preload="metadata" value="pontual" | |
| 18 | - class="box-panel-option selection-panel-option" autoplay loop> | |
| 19 | - <source type="video/webm"> | |
| 20 | - </video> Pontual</li> | |
| 21 | - <li><img class="box-panel-option selection-panel-option" | |
| 22 | - src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li> | |
| 23 | - <li><img class="box-panel-option selection-panel-option" | |
| 24 | - src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li> | |
| 25 | 24 | <li><img class="box-panel-option selection-panel-option" |
| 26 | 25 | src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li> |
| 27 | 26 | <li><img class="box-panel-option selection-panel-option" |
| ... | ... | @@ -35,5 +34,5 @@ |
| 35 | 34 | </div> |
| 36 | 35 | </div> |
| 37 | 36 | <script type="text/javascript"> |
| 38 | - movement.setup("{{ server }}", "{{ hand }}"); | |
| 37 | + movement.setup("{{ server }}", "{{ hand }}"); | |
| 39 | 38 | </script> | ... | ... |
| ... | ... | @@ -0,0 +1,29 @@ |
| 1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
| 2 | + subConfig="plano" step="1"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Escolha o plano do movimento</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 9 | + preload="metadata" value="frente-esquerda" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video>Frente - Esquerda</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 14 | + preload="metadata" value="frente-cima" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video>Frente - Cima | |
| 18 | + </li> | |
| 19 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 20 | + preload="metadata" value="esquerda-cima" | |
| 21 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 22 | + <source type="video/webm"> | |
| 23 | + </video>Esquerda - Cima</li> | |
| 24 | + </ul> | |
| 25 | + </div> | |
| 26 | +</div> | |
| 27 | +<script type="text/javascript"> | |
| 28 | + defaultConfigurationHandler.setup("{{ hand }}", "plano", "1"); | |
| 29 | +</script> | ... | ... |
| ... | ... | @@ -0,0 +1,28 @@ |
| 1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
| 2 | + subConfig="raio" step="1"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Escolha o tamanho do raio do movimento</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 9 | + preload="metadata" value="pequeno" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video>Pequeno</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 14 | + preload="metadata" value="normal" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video>Médio</li> | |
| 18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 19 | + preload="metadata" value="grande" | |
| 20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 21 | + <source type="video/webm"> | |
| 22 | + </video>Grande</li> | |
| 23 | + </ul> | |
| 24 | + </div> | |
| 25 | +</div> | |
| 26 | +<script type="text/javascript"> | |
| 27 | + defaultConfigurationHandler.setup("{{ hand }}", "raio", "1"); | |
| 28 | +</script> | ... | ... |
| ... | ... | @@ -0,0 +1,23 @@ |
| 1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
| 2 | + subConfig="sentido_inverso" step="1"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Escolha o sentido do movimento</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 9 | + preload="metadata" value="false" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video>Horário</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 14 | + preload="metadata" value="true" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video>Anti-horário</li> | |
| 18 | + </ul> | |
| 19 | + </div> | |
| 20 | +</div> | |
| 21 | +<script type="text/javascript"> | |
| 22 | + defaultConfigurationHandler.setup("{{ hand }}", "sentido_inverso", "1"); | |
| 23 | +</script> | ... | ... |
view/hand/timeline.html
| ... | ... | @@ -2,36 +2,64 @@ |
| 2 | 2 | <div class="arrow icon_container col-sm-1" name="left-arrow"> |
| 3 | 3 | <img src="{{ server }}/img/left-arrow-icon.png" /> |
| 4 | 4 | </div> |
| 5 | - <div class="subconfiguration-options col-sm-10"> | |
| 6 | - <div class="icon_container" name="hand-moviment" json_name="movimento"> | |
| 7 | - <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
| 8 | - </div> | |
| 9 | - <!-- articulacao --> | |
| 10 | - <div class="icon_container" name="hand-articulation" | |
| 11 | - json_name="articulacao"> | |
| 12 | - <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 13 | - </div> | |
| 14 | - <div class="icon_container" name="hand-articulation" | |
| 15 | - json_name="articulacao-retilineo"> | |
| 16 | - <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 17 | - </div> | |
| 18 | - <!-- configuracao --> | |
| 19 | - <div class="icon_container" name="hand-fingers-position" | |
| 20 | - json_name="configuracao"> | |
| 21 | - <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 22 | - </div> | |
| 23 | - <div class="icon_container" name="hand-fingers-position" | |
| 24 | - json_name="configuracao-retilineo"> | |
| 25 | - <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 26 | - </div> | |
| 27 | - <!-- orientacao --> | |
| 28 | - <div class="icon_container" name="hand-orientation" | |
| 29 | - json_name="orientacao"> | |
| 30 | - <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 31 | - </div> | |
| 32 | - <div class="icon_container" name="hand-orientation" | |
| 33 | - json_name="orientacao-retilineo"> | |
| 34 | - <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 5 | + <div class="subconfiguration-options-container col-sm-10"> | |
| 6 | + <div class="subconfiguration-options col-sm-12"> | |
| 7 | + <div class="icon_container" name="hand-moviment" | |
| 8 | + json_name="movimento"> | |
| 9 | + <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
| 10 | + </div> | |
| 11 | + <!-- articulacao --> | |
| 12 | + <div class="icon_container" name="hand-articulation" | |
| 13 | + json_name="articulacao"> | |
| 14 | + <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 15 | + </div> | |
| 16 | + <div class="icon_container" name="hand-articulation" | |
| 17 | + json_name="articulacao-retilineo"> | |
| 18 | + <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 19 | + </div> | |
| 20 | + <!-- configuracao --> | |
| 21 | + <div class="icon_container" name="hand-fingers-position" | |
| 22 | + json_name="configuracao"> | |
| 23 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 24 | + </div> | |
| 25 | + <div class="icon_container" name="hand-fingers-position" | |
| 26 | + json_name="configuracao-retilineo"> | |
| 27 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 28 | + </div> | |
| 29 | + <!-- orientacao --> | |
| 30 | + <div class="icon_container" name="hand-orientation" | |
| 31 | + json_name="orientacao"> | |
| 32 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 33 | + </div> | |
| 34 | + <div class="icon_container" name="hand-orientation" | |
| 35 | + json_name="orientacao-retilineo"> | |
| 36 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 37 | + </div> | |
| 38 | + <!-- plano --> | |
| 39 | + <div class="icon_container" name="hand-moviment-plane" | |
| 40 | + json_name="plano"> | |
| 41 | + <img src="{{ server }}/img/hand-moviment-plane-icon.png" /> | |
| 42 | + </div> | |
| 43 | + <!-- raio --> | |
| 44 | + <div class="icon_container" name="hand-moviment-radius" | |
| 45 | + json_name="raio"> | |
| 46 | + <img src="{{ server }}/img/hand-moviment-radius-icon.png" /> | |
| 47 | + </div> | |
| 48 | + <!-- velocidade --> | |
| 49 | + <div class="icon_container" name="hand-moviment-velocity" | |
| 50 | + json_name="velocidade"> | |
| 51 | + <img src="{{ server }}/img/hand-moviment-velocity-icon.png" /> | |
| 52 | + </div> | |
| 53 | + <!-- sentido_inverso --> | |
| 54 | + <div class="icon_container" name="hand-moviment-direction" | |
| 55 | + json_name="sentido_inverso"> | |
| 56 | + <img src="{{ server }}/img/hand-moviment-direction-icon.png" /> | |
| 57 | + </div> | |
| 58 | + <!-- lado_oposto --> | |
| 59 | + <div class="icon_container" name="hand-moviment-direction" | |
| 60 | + json_name="lado_oposto"> | |
| 61 | + <img src="{{ server }}/img/hand-moviment-direction-icon.png" /> | |
| 62 | + </div> | |
| 35 | 63 | </div> |
| 36 | 64 | </div> |
| 37 | 65 | <div class="arrow icon_container col-sm-1" name="right-arrow"> | ... | ... |
| ... | ... | @@ -0,0 +1,28 @@ |
| 1 | +<div class="selection-panel-body" mainConfig="{{ hand }}" | |
| 2 | + subConfig="velocidade" step="1"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Escolha a velocidade do movimento</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 9 | + preload="metadata" value="lento" | |
| 10 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 11 | + <source type="video/webm"> | |
| 12 | + </video>Lento</li> | |
| 13 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 14 | + preload="metadata" value="normal" | |
| 15 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 16 | + <source type="video/webm"> | |
| 17 | + </video>Normal</li> | |
| 18 | + <li><video src="{{ server }}/img/mov/CIRCULAR.webm" | |
| 19 | + preload="metadata" value="rapido" | |
| 20 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 21 | + <source type="video/webm"> | |
| 22 | + </video>Rápido</li> | |
| 23 | + </ul> | |
| 24 | + </div> | |
| 25 | +</div> | |
| 26 | +<script type="text/javascript"> | |
| 27 | + defaultConfigurationHandler.setup("{{ hand }}", "velocidade", "1"); | |
| 28 | +</script> | ... | ... |
3.41 KB
722 Bytes
710 Bytes
3.45 KB
944 Bytes
940 Bytes
2.47 KB
646 Bytes
644 Bytes
2.63 KB
1.02 KB
1.01 KB
view/img/mov/CALAR.gif
469 KB
No preview for this file type
view/template.html
| ... | ... | @@ -173,12 +173,15 @@ |
| 173 | 173 | </div> |
| 174 | 174 | </div> |
| 175 | 175 | |
| 176 | +<script src="{{ server }}/assets/js/jquery.scrollTo.js"></script> | |
| 176 | 177 | <script src="{{ server }}/assets/js/js.cookie.js"></script> |
| 178 | + | |
| 177 | 179 | <script src="{{ server }}/assets/js/facial.js"></script> |
| 178 | 180 | <script src="{{ server }}/assets/js/movement.js"></script> |
| 179 | 181 | <script src="{{ server }}/assets/js/articulation.js"></script> |
| 180 | 182 | <script src="{{ server }}/assets/js/configuration.js"></script> |
| 181 | 183 | <script src="{{ server }}/assets/js/orientation.js"></script> |
| 184 | +<script src="{{ server }}/assets/js/defaultConfigurationHandler.js"></script> | |
| 182 | 185 | <script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script> |
| 183 | 186 | <script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script> |
| 184 | 187 | <script src="{{ server }}/assets/js/tmpJSONParser.js"></script> | ... | ... |