mistal and graphhopper example, local via ngrok

index.html

@@ -29,7 +29,7 @@
     <!-- still experimenting, see webdav.html -->
     <script src='dependencies/webdav.js'></script> 
 
-    <script src='jxr.js'></script> 
+    <script src='jxr.js?#123'></script> 
     <!-- replacing with local copies as CDNs are like unpkg tend to be slow
     <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
@@ -108,9 +108,22 @@
       <a-entity hide-on-enter-ar="" id="environment" class="hidableenvironment" ></a-entity>
       <a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
       <a-troika-text anchor=left target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
+<!--
       
-      <a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D"
+      <a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D;back:aide a venir;"
-		value="jxr startDraw2D()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+		value="jxr startDraw2D()" position="0 1.45 -1" scale="0.1 0.1 0.1"></a-troika-text>
+
+      <a-troika-text anchor=left target id="mvxo" annotation="content:pengouin pas sud;back:aide a venir;"
+		value='jxr qs #penguin ga position .x--' position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+
+      <a-troika-text anchor=left target id="mvz" annotation="content:pengouin pas est;back:aide a venir;"
+		value='jxr qs #penguin ga position .z++' position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+
+      <a-troika-text anchor=left target id="mvzo" annotation="content:pengouin pas ouest;back:aide a venir;"
+		value='jxr qs #penguin ga position .z--' position="0 1.25 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+
+      <a-troika-text anchor=left target id="mvx" annotation="content:pengouin pas nord;back:aide a venir;"
+		value='jxr qs #penguin ga position .x++' position="0 1.15 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
 
       <a-troika-text anchor=left target id="displaypred" value="jxr displayPred()" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
@@ -118,28 +131,69 @@
 
       <a-troika-text anchor=left target value="jxr tiltUpId('codeditor')" position=" -0.3 1.65 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target value="jxr tiltDownId('codeditor')" position=" -0.3 1.60 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
-
+-->
-      <a-troika-text anchor=left target value="jxr pushLeftClass('reader')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+<script>
-      <a-troika-text anchor=left target value="jxr pushRightClass('reader')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+function mistrallocal(prompt){
-      <a-troika-text anchor=left target value="jxr pushUpClass('reader')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+	//fetch('http://192.168.0.129:8080/completion', {
-      <a-troika-text anchor=left target value="jxr pushDownClass('reader')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+	// failed on Quest, needs https, could try through ngrok
-      <a-troika-text anchor=left target value="jxr pushBackClass('reader')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+	fetch('https://0670-2a02-1811-1c74-7f00-5649-1451-ab01-7f3d.ngrok-free.app/completion' , {
-      <a-troika-text anchor=left target value="jxr pushFrontClass('reader')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+	//fetch('http://localhost:8080/completion', {
+	  method: 'POST',
+	  headers: {
+	    'Content-Type': 'application/json'
+	  },
+	  body: JSON.stringify({
+	    'prompt': prompt,
+	    'n_predict': 128
+	  })
+	}).then( res => res.json() ).then( res => {
+		setFeedbackHUD(res.content)
+		let el = addNewNote(res.content)
+		el.setAttribute('annotation', prompt)
+	})
+}
+
+function getDirections(){
+	fetch('https://5ae9-83-217-141-167.ngrok-free.app/route?point=50.837974%2C4.379907&point=50.839004%2C4.358106&profile=car').then(r=>r.json()).then(r=>{ 
+		let inst = r.paths[0]?.instructions.map(i=>i.text.split(' - ')[0]).reverse();
+		let si = setInterval( _ => {
+			let i = inst.pop();
+			if (i) { console.log(i); setFeedbackHUD(i) } else { clearInterval(si) }
+		}, 3000 )
+	})
+
+}
+</script>
+      <a-troika-text anchor=left target value="jxr getDirections()" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
+<!--
+      <a-troika-text anchor=left target value="jxr mistrallocal('tell the short story of a penguin friend with a fish')" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
+
+      <a-troika-text anchor=left target value="jxr pushLeftClass('maptile')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target value="jxr pushRightClass('maptile')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target value="jxr pushUpClass('maptile')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target value="jxr pushDownClass('maptile')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target value="jxr pushBackClass('maptile')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target value="jxr pushFrontClass('maptile')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+	-->
 
       <!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position 
 	      <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>
-	-->
+      <a-console position="-1 1.2 -0.8" rotation="-5 80 0" font-size="34" height=.1 skip-intro=true></a-console>
-      <a-console position="0 2 -0.8" rotation="-5 0 0" font-size="34" height=1 skip-intro=true></a-console>
 
       <a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5"
 	rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
 	<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model>
 
+	-->
+	<a-entity id="tablescaled" scale=".1 .1 .1" position="0 0.8 -.3">
 	<a-gltf-model src="../content/winterset/Crystal.glb" position="-1 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
 	<a-gltf-model id="fish" src="../content/winterset/Fish.glb" position="2 0 -2" rotation="0 0 0" scale=".01 .01 .01" class="clonableasset"></a-gltf-model>
 	<a-gltf-model id="penguin" src="../content/winterset/Penguin.glb" position="0 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
 
+	</a-entity>
+<!--
 	<a-gltf-model src="../content/winterset/Pinetree.glb" position="0 3 -10" rotation="0 0 0" scale="5 5 5" class="clonableasset"></a-gltf-model>
+	-->
 
 	<a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane>
     </a-scene>

jxr.js

@@ -1334,6 +1334,9 @@ function parseJXR( code ){
 	newcode = newcode.replace(/ sa ([^\s]+) (.*)/,`.setAttribute('$1','$2')`)
 		// problematic for position as they include spaces
 
+	newcode = newcode.replace(/ ga ([^\s]+)/,`.getAttribute('$1')`)
+	// also problematic to compount but can work e.g interpretJXR('jxr qs #penguin ga position .x++')
+
 	newcode = newcode.replace(/obsv ([^\s]+)/ ,`newNoteFromObservableCell('$1')`)
 
 	// TODO
@@ -3422,18 +3425,24 @@ function thumbToIndexAngle(){
 AFRAME.registerComponent('annotation', {
 // consider also multiple annotation but being mindful that it might clutter significantly
   schema: {
-	content : {type: 'string'}
+	content : {type: 'string', default:''},
+	back : {type: 'string', default:''}
   },
   init: function () {
 	addAnnotation(this.el, this.data.content)
+	let back = addAnnotation(this.el, this.data.back)
+	back.setAttribute('position', '0 0 -.2')
+	back.setAttribute('rotation', '180 0 0')
+	back.setAttribute('material', 'side:front')
+	back.classList.add( 'back' )
   },
   update: function () {
+	this.el.querySelector('.annotation').setAttribute('value', this.data.content )
 	this.el.querySelector('.annotation').setAttribute('value', this.data.content )
 	// assuming single annotation
   },
   remove: function () {
-	this.el.querySelector('.annotation').removeFromParent()
+	Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
-	//Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
   }
 })
 
@@ -3441,6 +3450,7 @@ function addAnnotation(el, content){
 	// could also appear only when in close proximity or while pinching
 	let annotation = document.createElement( 'a-troika-text' )
 	annotation.classList.add( 'annotation' )
+	annotation.classList.add( 'content' )
 	annotation.setAttribute('value', content)
 	annotation.setAttribute('position', '0 .1 -.1')
 	annotation.setAttribute('rotation', '-90 0 0')
@@ -3448,7 +3458,7 @@ function addAnnotation(el, content){
 	annotation.setAttribute("outline-width", "5%" )
 	annotation.setAttribute("outline-color", "black" )
 	el.appendChild(annotation)
-	return el
+	return annotation
 }
 
 // used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
@@ -3464,7 +3474,6 @@ consider also
 
 see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52 for more shorthands
 
-*/
 	const movePenguin = "jxr qs #penguin sa position 1 0 -2"
 	const rotatePenguin = "jxr qs #penguin sa rotation 0 -20 0"
 
@@ -3494,25 +3503,29 @@ see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52 for more shorth
 	el.setAttribute('scale', '.1 .1 .1') 
 	AFRAME.scenes[0].appendChild(el)
 
+*/
+
 	let h = [
 		[1,1,1,1,1,1,1,1,1,1],
-		[1,0,0,0,1,0,0,0,0,1],
+		[1,0,0,0,1,0,0,3,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
-		[1,0,0,0,0,1,0,0,0,1],
-		[1,0,0,0,1,0,0,0,0,1],
 		[1,0,0,0,0,1,0,0,0,1],
+		[1,0,2,0,0,0,0,0,0,1],
+		[1,0,0,0,0,0,0,0,0,1],
+		[1,0,0,0,0,0,0,0,0,1],
+		[1,0,0,0,0,0,0,0,0,1],
+		[1,0,0,0,0,0,0,0,0,1],
+		[1,0,0,2,0,1,0,0,0,1],
 		[1,1,1,1,1,1,1,1,1,1],
 	]
 	for (let z=0;z<10;z++)
 		for (let x=0;x<10;x++){
 			el = document.createElement("a-entity")
 			el.setAttribute('position', (x-5) + ' 0 ' + (z-5) )
+			el.classList.add( 'maptile' )
 			el.setAttribute('geometry', "primitive: cylinder; segmentsRadial: 8; segmentsHeight: 1; radius: 0.5; height: "+(h[x][z]+.1)+";" )
 			el.setAttribute('material', 'color', 'lightblue')
-			AFRAME.scenes[0].appendChild(el)
+			//AFRAME.scenes[0].appendChild(el)
+			document.getElementById('tablescaled').appendChild(el)
 		}
 
 	// consider instanciateFromPrimitive() also in order to clone a set of blocks