Commit 0f26c3be35b7b4d43bf189f8b2b9347ca2a99f0f
1 parent
c2750136
Exists in
master
and in
1 other branch
innital dynamic engine
Showing
13 changed files
with
785 additions
and
472 deletions
Show diff stats
settings_local.py
| ... | ... | @@ -5,6 +5,11 @@ SERVER_PORT = 8003 |
| 5 | 5 | AGREEMENT_NUMBER = 2 |
| 6 | 6 | API_HOST = "http://0.0.0.0:5001" |
| 7 | 7 | |
| 8 | +# Apache Configuration | |
| 9 | +APACHE_HOST = False | |
| 10 | +APACHE_HOST_ENDPOINT = "/wikilibras-backend" | |
| 11 | +APACHE_STATIC_FILES_ENDPOINT = "/wikilibras" | |
| 12 | + | |
| 8 | 13 | # PyBossa Configuration |
| 9 | 14 | PYBOSSA_APP_NAME = "WikiLibras" |
| 10 | 15 | PYBOSSA_APP_SHORT_NAME = "wikilibras" | ... | ... |
| ... | ... | @@ -0,0 +1,72 @@ |
| 1 | +(function(dynengine, $, undefined) { | |
| 2 | + var setup = undefined; | |
| 3 | + | |
| 4 | + function _setup() { | |
| 5 | + setup = { | |
| 6 | + 'mao_direita': { | |
| 7 | + 'movimentos': { | |
| 8 | + 'pontual': { | |
| 9 | + 'timeline': [ | |
| 10 | + { | |
| 11 | + 'ordem': 1, | |
| 12 | + 'timeline_icon': 'a', | |
| 13 | + 'templates': [ | |
| 14 | + { | |
| 15 | + 'url': 'http://url.com', | |
| 16 | + 'ordem': 1 | |
| 17 | + }, | |
| 18 | + { | |
| 19 | + 'url': 'http://url2.com', | |
| 20 | + 'ordem': 2 | |
| 21 | + } | |
| 22 | + ] | |
| 23 | + } | |
| 24 | + ] | |
| 25 | + }, | |
| 26 | + 'circular': {} | |
| 27 | + } | |
| 28 | + } | |
| 29 | + }; | |
| 30 | + }; | |
| 31 | + | |
| 32 | + _preprocessHtml = function(data, url) { | |
| 33 | + return data.replace(/{{ server }}/g, url); | |
| 34 | + }; | |
| 35 | + | |
| 36 | + dynengine.render = function(serverUrl, templatePath, target) { | |
| 37 | + var url = serverUrl + templatePath; | |
| 38 | + $.get(url, function(data) { | |
| 39 | + // TODO replace or append boolean | |
| 40 | + $(target).append(_preprocessHtml(data, serverUrl)); | |
| 41 | + }); | |
| 42 | + }, | |
| 43 | + | |
| 44 | + dynengine.clean = function(target) { | |
| 45 | + $(target).html(''); | |
| 46 | + }, | |
| 47 | + | |
| 48 | + dynengine.load = function() { | |
| 49 | + var url = $('#server-url').data('url'); | |
| 50 | + $('.config-panel-option[name=right-hand]').bind('click', function() { | |
| 51 | + console.log('click right hand on panel'); | |
| 52 | + }); | |
| 53 | + | |
| 54 | + $('#avatar-body-right-hand').bind('click', function() { | |
| 55 | + console.log('click avatar hand'); | |
| 56 | + $('#selection-panel').load(url + '/' + 'right-hand/movements.html', function () { | |
| 57 | + $('.movimento-pontual').bind('click', function() { | |
| 58 | + console.log('movimento pontual'); | |
| 59 | + dynengine.clean('#selection-panel'); | |
| 60 | + dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel'); | |
| 61 | + dynengine.render(url, '/right-hand/pontual/passo-1.html', '#selection-panel'); | |
| 62 | + dynengine.render(url, '/right-hand/pontual/passo-2.html', '#selection-panel'); | |
| 63 | + dynengine.render(url, '/right-hand/pontual/passo-3.html', '#selection-panel'); | |
| 64 | + | |
| 65 | + }); | |
| 66 | + }); | |
| 67 | + }); | |
| 68 | + | |
| 69 | + | |
| 70 | + }; | |
| 71 | + | |
| 72 | +}(window.dynengine = window.wikilibras || {}, jQuery)); | ... | ... |
view/assets/js/wikilibras.js
| ... | ... | @@ -158,7 +158,7 @@ |
| 158 | 158 | $(".selection-panel-body").hide(); |
| 159 | 159 | $(".subconfiguration-options").hide(); |
| 160 | 160 | $(".subconfiguration-panel").hide(); |
| 161 | - | |
| 161 | + | |
| 162 | 162 | if (_isSelectingState()) { |
| 163 | 163 | var current_option = _getCurrentMainConfiguration(); |
| 164 | 164 | _selectIcon(current_option, false); |
| ... | ... | @@ -269,7 +269,7 @@ |
| 269 | 269 | function _hasMultipleConfigurations(config) { |
| 270 | 270 | return $("#" + config).is("[multiple-config]"); |
| 271 | 271 | } |
| 272 | - | |
| 272 | + | |
| 273 | 273 | function _handleFingersPositionSubConfiguration(main_config) { |
| 274 | 274 | var finger_group = $( |
| 275 | 275 | "#" |
| ... | ... | @@ -353,7 +353,7 @@ |
| 353 | 353 | if (next_config != "end") { |
| 354 | 354 | _selectSubConfigurationIcon(next_config, true); |
| 355 | 355 | $("#" + next_config).show(); |
| 356 | - | |
| 356 | + | |
| 357 | 357 | var main_config = _getCurrentMainConfiguration(); |
| 358 | 358 | if (_isHandMovimentComplete(main_config)) { |
| 359 | 359 | $(".subconfiguration-panel").fadeIn(300); |
| ... | ... | @@ -390,7 +390,7 @@ |
| 390 | 390 | return $("#" + main_config |
| 391 | 391 | + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0; |
| 392 | 392 | } |
| 393 | - | |
| 393 | + | |
| 394 | 394 | function _setupHandSelectionPanel(option) { |
| 395 | 395 | var previous_select = $("#" + option |
| 396 | 396 | + "-subconfiguration-options .icon_container[select=true]").length > 0; |
| ... | ... | @@ -409,7 +409,7 @@ |
| 409 | 409 | _selectIcon("hand-moviment", true, option + "-moviment"); |
| 410 | 410 | $("#" + option + "-moviment").fadeIn(300); |
| 411 | 411 | } |
| 412 | - | |
| 412 | + | |
| 413 | 413 | $("#" + option + "-subconfiguration-options").fadeIn(300); |
| 414 | 414 | if (_isHandMovimentComplete(option)) { |
| 415 | 415 | $(".subconfiguration-panel").fadeIn(300); |
| ... | ... | @@ -486,10 +486,10 @@ |
| 486 | 486 | moviment_parameter_json[current_main_config][config] = value; |
| 487 | 487 | } |
| 488 | 488 | } |
| 489 | - | |
| 489 | + | |
| 490 | 490 | function _readConfigValue(el, config_name) { |
| 491 | 491 | if (typeof config_name == "undefined" || config_name == "articulacao") return; |
| 492 | - | |
| 492 | + | |
| 493 | 493 | return $(el).attr("value"); |
| 494 | 494 | } |
| 495 | 495 | |
| ... | ... | @@ -500,34 +500,34 @@ |
| 500 | 500 | $("#" + current_config_id + " .selection-panel-option[select=true]") |
| 501 | 501 | .removeAttr("select"); |
| 502 | 502 | $(el).attr("select", true); |
| 503 | - | |
| 503 | + | |
| 504 | 504 | var config_value = _readConfigValue(el, current_config_name); |
| 505 | 505 | _updateParameterJSON(current_config_name, config_value); |
| 506 | 506 | } |
| 507 | 507 | |
| 508 | 508 | function _setupSelectionPanel() { |
| 509 | - $("#selection-panel .x").off("click").on("click", function() { | |
| 510 | - _hideSelectionPanel(); | |
| 511 | - }); | |
| 512 | - $(".selection-panel-body .selection-panel-option").off("click").on( | |
| 513 | - "click", function() { | |
| 514 | - _selectConfig(this); | |
| 515 | - var next = _getNextSubConfiguration(); | |
| 516 | - _showSubConfiguration(next, true); | |
| 517 | - }); | |
| 518 | - $(".subconfiguration-options .icon_container").off("click").on("click", | |
| 519 | - function() { | |
| 520 | - var subconfig = $(this).attr("panel"); | |
| 521 | - _showSubConfiguration(subconfig, false); | |
| 522 | - }); | |
| 523 | - $(".arrow[name=right-arrow]").off("click").on("click", function() { | |
| 524 | - var next = _getNextSubConfiguration(); | |
| 525 | - _showSubConfiguration(next, false); | |
| 526 | - }); | |
| 527 | - $(".arrow[name=left-arrow]").off("click").on("click", function() { | |
| 528 | - var previous = _getPreviousSubConfiguration(); | |
| 529 | - _showSubConfiguration(previous, false); | |
| 530 | - }); | |
| 509 | + // $("#selection-panel .x").off("click").on("click", function() { | |
| 510 | + // _hideSelectionPanel(); | |
| 511 | + // }); | |
| 512 | + // $(".selection-panel-body .selection-panel-option").off("click").on( | |
| 513 | + // "click", function() { | |
| 514 | + // _selectConfig(this); | |
| 515 | + // var next = _getNextSubConfiguration(); | |
| 516 | + // _showSubConfiguration(next, true); | |
| 517 | + // }); | |
| 518 | + // $(".subconfiguration-options .icon_container").off("click").on("click", | |
| 519 | + // function() { | |
| 520 | + // var subconfig = $(this).attr("panel"); | |
| 521 | + // _showSubConfiguration(subconfig, false); | |
| 522 | + // }); | |
| 523 | + // $(".arrow[name=right-arrow]").off("click").on("click", function() { | |
| 524 | + // var next = _getNextSubConfiguration(); | |
| 525 | + // _showSubConfiguration(next, false); | |
| 526 | + // }); | |
| 527 | + // $(".arrow[name=left-arrow]").off("click").on("click", function() { | |
| 528 | + // var previous = _getPreviousSubConfiguration(); | |
| 529 | + // _showSubConfiguration(previous, false); | |
| 530 | + // }); | |
| 531 | 531 | } |
| 532 | 532 | |
| 533 | 533 | // Render Screen |
| ... | ... | @@ -587,7 +587,7 @@ |
| 587 | 587 | "panel")); |
| 588 | 588 | }); |
| 589 | 589 | } |
| 590 | - | |
| 590 | + | |
| 591 | 591 | function _setupMainScreen(task, deferred) { |
| 592 | 592 | $("#initial-screen").fadeIn(300); |
| 593 | 593 | $("#start-button").off("click").on("click", function() { |
| ... | ... | @@ -621,7 +621,7 @@ |
| 621 | 621 | _setupConfigurationPanel(); |
| 622 | 622 | _setupSelectionPanel(); |
| 623 | 623 | _setupMainScreen(task, deferred); |
| 624 | - | |
| 624 | + | |
| 625 | 625 | articulation.setup(base_url); |
| 626 | 626 | } |
| 627 | 627 | |
| ... | ... | @@ -636,7 +636,7 @@ |
| 636 | 636 | deferred.resolve(); |
| 637 | 637 | }, 2500); |
| 638 | 638 | });*/ |
| 639 | - | |
| 639 | + | |
| 640 | 640 | setTimeout(function() { |
| 641 | 641 | $("#thanks-screen").hide(); |
| 642 | 642 | deferred.resolve(); |
| ... | ... | @@ -672,9 +672,9 @@ |
| 672 | 672 | api_url = apihost; |
| 673 | 673 | _run(projectname); |
| 674 | 674 | }; |
| 675 | - | |
| 675 | + | |
| 676 | 676 | wikilibras.updateParameterJSON = function(config, value) { |
| 677 | 677 | _updateParameterJSON(config, value); |
| 678 | 678 | } |
| 679 | 679 | |
| 680 | -}(window.wikilibras = window.wikilibras || {}, jQuery)); | |
| 681 | 680 | \ No newline at end of file |
| 681 | +}(window.wikilibras = window.wikilibras || {}, jQuery)); | ... | ... |
view/hand-configuration.html
| 1 | -{% macro selectionPanel(name) -%} {% if name == 'right-hand' %} {% set | |
| 2 | -fingers_position_dir = "cmd" %} {% set orientation_dir = "ord" %} {% | |
| 3 | -else %} {% set fingers_position_dir = "cme" %} {% set orientation_dir = | |
| 4 | -"ore" %} {% endif %} | |
| 5 | - | |
| 6 | -<div id="{{ name }}-moviment" class="selection-panel-body" | |
| 1 | +<div id="right-hand-moviment" class="selection-panel-body" | |
| 7 | 2 | name="movimento"> |
| 8 | 3 | <div class="panel-header"> |
| 9 | 4 | <h8>Escolha o movimento mais parecido</h8> |
| 10 | 5 | </div> |
| 11 | 6 | <div class="selection-panel-inner-body"> |
| 12 | 7 | <ul class="rig columns-2"> |
| 13 | - <li><img class="box-panel-option selection-panel-option" | |
| 8 | + <li class='movimento-pontual'><img class="box-panel-option selection-panel-option" | |
| 14 | 9 | src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li> |
| 15 | - <!-- | |
| 10 | + <!-- | |
| 16 | 11 | <li><video src="{{ server }}/img/mov/PONTUAL.webm" |
| 17 | 12 | preload="metadata" value="pontual" |
| 18 | 13 | class="box-panel-option selection-panel-option" autoplay loop> |
| ... | ... | @@ -34,423 +29,3 @@ else %} {% set fingers_position_dir = "cme" %} {% set orientation_dir = |
| 34 | 29 | </ul> |
| 35 | 30 | </div> |
| 36 | 31 | </div> |
| 37 | - | |
| 38 | -<div id="{{ name }}-articulation" multiple-config> | |
| 39 | - <div id="{{ name }}-articulation-1" class="selection-panel-body" | |
| 40 | - style="display: none;" next="{{ name }}-articulation-2" sub-config> | |
| 41 | - <div class="panel-header"> | |
| 42 | - <h8>Onde é feito o sinal?</h8> | |
| 43 | - </div> | |
| 44 | - <div class="selection-panel-inner-body"> | |
| 45 | - <div data-x="" data-y="" | |
| 46 | - class="module-x-y grid gray-background {{ name }}-gray-front-avatar active"> | |
| 47 | - <div class=grid-selectors> | |
| 48 | - <div class="grid-row row-number-1" data-y=1> | |
| 49 | - <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 50 | - <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 51 | - <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 52 | - <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 53 | - <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 54 | - <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 55 | - <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 56 | - <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 57 | - <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 58 | - <div class="ball-selector selection-panel-option ball-10" | |
| 59 | - data-x=10></div> | |
| 60 | - </div> | |
| 61 | - <div class="grid-row row-number-2" data-y=2> | |
| 62 | - <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 63 | - <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 64 | - <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 65 | - <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 66 | - <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 67 | - <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 68 | - <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 69 | - <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 70 | - <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 71 | - <div class="ball-selector selection-panel-option ball-10" | |
| 72 | - data-x=10></div> | |
| 73 | - </div> | |
| 74 | - <div class="grid-row row-number-3" data-y=3> | |
| 75 | - <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 76 | - <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 77 | - <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 78 | - <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 79 | - <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 80 | - <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 81 | - <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 82 | - <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 83 | - <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 84 | - <div class="ball-selector selection-panel-option ball-10" | |
| 85 | - data-x=10></div> | |
| 86 | - </div> | |
| 87 | - <div class="grid-row row-number-4" data-y=4> | |
| 88 | - <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 89 | - <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 90 | - <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 91 | - <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 92 | - <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 93 | - <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 94 | - <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 95 | - <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 96 | - <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 97 | - <div class="ball-selector selection-panel-option ball-10" | |
| 98 | - data-x=10></div> | |
| 99 | - </div> | |
| 100 | - <div class="grid-row row-number-5" data-y=5> | |
| 101 | - <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 102 | - <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 103 | - <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 104 | - <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 105 | - <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 106 | - <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 107 | - <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 108 | - <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 109 | - <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 110 | - <div class="ball-selector selection-panel-option ball-10" | |
| 111 | - data-x=10></div> | |
| 112 | - </div> | |
| 113 | - </div> | |
| 114 | - </div> | |
| 115 | - </div> | |
| 116 | - </div> | |
| 117 | - | |
| 118 | - <div id="{{ name }}-articulation-2" class="selection-panel-body" | |
| 119 | - style="display: none;" next="end" sub-config name="articulacao"> | |
| 120 | - <div class="panel-header"> | |
| 121 | - <h8>Escolha a distância entre a mão e o corpo</h8> | |
| 122 | - </div> | |
| 123 | - <div class="selection-panel-inner-body"> | |
| 124 | - <div data-z="" class="module-z grid gray-background gray-side-avatar"> | |
| 125 | - <div class="grid-selectors pull-right"> | |
| 126 | - <div class="grid-row row-number-1"> | |
| 127 | - <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 128 | - <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 129 | - <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 130 | - </div> | |
| 131 | - <div class="grid-row row-number-2"> | |
| 132 | - <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 133 | - <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 134 | - <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 135 | - </div> | |
| 136 | - <div class="grid-row row-number-3"> | |
| 137 | - <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 138 | - <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 139 | - <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 140 | - </div> | |
| 141 | - <div class="grid-row row-number-4"> | |
| 142 | - <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 143 | - <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 144 | - <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 145 | - </div> | |
| 146 | - <div class="grid-row row-number-5"> | |
| 147 | - <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 148 | - </div> | |
| 149 | - </div> | |
| 150 | - </div> | |
| 151 | - </div> | |
| 152 | - </div> | |
| 153 | -</div> | |
| 154 | - | |
| 155 | -<div id="{{ name }}-fingers-position" multiple-config> | |
| 156 | - <div id="{{ name }}-fingers-position-1" class="selection-panel-body" | |
| 157 | - style="display: none;" next="{{ name }}-fingers-position-2" sub-config> | |
| 158 | - <div class="panel-header"> | |
| 159 | - <h8>Escolha a posição mais parecida dos dedos</h8> | |
| 160 | - </div> | |
| 161 | - <div class="selection-panel-inner-body"> | |
| 162 | - <ul class="rig columns-3"> | |
| 163 | - <li><img class="box-panel-option selection-panel-option" | |
| 164 | - src="{{ server }}/img/{{ fingers_position_dir }}/0007.png" | |
| 165 | - group="0" /> 0.</li> | |
| 166 | - <li><img class="box-panel-option selection-panel-option" | |
| 167 | - src="{{ server }}/img/{{ fingers_position_dir }}/0014.png" | |
| 168 | - group="1" /> 1.</li> | |
| 169 | - <li><img class="box-panel-option selection-panel-option" | |
| 170 | - src="{{ server }}/img/{{ fingers_position_dir }}/0045.png" | |
| 171 | - group="2" /> 2.</li> | |
| 172 | - <li><img class="box-panel-option selection-panel-option" | |
| 173 | - src="{{ server }}/img/{{ fingers_position_dir }}/0048.png" | |
| 174 | - group="3" /> 3.</li> | |
| 175 | - <li><img class="box-panel-option selection-panel-option" | |
| 176 | - src="{{ server }}/img/{{ fingers_position_dir }}/0040.png" | |
| 177 | - group="4" /> 4.</li> | |
| 178 | - <li><img class="box-panel-option selection-panel-option" | |
| 179 | - src="{{ server }}/img/{{ fingers_position_dir }}/0000.png" | |
| 180 | - group="5" /> 5.</li> | |
| 181 | - </ul> | |
| 182 | - </div> | |
| 183 | - </div> | |
| 184 | - <div id="{{ name }}-fingers-position-2" class="selection-panel-body" | |
| 185 | - style="display: none;" next="end" sub-config name="configuracao"> | |
| 186 | - <div class="panel-header"> | |
| 187 | - <h8>Escolha a posição dos dedos</h8> | |
| 188 | - </div> | |
| 189 | - <div class="selection-panel-inner-body"> | |
| 190 | - <div class="finger-group" group="0"> | |
| 191 | - <ul class="rig columns-4"> | |
| 192 | - <li><img class="box-panel-option selection-panel-option" | |
| 193 | - src="{{ server }}/img/{{ fingers_position_dir }}/0001.png" | |
| 194 | - value="1" /> 1.</li> | |
| 195 | - <li><img class="box-panel-option selection-panel-option" | |
| 196 | - src="{{ server }}/img/{{ fingers_position_dir }}/0002.png" | |
| 197 | - value="2" /> 2.</li> | |
| 198 | - <li><img class="box-panel-option selection-panel-option" | |
| 199 | - src="{{ server }}/img/{{ fingers_position_dir }}/0007.png" | |
| 200 | - value="7" /> 3.</li> | |
| 201 | - <li><img class="box-panel-option selection-panel-option" | |
| 202 | - src="{{ server }}/img/{{ fingers_position_dir }}/0008.png" | |
| 203 | - value="8" /> 4.</li> | |
| 204 | - <li><img class="box-panel-option selection-panel-option" | |
| 205 | - src="{{ server }}/img/{{ fingers_position_dir }}/0009.png" | |
| 206 | - value="9" /> 5.</li> | |
| 207 | - <li><img class="box-panel-option selection-panel-option" | |
| 208 | - src="{{ server }}/img/{{ fingers_position_dir }}/0010.png" | |
| 209 | - value="10" /> 6.</li> | |
| 210 | - <li><img class="box-panel-option selection-panel-option" | |
| 211 | - src="{{ server }}/img/{{ fingers_position_dir }}/0011.png" | |
| 212 | - value="11" /> 7.</li> | |
| 213 | - <li><img class="box-panel-option selection-panel-option" | |
| 214 | - src="{{ server }}/img/{{ fingers_position_dir }}/0016.png" | |
| 215 | - value="16" /> 8.</li> | |
| 216 | - <li><img class="box-panel-option selection-panel-option" | |
| 217 | - src="{{ server }}/img/{{ fingers_position_dir }}/0017.png" | |
| 218 | - value="17" /> 9.</li> | |
| 219 | - <li><img class="box-panel-option selection-panel-option" | |
| 220 | - src="{{ server }}/img/{{ fingers_position_dir }}/0018.png" | |
| 221 | - value="18" /> 10.</li> | |
| 222 | - <li><img class="box-panel-option selection-panel-option" | |
| 223 | - src="{{ server }}/img/{{ fingers_position_dir }}/0019.png" | |
| 224 | - value="19" /> 11.</li> | |
| 225 | - <li><img class="box-panel-option selection-panel-option" | |
| 226 | - src="{{ server }}/img/{{ fingers_position_dir }}/0020.png" | |
| 227 | - value="20" /> 12.</li> | |
| 228 | - <li><img class="box-panel-option selection-panel-option" | |
| 229 | - src="{{ server }}/img/{{ fingers_position_dir }}/0021.png" | |
| 230 | - value="21" /> 13.</li> | |
| 231 | - <li><img class="box-panel-option selection-panel-option" | |
| 232 | - src="{{ server }}/img/{{ fingers_position_dir }}/0022.png" | |
| 233 | - value="22" /> 14.</li> | |
| 234 | - <li><img class="box-panel-option selection-panel-option" | |
| 235 | - src="{{ server }}/img/{{ fingers_position_dir }}/0023.png" | |
| 236 | - value="23" /> 15.</li> | |
| 237 | - <li><img class="box-panel-option selection-panel-option" | |
| 238 | - src="{{ server }}/img/{{ fingers_position_dir }}/0024.png" | |
| 239 | - value="24" /> 16.</li> | |
| 240 | - <li><img class="box-panel-option selection-panel-option" | |
| 241 | - src="{{ server }}/img/{{ fingers_position_dir }}/0058.png" | |
| 242 | - value="58" /> 17.</li> | |
| 243 | - <li><img class="box-panel-option selection-panel-option" | |
| 244 | - src="{{ server }}/img/{{ fingers_position_dir }}/0059.png" | |
| 245 | - value="59" /> 18.</li> | |
| 246 | - <li><img class="box-panel-option selection-panel-option" | |
| 247 | - src="{{ server }}/img/{{ fingers_position_dir }}/0060.png" | |
| 248 | - value="60" /> 19.</li> | |
| 249 | - </ul> | |
| 250 | - </div> | |
| 251 | - <div class="finger-group" group="1"> | |
| 252 | - <ul class="rig columns-4"> | |
| 253 | - <li><img class="box-panel-option selection-panel-option" | |
| 254 | - src="{{ server }}/img/{{ fingers_position_dir }}/0003.png" | |
| 255 | - value="3" /> 1.</li> | |
| 256 | - <li><img class="box-panel-option selection-panel-option" | |
| 257 | - src="{{ server }}/img/{{ fingers_position_dir }}/0005.png" | |
| 258 | - value="5" /> 2.</li> | |
| 259 | - <li><img class="box-panel-option selection-panel-option" | |
| 260 | - src="{{ server }}/img/{{ fingers_position_dir }}/0006.png" | |
| 261 | - value="6" /> 3.</li> | |
| 262 | - <li><img class="box-panel-option selection-panel-option" | |
| 263 | - src="{{ server }}/img/{{ fingers_position_dir }}/0012.png" | |
| 264 | - value="12" /> 4.</li> | |
| 265 | - <li><img class="box-panel-option selection-panel-option" | |
| 266 | - src="{{ server }}/img/{{ fingers_position_dir }}/0013.png" | |
| 267 | - value="13" /> 5.</li> | |
| 268 | - <li><img class="box-panel-option selection-panel-option" | |
| 269 | - src="{{ server }}/img/{{ fingers_position_dir }}/0014.png" | |
| 270 | - value="14" /> 6.</li> | |
| 271 | - <li><img class="box-panel-option selection-panel-option" | |
| 272 | - src="{{ server }}/img/{{ fingers_position_dir }}/0030.png" | |
| 273 | - value="30" /> 7.</li> | |
| 274 | - <li><img class="box-panel-option selection-panel-option" | |
| 275 | - src="{{ server }}/img/{{ fingers_position_dir }}/0052.png" | |
| 276 | - value="52" /> 8.</li> | |
| 277 | - </ul> | |
| 278 | - </div> | |
| 279 | - <div class="finger-group" group="2"> | |
| 280 | - <ul class="rig columns-4"> | |
| 281 | - <li><img class="box-panel-option selection-panel-option" | |
| 282 | - src="{{ server }}/img/{{ fingers_position_dir }}/0004.png" | |
| 283 | - value="4" /> 1.</li> | |
| 284 | - <li><img class="box-panel-option selection-panel-option" | |
| 285 | - src="{{ server }}/img/{{ fingers_position_dir }}/0015.png" | |
| 286 | - value="15" /> 2.</li> | |
| 287 | - <li><img class="box-panel-option selection-panel-option" | |
| 288 | - src="{{ server }}/img/{{ fingers_position_dir }}/0029.png" | |
| 289 | - value="29" /> 3.</li> | |
| 290 | - <li><img class="box-panel-option selection-panel-option" | |
| 291 | - src="{{ server }}/img/{{ fingers_position_dir }}/0031.png" | |
| 292 | - value="31" /> 4.</li> | |
| 293 | - <li><img class="box-panel-option selection-panel-option" | |
| 294 | - src="{{ server }}/img/{{ fingers_position_dir }}/0032.png" | |
| 295 | - value="32" /> 5.</li> | |
| 296 | - <li><img class="box-panel-option selection-panel-option" | |
| 297 | - src="{{ server }}/img/{{ fingers_position_dir }}/0035.png" | |
| 298 | - value="35" /> 6.</li> | |
| 299 | - <li><img class="box-panel-option selection-panel-option" | |
| 300 | - src="{{ server }}/img/{{ fingers_position_dir }}/0036.png" | |
| 301 | - value="36" /> 7.</li> | |
| 302 | - <li><img class="box-panel-option selection-panel-option" | |
| 303 | - src="{{ server }}/img/{{ fingers_position_dir }}/0045.png" | |
| 304 | - value="45" /> 8.</li> | |
| 305 | - <li><img class="box-panel-option selection-panel-option" | |
| 306 | - src="{{ server }}/img/{{ fingers_position_dir }}/0051.png" | |
| 307 | - value="51" /> 9.</li> | |
| 308 | - </ul> | |
| 309 | - </div> | |
| 310 | - <div class="finger-group" group="3"> | |
| 311 | - <ul class="rig columns-4"> | |
| 312 | - <li><img class="box-panel-option selection-panel-option" | |
| 313 | - src="{{ server }}/img/{{ fingers_position_dir }}/0033.png" | |
| 314 | - value="33" /> 1.</li> | |
| 315 | - <li><img class="box-panel-option selection-panel-option" | |
| 316 | - src="{{ server }}/img/{{ fingers_position_dir }}/0034.png" | |
| 317 | - value="34" /> 2.</li> | |
| 318 | - <li><img class="box-panel-option selection-panel-option" | |
| 319 | - src="{{ server }}/img/{{ fingers_position_dir }}/0037.png" | |
| 320 | - value="37" /> 3.</li> | |
| 321 | - <li><img class="box-panel-option selection-panel-option" | |
| 322 | - src="{{ server }}/img/{{ fingers_position_dir }}/0039.png" | |
| 323 | - value="39" /> 4.</li> | |
| 324 | - <li><img class="box-panel-option selection-panel-option" | |
| 325 | - src="{{ server }}/img/{{ fingers_position_dir }}/0043.png" | |
| 326 | - value="43" /> 5.</li> | |
| 327 | - <li><img class="box-panel-option selection-panel-option" | |
| 328 | - src="{{ server }}/img/{{ fingers_position_dir }}/0044.png" | |
| 329 | - value="44" /> 6.</li> | |
| 330 | - <li><img class="box-panel-option selection-panel-option" | |
| 331 | - src="{{ server }}/img/{{ fingers_position_dir }}/0046.png" | |
| 332 | - value="46" /> 7.</li> | |
| 333 | - <li><img class="box-panel-option selection-panel-option" | |
| 334 | - src="{{ server }}/img/{{ fingers_position_dir }}/0047.png" | |
| 335 | - value="47" /> 8.</li> | |
| 336 | - <li><img class="box-panel-option selection-panel-option" | |
| 337 | - src="{{ server }}/img/{{ fingers_position_dir }}/0048.png" | |
| 338 | - value="48" /> 9.</li> | |
| 339 | - <li><img class="box-panel-option selection-panel-option" | |
| 340 | - src="{{ server }}/img/{{ fingers_position_dir }}/0049.png" | |
| 341 | - value="49" /> 10.</li> | |
| 342 | - <li><img class="box-panel-option selection-panel-option" | |
| 343 | - src="{{ server }}/img/{{ fingers_position_dir }}/0050.png" | |
| 344 | - value="50" /> 11.</li> | |
| 345 | - </ul> | |
| 346 | - </div> | |
| 347 | - <div class="finger-group" group="4"> | |
| 348 | - <ul class="rig columns-4"> | |
| 349 | - <li><img class="box-panel-option selection-panel-option" | |
| 350 | - src="{{ server }}/img/{{ fingers_position_dir }}/0038.png" | |
| 351 | - value="38" /> 1.</li> | |
| 352 | - <li><img class="box-panel-option selection-panel-option" | |
| 353 | - src="{{ server }}/img/{{ fingers_position_dir }}/0040.png" | |
| 354 | - value="40" /> 2.</li> | |
| 355 | - <li><img class="box-panel-option selection-panel-option" | |
| 356 | - src="{{ server }}/img/{{ fingers_position_dir }}/0041.png" | |
| 357 | - value="41" /> 3.</li> | |
| 358 | - <li><img class="box-panel-option selection-panel-option" | |
| 359 | - src="{{ server }}/img/{{ fingers_position_dir }}/0042.png" | |
| 360 | - value="42" /> 4.</li> | |
| 361 | - </ul> | |
| 362 | - </div> | |
| 363 | - <div class="finger-group" group="5"> | |
| 364 | - <ul class="rig columns-4"> | |
| 365 | - <li><img class="box-panel-option selection-panel-option" | |
| 366 | - src="{{ server }}/img/{{ fingers_position_dir }}/0025.png" | |
| 367 | - value="25" /> 1.</li> | |
| 368 | - <li><img class="box-panel-option selection-panel-option" | |
| 369 | - src="{{ server }}/img/{{ fingers_position_dir }}/0026.png" | |
| 370 | - value="26" /> 2.</li> | |
| 371 | - <li><img class="box-panel-option selection-panel-option" | |
| 372 | - src="{{ server }}/img/{{ fingers_position_dir }}/0027.png" | |
| 373 | - value="27" /> 3.</li> | |
| 374 | - <li><img class="box-panel-option selection-panel-option" | |
| 375 | - src="{{ server }}/img/{{ fingers_position_dir }}/0028.png" | |
| 376 | - value="28" /> 4.</li> | |
| 377 | - <li><img class="box-panel-option selection-panel-option" | |
| 378 | - src="{{ server }}/img/{{ fingers_position_dir }}/0053.png" | |
| 379 | - value="53" /> 5.</li> | |
| 380 | - <li><img class="box-panel-option selection-panel-option" | |
| 381 | - src="{{ server }}/img/{{ fingers_position_dir }}/0054.png" | |
| 382 | - value="54" /> 6.</li> | |
| 383 | - <li><img class="box-panel-option selection-panel-option" | |
| 384 | - src="{{ server }}/img/{{ fingers_position_dir }}/0055.png" | |
| 385 | - value="55" /> 7.</li> | |
| 386 | - <li><img class="box-panel-option selection-panel-option" | |
| 387 | - src="{{ server }}/img/{{ fingers_position_dir }}/0056.png" | |
| 388 | - value="56" /> 8.</li> | |
| 389 | - <li><img class="box-panel-option selection-panel-option" | |
| 390 | - src="{{ server }}/img/{{ fingers_position_dir }}/0057.png" | |
| 391 | - value="57" /> 9.</li> | |
| 392 | - </ul> | |
| 393 | - </div> | |
| 394 | - </div> | |
| 395 | - </div> | |
| 396 | -</div> | |
| 397 | - | |
| 398 | -<div id="{{ name }}-orientation" class="selection-panel-body" | |
| 399 | - name="orientacao"> | |
| 400 | - <div class="panel-header"> | |
| 401 | - <h8>Palma da mão</h8> | |
| 402 | - </div> | |
| 403 | - <div class="selection-panel-inner-body"> | |
| 404 | - <ul class="rig columns-3"> | |
| 405 | - <li><img class="box-panel-option selection-panel-option" | |
| 406 | - src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68" />1.</li> | |
| 407 | - <li><img class="box-panel-option selection-panel-option" | |
| 408 | - src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66" />2.</li> | |
| 409 | - <li><img class="box-panel-option selection-panel-option" | |
| 410 | - src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64" />3.</li> | |
| 411 | - <li><img class="box-panel-option selection-panel-option" | |
| 412 | - src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2" />4.</li> | |
| 413 | - <li><img class="box-panel-option selection-panel-option" | |
| 414 | - src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9" />5.</li> | |
| 415 | - <li><img class="box-panel-option selection-panel-option" | |
| 416 | - src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16" />6.</li> | |
| 417 | - <li><img class="box-panel-option selection-panel-option" | |
| 418 | - src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92" />7.</li> | |
| 419 | - <li><img class="box-panel-option selection-panel-option" | |
| 420 | - src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90" />8.</li> | |
| 421 | - <li><img class="box-panel-option selection-panel-option" | |
| 422 | - src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88" />9.</li> | |
| 423 | - <li><img class="box-panel-option selection-panel-option" | |
| 424 | - src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4" />10.</li> | |
| 425 | - <li><img class="box-panel-option selection-panel-option" | |
| 426 | - src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11" />11.</li> | |
| 427 | - <li><img class="box-panel-option selection-panel-option" | |
| 428 | - src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18" />12.</li> | |
| 429 | - </ul> | |
| 430 | - </div> | |
| 431 | -</div> | |
| 432 | -{%- endmacro %} {%- macro subconfigPanel(name) -%} | |
| 433 | -<div id="{{ name }}-subconfiguration-options" | |
| 434 | - class="subconfiguration-options col-sm-10"> | |
| 435 | - <div class="icon_container" name="hand-moviment" | |
| 436 | - panel="{{ name }}-moviment" previous="{{ name }}-moviment" | |
| 437 | - next="{{ name }}-articulation"> | |
| 438 | - <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
| 439 | - </div> | |
| 440 | - <div class="icon_container" name="hand-articulation" | |
| 441 | - panel="{{ name }}-articulation" previous="{{ name }}-moviment" | |
| 442 | - next="{{ name }}-fingers-position"> | |
| 443 | - <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 444 | - </div> | |
| 445 | - <div class="icon_container" name="hand-fingers-position" | |
| 446 | - panel="{{ name }}-fingers-position" previous="{{ name }}-articulation" | |
| 447 | - next="{{ name }}-orientation"> | |
| 448 | - <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 449 | - </div> | |
| 450 | - <div class="icon_container" name="hand-orientation" | |
| 451 | - panel="{{ name }}-orientation" previous="{{ name }}-fingers-position" | |
| 452 | - next="end"> | |
| 453 | - <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 454 | - </div> | |
| 455 | -</div> | |
| 456 | -{%- endmacro %} | ... | ... |
No preview for this file type
| ... | ... | @@ -0,0 +1,31 @@ |
| 1 | +<div id="right-hand-moviment" class="selection-panel-body" | |
| 2 | + name="movimento"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Escolha o movimento mais parecido</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-2"> | |
| 8 | + <li><img class="box-panel-option selection-panel-option movimento-pontual" | |
| 9 | + src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li> | |
| 10 | + <!-- | |
| 11 | + <li><video src="{{ server }}/{{ server }}/img/mov/PONTUAL.webm" | |
| 12 | + preload="metadata" value="pontual" | |
| 13 | + class="box-panel-option selection-panel-option" autoplay loop> | |
| 14 | + <source type="video/webm"> | |
| 15 | + </video> Pontual</li> | |
| 16 | + <li><img class="box-panel-option selection-panel-option" | |
| 17 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li> | |
| 18 | + <li><img class="box-panel-option selection-panel-option" | |
| 19 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="circular"/>Circular</li> | |
| 20 | + <li><img class="box-panel-option selection-panel-option" | |
| 21 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li> | |
| 22 | + <li><img class="box-panel-option selection-panel-option" | |
| 23 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li> | |
| 24 | + <li><img class="box-panel-option selection-panel-option" | |
| 25 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li> | |
| 26 | + <li><img class="box-panel-option selection-panel-option" | |
| 27 | + src="{{ server }}/{{ server }}/img/exf/0000.png" value="contato"/>Contato</li> | |
| 28 | + --> | |
| 29 | + </ul> | |
| 30 | + </div> | |
| 31 | +</div> | ... | ... |
| ... | ... | @@ -0,0 +1,115 @@ |
| 1 | +<div id="right-hand-articulation" multiple-config> | |
| 2 | + <div id="right-hand-articulation-1" class="selection-panel-body" | |
| 3 | + style="display: none;" next="right-hand-articulation-2" sub-config> | |
| 4 | + <div class="panel-header"> | |
| 5 | + <h8>Onde é feito o sinal?</h8> | |
| 6 | + </div> | |
| 7 | + <div class="selection-panel-inner-body"> | |
| 8 | + <div data-x="" data-y="" | |
| 9 | + class="module-x-y grid gray-background right-hand-gray-front-avatar active"> | |
| 10 | + <div class=grid-selectors> | |
| 11 | + <div class="grid-row row-number-1" data-y=1> | |
| 12 | + <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 13 | + <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 14 | + <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 15 | + <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 16 | + <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 17 | + <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 18 | + <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 19 | + <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 20 | + <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 21 | + <div class="ball-selector selection-panel-option ball-10" | |
| 22 | + data-x=10></div> | |
| 23 | + </div> | |
| 24 | + <div class="grid-row row-number-2" data-y=2> | |
| 25 | + <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 26 | + <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 27 | + <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 28 | + <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 29 | + <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 30 | + <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 31 | + <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 32 | + <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 33 | + <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 34 | + <div class="ball-selector selection-panel-option ball-10" | |
| 35 | + data-x=10></div> | |
| 36 | + </div> | |
| 37 | + <div class="grid-row row-number-3" data-y=3> | |
| 38 | + <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 39 | + <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 40 | + <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 41 | + <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 42 | + <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 43 | + <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 44 | + <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 45 | + <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 46 | + <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 47 | + <div class="ball-selector selection-panel-option ball-10" | |
| 48 | + data-x=10></div> | |
| 49 | + </div> | |
| 50 | + <div class="grid-row row-number-4" data-y=4> | |
| 51 | + <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 52 | + <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 53 | + <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 54 | + <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 55 | + <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 56 | + <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 57 | + <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 58 | + <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 59 | + <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 60 | + <div class="ball-selector selection-panel-option ball-10" | |
| 61 | + data-x=10></div> | |
| 62 | + </div> | |
| 63 | + <div class="grid-row row-number-5" data-y=5> | |
| 64 | + <div class="ball-selector selection-panel-option ball-1" data-x=1></div> | |
| 65 | + <div class="ball-selector selection-panel-option ball-2" data-x=2></div> | |
| 66 | + <div class="ball-selector selection-panel-option ball-3" data-x=3></div> | |
| 67 | + <div class="ball-selector selection-panel-option ball-4" data-x=4></div> | |
| 68 | + <div class="ball-selector selection-panel-option ball-5" data-x=5></div> | |
| 69 | + <div class="ball-selector selection-panel-option ball-6" data-x=6></div> | |
| 70 | + <div class="ball-selector selection-panel-option ball-7" data-x=7></div> | |
| 71 | + <div class="ball-selector selection-panel-option ball-8" data-x=8></div> | |
| 72 | + <div class="ball-selector selection-panel-option ball-9" data-x=9></div> | |
| 73 | + <div class="ball-selector selection-panel-option ball-10" | |
| 74 | + data-x=10></div> | |
| 75 | + </div> | |
| 76 | + </div> | |
| 77 | + </div> | |
| 78 | + </div> | |
| 79 | + </div> | |
| 80 | + <div id="right-hand-articulation-2" class="selection-panel-body" | |
| 81 | + style="display: none;" next="end" sub-config name="articulacao"> | |
| 82 | + <div class="panel-header"> | |
| 83 | + <h8>Escolha a distância entre a mão e o corpo</h8> | |
| 84 | + </div> | |
| 85 | + <div class="selection-panel-inner-body"> | |
| 86 | + <div data-z="" class="module-z grid gray-background gray-side-avatar"> | |
| 87 | + <div class="grid-selectors pull-right"> | |
| 88 | + <div class="grid-row row-number-1"> | |
| 89 | + <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 90 | + <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 91 | + <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 92 | + </div> | |
| 93 | + <div class="grid-row row-number-2"> | |
| 94 | + <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 95 | + <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 96 | + <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 97 | + </div> | |
| 98 | + <div class="grid-row row-number-3"> | |
| 99 | + <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 100 | + <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 101 | + <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 102 | + </div> | |
| 103 | + <div class="grid-row row-number-4"> | |
| 104 | + <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 105 | + <div class="ball-selector selection-panel-option ball-2" data-z=2></div> | |
| 106 | + <div class="ball-selector selection-panel-option ball-3" data-z=3></div> | |
| 107 | + </div> | |
| 108 | + <div class="grid-row row-number-5"> | |
| 109 | + <div class="ball-selector selection-panel-option ball-1" data-z=1></div> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + </div> | |
| 113 | + </div> | |
| 114 | + </div> | |
| 115 | +</div> | ... | ... |
| ... | ... | @@ -0,0 +1,242 @@ |
| 1 | +<div id="right-hand-fingers-position" multiple-config> | |
| 2 | + <div id="right-hand-fingers-position-1" class="selection-panel-body" | |
| 3 | + style="display: none;" next="right-hand-fingers-position-2" sub-config> | |
| 4 | + <div class="panel-header"> | |
| 5 | + <h8>Escolha a posição mais parecida dos dedos</h8> | |
| 6 | + </div> | |
| 7 | + <div class="selection-panel-inner-body"> | |
| 8 | + <ul class="rig columns-3"> | |
| 9 | + <li><img class="box-panel-option selection-panel-option" | |
| 10 | + src="{{ server }}/img/cmd/0007.png" | |
| 11 | + group="0" /> 0.</li> | |
| 12 | + <li><img class="box-panel-option selection-panel-option" | |
| 13 | + src="{{ server }}/img/cmd/0014.png" | |
| 14 | + group="1" /> 1.</li> | |
| 15 | + <li><img class="box-panel-option selection-panel-option" | |
| 16 | + src="{{ server }}/img/cmd/0045.png" | |
| 17 | + group="2" /> 2.</li> | |
| 18 | + <li><img class="box-panel-option selection-panel-option" | |
| 19 | + src="{{ server }}/img/cmd/0048.png" | |
| 20 | + group="3" /> 3.</li> | |
| 21 | + <li><img class="box-panel-option selection-panel-option" | |
| 22 | + src="{{ server }}/img/cmd/0040.png" | |
| 23 | + group="4" /> 4.</li> | |
| 24 | + <li><img class="box-panel-option selection-panel-option" | |
| 25 | + src="{{ server }}/img/cmd/0000.png" | |
| 26 | + group="5" /> 5.</li> | |
| 27 | + </ul> | |
| 28 | + </div> | |
| 29 | + </div> | |
| 30 | + <div id="right-hand-fingers-position-2" class="selection-panel-body" | |
| 31 | + style="display: none;" next="end" sub-config name="configuracao"> | |
| 32 | + <div class="panel-header"> | |
| 33 | + <h8>Escolha a posição dos dedos</h8> | |
| 34 | + </div> | |
| 35 | + <div class="selection-panel-inner-body"> | |
| 36 | + <div class="finger-group" group="0"> | |
| 37 | + <ul class="rig columns-4"> | |
| 38 | + <li><img class="box-panel-option selection-panel-option" | |
| 39 | + src="{{ server }}/img/cmd/0001.png" | |
| 40 | + value="1" /> 1.</li> | |
| 41 | + <li><img class="box-panel-option selection-panel-option" | |
| 42 | + src="{{ server }}/img/cmd/0002.png" | |
| 43 | + value="2" /> 2.</li> | |
| 44 | + <li><img class="box-panel-option selection-panel-option" | |
| 45 | + src="{{ server }}/img/cmd/0007.png" | |
| 46 | + value="7" /> 3.</li> | |
| 47 | + <li><img class="box-panel-option selection-panel-option" | |
| 48 | + src="{{ server }}/img/cmd/0008.png" | |
| 49 | + value="8" /> 4.</li> | |
| 50 | + <li><img class="box-panel-option selection-panel-option" | |
| 51 | + src="{{ server }}/img/cmd/0009.png" | |
| 52 | + value="9" /> 5.</li> | |
| 53 | + <li><img class="box-panel-option selection-panel-option" | |
| 54 | + src="{{ server }}/img/cmd/0010.png" | |
| 55 | + value="10" /> 6.</li> | |
| 56 | + <li><img class="box-panel-option selection-panel-option" | |
| 57 | + src="{{ server }}/img/cmd/0011.png" | |
| 58 | + value="11" /> 7.</li> | |
| 59 | + <li><img class="box-panel-option selection-panel-option" | |
| 60 | + src="{{ server }}/img/cmd/0016.png" | |
| 61 | + value="16" /> 8.</li> | |
| 62 | + <li><img class="box-panel-option selection-panel-option" | |
| 63 | + src="{{ server }}/img/cmd/0017.png" | |
| 64 | + value="17" /> 9.</li> | |
| 65 | + <li><img class="box-panel-option selection-panel-option" | |
| 66 | + src="{{ server }}/img/cmd/0018.png" | |
| 67 | + value="18" /> 10.</li> | |
| 68 | + <li><img class="box-panel-option selection-panel-option" | |
| 69 | + src="{{ server }}/img/cmd/0019.png" | |
| 70 | + value="19" /> 11.</li> | |
| 71 | + <li><img class="box-panel-option selection-panel-option" | |
| 72 | + src="{{ server }}/img/cmd/0020.png" | |
| 73 | + value="20" /> 12.</li> | |
| 74 | + <li><img class="box-panel-option selection-panel-option" | |
| 75 | + src="{{ server }}/img/cmd/0021.png" | |
| 76 | + value="21" /> 13.</li> | |
| 77 | + <li><img class="box-panel-option selection-panel-option" | |
| 78 | + src="{{ server }}/img/cmd/0022.png" | |
| 79 | + value="22" /> 14.</li> | |
| 80 | + <li><img class="box-panel-option selection-panel-option" | |
| 81 | + src="{{ server }}/img/cmd/0023.png" | |
| 82 | + value="23" /> 15.</li> | |
| 83 | + <li><img class="box-panel-option selection-panel-option" | |
| 84 | + src="{{ server }}/img/cmd/0024.png" | |
| 85 | + value="24" /> 16.</li> | |
| 86 | + <li><img class="box-panel-option selection-panel-option" | |
| 87 | + src="{{ server }}/img/cmd/0058.png" | |
| 88 | + value="58" /> 17.</li> | |
| 89 | + <li><img class="box-panel-option selection-panel-option" | |
| 90 | + src="{{ server }}/img/cmd/0059.png" | |
| 91 | + value="59" /> 18.</li> | |
| 92 | + <li><img class="box-panel-option selection-panel-option" | |
| 93 | + src="{{ server }}/img/cmd/0060.png" | |
| 94 | + value="60" /> 19.</li> | |
| 95 | + </ul> | |
| 96 | + </div> | |
| 97 | + <div class="finger-group" group="1"> | |
| 98 | + <ul class="rig columns-4"> | |
| 99 | + <li><img class="box-panel-option selection-panel-option" | |
| 100 | + src="{{ server }}/img/cmd/0003.png" | |
| 101 | + value="3" /> 1.</li> | |
| 102 | + <li><img class="box-panel-option selection-panel-option" | |
| 103 | + src="{{ server }}/img/cmd/0005.png" | |
| 104 | + value="5" /> 2.</li> | |
| 105 | + <li><img class="box-panel-option selection-panel-option" | |
| 106 | + src="{{ server }}/img/cmd/0006.png" | |
| 107 | + value="6" /> 3.</li> | |
| 108 | + <li><img class="box-panel-option selection-panel-option" | |
| 109 | + src="{{ server }}/img/cmd/0012.png" | |
| 110 | + value="12" /> 4.</li> | |
| 111 | + <li><img class="box-panel-option selection-panel-option" | |
| 112 | + src="{{ server }}/img/cmd/0013.png" | |
| 113 | + value="13" /> 5.</li> | |
| 114 | + <li><img class="box-panel-option selection-panel-option" | |
| 115 | + src="{{ server }}/img/cmd/0014.png" | |
| 116 | + value="14" /> 6.</li> | |
| 117 | + <li><img class="box-panel-option selection-panel-option" | |
| 118 | + src="{{ server }}/img/cmd/0030.png" | |
| 119 | + value="30" /> 7.</li> | |
| 120 | + <li><img class="box-panel-option selection-panel-option" | |
| 121 | + src="{{ server }}/img/cmd/0052.png" | |
| 122 | + value="52" /> 8.</li> | |
| 123 | + </ul> | |
| 124 | + </div> | |
| 125 | + <div class="finger-group" group="2"> | |
| 126 | + <ul class="rig columns-4"> | |
| 127 | + <li><img class="box-panel-option selection-panel-option" | |
| 128 | + src="{{ server }}/img/cmd/0004.png" | |
| 129 | + value="4" /> 1.</li> | |
| 130 | + <li><img class="box-panel-option selection-panel-option" | |
| 131 | + src="{{ server }}/img/cmd/0015.png" | |
| 132 | + value="15" /> 2.</li> | |
| 133 | + <li><img class="box-panel-option selection-panel-option" | |
| 134 | + src="{{ server }}/img/cmd/0029.png" | |
| 135 | + value="29" /> 3.</li> | |
| 136 | + <li><img class="box-panel-option selection-panel-option" | |
| 137 | + src="{{ server }}/img/cmd/0031.png" | |
| 138 | + value="31" /> 4.</li> | |
| 139 | + <li><img class="box-panel-option selection-panel-option" | |
| 140 | + src="{{ server }}/img/cmd/0032.png" | |
| 141 | + value="32" /> 5.</li> | |
| 142 | + <li><img class="box-panel-option selection-panel-option" | |
| 143 | + src="{{ server }}/img/cmd/0035.png" | |
| 144 | + value="35" /> 6.</li> | |
| 145 | + <li><img class="box-panel-option selection-panel-option" | |
| 146 | + src="{{ server }}/img/cmd/0036.png" | |
| 147 | + value="36" /> 7.</li> | |
| 148 | + <li><img class="box-panel-option selection-panel-option" | |
| 149 | + src="{{ server }}/img/cmd/0045.png" | |
| 150 | + value="45" /> 8.</li> | |
| 151 | + <li><img class="box-panel-option selection-panel-option" | |
| 152 | + src="{{ server }}/img/cmd/0051.png" | |
| 153 | + value="51" /> 9.</li> | |
| 154 | + </ul> | |
| 155 | + </div> | |
| 156 | + <div class="finger-group" group="3"> | |
| 157 | + <ul class="rig columns-4"> | |
| 158 | + <li><img class="box-panel-option selection-panel-option" | |
| 159 | + src="{{ server }}/img/cmd/0033.png" | |
| 160 | + value="33" /> 1.</li> | |
| 161 | + <li><img class="box-panel-option selection-panel-option" | |
| 162 | + src="{{ server }}/img/cmd/0034.png" | |
| 163 | + value="34" /> 2.</li> | |
| 164 | + <li><img class="box-panel-option selection-panel-option" | |
| 165 | + src="{{ server }}/img/cmd/0037.png" | |
| 166 | + value="37" /> 3.</li> | |
| 167 | + <li><img class="box-panel-option selection-panel-option" | |
| 168 | + src="{{ server }}/img/cmd/0039.png" | |
| 169 | + value="39" /> 4.</li> | |
| 170 | + <li><img class="box-panel-option selection-panel-option" | |
| 171 | + src="{{ server }}/img/cmd/0043.png" | |
| 172 | + value="43" /> 5.</li> | |
| 173 | + <li><img class="box-panel-option selection-panel-option" | |
| 174 | + src="{{ server }}/img/cmd/0044.png" | |
| 175 | + value="44" /> 6.</li> | |
| 176 | + <li><img class="box-panel-option selection-panel-option" | |
| 177 | + src="{{ server }}/img/cmd/0046.png" | |
| 178 | + value="46" /> 7.</li> | |
| 179 | + <li><img class="box-panel-option selection-panel-option" | |
| 180 | + src="{{ server }}/img/cmd/0047.png" | |
| 181 | + value="47" /> 8.</li> | |
| 182 | + <li><img class="box-panel-option selection-panel-option" | |
| 183 | + src="{{ server }}/img/cmd/0048.png" | |
| 184 | + value="48" /> 9.</li> | |
| 185 | + <li><img class="box-panel-option selection-panel-option" | |
| 186 | + src="{{ server }}/img/cmd/0049.png" | |
| 187 | + value="49" /> 10.</li> | |
| 188 | + <li><img class="box-panel-option selection-panel-option" | |
| 189 | + src="{{ server }}/img/cmd/0050.png" | |
| 190 | + value="50" /> 11.</li> | |
| 191 | + </ul> | |
| 192 | + </div> | |
| 193 | + <div class="finger-group" group="4"> | |
| 194 | + <ul class="rig columns-4"> | |
| 195 | + <li><img class="box-panel-option selection-panel-option" | |
| 196 | + src="{{ server }}/img/cmd/0038.png" | |
| 197 | + value="38" /> 1.</li> | |
| 198 | + <li><img class="box-panel-option selection-panel-option" | |
| 199 | + src="{{ server }}/img/cmd/0040.png" | |
| 200 | + value="40" /> 2.</li> | |
| 201 | + <li><img class="box-panel-option selection-panel-option" | |
| 202 | + src="{{ server }}/img/cmd/0041.png" | |
| 203 | + value="41" /> 3.</li> | |
| 204 | + <li><img class="box-panel-option selection-panel-option" | |
| 205 | + src="{{ server }}/img/cmd/0042.png" | |
| 206 | + value="42" /> 4.</li> | |
| 207 | + </ul> | |
| 208 | + </div> | |
| 209 | + <div class="finger-group" group="5"> | |
| 210 | + <ul class="rig columns-4"> | |
| 211 | + <li><img class="box-panel-option selection-panel-option" | |
| 212 | + src="{{ server }}/img/cmd/0025.png" | |
| 213 | + value="25" /> 1.</li> | |
| 214 | + <li><img class="box-panel-option selection-panel-option" | |
| 215 | + src="{{ server }}/img/cmd/0026.png" | |
| 216 | + value="26" /> 2.</li> | |
| 217 | + <li><img class="box-panel-option selection-panel-option" | |
| 218 | + src="{{ server }}/img/cmd/0027.png" | |
| 219 | + value="27" /> 3.</li> | |
| 220 | + <li><img class="box-panel-option selection-panel-option" | |
| 221 | + src="{{ server }}/img/cmd/0028.png" | |
| 222 | + value="28" /> 4.</li> | |
| 223 | + <li><img class="box-panel-option selection-panel-option" | |
| 224 | + src="{{ server }}/img/cmd/0053.png" | |
| 225 | + value="53" /> 5.</li> | |
| 226 | + <li><img class="box-panel-option selection-panel-option" | |
| 227 | + src="{{ server }}/img/cmd/0054.png" | |
| 228 | + value="54" /> 6.</li> | |
| 229 | + <li><img class="box-panel-option selection-panel-option" | |
| 230 | + src="{{ server }}/img/cmd/0055.png" | |
| 231 | + value="55" /> 7.</li> | |
| 232 | + <li><img class="box-panel-option selection-panel-option" | |
| 233 | + src="{{ server }}/img/cmd/0056.png" | |
| 234 | + value="56" /> 8.</li> | |
| 235 | + <li><img class="box-panel-option selection-panel-option" | |
| 236 | + src="{{ server }}/img/cmd/0057.png" | |
| 237 | + value="57" /> 9.</li> | |
| 238 | + </ul> | |
| 239 | + </div> | |
| 240 | + </div> | |
| 241 | + </div> | |
| 242 | +</div> | ... | ... |
| ... | ... | @@ -0,0 +1,34 @@ |
| 1 | +<div id="right-hand-orientation" class="selection-panel-body" | |
| 2 | + name="orientacao"> | |
| 3 | + <div class="panel-header"> | |
| 4 | + <h8>Palma da mão</h8> | |
| 5 | + </div> | |
| 6 | + <div class="selection-panel-inner-body"> | |
| 7 | + <ul class="rig columns-3"> | |
| 8 | + <li><img class="box-panel-option selection-panel-option" | |
| 9 | + src="{{ server }}/img/ord/01.png" value="68" />1.</li> | |
| 10 | + <li><img class="box-panel-option selection-panel-option" | |
| 11 | + src="{{ server }}/img/ord/02.png" value="66" />2.</li> | |
| 12 | + <li><img class="box-panel-option selection-panel-option" | |
| 13 | + src="{{ server }}/img/ord/03.png" value="64" />3.</li> | |
| 14 | + <li><img class="box-panel-option selection-panel-option" | |
| 15 | + src="{{ server }}/img/ord/04.png" value="2" />4.</li> | |
| 16 | + <li><img class="box-panel-option selection-panel-option" | |
| 17 | + src="{{ server }}/img/ord/05.png" value="9" />5.</li> | |
| 18 | + <li><img class="box-panel-option selection-panel-option" | |
| 19 | + src="{{ server }}/img/ord/06.png" value="16" />6.</li> | |
| 20 | + <li><img class="box-panel-option selection-panel-option" | |
| 21 | + src="{{ server }}/img/ord/07.png" value="92" />7.</li> | |
| 22 | + <li><img class="box-panel-option selection-panel-option" | |
| 23 | + src="{{ server }}/img/ord/08.png" value="90" />8.</li> | |
| 24 | + <li><img class="box-panel-option selection-panel-option" | |
| 25 | + src="{{ server }}/img/ord/09.png" value="88" />9.</li> | |
| 26 | + <li><img class="box-panel-option selection-panel-option" | |
| 27 | + src="{{ server }}/img/ord/10.png" value="4" />10.</li> | |
| 28 | + <li><img class="box-panel-option selection-panel-option" | |
| 29 | + src="{{ server }}/img/ord/11.png" value="11" />11.</li> | |
| 30 | + <li><img class="box-panel-option selection-panel-option" | |
| 31 | + src="{{ server }}/img/ord/12.png" value="18" />12.</li> | |
| 32 | + </ul> | |
| 33 | + </div> | |
| 34 | +</div> | ... | ... |
| ... | ... | @@ -0,0 +1,33 @@ |
| 1 | +<div class="subconfiguration-panel col-sm-12"> | |
| 2 | + <div class="arrow icon_container col-sm-1" name="left-arrow"> | |
| 3 | + <img src="{{ server }}/{{ server }}/img/left-arrow-icon.png" /> | |
| 4 | + </div> | |
| 5 | + | |
| 6 | + <div id="right-hand-subconfiguration-options" | |
| 7 | + class="subconfiguration-options col-sm-10"> | |
| 8 | + <div class="icon_container" name="hand-moviment" | |
| 9 | + panel="right-hand-moviment" previous="right-hand-moviment" | |
| 10 | + next="right-hand-articulation"> | |
| 11 | + <img src="{{ server }}/img/hand-moviment-icon.png" /> | |
| 12 | + </div> | |
| 13 | + <div class="icon_container" name="hand-articulation" | |
| 14 | + panel="right-hand-articulation" previous="right-hand-moviment" | |
| 15 | + next="right-hand-fingers-position"> | |
| 16 | + <img src="{{ server }}/img/hand-articulation-icon.png" /> | |
| 17 | + </div> | |
| 18 | + <div class="icon_container" name="hand-fingers-position" | |
| 19 | + panel="right-hand-fingers-position" previous="right-hand-articulation" | |
| 20 | + next="right-hand-orientation"> | |
| 21 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | |
| 22 | + </div> | |
| 23 | + <div class="icon_container" name="hand-orientation" | |
| 24 | + panel="right-hand-orientation" previous="right-hand-fingers-position" | |
| 25 | + next="end"> | |
| 26 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | |
| 27 | + </div> | |
| 28 | + </div> | |
| 29 | + | |
| 30 | + <div class="arrow icon_container col-sm-1" name="right-arrow"> | |
| 31 | + <img src="{{ server }}/{{ server }}/img/right-arrow-icon.png" /> | |
| 32 | + </div> | |
| 33 | +</div> | ... | ... |
| ... | ... | @@ -0,0 +1,202 @@ |
| 1 | +<link rel="stylesheet" href="{{ server }}/assets/css/main.css"> | |
| 2 | + | |
| 3 | +{% import 'hand-configuration.html' as handConfig with context %} {% | |
| 4 | +import 'facial-configuration.html' as facialConfig with context %} | |
| 5 | + | |
| 6 | +<div id="main-container" class="container"> | |
| 7 | + <div id="initial-screen"> | |
| 8 | + <div class="col-sm-6 col-centered"> | |
| 9 | + <div class="col-sm-8 col-centered"> | |
| 10 | + <video src="" preload="metadata" | |
| 11 | + class="ref-video video-body-main video-border" autoplay loop | |
| 12 | + controls> | |
| 13 | + <source type="video/webm"> | |
| 14 | + </video> | |
| 15 | + </div> | |
| 16 | + <h6 class="text-center"> | |
| 17 | + Ajude a criar o sinal <span class="sign-label"></span>. | |
| 18 | + </h6> | |
| 19 | + <div class="col-sm-4 col-centered"> | |
| 20 | + <div id="start-button" class="col-sm-12 btn btn-default">OK</div> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + </div> | |
| 24 | + <div id="configuration-screen"> | |
| 25 | + <div class="row"> | |
| 26 | + <div class="col-sm-3"> | |
| 27 | + <h8>Vídeo de referência "<span class="sign-label"></span>"</h8> | |
| 28 | + <div id="ref-video-panel" class="col-sm-12"> | |
| 29 | + <div id="ref-video-container" class="col-sm-10"> | |
| 30 | + <video src="" preload="metadata" | |
| 31 | + class="ref-video video-body-main video-border" autoplay loop | |
| 32 | + controls> | |
| 33 | + <source type="video/webm"> | |
| 34 | + </video> | |
| 35 | + </div> | |
| 36 | + <div id="minimize-icon-container" class="col-sm-2 icon_container" | |
| 37 | + name="minimize"> | |
| 38 | + <img src="{{ server }}/img/minimize-icon.png"></img> | |
| 39 | + </div> | |
| 40 | + <div id="maximize-icon-container" class="col-sm-2 icon_container" | |
| 41 | + name="maximize"> | |
| 42 | + <img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img> | |
| 43 | + </div> | |
| 44 | + </div> | |
| 45 | + <div id="configuration-panel" class="col-sm-8"> | |
| 46 | + <div class="icon_container config-panel-option" name="facial" | |
| 47 | + panel="facial"> | |
| 48 | + <img src="{{ server }}/img/facial-icon.png"</img> <span | |
| 49 | + class="configuration-panel-label">Expressão</span> | |
| 50 | + </div> | |
| 51 | + <div class="icon_container config-panel-option" name="right-hand" | |
| 52 | + panel="right-hand"> | |
| 53 | + <img src="{{ server }}/img/right-hand-icon.png"></img> <span | |
| 54 | + class="configuration-panel-label">Mão direita</span> | |
| 55 | + </div> | |
| 56 | + <div class="icon_container config-panel-option" name="left-hand" | |
| 57 | + panel="left-hand"> | |
| 58 | + <img src="{{ server }}/img/left-hand-icon.png"></img> <span | |
| 59 | + class="configuration-panel-label">Mão esquerda</span> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | + </div> | |
| 63 | + <div id="avatar-container" class="col-sm-7 avatar-container-zoom-out"> | |
| 64 | + <div id="facial-edit" class="edit-container"> | |
| 65 | + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img> | |
| 66 | + <div class="icon_container config-panel-option" name="edit" | |
| 67 | + panel="facial"> | |
| 68 | + <img src="{{ server }}/img/edit-icon.png"></img> | |
| 69 | + </div> | |
| 70 | + </div> | |
| 71 | + <div id="right-hand-edit" class="edit-container"> | |
| 72 | + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img> | |
| 73 | + <div class="icon_container config-panel-option" name="edit" | |
| 74 | + panel="right-hand"> | |
| 75 | + <img src="{{ server }}/img/edit-icon.png"></img> | |
| 76 | + </div> | |
| 77 | + </div> | |
| 78 | + <div id="left-hand-edit" class="edit-container"> | |
| 79 | + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img> | |
| 80 | + <div class="icon_container config-panel-option" name="edit" | |
| 81 | + panel="left-hand"> | |
| 82 | + <img src="{{ server }}/img/edit-icon.png"></img> | |
| 83 | + </div> | |
| 84 | + </div> | |
| 85 | + <div id="avatar-default" class="avatar-img"> | |
| 86 | + <div id="avatar-body-face" | |
| 87 | + class="icon_container config-panel-option" name="avatar-facial" | |
| 88 | + panel="facial"> | |
| 89 | + <img src="{{ server }}/img/avatar-facial-icon.png"></img> | |
| 90 | + </div> | |
| 91 | + <div id="avatar-body-right-hand" | |
| 92 | + class="icon_container config-panel-option" | |
| 93 | + name="avatar-right-hand" panel="right-hand"> | |
| 94 | + <img src="{{ server }}/img/avatar-right-hand-icon.png"></img> | |
| 95 | + </div> | |
| 96 | + <div id="avatar-body-left-hand" | |
| 97 | + class="icon_container config-panel-option" name="avatar-left-hand" | |
| 98 | + panel="left-hand"> | |
| 99 | + <img src="{{ server }}/img/avatar-left-hand-icon.png"></img> | |
| 100 | + </div> | |
| 101 | + <img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img> | |
| 102 | + </div> | |
| 103 | + <img id="avatar-facial" class="avatar-img avatar-img-zoom-out" | |
| 104 | + src="{{ server }}/img/avatar-facial.png"></img> <img | |
| 105 | + id="avatar-right-hand" class="avatar-img avatar-img-zoom-out" | |
| 106 | + src="{{ server }}/img/avatar-right-hand.png"></img> <img | |
| 107 | + id="avatar-left-hand" class="avatar-img avatar-img-zoom-out" | |
| 108 | + src="{{ server }}/img/avatar-left-hand.png"></img> | |
| 109 | + </div> | |
| 110 | + <div id="selection-container" class="col-sm-2"> | |
| 111 | + <div id="selection-panel"> | |
| 112 | + <div class="x btn-default"></div> | |
| 113 | + | |
| 114 | + {{ facialConfig.selectionPanel() }} {{ | |
| 115 | + handConfig.selectionPanel('right-hand') }} {{ | |
| 116 | + handConfig.selectionPanel('left-hand') }} | |
| 117 | + | |
| 118 | + <div class="subconfiguration-panel col-sm-12"> | |
| 119 | + <div class="arrow icon_container col-sm-1" name="left-arrow"> | |
| 120 | + <img src="{{ server }}/img/left-arrow-icon.png" /> | |
| 121 | + </div> | |
| 122 | + | |
| 123 | + {{ facialConfig.subconfigPanel() }} {{ | |
| 124 | + handConfig.subconfigPanel('right-hand') }} {{ | |
| 125 | + handConfig.subconfigPanel('left-hand') }} | |
| 126 | + | |
| 127 | + <div class="arrow icon_container col-sm-1" name="right-arrow"> | |
| 128 | + <img src="{{ server }}/img/right-arrow-icon.png" /> | |
| 129 | + </div> | |
| 130 | + </div> | |
| 131 | + </div> | |
| 132 | + </div> | |
| 133 | + </div> | |
| 134 | + <div class="row"> | |
| 135 | + <div id="ready-button" class="btn btn-default pull-right disabled">GERAR | |
| 136 | + SINAL</div> | |
| 137 | + </div> | |
| 138 | + </div> | |
| 139 | + <div id="render-screen"> | |
| 140 | + <div id="render-main" class="row"> | |
| 141 | + <div id="render-ref" class="col-sm-6"> | |
| 142 | + <h6>Vídeo de referência</h6> | |
| 143 | + <div class="col-sm-12"> | |
| 144 | + <video src="" preload="metadata" | |
| 145 | + class="ref-video video-body-main video-border" loop controls> | |
| 146 | + <source type="video/webm"> | |
| 147 | + </video> | |
| 148 | + </div> | |
| 149 | + </div> | |
| 150 | + <div class="col-sm-6"> | |
| 151 | + <div id="render-avatar" class="col-sm-12"> | |
| 152 | + <h6> | |
| 153 | + Sinal "<span class="sign-label"></span>" construído | |
| 154 | + </h6> | |
| 155 | + <video src="" preload="metadata" | |
| 156 | + class="video-body-main video-border" autoplay loop controls> | |
| 157 | + <source type="video/webm"> | |
| 158 | + </video> | |
| 159 | + <div id="render-edit" class="icon_container" name="big-edit"> | |
| 160 | + <img class="col-centered" src="{{ server }}/img/big-edit-icon.png"></img> | |
| 161 | + </div> | |
| 162 | + </div> | |
| 163 | + <div id="render-loading"> | |
| 164 | + <h6> | |
| 165 | + Gerando o sinal "<span class="sign-label"></span>" | |
| 166 | + </h6> | |
| 167 | + <div id="loading-container" class="video-border"> | |
| 168 | + <img src="{{ server }}/img/loading.gif"> | |
| 169 | + </div> | |
| 170 | + </div> | |
| 171 | + </div> | |
| 172 | + </div> | |
| 173 | + <div class="row"> | |
| 174 | + <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR | |
| 175 | + SINAL</div> | |
| 176 | + </div> | |
| 177 | + </div> | |
| 178 | + <div id="thanks-screen"> | |
| 179 | + <div class="col-sm-6 col-centered"> | |
| 180 | + <div id="completed-task-msg"> | |
| 181 | + <h3 class="text-center">Obrigado,</h3> | |
| 182 | + <h6 class="text-center">você configurou o sinal com sucesso!</h6> | |
| 183 | + </div> | |
| 184 | + <div id="completed-all-task-msg"> | |
| 185 | + <h3 class="text-center">Parabéns,</h3> | |
| 186 | + <h6 class="text-center">você configurou todos os sinais | |
| 187 | + disponíveis!</h6> | |
| 188 | + </div> | |
| 189 | + <div class="col-sm-11 col-centered"> | |
| 190 | + <img src="{{ server }}/img/avatar-thanks.png"></img> | |
| 191 | + </div> | |
| 192 | + </div> | |
| 193 | + </div> | |
| 194 | +</div> | |
| 195 | + | |
| 196 | +<script src="{{ server }}/assets/js/js.cookie.js"></script> | |
| 197 | +<script src="{{ server }}/assets/js/articulation.js"></script> | |
| 198 | +<script src="{{ server }}/assets/js/wikilibras.js"></script> | |
| 199 | + | |
| 200 | +<script type="text/javascript"> | |
| 201 | + wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}"); | |
| 202 | +</script> | ... | ... |
view/template.html
| 1 | 1 | <link rel="stylesheet" href="{{ server }}/assets/css/main.css"> |
| 2 | 2 | |
| 3 | -{% import 'hand-configuration.html' as handConfig with context %} {% | |
| 4 | -import 'facial-configuration.html' as facialConfig with context %} | |
| 3 | +{% import 'facial-configuration.html' as facialConfig with context %} | |
| 4 | + | |
| 5 | +<span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span> | |
| 5 | 6 | |
| 6 | 7 | <div id="main-container" class="container"> |
| 7 | 8 | <div id="initial-screen"> |
| ... | ... | @@ -111,18 +112,15 @@ import 'facial-configuration.html' as facialConfig with context %} |
| 111 | 112 | <div id="selection-panel"> |
| 112 | 113 | <div class="x btn-default"></div> |
| 113 | 114 | |
| 114 | - {{ facialConfig.selectionPanel() }} {{ | |
| 115 | - handConfig.selectionPanel('right-hand') }} {{ | |
| 116 | - handConfig.selectionPanel('left-hand') }} | |
| 115 | + {{ facialConfig.selectionPanel() }} | |
| 116 | + {% include 'hand-configuration.html' %} | |
| 117 | 117 | |
| 118 | 118 | <div class="subconfiguration-panel col-sm-12"> |
| 119 | 119 | <div class="arrow icon_container col-sm-1" name="left-arrow"> |
| 120 | 120 | <img src="{{ server }}/img/left-arrow-icon.png" /> |
| 121 | 121 | </div> |
| 122 | 122 | |
| 123 | - {{ facialConfig.subconfigPanel() }} {{ | |
| 124 | - handConfig.subconfigPanel('right-hand') }} {{ | |
| 125 | - handConfig.subconfigPanel('left-hand') }} | |
| 123 | + {{ facialConfig.subconfigPanel() }} | |
| 126 | 124 | |
| 127 | 125 | <div class="arrow icon_container col-sm-1" name="right-arrow"> |
| 128 | 126 | <img src="{{ server }}/img/right-arrow-icon.png" /> |
| ... | ... | @@ -196,7 +194,11 @@ import 'facial-configuration.html' as facialConfig with context %} |
| 196 | 194 | <script src="{{ server }}/assets/js/js.cookie.js"></script> |
| 197 | 195 | <script src="{{ server }}/assets/js/articulation.js"></script> |
| 198 | 196 | <script src="{{ server }}/assets/js/wikilibras.js"></script> |
| 197 | +<script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script> | |
| 199 | 198 | |
| 200 | 199 | <script type="text/javascript"> |
| 201 | 200 | wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}"); |
| 202 | -</script> | |
| 203 | 201 | \ No newline at end of file |
| 202 | + $( document ).ready(function() { | |
| 203 | + dynengine.load(); | |
| 204 | + }); | |
| 205 | +</script> | ... | ... |