Commit 63b9d0e2eaec5a619cd6edfb6bb93dfccf25c950

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

add {{ hand }} parameter handling

view/assets/js/dynamic-loading-engine.js
@@ -2,9 +2,9 @@ @@ -2,9 +2,9 @@
2 var setup = undefined; 2 var setup = undefined;
3 3
4 _preprocessHtml = function(data, url) { 4 _preprocessHtml = function(data, url) {
5 - var matchMainConfig = data.match(/main(?:C|c)onfig="(.*?)"/);  
6 var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/); 5 var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/);
7 var goodData = data; 6 var goodData = data;
  7 +
8 var isRightHand = function(hand) { 8 var isRightHand = function(hand) {
9 return hand === 'right-hand'; 9 return hand === 'right-hand';
10 }; 10 };
@@ -13,19 +13,20 @@ @@ -13,19 +13,20 @@
13 // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao 13 // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao
14 // Specific configurations: configuracao, orientacao 14 // Specific configurations: configuracao, orientacao
15 // possible values on the side as comment 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 var subConfig = matchSubConfig[1]; // articulacao | configuracao | duracao | expressao | movimento | orientacao | transicao 17 var subConfig = matchSubConfig[1]; // articulacao | configuracao | duracao | expressao | movimento | orientacao | transicao
18 18
  19 + // possible subconfigs that need changing
19 switch (subConfig) { 20 switch (subConfig) {
20 case 'configuracao': 21 case 'configuracao':
21 - if (isRightHand(mainConfig)) { 22 + if (isRightHand(hand)) {
22 goodData = data.replace(/{{ configuracao }}/g, 'cmd'); 23 goodData = data.replace(/{{ configuracao }}/g, 'cmd');
23 } else { 24 } else {
24 goodData = data.replace(/{{ configuracao }}/g, 'cme'); 25 goodData = data.replace(/{{ configuracao }}/g, 'cme');
25 } 26 }
26 break; 27 break;
27 case 'orientacao': 28 case 'orientacao':
28 - if (isRightHand(mainConfig)) { 29 + if (isRightHand(hand)) {
29 goodData = data.replace(/{{ orientacao }}/g, 'ord'); 30 goodData = data.replace(/{{ orientacao }}/g, 'ord');
30 } else { 31 } else {
31 goodData = data.replace(/{{ orientacao }}/g, 'ore'); 32 goodData = data.replace(/{{ orientacao }}/g, 'ore');
@@ -34,6 +35,9 @@ @@ -34,6 +35,9 @@
34 default: 35 default:
35 console.log('No subConfig found'); 36 console.log('No subConfig found');
36 } 37 }
  38 +
  39 + // change {{ hand }}
  40 + goodData = data.replace(/{{ hand }}/g, hand);
37 } 41 }
38 return goodData.replace(/{{ server }}/g, url); 42 return goodData.replace(/{{ server }}/g, url);
39 }; 43 };
view/assets/js/dynamic-selection-workflow.js
@@ -268,6 +268,10 @@ @@ -268,6 +268,10 @@
268 return _getAttributes(jsonWF['hand']['movimento'][movementName]); 268 return _getAttributes(jsonWF['hand']['movimento'][movementName]);
269 }; 269 };
270 270
  271 + dynworkflow.getMainConfig = function() {
  272 + return mainConfig;
  273 + };
  274 +
271 dynworkflow.load = function() { 275 dynworkflow.load = function() {
272 baseUrl = $('#server-url').data('url'); 276 baseUrl = $('#server-url').data('url');
273 $.get(baseUrl + '/conf/selection-workflow-json', function(result) { 277 $.get(baseUrl + '/conf/selection-workflow-json', function(result) {
view/hand/articulacao/passo-1.html
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 </div> 72 </div>
73 <script type="text/javascript"> 73 <script type="text/javascript">
74 - articulation.setupModuleXY("{{ server }}");  
75 -</script>  
76 \ No newline at end of file 74 \ No newline at end of file
  75 + articulation.setupModuleXY("{{ server }}", "{{ hand }}");
  76 +</script>
view/hand/articulacao/passo-2.html
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 </div> 34 </div>
35 <script type="text/javascript"> 35 <script type="text/javascript">
36 - articulation.setupModuleZ("{{ server }}");  
37 -</script>  
38 \ No newline at end of file 36 \ No newline at end of file
  37 + articulation.setupModuleZ("{{ server }}", "{{ hand }}");
  38 +</script>
view/hand/configuracao/passo-1.html
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 <div class="panel-header"> 2 <div class="panel-header">
3 <h8>Escolha a posição mais parecida dos dedos</h8> 3 <h8>Escolha a posição mais parecida dos dedos</h8>
4 </div> 4 </div>
@@ -26,5 +26,5 @@ @@ -26,5 +26,5 @@
26 </div> 26 </div>
27 </div> 27 </div>
28 <script type="text/javascript"> 28 <script type="text/javascript">
29 - configuration.setupFingersGroup(); 29 + configuration.setupFingersGroup("{{ hand }}");
30 </script> 30 </script>
view/hand/configuracao/passo-2.html
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 <div class="panel-header"> 2 <div class="panel-header">
3 <h8>Escolha a posição dos dedos</h8> 3 <h8>Escolha a posição dos dedos</h8>
4 </div> 4 </div>
@@ -210,5 +210,5 @@ @@ -210,5 +210,5 @@
210 </div> 210 </div>
211 </div> 211 </div>
212 <script type="text/javascript"> 212 <script type="text/javascript">
213 - configuration.setupFingersPosition(); 213 + configuration.setupFingersPosition("{{ hand }}");
214 </script> 214 </script>
view/hand/movimento/passo-1.html
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 </div> 31 </div>
32 <script type="text/javascript"> 32 <script type="text/javascript">
33 - movement.setup("{{ server }}"); 33 + movement.setup("{{ server }}", "{{ hand }}");
34 </script> 34 </script>
view/hand/orientacao/passo-1.html
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 <div class="panel-header"> 2 <div class="panel-header">
3 <h8>Palma da mão</h8> 3 <h8>Palma da mão</h8>
4 </div> 4 </div>
@@ -32,5 +32,5 @@ @@ -32,5 +32,5 @@
32 </div> 32 </div>
33 </div> 33 </div>
34 <script type="text/javascript"> 34 <script type="text/javascript">
35 - orientation.setup(); 35 + orientation.setup("{{ hand }}");
36 </script> 36 </script>
view/hand/timeline.html
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 </div> 27 </div>