Download as
Browse Code »

Commit 63b9d0e2eaec5a619cd6edfb6bb93dfccf25c950

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

add {{ hand }} parameter handling

Showing 9 changed files with 181 additions and 173 deletions   Show diff stats
view/assets/js/dynamic-loading-engine.js
  Diff comments   View file @63b9d0e
... ... @@ -2,9 +2,9 @@
2 2 var setup = undefined;
3 3  
4 4 _preprocessHtml = function(data, url) {
5   - var matchMainConfig = data.match(/main(?:C|c)onfig="(.*?)"/);
6 5 var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/);
7 6 var goodData = data;
  7 +
8 8 var isRightHand = function(hand) {
9 9 return hand === 'right-hand';
10 10 };
... ... @@ -13,19 +13,20 @@
13 13 // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao
14 14 // Specific configurations: configuracao, orientacao
15 15 // possible values on the side as comment
16   - var mainConfig = matchMainConfig[1]; // right-hand or left-hand
  16 + var hand = dynworkflow.getMainConfig(); // right-hand or left-hand
17 17 var subConfig = matchSubConfig[1]; // articulacao | configuracao | duracao | expressao | movimento | orientacao | transicao
18 18  
  19 + // possible subconfigs that need changing
19 20 switch (subConfig) {
20 21 case 'configuracao':
21   - if (isRightHand(mainConfig)) {
  22 + if (isRightHand(hand)) {
22 23 goodData = data.replace(/{{ configuracao }}/g, 'cmd');
23 24 } else {
24 25 goodData = data.replace(/{{ configuracao }}/g, 'cme');
25 26 }
26 27 break;
27 28 case 'orientacao':
28   - if (isRightHand(mainConfig)) {
  29 + if (isRightHand(hand)) {
29 30 goodData = data.replace(/{{ orientacao }}/g, 'ord');
30 31 } else {
31 32 goodData = data.replace(/{{ orientacao }}/g, 'ore');
... ... @@ -34,6 +35,9 @@
34 35 default:
35 36 console.log('No subConfig found');
36 37 }
  38 +
  39 + // change {{ hand }}
  40 + goodData = data.replace(/{{ hand }}/g, hand);
37 41 }
38 42 return goodData.replace(/{{ server }}/g, url);
39 43 };
... ...
view/assets/js/dynamic-selection-workflow.js
  Diff comments   View file @63b9d0e
... ... @@ -268,6 +268,10 @@
268 268 return _getAttributes(jsonWF['hand']['movimento'][movementName]);
269 269 };
270 270  
  271 + dynworkflow.getMainConfig = function() {
  272 + return mainConfig;
  273 + };
  274 +
271 275 dynworkflow.load = function() {
272 276 baseUrl = $('#server-url').data('url');
273 277 $.get(baseUrl + '/conf/selection-workflow-json', function(result) {
... ...
view/hand/articulacao/passo-1.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="1">
2   - <div class="panel-header">
3   - <h8>Onde é feito o sinal?</h8>
4   - </div>
5   - <div class="selection-panel-inner-body">
6   - <div data-x="" data-y=""
7   - class="module-x-y grid gray-background right-hand-gray-front-avatar active">
8   - <div class=grid-selectors>
9   - <div class="grid-row row-number-1" data-y=1>
10   - <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
11   - <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
12   - <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
13   - <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
14   - <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
15   - <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
16   - <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
17   - <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
18   - <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
19   - <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
20   - </div>
21   - <div class="grid-row row-number-2" data-y=2>
22   - <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
23   - <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
24   - <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
25   - <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
26   - <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
27   - <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
28   - <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
29   - <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
30   - <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
31   - <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
32   - </div>
33   - <div class="grid-row row-number-3" data-y=3>
34   - <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
35   - <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
36   - <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
37   - <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
38   - <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
39   - <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
40   - <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
41   - <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
42   - <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
43   - <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
44   - </div>
45   - <div class="grid-row row-number-4" data-y=4>
46   - <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
47   - <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
48   - <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
49   - <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
50   - <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
51   - <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
52   - <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
53   - <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
54   - <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
55   - <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
56   - </div>
57   - <div class="grid-row row-number-5" data-y=5>
58   - <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
59   - <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
60   - <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
61   - <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
62   - <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
63   - <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
64   - <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
65   - <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
66   - <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
67   - <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
68   - </div>
69   - </div>
70   - </div>
71   - </div>
  1 +<div class="selection-panel-body" mainConfig="{{ hand }}" subConfig="articulacao" step="1">
  2 + <div class="panel-header">
  3 + <h8>Onde é feito o sinal?</h8>
  4 + </div>
  5 + <div class="selection-panel-inner-body">
  6 + <div data-x="" data-y=""
  7 + class="module-x-y grid gray-background {{ hand }}-gray-front-avatar active">
  8 + <div class=grid-selectors>
  9 + <div class="grid-row row-number-1" data-y=1>
  10 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  11 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  12 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  13 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  14 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  15 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  16 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  17 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  18 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  19 + <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
  20 + </div>
  21 + <div class="grid-row row-number-2" data-y=2>
  22 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  23 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  24 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  25 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  26 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  27 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  28 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  29 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  30 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  31 + <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
  32 + </div>
  33 + <div class="grid-row row-number-3" data-y=3>
  34 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  35 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  36 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  37 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  38 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  39 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  40 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  41 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  42 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  43 + <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
  44 + </div>
  45 + <div class="grid-row row-number-4" data-y=4>
  46 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  47 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  48 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  49 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  50 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  51 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  52 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  53 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  54 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  55 + <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
  56 + </div>
  57 + <div class="grid-row row-number-5" data-y=5>
  58 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  59 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  60 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  61 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  62 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  63 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  64 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  65 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  66 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  67 + <div class="ball-selector selection-panel-option ball-10" data-x=10></div>
  68 + </div>
  69 + </div>
  70 + </div>
  71 + </div>
72 72 </div>
73 73 <script type="text/javascript">
74   - articulation.setupModuleXY("{{ server }}");
75   -</script>
76 74 \ No newline at end of file
  75 + articulation.setupModuleXY("{{ server }}", "{{ hand }}");
  76 +</script>
... ...
view/hand/articulacao/passo-2.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="2">
2   - <div class="panel-header">
3   - <h8>Escolha a distância entre a mão e o corpo</h8>
4   - </div>
5   - <div class="selection-panel-inner-body">
6   - <div data-z="" class="module-z grid gray-background gray-side-avatar">
7   - <div class="grid-selectors pull-right">
8   - <div class="grid-row row-number-1">
9   - <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
10   - <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
11   - <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
12   - </div>
13   - <div class="grid-row row-number-2">
14   - <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
15   - <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
16   - <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
17   - </div>
18   - <div class="grid-row row-number-3">
19   - <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
20   - <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
21   - <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
22   - </div>
23   - <div class="grid-row row-number-4">
24   - <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
25   - <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
26   - <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
27   - </div>
28   - <div class="grid-row row-number-5">
29   - <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
30   - </div>
31   - </div>
32   - </div>
33   - </div>
  1 +<div class="selection-panel-body" mainConfig="{{ hand }}" subConfig="articulacao" step="2">
  2 + <div class="panel-header">
  3 + <h8>Escolha a distância entre a mão e o corpo</h8>
  4 + </div>
  5 + <div class="selection-panel-inner-body">
  6 + <div data-z="" class="module-z grid gray-background gray-side-avatar">
  7 + <div class="grid-selectors pull-right">
  8 + <div class="grid-row row-number-1">
  9 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  10 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  11 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  12 + </div>
  13 + <div class="grid-row row-number-2">
  14 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  15 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  16 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  17 + </div>
  18 + <div class="grid-row row-number-3">
  19 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  20 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  21 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  22 + </div>
  23 + <div class="grid-row row-number-4">
  24 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  25 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  26 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  27 + </div>
  28 + <div class="grid-row row-number-5">
  29 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div>
34 34 </div>
35 35 <script type="text/javascript">
36   - articulation.setupModuleZ("{{ server }}");
37   -</script>
38 36 \ No newline at end of file
  37 + articulation.setupModuleZ("{{ server }}", "{{ hand }}");
  38 +</script>
... ...
view/hand/configuracao/passo-1.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainconfig="right-hand" subconfig="configuracao" step="1">
  1 +<div class="selection-panel-body" mainconfig="{{ hand }}" subconfig="configuracao" step="1">
2 2 <div class="panel-header">
3 3 <h8>Escolha a posição mais parecida dos dedos</h8>
4 4 </div>
... ... @@ -26,5 +26,5 @@
26 26 </div>
27 27 </div>
28 28 <script type="text/javascript">
29   - configuration.setupFingersGroup();
  29 + configuration.setupFingersGroup("{{ hand }}");
30 30 </script>
... ...
view/hand/configuracao/passo-2.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainConfig="right-hand" subConfig="configuracao" step="2">
  1 +<div class="selection-panel-body" mainConfig="{{ hand }}" subConfig="configuracao" step="2">
2 2 <div class="panel-header">
3 3 <h8>Escolha a posição dos dedos</h8>
4 4 </div>
... ... @@ -210,5 +210,5 @@
210 210 </div>
211 211 </div>
212 212 <script type="text/javascript">
213   - configuration.setupFingersPosition();
  213 + configuration.setupFingersPosition("{{ hand }}");
214 214 </script>
... ...
view/hand/movimento/passo-1.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainConfig="right-hand" subConfig="movimento" step="1">
2   - <div class="panel-header">
3   - <h8>Escolha o movimento mais parecido</h8>
4   - </div>
5   - <div class="selection-panel-inner-body">
6   - <ul class="rig columns-2">
7   - <li class="movimento-pontual"><img
8   - class="box-panel-option selection-panel-option"
9   - src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
10   - <!--
11   - <li><video src="{{ 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 }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
18   - <li><img class="box-panel-option selection-panel-option"
19   - src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
20   - <li><img class="box-panel-option selection-panel-option"
21   - src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
22   - <li><img class="box-panel-option selection-panel-option"
23   - src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
24   - <li><img class="box-panel-option selection-panel-option"
25   - src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
26   - <li><img class="box-panel-option selection-panel-option"
27   - src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
28   - -->
29   - </ul>
30   - </div>
  1 +<div class="selection-panel-body" mainConfig="{{ hand }}" subConfig="movimento" step="1">
  2 + <div class="panel-header">
  3 + <h8>Escolha o movimento mais parecido</h8>
  4 + </div>
  5 + <div class="selection-panel-inner-body">
  6 + <ul class="rig columns-2">
  7 + <li class="movimento-pontual"><img
  8 + class="box-panel-option selection-panel-option"
  9 + src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
  10 + <!--
  11 + <li><video src="{{ 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 }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
  18 + <li><img class="box-panel-option selection-panel-option"
  19 + src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
  20 + <li><img class="box-panel-option selection-panel-option"
  21 + src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
  22 + <li><img class="box-panel-option selection-panel-option"
  23 + src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
  24 + <li><img class="box-panel-option selection-panel-option"
  25 + src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
  26 + <li><img class="box-panel-option selection-panel-option"
  27 + src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
  28 + -->
  29 + </ul>
  30 + </div>
31 31 </div>
32 32 <script type="text/javascript">
33   - movement.setup("{{ server }}");
  33 + movement.setup("{{ server }}", "{{ hand }}");
34 34 </script>
... ...
view/hand/orientacao/passo-1.html
  Diff comments   View file @63b9d0e
1   -<div class="selection-panel-body" mainConfig="right-hand" subConfig="orientacao" step="1">
  1 +<div class="selection-panel-body" mainConfig="{{ hand }}" subConfig="orientacao" step="1">
2 2 <div class="panel-header">
3 3 <h8>Palma da mão</h8>
4 4 </div>
... ... @@ -32,5 +32,5 @@
32 32 </div>
33 33 </div>
34 34 <script type="text/javascript">
35   - orientation.setup();
  35 + orientation.setup("{{ hand }}");
36 36 </script>
... ...
view/hand/timeline.html
  Diff comments   View file @63b9d0e
1   -<div class="subconfiguration-panel col-sm-12" mainConfig="right-hand">
2   - <div class="arrow icon_container col-sm-1" name="left-arrow">
3   - <img src="{{ server }}/img/left-arrow-icon.png" />
4   - </div>
  1 +<div class="subconfiguration-panel col-sm-12" mainConfig="{{ hand }}">
  2 + <div class="arrow icon_container col-sm-1" name="left-arrow">
  3 + <img src="{{ server }}/img/left-arrow-icon.png" />
  4 + </div>
5 5  
6   - <div class="subconfiguration-options col-sm-10">
7   - <div class="icon_container" name="hand-moviment" json_name="movimento">
8   - <img src="{{ server }}/img/hand-moviment-icon.png" />
9   - </div>
10   - <div class="icon_container" name="hand-articulation"
11   - json_name="articulacao">
12   - <img src="{{ server }}/img/hand-articulation-icon.png" />
13   - </div>
14   - <div class="icon_container" name="hand-fingers-position"
15   - json_name="configuracao">
16   - <img src="{{ server }}/img/hand-fingers-position-icon.png" />
17   - </div>
18   - <div class="icon_container" name="hand-orientation"
19   - json_name="orientacao">
20   - <img src="{{ server }}/img/hand-orientation-icon.png" />
21   - </div>
22   - </div>
  6 + <div class="subconfiguration-options col-sm-10">
  7 + <div class="icon_container" name="hand-moviment" json_name="movimento">
  8 + <img src="{{ server }}/img/hand-moviment-icon.png" />
  9 + </div>
  10 + <div class="icon_container" name="hand-articulation"
  11 + json_name="articulacao">
  12 + <img src="{{ server }}/img/hand-articulation-icon.png" />
  13 + </div>
  14 + <div class="icon_container" name="hand-fingers-position"
  15 + json_name="configuracao">
  16 + <img src="{{ server }}/img/hand-fingers-position-icon.png" />
  17 + </div>
  18 + <div class="icon_container" name="hand-orientation"
  19 + json_name="orientacao">
  20 + <img src="{{ server }}/img/hand-orientation-icon.png" />
  21 + </div>
  22 + </div>
23 23  
24   - <div class="arrow icon_container col-sm-1" name="right-arrow">
25   - <img src="{{ server }}/img/right-arrow-icon.png" />
26   - </div>
  24 + <div class="arrow icon_container col-sm-1" name="right-arrow">
  25 + <img src="{{ server }}/img/right-arrow-icon.png" />
  26 + </div>
27 27 </div>
... ...