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