diff --git a/app.py b/app.py index ab78aeb..92dd2d8 100644 --- a/app.py +++ b/app.py @@ -1,6 +1,7 @@ from flask import Flask, request, redirect, url_for, make_response, render_template, Markup, send_from_directory, send_file from flask_redis import FlaskRedis import json, abp, markdown +from pprint import pprint app = Flask(__name__) redis = FlaskRedis(app) @@ -28,6 +29,41 @@ def graph(): else: # Get from the database return redis.get("graph") + + +@app.route("/edit", methods=["POST"]) +def edit(): + # Load the graph from the database + g = abp.GraphState() + g.from_json(json.loads(redis.get("graph"))) + + # Apply the edit to the graph + edit = json.loads(request.data) + action = edit["action"] + pprint(edit, indent=2) + + if action == "create": + g.add_qubit(edit["name"], position=edit["position"], vop=0) + elif action == "cz": + g.act_cz(edit["start"], edit["end"]) + elif action == "hadamard": + g.act_hadamard(edit["node"]) + elif action == "phase": + g.act_local_rotation(edit["node"], "phase") + elif action == "delete": + g._del_node(edit["node"]) + elif action == "localcomplementation": + g.local_complementation(edit["node"]) + elif action == "measure": + g.measure(edit["node"], "p"+edit["basis"]) + else: + pass + + # New state into JSON and database + data = json.dumps(g.to_json(stringify=True)) + redis.execute_command("SET", "graph", data) + return data + @app.route("/doc") def doc(): diff --git a/static/scripts/api.js b/static/scripts/api.js new file mode 100644 index 0000000..14ce3d2 --- /dev/null +++ b/static/scripts/api.js @@ -0,0 +1,41 @@ +var api = {}; + +api.poll = function() { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == XMLHttpRequest.DONE) { + if (xmlhttp.status == 200) { + api.update(xmlhttp.responseText); + } + } + }; + + // Send the request + xmlhttp.open("GET", "/graph", true); + xmlhttp.send(); +}; + + +api.update = function(s) { + json = JSON.parse(s); + graph.update(json); +} + +api.edit = function(edit) { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == XMLHttpRequest.DONE) { + if (xmlhttp.status == 200) { + api.update(xmlhttp.responseText); + } + } + }; + + // Send the request + xmlhttp.open("POST", "/edit", true); + xmlhttp.setRequestHeader("Content-Type", "application/json"); + xmlhttp.send(JSON.stringify(edit)); +} + +// Launch the polling loop +setInterval(api.poll, 1000); diff --git a/static/scripts/editor.js b/static/scripts/editor.js index 9ce4ad7..6370719 100644 --- a/static/scripts/editor.js +++ b/static/scripts/editor.js @@ -48,7 +48,7 @@ editor.addQubitAtPoint = function(point) { gui.serverMessage("Node " + new_node +" already exists."); return; } - websocket.edit({action:"create", name:new_node, position: point}); + api.edit({action:"create", name:new_node, position: point}); editor.focus(new_node); gui.serverMessage("Created node " + new_node +"."); }; @@ -77,7 +77,7 @@ editor.onShiftClick = function() { if (editor.selection === undefined){ return; } if (found === editor.selection){ return; } //abj.act_cz(found, editor.selection); - websocket.edit({action:"cz", start:found, end:editor.selection}); + api.edit({action:"cz", start:found, end:editor.selection}); gui.serverMessage("Acted CZ between " + found + " & " + editor.selection + "."); editor.focus(found); }; @@ -87,7 +87,7 @@ editor.onCtrlClick = function() { if (found === undefined){ return; } if (editor.selection === undefined){ return; } editor.focus(found); - websocket.edit({action:"hadamard", node:found}); + api.edit({action:"hadamard", node:found}); gui.serverMessage("Acted H on node " + found + "."); }; @@ -144,7 +144,7 @@ editor.findNodeOnRay = function(ray) { editor.deleteNode = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"delete", node:editor.selection}); + api.edit({action:"delete", node:editor.selection}); gui.serverMessage("Deleted node " + editor.selection + "."); editor.selection = undefined; node_data.className = "hidden"; @@ -154,37 +154,37 @@ editor.deleteNode = function() { editor.hadamard = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"hadamard", node:editor.selection}); + api.edit({action:"hadamard", node:editor.selection}); gui.serverMessage("Acted Hadamard on node " + editor.selection + "."); }; editor.phase = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"phase", node:editor.selection}); + api.edit({action:"phase", node:editor.selection}); gui.serverMessage("Acted phase on node " + editor.selection + "."); }; editor.measureX = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"measure", node:editor.selection, basis:"x"}); + api.edit({action:"measure", node:editor.selection, basis:"x"}); gui.serverMessage("Measured node " + editor.selection + " in X."); }; editor.measureY = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"measure", node:editor.selection, basis:"y"}); + api.edit({action:"measure", node:editor.selection, basis:"y"}); gui.serverMessage("Measured node " + editor.selection + " in Y."); }; editor.measureZ = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"measure", node:editor.selection, basis:"z"}); + api.edit({action:"measure", node:editor.selection, basis:"z"}); gui.serverMessage("Measured node " + editor.selection + " in z."); }; editor.localComplementation = function() { if (editor.selection === undefined){ return; } - websocket.edit({action:"localcomplementation", node:editor.selection}); + api.edit({action:"localcomplementation", node:editor.selection}); abj.local_complementation(editor.selection); gui.serverMessage("Inverted neighbourhood of " + editor.selection + "."); }; diff --git a/static/scripts/graph.js b/static/scripts/graph.js index 07252a2..586eea2 100644 --- a/static/scripts/graph.js +++ b/static/scripts/graph.js @@ -48,7 +48,6 @@ graph.update = function(newState) { } if (editor.selection) { - console.log(editor.selection); var node = editor.selection; if (Object.prototype.hasOwnProperty.call(abj.node, node)) { editor.grid.position.copy(abj.node[node].position); diff --git a/static/scripts/poller.js b/static/scripts/poller.js deleted file mode 100644 index 63cc419..0000000 --- a/static/scripts/poller.js +++ /dev/null @@ -1,23 +0,0 @@ -function poll() { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (xmlhttp.readyState == XMLHttpRequest.DONE) { - if (xmlhttp.status == 200) { - update(xmlhttp.responseText); - } - } - }; - - // Send the request - xmlhttp.open("GET", "/graph", true); - xmlhttp.send(); -}; - - -function update(s) { - json = JSON.parse(s); - graph.update(json); -} - -// Launch the polling loop -setInterval(poll, 1000); diff --git a/templates/index.html b/templates/index.html index 99b9f0e..ea12f09 100644 --- a/templates/index.html +++ b/templates/index.html @@ -14,7 +14,7 @@ - + diff --git a/test.py b/test.py index 0b8f064..2af0e03 100644 --- a/test.py +++ b/test.py @@ -6,11 +6,11 @@ import json import abp import random -#URL = "http://localhost:5000" -URL = "https://abv.peteshadbolt.co.uk/" +URL = "http://localhost:5000" +#URL = "https://abv.peteshadbolt.co.uk/" def test_graph(): - N = 50 + N = 10 g = abp.NXGraphState(range(N)) for i in range(N):