update engine

Cassio Cabral
1 parent d7fee3a3
Showing 5 changed files with 489 additions and 475 deletions Show diff stats
view/assets/js/dynamic-loading-engine.js
view/hand/configuracao/passo-1.html
view/hand/configuracao/passo-2.html
view/hand/orientacao/passo-1.html
view/template-backup.html
@@ -2,7 +2,40 @@
   var setup = undefined;
   _preprocessHtml = function(data, url) {
-    return data.replace(/{{ server }}/g, url);
+    var matchMainConfig = data.match(/main(?:C|c)onfig="(.*?)"/);
+    var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/);
+    var goodData = data;
+    var isRightHand = function(hand) {
+      return hand === 'right-hand';
+    };
+
+    if (matchMainConfig && matchSubConfig) { // case defined
+      // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao
+      // Specific configurations: configuracao, orientacao
+      // possible values on the side as comment
+      var mainConfig = matchMainConfig[1]; // right-hand or left-hand
+      var subConfig = matchSubConfig[1]; // articulacao | configuracao | duracao | expressao | movimento | orientacao | transicao
+
+      switch (subConfig) {
+        case 'configuracao':
+          if (isRightHand(mainConfig)) {
+            goodData = data.replace(/{{ configuracao }}/g, 'cmd');
+          } else {
+            goodData = data.replace(/{{ configuracao }}/g, 'cme');
+          }
+          break;
+        case 'orientacao':
+          if (isRightHand(mainConfig)) {
+            goodData = data.replace(/{{ orientacao }}/g, 'ord');
+          } else {
+            goodData = data.replace(/{{ orientacao }}/g, 'ore');
+          }
+          break;
+        default:
+          console.log('No subConfig found');
+      }
+    }
+    return goodData.replace(/{{ server }}/g, url);
   };
   dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
@@ -29,25 +62,6 @@
   dynengine.load = function() {
     var url = $('#server-url').data('url');
-    $('.config-panel-option[name=right-hand]').bind('click', function() {
-      console.log('click right hand on panel');
-    });
-
-    /*$('#avatar-body-right-hand').bind('click', function() {
-      console.log('click avatar hand');
-      dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() {
-        $('.movimento-pontual').bind('click', function() {
-          console.log('movimento pontual');
-          dynengine.clean('#selection-panel');
-          dynengine.render(url, '/right-hand/pontual/passo-1.html', '#selection-panel');
-          dynengine.render(url, '/right-hand/pontual/passo-2.html', '#selection-panel');
-          dynengine.render(url, '/right-hand/pontual/passo-3.html', '#selection-panel');
-          dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel');
-        });
-      });
-
-    });*/
-
   };
 }(window.dynengine = window.dynengine || {}, jQuery));
 <div class="selection-panel-body" mainconfig="right-hand" subconfig="configuracao" step="1">
-	<div class="panel-header">
-		<h8>Escolha a posição mais parecida dos dedos</h8>
-	</div>
-	<div class="selection-panel-inner-body">
-		<ul class="rig columns-3">
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0007.png" value="0" />
-				0.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0014.png" value="1" />
-				1.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0045.png" value="2" />
-				2.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0048.png" value="3" />
-				3.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0040.png" value="4" />
-				4.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/cmd/0000.png" value="5" />
-				5.</li>
-		</ul>
-	</div>
+  <div class="panel-header">
+    <h8>Escolha a posição mais parecida dos dedos</h8>
+  </div>
+  <div class="selection-panel-inner-body">
+    <ul class="rig columns-3">
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0007.png" value="0" />
+        0.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0014.png" value="1" />
+        1.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0045.png" value="2" />
+        2.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0048.png" value="3" />
+        3.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0040.png" value="4" />
+        4.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ configuracao }}/0000.png" value="5" />
+        5.</li>
+    </ul>
+  </div>
 </div>
 <script type="text/javascript">
-	configuration.setupFingersGroup();
-</script>
 \ No newline at end of file
+  configuration.setupFingersGroup();
+</script>
 <div class="selection-panel-body" mainConfig="right-hand" subConfig="configuracao" step="2">
-	<div class="panel-header">
-		<h8>Escolha a posição dos dedos</h8>
-	</div>
-	<div class="selection-panel-inner-body">
-		<div class="finger-group" group="0">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0001.png"
-					value="1" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0002.png"
-					value="2" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0007.png"
-					value="7" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0008.png"
-					value="8" /> 4.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0009.png"
-					value="9" /> 5.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0010.png"
-					value="10" /> 6.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0011.png"
-					value="11" /> 7.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0016.png"
-					value="16" /> 8.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0017.png"
-					value="17" /> 9.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0018.png"
-					value="18" /> 10.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0019.png"
-					value="19" /> 11.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0020.png"
-					value="20" /> 12.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0021.png"
-					value="21" /> 13.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0022.png"
-					value="22" /> 14.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0023.png"
-					value="23" /> 15.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0024.png"
-					value="24" /> 16.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0058.png"
-					value="58" /> 17.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0059.png"
-					value="59" /> 18.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0060.png"
-					value="60" /> 19.</li>
-			</ul>
-		</div>
-		<div class="finger-group" group="1">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0003.png"
-					value="3" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0005.png"
-					value="5" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0006.png"
-					value="6" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0012.png"
-					value="12" /> 4.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0013.png"
-					value="13" /> 5.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0014.png"
-					value="14" /> 6.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0030.png"
-					value="30" /> 7.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0052.png"
-					value="52" /> 8.</li>
-			</ul>
-		</div>
-		<div class="finger-group" group="2">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0004.png"
-					value="4" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0015.png"
-					value="15" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0029.png"
-					value="29" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0031.png"
-					value="31" /> 4.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0032.png"
-					value="32" /> 5.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0035.png"
-					value="35" /> 6.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0036.png"
-					value="36" /> 7.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0045.png"
-					value="45" /> 8.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0051.png"
-					value="51" /> 9.</li>
-			</ul>
-		</div>
-		<div class="finger-group" group="3">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0033.png"
-					value="33" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0034.png"
-					value="34" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0037.png"
-					value="37" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0039.png"
-					value="39" /> 4.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0043.png"
-					value="43" /> 5.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0044.png"
-					value="44" /> 6.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0046.png"
-					value="46" /> 7.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0047.png"
-					value="47" /> 8.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0048.png"
-					value="48" /> 9.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0049.png"
-					value="49" /> 10.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0050.png"
-					value="50" /> 11.</li>
-			</ul>
-		</div>
-		<div class="finger-group" group="4">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0038.png"
-					value="38" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0040.png"
-					value="40" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0041.png"
-					value="41" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0042.png"
-					value="42" /> 4.</li>
-			</ul>
-		</div>
-		<div class="finger-group" group="5">
-			<ul class="rig columns-4">
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0025.png"
-					value="25" /> 1.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0026.png"
-					value="26" /> 2.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0027.png"
-					value="27" /> 3.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0028.png"
-					value="28" /> 4.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0053.png"
-					value="53" /> 5.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0054.png"
-					value="54" /> 6.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0055.png"
-					value="55" /> 7.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0056.png"
-					value="56" /> 8.</li>
-				<li><img class="box-panel-option selection-panel-option"
-					src="{{ server }}/img/cmd/0057.png"
-					value="57" /> 9.</li>
-			</ul>
-		</div>
-	</div>
+  <div class="panel-header">
+    <h8>Escolha a posição dos dedos</h8>
+  </div>
+  <div class="selection-panel-inner-body">
+    <div class="finger-group" group="0">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0001.png"
+          value="1" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0002.png"
+          value="2" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0007.png"
+          value="7" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0008.png"
+          value="8" /> 4.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0009.png"
+          value="9" /> 5.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0010.png"
+          value="10" /> 6.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0011.png"
+          value="11" /> 7.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0016.png"
+          value="16" /> 8.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0017.png"
+          value="17" /> 9.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0018.png"
+          value="18" /> 10.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0019.png"
+          value="19" /> 11.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0020.png"
+          value="20" /> 12.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0021.png"
+          value="21" /> 13.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0022.png"
+          value="22" /> 14.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0023.png"
+          value="23" /> 15.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0024.png"
+          value="24" /> 16.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0058.png"
+          value="58" /> 17.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0059.png"
+          value="59" /> 18.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0060.png"
+          value="60" /> 19.</li>
+      </ul>
+    </div>
+    <div class="finger-group" group="1">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0003.png"
+          value="3" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0005.png"
+          value="5" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0006.png"
+          value="6" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0012.png"
+          value="12" /> 4.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0013.png"
+          value="13" /> 5.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0014.png"
+          value="14" /> 6.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0030.png"
+          value="30" /> 7.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0052.png"
+          value="52" /> 8.</li>
+      </ul>
+    </div>
+    <div class="finger-group" group="2">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0004.png"
+          value="4" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0015.png"
+          value="15" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0029.png"
+          value="29" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0031.png"
+          value="31" /> 4.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0032.png"
+          value="32" /> 5.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0035.png"
+          value="35" /> 6.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0036.png"
+          value="36" /> 7.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0045.png"
+          value="45" /> 8.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0051.png"
+          value="51" /> 9.</li>
+      </ul>
+    </div>
+    <div class="finger-group" group="3">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0033.png"
+          value="33" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0034.png"
+          value="34" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0037.png"
+          value="37" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0039.png"
+          value="39" /> 4.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0043.png"
+          value="43" /> 5.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0044.png"
+          value="44" /> 6.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0046.png"
+          value="46" /> 7.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0047.png"
+          value="47" /> 8.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0048.png"
+          value="48" /> 9.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0049.png"
+          value="49" /> 10.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0050.png"
+          value="50" /> 11.</li>
+      </ul>
+    </div>
+    <div class="finger-group" group="4">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0038.png"
+          value="38" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0040.png"
+          value="40" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0041.png"
+          value="41" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0042.png"
+          value="42" /> 4.</li>
+      </ul>
+    </div>
+    <div class="finger-group" group="5">
+      <ul class="rig columns-4">
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0025.png"
+          value="25" /> 1.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0026.png"
+          value="26" /> 2.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0027.png"
+          value="27" /> 3.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0028.png"
+          value="28" /> 4.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0053.png"
+          value="53" /> 5.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0054.png"
+          value="54" /> 6.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0055.png"
+          value="55" /> 7.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0056.png"
+          value="56" /> 8.</li>
+        <li><img class="box-panel-option selection-panel-option"
+          src="{{ server }}/img/{{ configuracao }}/0057.png"
+          value="57" /> 9.</li>
+      </ul>
+    </div>
+  </div>
 </div>
 <script type="text/javascript">
-	configuration.setupFingersPosition();
-</script>
 \ No newline at end of file
+  configuration.setupFingersPosition();
+</script>
 <div class="selection-panel-body" mainConfig="right-hand" subConfig="orientacao" step="1">
-	<div class="panel-header">
-		<h8>Palma da mão</h8>
-	</div>
-	<div class="selection-panel-inner-body">
-		<ul class="rig columns-3">
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/01.png" value="68" />1.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/02.png" value="66" />2.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/03.png" value="64" />3.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/04.png" value="2" />4.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/05.png" value="9" />5.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/06.png" value="16" />6.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/07.png" value="92" />7.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/08.png" value="90" />8.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/09.png" value="88" />9.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/10.png" value="4" />10.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/11.png" value="11" />11.</li>
-			<li><img class="box-panel-option selection-panel-option"
-				src="{{ server }}/img/ord/12.png" value="18" />12.</li>
-		</ul>
-	</div>
+  <div class="panel-header">
+    <h8>Palma da mão</h8>
+  </div>
+  <div class="selection-panel-inner-body">
+    <ul class="rig columns-3">
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/01.png" value="68" />1.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/02.png" value="66" />2.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/03.png" value="64" />3.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/04.png" value="2" />4.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/05.png" value="9" />5.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/06.png" value="16" />6.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/07.png" value="92" />7.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/08.png" value="90" />8.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/09.png" value="88" />9.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/10.png" value="4" />10.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/11.png" value="11" />11.</li>
+      <li><img class="box-panel-option selection-panel-option"
+        src="{{ server }}/img/{{ orientacao }}/12.png" value="18" />12.</li>
+    </ul>
+  </div>
 </div>
 <script type="text/javascript">
-	orientation.setup();
-</script>
 \ No newline at end of file
+  orientation.setup();
+</script>
@@ -4,193 +4,193 @@
 import 'facial-configuration.html' as facialConfig with context %}
 <div id="main-container" class="container">
-	<div id="initial-screen">
-		<div class="col-sm-6 col-centered">
-			<div class="col-sm-8 col-centered">
-				<video src="" preload="metadata"
-					class="ref-video video-body-main video-border" autoplay loop
-					controls>
-					<source type="video/webm">
-				</video>
-			</div>
-			<h6 class="text-center">
-				Ajude a criar o sinal <span class="sign-label"></span>.
-			</h6>
-			<div class="col-sm-4 col-centered">
-				<div id="start-button" class="col-sm-12 btn btn-default">OK</div>
-			</div>
-		</div>
-	</div>
-	<div id="configuration-screen">
-		<div class="row">
-			<div class="col-sm-3">
-				<h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
-				<div id="ref-video-panel" class="col-sm-12">
-					<div id="ref-video-container" class="col-sm-10">
-						<video src="" preload="metadata"
-							class="ref-video video-body-main video-border" autoplay loop
-							controls>
-							<source type="video/webm">
-						</video>
-					</div>
-					<div id="minimize-icon-container" class="col-sm-2 icon_container"
-						name="minimize">
-						<img src="{{ server }}/img/minimize-icon.png"></img>
-					</div>
-					<div id="maximize-icon-container" class="col-sm-2 icon_container"
-						name="maximize">
-						<img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img>
-					</div>
-				</div>
-				<div id="configuration-panel" class="col-sm-8">
-					<div class="icon_container config-panel-option" name="facial"
-						panel="facial">
-						<img src="{{ server }}/img/facial-icon.png"</img> <span
-							class="configuration-panel-label">Expressão</span>
-					</div>
-					<div class="icon_container config-panel-option" name="right-hand"
-						panel="right-hand">
-						<img src="{{ server }}/img/right-hand-icon.png"></img> <span
-							class="configuration-panel-label">Mão direita</span>
-					</div>
-					<div class="icon_container config-panel-option" name="left-hand"
-						panel="left-hand">
-						<img src="{{ server }}/img/left-hand-icon.png"></img> <span
-							class="configuration-panel-label">Mão esquerda</span>
-					</div>
-				</div>
-			</div>
-			<div id="avatar-container" class="col-sm-7 avatar-container-zoom-out">
-				<div id="facial-edit" class="edit-container">
-					<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
-					<div class="icon_container config-panel-option" name="edit"
-						panel="facial">
-						<img src="{{ server }}/img/edit-icon.png"></img>
-					</div>
-				</div>
-				<div id="right-hand-edit" class="edit-container">
-					<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
-					<div class="icon_container config-panel-option" name="edit"
-						panel="right-hand">
-						<img src="{{ server }}/img/edit-icon.png"></img>
-					</div>
-				</div>
-				<div id="left-hand-edit" class="edit-container">
-					<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
-					<div class="icon_container config-panel-option" name="edit"
-						panel="left-hand">
-						<img src="{{ server }}/img/edit-icon.png"></img>
-					</div>
-				</div>
-				<div id="avatar-default" class="avatar-img">
-					<div id="avatar-body-face"
-						class="icon_container config-panel-option" name="avatar-facial"
-						panel="facial">
-						<img src="{{ server }}/img/avatar-facial-icon.png"></img>
-					</div>
-					<div id="avatar-body-right-hand"
-						class="icon_container config-panel-option"
-						name="avatar-right-hand" panel="right-hand">
-						<img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
-					</div>
-					<div id="avatar-body-left-hand"
-						class="icon_container config-panel-option" name="avatar-left-hand"
-						panel="left-hand">
-						<img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
-					</div>
-					<img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
-				</div>
-				<img id="avatar-facial" class="avatar-img avatar-img-zoom-out"
-					src="{{ server }}/img/avatar-facial.png"></img> <img
-					id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
-					src="{{ server }}/img/avatar-right-hand.png"></img> <img
-					id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
-					src="{{ server }}/img/avatar-left-hand.png"></img>
-			</div>
-			<div id="selection-container" class="col-sm-2">
-				<div id="selection-panel">
-					<div class="x btn-default"></div>
+  <div id="initial-screen">
+    <div class="col-sm-6 col-centered">
+      <div class="col-sm-8 col-centered">
+        <video src="" preload="metadata"
+          class="ref-video video-body-main video-border" autoplay loop
+          controls>
+          <source type="video/webm">
+        </video>
+      </div>
+      <h6 class="text-center">
+        Ajude a criar o sinal <span class="sign-label"></span>.
+      </h6>
+      <div class="col-sm-4 col-centered">
+        <div id="start-button" class="col-sm-12 btn btn-default">OK</div>
+      </div>
+    </div>
+  </div>
+  <div id="configuration-screen">
+    <div class="row">
+      <div class="col-sm-3">
+        <h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
+        <div id="ref-video-panel" class="col-sm-12">
+          <div id="ref-video-container" class="col-sm-10">
+            <video src="" preload="metadata"
+              class="ref-video video-body-main video-border" autoplay loop
+              controls>
+              <source type="video/webm">
+            </video>
+          </div>
+          <div id="minimize-icon-container" class="col-sm-2 icon_container"
+            name="minimize">
+            <img src="{{ server }}/img/minimize-icon.png"></img>
+          </div>
+          <div id="maximize-icon-container" class="col-sm-2 icon_container"
+            name="maximize">
+            <img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img>
+          </div>
+        </div>
+        <div id="configuration-panel" class="col-sm-8">
+          <div class="icon_container config-panel-option" name="facial"
+            panel="facial">
+            <img src="{{ server }}/img/facial-icon.png"</img> <span
+              class="configuration-panel-label">Expressão</span>
+          </div>
+          <div class="icon_container config-panel-option" name="right-hand"
+            panel="right-hand">
+            <img src="{{ server }}/img/right-hand-icon.png"></img> <span
+              class="configuration-panel-label">Mão direita</span>
+          </div>
+          <div class="icon_container config-panel-option" name="left-hand"
+            panel="left-hand">
+            <img src="{{ server }}/img/left-hand-icon.png"></img> <span
+              class="configuration-panel-label">Mão esquerda</span>
+          </div>
+        </div>
+      </div>
+      <div id="avatar-container" class="col-sm-7 avatar-container-zoom-out">
+        <div id="facial-edit" class="edit-container">
+          <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
+          <div class="icon_container config-panel-option" name="edit"
+            panel="facial">
+            <img src="{{ server }}/img/edit-icon.png"></img>
+          </div>
+        </div>
+        <div id="right-hand-edit" class="edit-container">
+          <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
+          <div class="icon_container config-panel-option" name="edit"
+            panel="right-hand">
+            <img src="{{ server }}/img/edit-icon.png"></img>
+          </div>
+        </div>
+        <div id="left-hand-edit" class="edit-container">
+          <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
+          <div class="icon_container config-panel-option" name="edit"
+            panel="left-hand">
+            <img src="{{ server }}/img/edit-icon.png"></img>
+          </div>
+        </div>
+        <div id="avatar-default" class="avatar-img">
+          <div id="avatar-body-face"
+            class="icon_container config-panel-option" name="avatar-facial"
+            panel="facial">
+            <img src="{{ server }}/img/avatar-facial-icon.png"></img>
+          </div>
+          <div id="avatar-body-right-hand"
+            class="icon_container config-panel-option"
+            name="avatar-right-hand" panel="right-hand">
+            <img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
+          </div>
+          <div id="avatar-body-left-hand"
+            class="icon_container config-panel-option" name="avatar-left-hand"
+            panel="left-hand">
+            <img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
+          </div>
+          <img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
+        </div>
+        <img id="avatar-facial" class="avatar-img avatar-img-zoom-out"
+          src="{{ server }}/img/avatar-facial.png"></img> <img
+          id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
+          src="{{ server }}/img/avatar-right-hand.png"></img> <img
+          id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
+          src="{{ server }}/img/avatar-left-hand.png"></img>
+      </div>
+      <div id="selection-container" class="col-sm-2">
+        <div id="selection-panel">
+          <div class="x btn-default"></div>
-					{{ facialConfig.selectionPanel() }} {{
-					handConfig.selectionPanel('right-hand') }} {{
-					handConfig.selectionPanel('left-hand') }}
+          {{ facialConfig.selectionPanel() }} {{
+          handConfig.selectionPanel('right-hand') }} {{
+          handConfig.selectionPanel('left-hand') }}
-					<div class="subconfiguration-panel col-sm-12">
-						<div class="arrow icon_container col-sm-1" name="left-arrow">
-							<img src="{{ server }}/img/left-arrow-icon.png" />
-						</div>
+          <div class="subconfiguration-panel col-sm-12">
+            <div class="arrow icon_container col-sm-1" name="left-arrow">
+              <img src="{{ server }}/img/left-arrow-icon.png" />
+            </div>
-						{{ facialConfig.subconfigPanel() }} {{
-						handConfig.subconfigPanel('right-hand') }} {{
-						handConfig.subconfigPanel('left-hand') }}
+            {{ facialConfig.subconfigPanel() }} {{
+            handConfig.subconfigPanel('right-hand') }} {{
+            handConfig.subconfigPanel('left-hand') }}
-						<div class="arrow icon_container col-sm-1" name="right-arrow">
-							<img src="{{ server }}/img/right-arrow-icon.png" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div id="ready-button" class="btn btn-default pull-right disabled">GERAR
-				SINAL</div>
-		</div>
-	</div>
-	<div id="render-screen">
-		<div id="render-main" class="row">
-			<div id="render-ref" class="col-sm-6">
-				<h6>Vídeo de referência</h6>
-				<div class="col-sm-12">
-					<video src="" preload="metadata"
-						class="ref-video video-body-main video-border" loop controls>
-						<source type="video/webm">
-					</video>
-				</div>
-			</div>
-			<div class="col-sm-6">
-				<div id="render-avatar" class="col-sm-12">
-					<h6>
-						Sinal "<span class="sign-label"></span>" construído
-					</h6>
-					<video src="" preload="metadata"
-						class="video-body-main video-border" autoplay loop controls>
-						<source type="video/webm">
-					</video>
-					<div id="render-edit" class="icon_container" name="big-edit">
-						<img class="col-centered" src="{{ server }}/img/big-edit-icon.png"></img>
-					</div>
-				</div>
-				<div id="render-loading">
-					<h6>
-						Gerando o sinal "<span class="sign-label"></span>"
-					</h6>
-					<div id="loading-container" class="video-border">
-						<img src="{{ server }}/img/loading.gif">
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
-				SINAL</div>
-		</div>
-	</div>
-	<div id="thanks-screen">
-		<div class="col-sm-6 col-centered">
-			<div id="completed-task-msg">
-				<h3 class="text-center">Obrigado,</h3>
-				<h6 class="text-center">você configurou o sinal com sucesso!</h6>
-			</div>
-			<div id="completed-all-task-msg">
-				<h3 class="text-center">Parabéns,</h3>
-				<h6 class="text-center">você configurou todos os sinais
-					disponíveis!</h6>
-			</div>
-			<div class="col-sm-11 col-centered">
-				<img src="{{ server }}/img/avatar-thanks.png"></img>
-			</div>
-		</div>
-	</div>
+            <div class="arrow icon_container col-sm-1" name="right-arrow">
+              <img src="{{ server }}/img/right-arrow-icon.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div id="ready-button" class="btn btn-default pull-right disabled">GERAR
+        SINAL</div>
+    </div>
+  </div>
+  <div id="render-screen">
+    <div id="render-main" class="row">
+      <div id="render-ref" class="col-sm-6">
+        <h6>Vídeo de referência</h6>
+        <div class="col-sm-12">
+          <video src="" preload="metadata"
+            class="ref-video video-body-main video-border" loop controls>
+            <source type="video/webm">
+          </video>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div id="render-avatar" class="col-sm-12">
+          <h6>
+            Sinal "<span class="sign-label"></span>" construído
+          </h6>
+          <video src="" preload="metadata"
+            class="video-body-main video-border" autoplay loop controls>
+            <source type="video/webm">
+          </video>
+          <div id="render-edit" class="icon_container" name="big-edit">
+            <img class="col-centered" src="{{ server }}/img/big-edit-icon.png"></img>
+          </div>
+        </div>
+        <div id="render-loading">
+          <h6>
+            Gerando o sinal "<span class="sign-label"></span>"
+          </h6>
+          <div id="loading-container" class="video-border">
+            <img src="{{ server }}/img/loading.gif">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
+        SINAL</div>
+    </div>
+  </div>
+  <div id="thanks-screen">
+    <div class="col-sm-6 col-centered">
+      <div id="completed-task-msg">
+        <h3 class="text-center">Obrigado,</h3>
+        <h6 class="text-center">você configurou o sinal com sucesso!</h6>
+      </div>
+      <div id="completed-all-task-msg">
+        <h3 class="text-center">Parabéns,</h3>
+        <h6 class="text-center">você configurou todos os sinais
+          disponíveis!</h6>
+      </div>
+      <div class="col-sm-11 col-centered">
+        <img src="{{ server }}/img/avatar-thanks.png"></img>
+      </div>
+    </div>
+  </div>
 </div>
 <script src="{{ server }}/assets/js/js.cookie.js"></script>
@@ -198,5 +198,5 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
 <script src="{{ server }}/assets/js/wikilibras.js"></script>
 <script type="text/javascript">
-	wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
+  wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
 </script>
	@@ -2,7 +2,40 @@		@@ -2,7 +2,40 @@
2	var setup = undefined;	2	var setup = undefined;
3		3
4	_preprocessHtml = function(data, url) {	4	_preprocessHtml = function(data, url) {
5	- return data.replace(/{{ server }}/g, url);	5	+ var matchMainConfig = data.match(/main(?:C\|c)onfig="(.*?)"/);
		6	+ var matchSubConfig = data.match(/sub(?:C\|c)onfig="(.*?)"/);
		7	+ var goodData = data;
		8	+ var isRightHand = function(hand) {
		9	+ return hand === 'right-hand';
		10	+ };
		11	+
		12	+ if (matchMainConfig && matchSubConfig) { // case defined
		13	+ // There is no specific(right or left hand dependent) assets for: articulacao, duracao, expressao, movimento, transicao
		14	+ // Specific configurations: configuracao, orientacao
		15	+ // possible values on the side as comment
		16	+ var mainConfig = matchMainConfig[1]; // right-hand or left-hand
		17	+ var subConfig = matchSubConfig[1]; // articulacao \| configuracao \| duracao \| expressao \| movimento \| orientacao \| transicao
		18	+
		19	+ switch (subConfig) {
		20	+ case 'configuracao':
		21	+ if (isRightHand(mainConfig)) {
		22	+ goodData = data.replace(/{{ configuracao }}/g, 'cmd');
		23	+ } else {
		24	+ goodData = data.replace(/{{ configuracao }}/g, 'cme');
		25	+ }
		26	+ break;
		27	+ case 'orientacao':
		28	+ if (isRightHand(mainConfig)) {
		29	+ goodData = data.replace(/{{ orientacao }}/g, 'ord');
		30	+ } else {
		31	+ goodData = data.replace(/{{ orientacao }}/g, 'ore');
		32	+ }
		33	+ break;
		34	+ default:
		35	+ console.log('No subConfig found');
		36	+ }
		37	+ }
		38	+ return goodData.replace(/{{ server }}/g, url);
6	};	39	};
7		40
8	dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {	41	dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
	@@ -29,25 +62,6 @@		@@ -29,25 +62,6 @@
29		62
30	dynengine.load = function() {	63	dynengine.load = function() {
31	var url = $('#server-url').data('url');	64	var url = $('#server-url').data('url');
32	- $('.config-panel-option[name=right-hand]').bind('click', function() {
33	- console.log('click right hand on panel');
34	- });
35	-
36	- /*$('#avatar-body-right-hand').bind('click', function() {
37	- console.log('click avatar hand');
38	- dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() {
39	- $('.movimento-pontual').bind('click', function() {
40	- console.log('movimento pontual');
41	- dynengine.clean('#selection-panel');
42	- dynengine.render(url, '/right-hand/pontual/passo-1.html', '#selection-panel');
43	- dynengine.render(url, '/right-hand/pontual/passo-2.html', '#selection-panel');
44	- dynengine.render(url, '/right-hand/pontual/passo-3.html', '#selection-panel');
45	- dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel');
46	- });
47	- });
48	-
49	- });*/
50	-
51	};	65	};
52		66
53	}(window.dynengine = window.dynengine \|\| {}, jQuery));	67	}(window.dynengine = window.dynengine \|\| {}, jQuery));