MetaPrint/3dprintwebgl.html at master · W3CBrasil/MetaPrint · 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
<html>
  <body>
    <style>
.button {
  float: left;
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  padding: 5px;
  margin: 3px;
  border-radius: 8px;
  background-color: #DDD;
  border: 1px solid grey;
}

.button:hover {
  background-color: #FBB;
}

#panel {
  width:800px;
}

.temperature {
  float:right;
  color:darkred;
  border-radius: 8px;
  background-color: #DDD;
  border: 1px solid grey;
  margin: 3px;
  padding: 5px;
}

#viewer {
  width:800px;
  height:800px;
}

    </style>

    <script src="js/jquery.js"></script>
    <script src="js/Three.js"></script>
    <script src="js/plane.js"></script>
    <script src="js/thingiview.js"></script>

    <script>
      var thingiview;
      var rotation = true;

      window.onload = function() {
        thingiurlbase = "/js";
        thingiview = new Thingiview("viewer");
        thingiview.setBackgroundColor('#DDDDDD');
        thingiview.setObjectColor('#FF0000');
        thingiview.initScene();
        thingiview.loadSTL("/objects/chaveiro-w3c.stl");
      }

      function toggleRotation(){
        rotation = !rotation;
        thingiview.setRotation(rotation);
      }

      function printThis_remote_file(){
        $.ajax({
          url: "oldprint/objects/chaveiro-w3c.stl",
        })
      }

      function load_binary_resource(url) {
      	var req = new XMLHttpRequest();
      	req.open('GET', url, false);
      	// The following line says we want to receive data as Binary and not as Unicode
      	req.overrideMimeType('text/plain; charset=x-user-defined');
      	req.send(null);
      	if (req.status != 200) return '';

      	return req.responseText;
      }

      function printThis(){
        var form = new FormData();

        var bin = load_binary_resource("objects/chaveiro-w3c.stl");
        var blob = new Blob([bin], { type: "text/plain"});
        form.append("file", blob);

        var req = new XMLHttpRequest();
        req.open("POST", "print");
        req.send(form);
      }

      function check_temperature(){
        $.ajax({
            dataType: "json",
            url: "/status.json",
            mimeType: "application/json",
            complete: function(data){
              var json_data = $.parseJSON(data.responseText);
              document.getElementById('extr_temp').innerHTML = json_data.extruder + ' &deg;C';
              document.getElementById('bed_temp').innerHTML = json_data.bed + ' &deg;C';
            }
        });
      }
    </script>

    <div id="viewer"></div>

    <div id="panel">
      <div class="buttonscontainer">
        <div class="button" onclick="toggleRotation();">Toggle rotation</div>
        <div class="button" onclick="check_temperature();">Check temperature</div>
        <div class="button" onclick="printThis();">Print this!</div>
      </div>

      <div class="temperaturescontainer">
        <div class="temperature">
          Extruder: <span id="extr_temp">---</span>
        </div>

        <div class="temperature">
          Bed: <span id="bed_temp">---</span>
        </div>
      </div>
    </div>

  </body>
</html>