@ -2083,6 +2083,78 @@ function stableGraph(){
// run on entire wiki though whereas previous D3 instance limited to 10 pages and their targets
}
function displayLeafs(graph, graphEl, rootId, rootEl, depth=3){
console.log( graph[rootId].Id )
if (depth< 1 ) return
graph[rootId].Targets.map( l => {
console.log( "-", graph[l].Id )
let x = addNodeFromGraph(graph[l].Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) )
//nodes.push(x)
console.log("linking:", rootEl, x)
setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, rootEl, x) }, 2000) // otherwise null positions
// might need to delay that differently
//edges.push({source:root, target:x})
displayLeafs( graph, graphEl, graph[l].Id, x, --depth)
})
}
fetch('https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json').then( r => r.json() ).then( r => displayGraph(r.Nodes) );
function displayGraph(mynodes){
// add few nodes with few edges for testing
// then loading from wiki JSON file
// layout could be done with Cytoscape but somehow seems I can't use it properly, in headless mode or not.
let startingNode = "Wiki.VirtualRealityInterface"
let root = mynodes[startingNode]
let graphEl = document.createElement("a-entity")
AFRAME.scenes[0].appendChild( graphEl )
let nodes = []
let edges = []
let node_names = Object.keys( mynodes )
let rootEl = addNodeFromGraph(root.Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) )
displayLeafs( mynodes, graphEl, root.Id, rootEl, 2)
// random graph, no preferential attachement
/*
for (var i=0;i< 10 ; i + + ) {
let random_name = node_names[Math.floor(Math.random()*node_names.length)]
let x = addNodeFromGraph(random_name, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) )
nodes.push(x)
}
for (var i=0;i< 10 ; i + + ) {
let a = nodes[Math.floor(Math.random()*nodes.length)]
let b = nodes[Math.floor(Math.random()*nodes.length)]
setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, a,b) }, 100) // otherwise null positions
edges.push({source:a, target:b})
}
*/
// should listen to an event instead to insure that nodes are all created before
}
function addNodeFromGraph(name, position="0 0 0"){
// add sphere, with its name, make it a target
// define what "it" is knowing we can't move a children with an offset
// consequently parenting should be done by the text
let el = addNewNote(name, position, ".1 .1 .1", "node_" +Date.now(), "node_from_graph")
let sphereEl = document.createElement("a-sphere")
sphereEl.setAttribute("radius", .1)
sphereEl.setAttribute("opacity", .2)
sphereEl.setAttribute("position", "0 -.1 0")
el.appendChild(sphereEl)
// position shouldn't have to be offset
return el
}
function addEdgeBetweenNodesFromGraph(graphEl, a, b){
// a.setAttribute( "line-link-entities", {source: a.id, target: b.id} ) doesn't seem work, back to basics for now
graphEl.setAttribute("line__"+a.id+"__to__"+b.id, {
start: AFRAME.utils.coordinates.stringify( a.getAttribute("position") ) ,
end: AFRAME.utils.coordinates.stringify( b.getAttribute("position") )
})
// not that this doesn't take into account the parent node moving
}
// could change model opacity based on hand position, fading out when within a (very small here) safe space
< / script >
< div id = "observablehq-key" >
@ -2124,61 +2196,14 @@ function stableGraph(){
< a-entity light = "type: directional; color: #FFF; intensity: 1.4" position = "-0.5 1 1" > < / a-entity >
< a-sky hide-on-enter-ar src = "../content/nebula.jpg" > < / a-sky >
< a-text target value = "instructions : pinch generateRandomPlace then adjust tiles" position = "0 1.65 -0.2" scale = "0.1 0.1 0.1" > < / a-text >
< a-text target value = "jxr generateRandomPlace()" position = "0 1.35 -0.1" scale = "0.1 0.1 0.1" > < / a-text >
< a-text target value = "jxr rescalePlace()" position = "0 1.45 -0.1" scale = "0.1 0.1 0.1" > < / a-text >
< a-text target value = "instructions : pinch displayGraph() to start navigating in it" position = "0 1.65 -0.2" scale = "0.1 0.1 0.1" > < / a-text >
< a-text target value = "jxr displayGraph()" position = "0 1.35 -0.1" scale = "0.1 0.1 0.1" > < / a-text >
< a-text target value = "jxr qs #rig sa position 0 0 10" position = "0 1.55 .5" rotation = "0 180 0" scale = "0.1 0.1 0.1" > < / a-text >
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position -->
< a-troika-text value = "SpaSca : Spatial Scaffolding" anchor = "left" outline-width = "5%" font = "../content/ChakraPetch-Regular.ttf" position = "-5.26197 6.54224 -1.81284"
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb">< / a-troika-text >
< a-entity id = "featureN" >
< a-image rotation = "0 180 0" position = "-2 2 10.5" scale = ".5 .5 .5" src = "../content/features/containers.jpg" > < / a-image >
< a-text rotation = "0 180 0" target value = "containers" position = "-2 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "-2 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "-2 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< / a-entity >
< a-image rotation = "0 180 0" position = "-1 2 10.5" scale = ".5 .5 .5" src = "../content/features/wireframe.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "0 2 10.5" scale = ".5 .5 .5" src = "../content/features/remarkable_sketch.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "1 2 10.5" scale = ".5 .5 .5" src = "../content/features/browsing_history.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "2 2 10.5" scale = ".5 .5 .5" src = "../content/features/codeembedding.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "3 2 10.5" scale = ".5 .5 .5" src = "../content/features/grouping.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "4 2 10.5" scale = ".5 .5 .5" src = "../content/features/inspector.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "5 2 10.5" scale = ".5 .5 .5" src = "../content/features/javascript_with_shortcuts.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "6 2 10.5" scale = ".5 .5 .5" src = "../content/features/load_3D_models.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "7 2 10.5" scale = ".5 .5 .5" src = "../content/features/math_plot.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "8 2 10.5" scale = ".5 .5 .5" src = "../content/features/networked_input.jpg" > < / a-image >
< a-image rotation = "0 180 0" position = "9 2 10.5" scale = ".5 .5 .5" src = "../content/features/observable_notebook.jpg" > < / a-image >
< a-text rotation = "0 180 0" target = "" value = "Features" position = "4.70348 3.07329 10.2" scale = "" text = "" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "-1 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "-1 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "-1 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "0 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "0 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "0 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "1 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "1 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "1 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "potato" position = "2 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "2 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "2 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "3 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "3 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "3 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "4 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "4 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "4 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "5 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "5 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "5 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "6 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "6 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "6 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< a-text rotation = "0 180 0" target value = "containers" position = "-2 2.25 10.5" scale = ".5 .5 .5" > < / a-text >
< a-text rotation = "0 180 0" target value = "use the dxr prefix to send data to containers\n(requires backend)" position = "-2 1.55 10.5" scale = ".1 .1 .1" > < / a-text >
< a-text rotation = "0 180 0" target value = "dxr python print(7)" position = "-2 1.35 10.5" scale = "0.1 0.1 0.1" > < / a-text >
< / a-scene >
< / body >
< / html >
