Finally fixed stupid editing problem

static/doc.css

@@ -12,7 +12,7 @@ code {
 }
 
 pre{
-    padding: 2em;
+    padding: 1em;
     background-color: #fafafa;
     border: 1px solid #eeeeee;
     overflow-x: auto;

static/scripts/editor.js

@@ -41,6 +41,13 @@ editor.focus = function(node) {
     gui.hideNodeMessage();
     editor.selection = node;
 
+    var rotation = editor.orientations[editor.orientation];
+    var normal = new THREE.Vector3(0, 1, 0);
+    normal.applyEuler(rotation);
+    editor.grid.rotation.copy(rotation);
+    editor.plane = new THREE.Plane();
+    editor.plane.setFromNormalAndCoplanarPoint(normal, editor.grid.position);
+
     //gui.serverMessage("Selected node " + node + ".");
 };
 
@@ -62,10 +69,10 @@ editor.addQubitAtPoint = function(point) {
 editor.onClick = function() {
     var found = editor.findNodeOnRay(mouse.ray);
     if (found) {
-        editor.focus(found);
         var node=found;
         editor.grid.position.copy(abj.node[node].position);
         gui.controls.target.copy(abj.node[node].position);
+        editor.focus(found);
         node_name.innerHTML = "Node " + node;
         node_data.className = "visible";
         node_vop.innerHTML = "VOP: " + abj.node[node].vop;

templates/doc.md

@@ -1,28 +1,39 @@
-# ABP server
-
-This server does a few things:
-
-- Keeps a graph state in memory using a data structure that is compatible with `abp`
-- Serves a JSON representation of that object 
-- Accepts updates to that object via POST requests 
-- Displays a 3D representation of the state 
-- Randomly updates the state every five seconds
+# Graph state server
+Graph states are a way of efficiently representing the state of a system of qubits. This tool simulates the behaviour of the graph state and shows an interactive 3D representation of the state. Interaction with the simulation is done either by clicking on things in the web browser or through an API.
 
 ## Using the interface
-Sessions are identified by a UUID such as `oranges-arkansas-mexico-fish`. You can share this URL with other people to share your screen and edit collaboratively.
+The state is initialized as a blank canvas without any qubits.
 
-- Click on the grid to make a new node
-- Ctrl-click a node to act a Hadamard gate
-- Select a node, then shift-click another node to act a CZ gate
+- Click on the grid to make a new qubit
+- Hold Ctrl and click on a qubit to act a Hadamard gate
+- Click on a qubit to view its properties
+- Select a qubit, then shift-click another node to act a CZ gate
 - Press space to rotate the grid
 
+Arbitrary 3D structures can be constructed by rotating the grid.
+
+The URL contains a unique ID such as `oranges-arkansas-mexico-fish`. You can share this URL with other people to share your screen and edit collaboratively.
+
 ## Python package
 The underlying graph state simulator is based on Anders' and Briegel's method. Full docs for the Python package are [here](https://peteshadbolt.co.uk/static/abp/).
 
-
 ## API
 
-We expose an API so that you can programmatically read and write states to/from the server and simulate mouse clicks.
+Here's a complete example of sending a state from Python to the server:
+
+    :::python
+    import requests, json, abp
+    
+    # Make a new graph and position the nodes
+    g = abp.NXGraphState(range(10))
+    g.layout()
+    
+    # Serialize
+    data = json.dumps(test_graph().to_json())
+    
+    # Post to the server
+    URL = "https://abv.peteshadbolt.co.uk/oranges-arkansas-mexico-fish"
+    requests.post("{}/graph".format(URL), data=data)
 
 ### Endpoints
 
@@ -37,7 +48,7 @@ We expose an API so that you can programmatically read and write states to/from
 
 ### Data format
 
-If you do an HTTPS GET against `/<uuid>/graph`, you will receive some JSON.
+An HTTP GET to `/<uuid>/graph` will return some JSON.
 
     :::bash
     $ curl https://abv.peteshadbolt.co.uk/<uuid>/graph

test.py

@@ -1,26 +1,13 @@
-"""
-Makes a dummy post to the test server
-"""
-import requests
-import json
-import abp
-import random
+import requests, json, abp
 
-#URL = "http://localhost:5000"
-URL = "https://abv.peteshadbolt.co.uk/"
+# Make a new graph and position the nodes
+g = abp.NXGraphState(range(N))
+g.layout()
 
-def test_graph():
-    N = 10
-    g = abp.NXGraphState(range(N))
+# Serialize
+data = json.dumps(test_graph().to_json())
 
-    for i in range(N):
-        g.act_cz(random.randint(0, N-1), random.randint(0, N-1))
-
-    g.layout()
-    return g
-
-if __name__ == '__main__':
-    data = json.dumps(test_graph().to_json(stringify=False))
-    r = requests.post("{}/graph".format(URL), data=data)
-    print r.status_code, r.content
+# Post to the server
+URL = "https://abv.peteshadbolt.co.uk/grey-johnny-lima-saturn"
+requests.post("{}/graph".format(URL), data=data)