turings_machine/Turings_machine.html at master · cat-inGlasses/turings_machine · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Turing's machine</title>
    <link rel="stylesheet" href="css/styles-min.css">
    <script src="js/snap.svg-min.js"></script>
    <script src="js/animate-object-path-min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
  </head>
  <body>

      <div class="machine_data">
        <div class="center">
          <div class="states_input">
            <div class="add_new_state">
              <div class="attr_column">
                  <div class="attr_item">State name</div>
                  <div class="attr_item">Read</div>
                  <div class="attr_item">Write</div>
                  <div class="attr_item">Move to</div>
                  <div class="attr_item">Next state</div>
              </div>
              <div class="attr_column">
                  <div class="attr_item">
                    <input type="text" id="v_state_name" />
                  </div>
                  <div class="attr_item">
                    <input type="text" id="v_read" />
                  </div>
                  <div class="attr_item">
                    <input type="text" id="v_write" />
                  </div>
                  <div class="attr_item">
                      <select name="move_select"
                              id="states_select">
                        <option value="R">Right</option>
                        <option value="L">Left</option>
                      </select>
                  </div>
                  <div class="attr_item">
                      <input type="text" id="v_next_state" />
                  </div>
              </div>
              <div class="attr_column btn_div">
                <div class="add_btn"> ADD <br>new state</div>
              </div>
            </div>
          </div>
          <div class="string_input">
            <div class="text">
              <input type="text" id="process_string" />
            </div>
            <div class="process_btn">
              R U N
            </div>
          </div>
          <div class="string_input">
            <div class="text">
              <div>Moving delays (0.1s ... 1.5s) [<span id="speed_val"></span>]</div>
              <input id="speed" type="range" min="100" max="1500" step="10">
            </div>
            <div class="text">
              <div>Stops delays (0.1s ... 0.5s) [<span id="delay_val"></span>]<br/></div>
              <input id="delay" type="range" min="100" max="500" step="10">
            </div>
          </div>
        </div>
      </div>

      <div class="tape">
        <svg id="tape"></svg>
      </div>

      <div class="states">
        <div class="states_table">
          <table>
            <tr class="main_row">
              <td>State</td>
              <td>Read</td>
              <td>Write</td>
              <td>Move to</td>
              <td>Next state</td>
            </tr>
            <tr class="state_row" id="row_S">
              <td class="state">Start </td>
              <td class="state_select" colspan="4">
                <div>
                  <select name="move_select"
                          id="start_state">
                  </select>
                </div>
              </td>
            </tr>
            <tr class="state_row" id="row_H">
              <td class="state">HALT </td>
              <td class="state_select"  colspan="4">
              <div>
                  <select name="move_select"
                          id="halt_state">
                  </select>
              </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="states_graf">
          <svg id="graph"></svg>
        </div>
      </div>

      <div class="states">
        <div style="background: white; padding: 10px">
          Tu będzie aktualna wersja: <a href="http://cces.pl/portfolio/works/ex3">Turing's machine</a>
        </div>
      </div>

    <script src="js/tape.js"></script>
    <script src="js/states_table.js"></script>
    <script src="js/graf.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>