Parcourir la source

Now we can render to the browser

master
Pete Shadbolt il y a 8 ans
Parent
révision
63c6de30ae
7 fichiers modifiés avec 66 ajouts et 16 suppressions
  1. +6
    -3
      abp/graphstate.py
  2. +1
    -0
      abp/server.py
  3. +5
    -5
      static/curve.js
  4. +2
    -1
      static/grid.js
  5. +14
    -2
      static/main.js
  6. +1
    -1
      static/materials.js
  7. +37
    -4
      static/poll.js

+ 6
- 3
abp/graphstate.py Voir le fichier

@@ -100,9 +100,10 @@ class GraphState(object):

def to_json(self):
""" Convert the graph to JSON form """
ngbh = {key: tuple(value) for key, value in self.ngbh.items()}
#ngbh = {key: tuple(value) for key, value in self.ngbh.items()}
meta = {key: value for key, value in self.meta.items()}
return json.dumps({"vops": self.vops, "ngbh": ngbh, "meta": meta})
edge = self.edgelist()
return json.dumps({"vops": self.vops, "edge": edge, "meta": meta})

def to_networkx(self):
""" Convert the graph to a networkx graph """
@@ -118,7 +119,9 @@ class GraphState(object):
""" Automatically lay out the graph """
g = self.to_networkx()
pos = nx.spring_layout(g, dim=3, scale=10)
average = lambda axis: sum(p[axis] for p in pos.values())/float(len(pos))
ax, ay, az = average(0), average(1), average(2)
for key, (x, y, z) in pos.items():
self.meta[key]["pos"] = {"x": round(x, 0), "y": round(y, 0), "z": round(z, 0)}
self.meta[key]["pos"] = {"x": round(x-ax, 0), "y": round(y-ay, 0), "z": round(z-az, 0)}


+ 1
- 0
abp/server.py Voir le fichier

@@ -83,6 +83,7 @@ if __name__ == '__main__':
server.start()

g = demograph()
g.layout()

while True:
server.update(g)


+ 5
- 5
static/curve.js Voir le fichier

@@ -1,14 +1,14 @@
// Curve settings
var curveProperties = {
splineDensity: 30,
curvature: 10
splineDensity: 10,
curvature: 100
};

// Add a curved edge between two points
function makeEdge(e) {
function makeEdge(start, end) {
// Make the geometry of the curve
var a = new THREE.Vector3(e.start[0], e.start[1], e.start[2]);
var b = new THREE.Vector3(e.end[0], e.end[1], e.end[2]);
var a = new THREE.Vector3(start.x, start.y, start.z);
var b = new THREE.Vector3(end.x, end.y, end.z);
var length = new THREE.Vector3().subVectors(a, b).length();
var bend = new THREE.Vector3(length / curveProperties.curvature, length / curveProperties.curvature, 0);
var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);


+ 2
- 1
static/grid.js Voir le fichier

@@ -1,4 +1,4 @@
//TODO Move to THREE.gridhelper
// Make a grid
function makeGrid(side, n, color) {
var markers = new THREE.Object3D();
@@ -19,5 +19,6 @@ function makeGrid(side, n, color) {
markers.add(line);
markers.add(line90);
}
markers.name = "grid";
return markers;
}

+ 14
- 2
static/main.js Voir le fichier

@@ -13,7 +13,18 @@ window.onload = init;
// Clear the whole scene
function makeScene() {
var myScene = new THREE.Scene();
myScene.add(makeGrid(10, 10, "lightgray"));
var grid1 = makeGrid(10, 10, "lightgray");
grid1.position.z = -5;
myScene.add(grid1);

var grid2 = makeGrid(10, 10, "lightgray");
grid2.rotation.x = Math.PI/2;
grid2.position.y = -5;
myScene.add(grid2);
var grid3 = makeGrid(10, 10, "lightgray");
grid3.rotation.y = Math.PI/2;
grid3.position.x = -5;
myScene.add(grid3);
return myScene;
}

@@ -34,6 +45,7 @@ function loopForever() {
function startMainLoop() {
scene = makeScene();
controls.addEventListener("change", render);
poll();
loopForever();
}

@@ -45,7 +57,7 @@ function init() {
var height = window.innerHeight;

// Renderer
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({"antialias":true});
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1);
document.querySelector("body").appendChild(renderer.domElement);


+ 1
- 1
static/materials.js Voir le fichier

@@ -23,7 +23,7 @@ function loadMaterials(argument) {
materials.point = new THREE.PointsMaterial(pointStyle);

var qubitStyle = {
size: 0.6,
size: 0.8,
map: textures.sprite,
alphaTest: 0.5,
transparent: true,


+ 37
- 4
static/poll.js Voir le fichier

@@ -1,13 +1,11 @@
var body;
var state;

function poll() {
var xhr = new XMLHttpRequest();

xhr.onload = function() {
state = JSON.parse(xhr.responseText);
console.log(state);
//soft_console.innerHTML = "\n" + xhr.responseText;
var state = JSON.parse(xhr.responseText);
updateScene(state);
};

xhr.onerror = function(e){
@@ -18,3 +16,38 @@ function poll() {
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send();
}

function updateScene(state) {
var oldState = scene.getObjectByName("graphstate");
scene.remove(oldState);
oldState = null;
var geometry = new THREE.Geometry();
//nodeGeometry.labels = [];
//nodeGeometry.colors = [];
for (var i in state.vops) {
var vop = state.vops[i];
var pos = state.meta[i].pos;
var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
geometry.vertices.push(vertex);
//geometry.colors[i] = new THREE.Color(n.color);
//geometry.labels[i] = n.label;
}

var edges = new THREE.Object3D();
for (i=0; i < state.edge.length; ++i) {
var edge = state.edge[i];
var start = state.meta[edge[0]].pos;
var end = state.meta[edge[1]].pos;
var newEdge = makeEdge(start, end);
edges.add(newEdge);
}

var particles = new THREE.Points(geometry, materials.qubit);
var newState = new THREE.Object3D();
newState.name = "graphstate";
newState.add(particles);
newState.add(edges);
scene.add(newState);
render();
}

Chargement…
Annuler
Enregistrer