example/task_pre-git(OLD).html at main · rodrigocns/example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>iRoT (backup do teste offline)</title>
  <link rel="stylesheet" href="css/screen.css" type="text/css" />
  <script type="text/javascript" src="jsmol/JSmol.min.js"></script>
  <script type="text/javascript" id="jmol_info">
    var Info = {
      color: "#000000",
      height: 400,
      width: 400,
      use: "HTML5",
      src: "models/pseudobatracotoxin_molecule.xyz",
      j2sPath: "jsmol/j2s",
      serverURL: "jsmol/php/jsmol.php",

      defaultModel: "",
      script: null,
      readyFunction: null,
      debug: false
    }
    var Ori1 = -675;
    var Ori2 = -389;
    var Ori3 = -627;
    var Ori4 = 93.16;
        //moveto 0.0 {-675 -389 -627 93.16}
  </script>
</head>


<body>
  <nav>
    <ul>
      <li><a href="#tab2">Teste</a></li>
      <li><a href="#tab3">Gráfico</a></li>
      <li><a href="#tab4">Tabela</a></li>
    </ul>
  </nav>

  <br><br>
  <section class="tab" id="tab2" width:100%>                 <!-- O TESTE -->
    <br>
      <table>
        <tr>
          <td><div id="divMoleculaPNG" style="width:40%; visibility:hidden"><img src="imgs/pseudobatracotoxinaBlack_400px.png"/></div></td> <!--  -675 -389 -627 93.16  -->
          <td><div style="height:150px; width:20%; background-color:grey">
            <button onclick="botaoInicio()">INÍCIO!</button>
            <button onclick="tamanhoJanela()">TESTE</button>
            <button onclick="timerStop()">FIM!</button><br>
            </div>
              <div style="display:none"> Tempo: <output id="tempoGasto" ></output> s
              </div> <!-- display: none some com o tempo -->
            </td>
          <td><div id="divMoleculaTeste" style="width:40%;visibility:hidden"><script>
            Info.width=Info.height=400; Info.src="models/pseudobatracotoxin_molecule.xyz";     // start at: moveto {-666 39 745 139.54}
            Jmol.getApplet("jsmol_molecula", Info);
          </script></div></td>
        </tr>
      </table>
  </section>

  <section class="tab" id="tab3">
    <br><br>
      <table><tr><td style="width:400px">Gráfico do progresso no teste pelo tempo</td><td style="width:400px"><span id="xycoordenadas"></span></td></tr></table>
      <canvas id="grafico" width="2000" height="280" style="border:1px solid lightgrey" onmousemove="cnvs_getCoordenadas(event)" onmouseout="cnvs_clearCoordenadas()"></canvas>
        <script>
          var canv = document.getElementById("grafico");
          var ctx = canv.getContext("2d");
          {ctx.lineWidth=1;   // layout dos eixos no gráfico
          ctx.strokeStyle="#999999";
          ctx.moveTo(30,30);
          ctx.lineTo(30,grafico.height-30);
          ctx.lineTo(grafico.width-30,grafico.height-30);
          ctx.moveTo(25,35);
          ctx.lineTo(30,30);
          ctx.lineTo(35,35);
          ctx.moveTo(grafico.width-35,grafico.height-35);
          ctx.lineTo(grafico.width-30,grafico.height-30);
          ctx.lineTo(grafico.width-35,grafico.height-25);
          ctx.stroke();}
          ctx.strokeStyle="black";
          ctx.moveTo(30,grafico.height-130);

          function cnvs_getCoordenadas(e){    // captar as coordenadas do gráfico
              x=e.clientX;
              y=e.clientY;
              document.getElementById("xycoordenadas").innerHTML="                        Coordenadas em tempo(eixo x) por Progresso(eixo y): ( " + (x-40)/10 + " , " + (360-y)*10 + " )"
          }   // Origem é em (40,360) da página  (x,y)

          function cnvs_clearCoordenadas(){
              document.getElementById("xycoordenadas").innerHTML="";
          }

          function cnvs_strokeGrafico(){
              ctx.stroke();
          }

        </script>
          <!--<br><button onclick="cnvs_strokeGrafico()">STROKE!</button>-->
  </section>

  <section class="tab" id="tab4">
    <!--<input type='hidden' id='nomeField' name='Nome' value='' />-->
    <input type='hidden' id='tempoField' name='Tempo' value='' />
    <input type='hidden' id='paramFField' name='ParametroFinal' value='' />
    <input type='hidden' id='param1Field' name='Parametro1' value='' />
    <input type='hidden' id='param2Field' name='Parametro2' value='' />
    <input type='hidden' id='param3Field' name='Parametro3' value='' />
    <input type='hidden' id='param4Field' name='ParametroAng' value='' />

    </br><p>Tabela de Orientações</p>
      <div>
      <table id="parameterTable" >
        <tr>
          <td>Tempo 1</td>
          <td>Parâmetro Final</td>
          <td>Parâmetro 1</td>
          <td>Parâmetro 2</td>
          <td>Parâmetro 3</td>
          <td>Parâmetro 4(ângulo)</td>
        </tr>
      </table>
      </div>
    <button onclick="writeParamTable('parameterTable')">Preencher Tabela (pressionar somente 1 vez no fim do teste)</button></br>
  </section>

  <script>
    function tamanhoJanela () {
      var win = window,
      doc = document,
      docElem = doc.documentElement,
      body = doc.getElementsByTagName('body')[0],
      x = win.innerWidth || docElem.clientWidth || body.clientWidth,
      y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
      alert(x + ' × ' + y);
      //https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window
    }

    function meuSubmit() {      //função para setar os dados do formulário e ao final, enviá-los
        //document.getElementById('nomeField').value = NomeCompleto;
        document.getElementById('tempoField').value = resultados.tempo;
        document.getElementById('paramFField').value = resultados.parametroF;
        document.getElementById('param1Field').value = resultados.parametro1;
        document.getElementById('param2Field').value = resultados.parametro2;
        document.getElementById('param3Field').value = resultados.parametro3;
        document.getElementById('param4Field').value = resultados.parametro4;
        document.getElementById("meuForm").submit();    //linha final da função, para o envio dos dados

    }

    function botaoInicio() {
      javascript:Jmol.script(jsmol_molecula,'moveto 0.0 {-666 39 745 139.54}');
      document.getElementById("divMoleculaPNG").style.visibility="visible";
      document.getElementById("divMoleculaTeste").style.visibility="visible";
      timerStart ();
      //javascript:Jmol.script(jsmol_molecula,'color structure');
    }

    var duracao = 0;
    var tempo = document.getElementById("tempoGasto");
    tempo.innerHTML = duracao;
    var tempoInicial = 0;
    var timerIsOn = false;
    var timerVar; // variavel para a contagem de tempo

    function timerStart () {    //função iniciar a contagem
      if (timerIsOn == false) {           //se timer estiver parado,
        timerIsOn = true;                 //liga "led" do timer
        expected = Date.now() + interval; //define o próximo ciclo
        tempoInicial = Date.now();        // ancora da contagem de tempo com os ciclos do pc
        setTimeout(step, interval);       //começa a execuçao em loop da funcao "step" depois de "interval" tempo
        getTheNumbers();                  // e registra os dados no instante inicial (t=0)
      }
    }

    function timerStop() { //função que para contagem
      timerIsOn = false;
    }

    //função de tempo nova https://stackoverflow.com/questions/29971898/how-to-create-an-accurate-timer-in-javascript

    var interval = 100; // ms
    var expected = Date.now() + interval;
    var drift_history = [];
    var drift_history_samples = 10;
    var drift_correction = 0;

    function calc_drift(arr){ //calcula mediana do drift para correcao com base do array
      var values = arr.concat(); // copy array so it isn't mutated
      values.sort(function(a,b){
        return a-b;
      });
      if(values.length ===0) return 0;   //se array é 0, mediana é 0
      var half = Math.floor(values.length / 2); //pega id da metade do array
      if (values.length % 2) return values[half];   //se array for impar, mediana é valor do meio
      var median = (values[half - 1] + values[half]) / 2.0;  //se array for par, mediana é média entre os dois valores do meio

      return median;
    }

    function step() {
      var dt = Date.now() - expected; // the drift (positive for overshooting)
      if (dt > interval) {  //demorou mais do que devia

      }
      // do what is to be done
      duracao += interval/1000; // contagem sobe em 0.1
      duracao = Math.round(duracao*10)/10;
      tempo.innerHTML = duracao;
      getTheNumbers();                  // e registra os dados no instante inicial (t=0)

      if (dt <= interval) {
        // sample drift amount to history after removing current correction
        // (add to remove because the correction is applied by subtraction)
          drift_history.push(dt + drift_correction); //adiciona um ponto no array de drifts
        // predict new drift correction
        drift_correction = calc_drift(drift_history);
        // cap and refresh samples
        if (drift_history.length >= drift_history_samples) {
          drift_history.shift();  //remove um ponto no array de drifts se estiver com mais de 10
        }
      }
      expected += interval;
      // take into account drift with prediction
      if (timerIsOn == true) {  //se o timer estiver on, segue em frente
        setTimeout(step, Math.max(0, interval - dt - drift_correction)); //terminando a primeira chamada, vai executar essa mesma funcao com um tempo corrigido
      }
    }
    //fim da nova funcao de timer


    var resultados = new Object();
    resultados.tempo = [];  // declarando os arrays
    resultados.parametroF = [];
    resultados.parametro1 = [];
    resultados.parametro2 = [];
    resultados.parametro3 = [];
    resultados.parametro4 = [];
    function getTheNumbers() {      //Função que captura as coordenadas de orientação da molécula a cada chamada e cria uma nova linha de uma tabela com as informações obtidas
        var orientacaoRawStr = Jmol.getPropertyAsString(jsmol_molecula, 'orientationInfo.moveTo');      // (bendita) Função que grava as propriedades moveTo de orientação em uma string

        var axisAngle = orientacaoRawStr.slice( (orientacaoRawStr.search("{") +1 ) , orientacaoRawStr.search("}") );        //valor de "axisAngle" recebe fatia de dados da string "orientacaoStr" com 4 parametros de orientação AxisAngle. Data entre '{' e '}' é a "fatia" que interessa)

        var eulerAngles = axisAngle.split(" "); // eulerAngles[0] é o índice da string, [1], [2] e [3] são os parametros do eixo de rotação, [4] é o ângulo de rotação
        resultados.parametro1[resultados.parametro1.length] = eulerAngles[1];   // grava os parâmetros do eixo de rotação de euler e o ângulo de rotação
        resultados.parametro2[resultados.parametro2.length] = eulerAngles[2];
        resultados.parametro3[resultados.parametro3.length] = eulerAngles[3];
        //eulerAngles[4] = eulerAngles[4].replace(".", ",");
        resultados.parametro4[resultados.parametro4.length] = eulerAngles[4];

        var valorTempResult =  Math.sqrt( Math.pow((eulerAngles[1]-Ori1),2) + Math.pow((eulerAngles[2]-Ori2),2) + Math.pow((eulerAngles[3]-Ori3),2) + Math.pow((eulerAngles[4]-Ori4),2) );  // calculo para obtenção de fator de proximidade da resposta
        resultados.parametroF[resultados.parametroF.length] = Math.floor(valorTempResult) + "," + Math.round((valorTempResult%1)*1000);     // transformando o extenso float em uma string que representa um numero na forma "abcd,efg"
        resultados.tempo[resultados.tempo.length] = tempo.innerHTML;       // adicionando valores aos arrays

        ctx.lineTo( (30+(tempo.innerHTML*10)) , (250-(valorTempResult/10)) );
        ctx.stroke();
    }

    function writeParamTable(tableID) { // Função para imprimir tabela de parametros de orientação
      for (var i=0; i<resultados.tempo.length; i++){
        var table = document.getElementById(tableID).insertRow(1+i);

          var cellTempo = table.insertCell(0);
          var cellParamF = table.insertCell(1);
          var cellParam1 = table.insertCell(2);
          var cellParam2 = table.insertCell(3);
          var cellParam3 = table.insertCell(4);
          var cellParam4 = table.insertCell(5);

          cellTempo.innerHTML = resultados.tempo[i];
          cellParamF.innerHTML = resultados.parametroF[i];
          cellParam1.innerHTML = resultados.parametro1[i];
          cellParam2.innerHTML = resultados.parametro2[i];
          cellParam3.innerHTML = resultados.parametro3[i];
          cellParam4.innerHTML = resultados.parametro4[i];

        }
        //meuSubmit();  //chamada para a função que passa os dados do formulário
    }

    tabs = function(options) {  //funções para a estrutura da página em abas

      var defaults = {
          selector: '.tabs',
          selectedClass: 'selected'
      };

      if(typeof options == 'string') defaults.selector = options;
      var options = $.extend(defaults, options);

      return $(options.selector).each(function(){

          var obj = this;
          var targets = Array();

          function show(i){
              $.each(targets,function(index,value){
                  $(value).hide();
              })
              $(targets[i]).fadeIn('fast');
              $(obj).children().removeClass(options.selectedClass);
              selected = $(obj).children().get(i);
              $(selected).addClass(options.selectedClass);
          };

          $('a',this).each(function(i){
              targets.push($(this).attr('href'));
              $(this).click(function(e){
                  e.preventDefault();
                  show(i);
              });
          });

          show(0);

      });
    }
    // initialize the function
    tabs('nav ul');
  </script>
</body>
</html>