Commit 0f26c3be35b7b4d43bf189f8b2b9347ca2a99f0f

Authored by Cassio Cabral
1 parent c2750136
Exists in master and in 1 other branch dynamic

innital dynamic engine

settings_local.py
@@ -5,6 +5,11 @@ SERVER_PORT = 8003 @@ -5,6 +5,11 @@ SERVER_PORT = 8003
5 AGREEMENT_NUMBER = 2 5 AGREEMENT_NUMBER = 2
6 API_HOST = "http://0.0.0.0:5001" 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 # PyBossa Configuration 13 # PyBossa Configuration
9 PYBOSSA_APP_NAME = "WikiLibras" 14 PYBOSSA_APP_NAME = "WikiLibras"
10 PYBOSSA_APP_SHORT_NAME = "wikilibras" 15 PYBOSSA_APP_SHORT_NAME = "wikilibras"
view/assets/js/dynamic-loading-engine.js 0 → 100644
@@ -0,0 +1,72 @@ @@ -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/string 0 → 100644
@@ -0,0 +1 @@ @@ -0,0 +1 @@
  1 +testtest
0 \ No newline at end of file 2 \ No newline at end of file
view/assets/js/wikilibras.js
@@ -158,7 +158,7 @@ @@ -158,7 +158,7 @@
158 $(".selection-panel-body").hide(); 158 $(".selection-panel-body").hide();
159 $(".subconfiguration-options").hide(); 159 $(".subconfiguration-options").hide();
160 $(".subconfiguration-panel").hide(); 160 $(".subconfiguration-panel").hide();
161 - 161 +
162 if (_isSelectingState()) { 162 if (_isSelectingState()) {
163 var current_option = _getCurrentMainConfiguration(); 163 var current_option = _getCurrentMainConfiguration();
164 _selectIcon(current_option, false); 164 _selectIcon(current_option, false);
@@ -269,7 +269,7 @@ @@ -269,7 +269,7 @@
269 function _hasMultipleConfigurations(config) { 269 function _hasMultipleConfigurations(config) {
270 return $("#" + config).is("[multiple-config]"); 270 return $("#" + config).is("[multiple-config]");
271 } 271 }
272 - 272 +
273 function _handleFingersPositionSubConfiguration(main_config) { 273 function _handleFingersPositionSubConfiguration(main_config) {
274 var finger_group = $( 274 var finger_group = $(
275 "#" 275 "#"
@@ -353,7 +353,7 @@ @@ -353,7 +353,7 @@
353 if (next_config != "end") { 353 if (next_config != "end") {
354 _selectSubConfigurationIcon(next_config, true); 354 _selectSubConfigurationIcon(next_config, true);
355 $("#" + next_config).show(); 355 $("#" + next_config).show();
356 - 356 +
357 var main_config = _getCurrentMainConfiguration(); 357 var main_config = _getCurrentMainConfiguration();
358 if (_isHandMovimentComplete(main_config)) { 358 if (_isHandMovimentComplete(main_config)) {
359 $(".subconfiguration-panel").fadeIn(300); 359 $(".subconfiguration-panel").fadeIn(300);
@@ -390,7 +390,7 @@ @@ -390,7 +390,7 @@
390 return $("#" + main_config 390 return $("#" + main_config
391 + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0; 391 + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0;
392 } 392 }
393 - 393 +
394 function _setupHandSelectionPanel(option) { 394 function _setupHandSelectionPanel(option) {
395 var previous_select = $("#" + option 395 var previous_select = $("#" + option
396 + "-subconfiguration-options .icon_container[select=true]").length > 0; 396 + "-subconfiguration-options .icon_container[select=true]").length > 0;
@@ -409,7 +409,7 @@ @@ -409,7 +409,7 @@
409 _selectIcon("hand-moviment", true, option + "-moviment"); 409 _selectIcon("hand-moviment", true, option + "-moviment");
410 $("#" + option + "-moviment").fadeIn(300); 410 $("#" + option + "-moviment").fadeIn(300);
411 } 411 }
412 - 412 +
413 $("#" + option + "-subconfiguration-options").fadeIn(300); 413 $("#" + option + "-subconfiguration-options").fadeIn(300);
414 if (_isHandMovimentComplete(option)) { 414 if (_isHandMovimentComplete(option)) {
415 $(".subconfiguration-panel").fadeIn(300); 415 $(".subconfiguration-panel").fadeIn(300);
@@ -486,10 +486,10 @@ @@ -486,10 +486,10 @@
486 moviment_parameter_json[current_main_config][config] = value; 486 moviment_parameter_json[current_main_config][config] = value;
487 } 487 }
488 } 488 }
489 - 489 +
490 function _readConfigValue(el, config_name) { 490 function _readConfigValue(el, config_name) {
491 if (typeof config_name == "undefined" || config_name == "articulacao") return; 491 if (typeof config_name == "undefined" || config_name == "articulacao") return;
492 - 492 +
493 return $(el).attr("value"); 493 return $(el).attr("value");
494 } 494 }
495 495
@@ -500,34 +500,34 @@ @@ -500,34 +500,34 @@
500 $("#" + current_config_id + " .selection-panel-option[select=true]") 500 $("#" + current_config_id + " .selection-panel-option[select=true]")
501 .removeAttr("select"); 501 .removeAttr("select");
502 $(el).attr("select", true); 502 $(el).attr("select", true);
503 - 503 +
504 var config_value = _readConfigValue(el, current_config_name); 504 var config_value = _readConfigValue(el, current_config_name);
505 _updateParameterJSON(current_config_name, config_value); 505 _updateParameterJSON(current_config_name, config_value);
506 } 506 }
507 507
508 function _setupSelectionPanel() { 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 // Render Screen 533 // Render Screen
@@ -587,7 +587,7 @@ @@ -587,7 +587,7 @@
587 "panel")); 587 "panel"));
588 }); 588 });
589 } 589 }
590 - 590 +
591 function _setupMainScreen(task, deferred) { 591 function _setupMainScreen(task, deferred) {
592 $("#initial-screen").fadeIn(300); 592 $("#initial-screen").fadeIn(300);
593 $("#start-button").off("click").on("click", function() { 593 $("#start-button").off("click").on("click", function() {
@@ -621,7 +621,7 @@ @@ -621,7 +621,7 @@
621 _setupConfigurationPanel(); 621 _setupConfigurationPanel();
622 _setupSelectionPanel(); 622 _setupSelectionPanel();
623 _setupMainScreen(task, deferred); 623 _setupMainScreen(task, deferred);
624 - 624 +
625 articulation.setup(base_url); 625 articulation.setup(base_url);
626 } 626 }
627 627
@@ -636,7 +636,7 @@ @@ -636,7 +636,7 @@
636 deferred.resolve(); 636 deferred.resolve();
637 }, 2500); 637 }, 2500);
638 });*/ 638 });*/
639 - 639 +
640 setTimeout(function() { 640 setTimeout(function() {
641 $("#thanks-screen").hide(); 641 $("#thanks-screen").hide();
642 deferred.resolve(); 642 deferred.resolve();
@@ -672,9 +672,9 @@ @@ -672,9 +672,9 @@
672 api_url = apihost; 672 api_url = apihost;
673 _run(projectname); 673 _run(projectname);
674 }; 674 };
675 - 675 +
676 wikilibras.updateParameterJSON = function(config, value) { 676 wikilibras.updateParameterJSON = function(config, value) {
677 _updateParameterJSON(config, value); 677 _updateParameterJSON(config, value);
678 } 678 }
679 679
680 -}(window.wikilibras = window.wikilibras || {}, jQuery));  
681 \ No newline at end of file 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 name="movimento"> 2 name="movimento">
8 <div class="panel-header"> 3 <div class="panel-header">
9 <h8>Escolha o movimento mais parecido</h8> 4 <h8>Escolha o movimento mais parecido</h8>
10 </div> 5 </div>
11 <div class="selection-panel-inner-body"> 6 <div class="selection-panel-inner-body">
12 <ul class="rig columns-2"> 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 src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li> 9 src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
15 - <!-- 10 + <!--
16 <li><video src="{{ server }}/img/mov/PONTUAL.webm" 11 <li><video src="{{ server }}/img/mov/PONTUAL.webm"
17 preload="metadata" value="pontual" 12 preload="metadata" value="pontual"
18 class="box-panel-option selection-panel-option" autoplay loop> 13 class="box-panel-option selection-panel-option" autoplay loop>
@@ -34,423 +29,3 @@ else %} {% set fingers_position_dir = &quot;cme&quot; %} {% set orientation_dir = @@ -34,423 +29,3 @@ else %} {% set fingers_position_dir = &quot;cme&quot; %} {% set orientation_dir =
34 </ul> 29 </ul>
35 </div> 30 </div>
36 </div> 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 %}  
view/right-hand-pontual-template.html 0 → 100644
No preview for this file type
view/right-hand/movements.html 0 → 100644
@@ -0,0 +1,31 @@ @@ -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>
view/right-hand/pontual/passo-1.html 0 → 100644
@@ -0,0 +1,115 @@ @@ -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>
view/right-hand/pontual/passo-2.html 0 → 100644
@@ -0,0 +1,242 @@ @@ -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>
view/right-hand/pontual/passo-3.html 0 → 100644
@@ -0,0 +1,34 @@ @@ -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>
view/right-hand/pontual/timeline.html 0 → 100644
@@ -0,0 +1,33 @@ @@ -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>
view/template-backup.html 0 → 100644
@@ -0,0 +1,202 @@ @@ -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 <link rel="stylesheet" href="{{ server }}/assets/css/main.css"> 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 <div id="main-container" class="container"> 7 <div id="main-container" class="container">
7 <div id="initial-screen"> 8 <div id="initial-screen">
@@ -111,18 +112,15 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %} @@ -111,18 +112,15 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
111 <div id="selection-panel"> 112 <div id="selection-panel">
112 <div class="x btn-default"></div> 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 <div class="subconfiguration-panel col-sm-12"> 118 <div class="subconfiguration-panel col-sm-12">
119 <div class="arrow icon_container col-sm-1" name="left-arrow"> 119 <div class="arrow icon_container col-sm-1" name="left-arrow">
120 <img src="{{ server }}/img/left-arrow-icon.png" /> 120 <img src="{{ server }}/img/left-arrow-icon.png" />
121 </div> 121 </div>
122 122
123 - {{ facialConfig.subconfigPanel() }} {{  
124 - handConfig.subconfigPanel('right-hand') }} {{  
125 - handConfig.subconfigPanel('left-hand') }} 123 + {{ facialConfig.subconfigPanel() }}
126 124
127 <div class="arrow icon_container col-sm-1" name="right-arrow"> 125 <div class="arrow icon_container col-sm-1" name="right-arrow">
128 <img src="{{ server }}/img/right-arrow-icon.png" /> 126 <img src="{{ server }}/img/right-arrow-icon.png" />
@@ -196,7 +194,11 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %} @@ -196,7 +194,11 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
196 <script src="{{ server }}/assets/js/js.cookie.js"></script> 194 <script src="{{ server }}/assets/js/js.cookie.js"></script>
197 <script src="{{ server }}/assets/js/articulation.js"></script> 195 <script src="{{ server }}/assets/js/articulation.js"></script>
198 <script src="{{ server }}/assets/js/wikilibras.js"></script> 196 <script src="{{ server }}/assets/js/wikilibras.js"></script>
  197 +<script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
199 198
200 <script type="text/javascript"> 199 <script type="text/javascript">
201 wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}"); 200 wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
202 -</script>  
203 \ No newline at end of file 201 \ No newline at end of file
  202 + $( document ).ready(function() {
  203 + dynengine.load();
  204 + });
  205 +</script>