Starting to render properly

scripts/make_js_stuff.py

@@ -0,0 +1,25 @@
+from abp import clifford
+import json
+
+with open("../server/tables.js", "w") as f:
+    f.write("var decompositions = ")
+    f.write(json.dumps(clifford.decompositions))
+    f.write(";\n")
+
+    f.write("var conjugation_table = ")
+    f.write(json.dumps(clifford.conjugation_table.tolist()))
+    f.write(";\n")
+
+    f.write("var times_table = ")
+    f.write(json.dumps(clifford.times_table.tolist()))
+    f.write(";\n")
+
+    f.write("var cz_table = ")
+    f.write(json.dumps(clifford.cz_table.tolist()))
+    f.write(";\n")
+
+    f.write("var clifford = ")
+    f.write(json.dumps(clifford.by_name))
+    f.write(";\n")
+
+

server/anders_briegel.js

@@ -105,9 +105,3 @@ function log_graph_state() {
     console.log(ngbh);
 }
 
-add_node(0);
-add_node(1);
-act_local_rotation(0, 10);
-act_local_rotation(1, 10);
-act_cz(0, 1);
-log_graph_state();

server/api.js

@@ -1,10 +1,5 @@
 var ws;
 
-function add_node(node){
-    data = {"method": "add_node", "node": node};
-    ws.send(JSON.stringify(data));
-}
-
 function connect_to_server() {
     ws = new WebSocket("ws://localhost:5001");
     ws.onopen = function()

server/graph.js

@@ -1,20 +1,39 @@
-function buildGraph(json) {
+var graph;
+
+function graph_model(){
+    this.geometry = new THREE.Geometry();
+    this.nodes = new THREE.Points(this.geometry, materials.qubit);
+    this.nodes.geometry.dynamic = true;
+    this.object = new THREE.Object3D();
+    this.object.add(this.nodes);
+
+    this.add_node = function(node){
+        var vertex = new THREE.Vector3(0, 0, 0);
+        this.nodes.geometry.vertices.push(vertex);
+        this.nodes.geometry.verticesNeedUpdate = true;
+        render();
+    };
+}
+
+
+
+//function buildGraph(json) {
     // Add all the qubits
-    var geometry = new THREE.Geometry();
-    var vertex = new THREE.Vector3(0, 0, 0);
-    geometry.vertices.push(vertex);
-    var nodes = new THREE.Points(geometry, materials.node);
+    //var geometry = new THREE.Geometry();
+    //var vertex = new THREE.Vector3(0, 0, 0);
+    //geometry.vertices.push(vertex);
+    //var nodes = new THREE.Points(geometry, materials.node);
 
     // Add all the edges
-    var edges = new THREE.Object3D();
-    edges.add(makeEdge({
-        "start": [0, 0, 0],
-        "end": [1, 1, 1]
-    }));
+    //var edges = new THREE.Object3D();
+    //edges.add(makeEdge({
+        //"start": [0, 0, 0],
+        //"end": [1, 1, 1]
+    //}));
     
     // Construct and return
-    var graph = new THREE.Object3D();
-    graph.add(nodes);
-    graph.add(edges);
-    return graph;
-}
+    //var graph = new THREE.Object3D();
+    //graph.add(nodes);
+    //graph.add(edges);
+    //return graph;
+//}

server/grid.js

@@ -1,5 +0,0 @@
-//TODO Move to THREE.gridhelper
-// Make a grid
-function makeGrid(side, n, color) {
-    return grid;
-}

server/index.html

@@ -15,6 +15,7 @@
 <script type="text/javascript" src="poll.js"></script>
 <script type="text/javascript" src="api.js"></script>
 <script type="text/javascript" src="curve.js"></script>
+<script type="text/javascript" src="graph.js"></script>
 <script type="text/javascript" src="tables.js"></script>
 <script type="text/javascript" src="anders_briegel.js"></script>
 <script type="text/javascript" src="main.js"></script>

server/main.css

@@ -0,0 +1,47 @@
+html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-family:  "courier new"; }
+#infoholder { 
+    background: black; 
+    color:white;
+    padding: 5px;
+    margin:0px;
+    position: absolute;
+    top:5px;
+    left:5px;
+    font-family:"courier new";
+    text-align: center;
+    font-size:10pt;
+    height:15px;
+    border-radius:3px;
+}
+
+#pallette {
+    background-color: black;
+    /*border-radius:3px;*/
+    color:white;
+    padding: 10px;
+    font-family:"courier new";
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 9pt;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+.visible {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity .08s linear, transform .08s linear;
+}
+
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(.5);
+  transition: visibility .08s, opacity .08s linear, transform .08s linear;
+}

server/main.js

@@ -14,6 +14,8 @@ window.onload = init;
 function makeScene() {
     var myScene = new THREE.Scene();
     var grid = new THREE.GridHelper(20, 2);
+    graph = new graph_model();
+    myScene.add(graph.object);
     grid.rotation.x = Math.PI/2;
     grid.setColors(0xdddddd, 0xeeeeee);
     myScene.add(grid);

server/poll.js

@@ -0,0 +1,21 @@
+function poll() {
+    var ws = new WebSocket("ws://localhost:5001");
+    ws.onopen = function()
+    {
+       console.log("Connected to server.");
+    };
+     
+    ws.onmessage = function (evt) 
+    { 
+       var received_msg = evt.data;
+       console.log("Message received: " + evt.data);
+    };
+     
+    ws.onclose = function()
+    { 
+       console.log("Connection was closed.");
+    };
+}
+
+window.onload = poll;
+