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 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"
... ...
view/assets/js/dynamic-loading-engine.js 0 → 100644
... ... @@ -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 @@
  1 +testtest
0 2 \ No newline at end of file
... ...
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 = &quot;cme&quot; %} {% 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 %}
... ...
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 @@
  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 @@
  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 @@
  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 @@
  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 @@
  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 @@
  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 &#39;facial-configuration.html&#39; 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 &#39;facial-configuration.html&#39; 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>
... ...