pointer move and click via xdotool with WebXR example

examples/spasca-offline/engine/index.html

@@ -2201,10 +2201,6 @@ function highlight(code = `console.log("Here is your code."); var x = 5;`, langu
 	return colorRange
 }
 
-document.body.addEventListener( "highlighterready", (e) => { 
-	fetch("colorme.js").then(r=>r.text()).then( page => { addCodeEditor( page ) })
-}, false);
-
 function startExperience(){
 	//addCodeEditor(" \n\nqwe qwe qwe qwe qwe qwe qwe qweqweqwe\n\n\na", "")
 	//addCodeEditor()
@@ -3012,6 +3008,12 @@ let uws = {}
 // used for testing
 AFRAME.registerComponent('startfunctions', {
   init: function () {
+
+	/*
+	document.body.addEventListener( "highlighterready", (e) => { 
+		fetch("colorme.js").then(r=>r.text()).then( page => { addCodeEditor( page ) })
+	}, false);
+
 	  fetch('/unifiedworkspaces')
 		  .then( r => r.json() )
 		  .then( r => {
@@ -3024,13 +3026,47 @@ AFRAME.registerComponent('startfunctions', {
 				  )
 			  })
 		  } )
+	*/
+
 	//startExperience()
 	//doublePinchToScale()
 	//emptyPinchToMove()
 	//makeAnchorsVisibleOnTargets()
 	//startMesher()
 
-	  fetch('/routes/json').then(r=>r.json()).then(r=>r.filter(p=>p.match(/minimizeall|resolution/)).map(p=>addNewNote('jxr fetch("https://192.168.0.129:8082'+p+'")')))
+	  fetch('/routes/json').then(r=>r.json()).then(r=>r.filter(p=>p.match(/minimizeall|resolution/)).map(p=>addNewNote('jxr fetch("'+p+'")')))
+	  // assume served locally
+
+	// could consider on end to click instead
+
+        document.querySelector('[pinchprimary]').addEventListener('pinchstarted', event => {
+		console.log('pinchprimary pinchstarted')
+		if (selectedElement) return
+		fetch('/mouse/down').then( r => r.json() ).then( r => console.log(r) )
+	})
+        document.querySelector('[pinchprimary]').addEventListener('pinchended', event => {
+		console.log('pinchprimary pinchended')
+		if (selectedElement) return
+		fetch('/mouse/up').then( r => r.json() ).then( r => console.log(r) )
+	})
+        document.querySelector('[pinchprimary]').addEventListener('pinchmoved', event => {
+		console.log('pinchprimary pinchmoved')
+		if (selectedElement) return
+		let pos = event.detail.position.clone()
+		let mx = Math.round((0.5+pos.x)*2000) // should clamp
+		let my = Math.round((1.6-pos.y)*2000)
+		console.log(pos.x,pos.y)
+		console.log(mx,my)
+		// should remain positive values, could align on virtual monitor if found
+			// otherwise realistic offsets while sitting, e.g 0 0 at 0.5m on the left and 0.5m above
+			// note that y is going up, so should be flipped
+			// resolution can also be found via xrand query, could be use to scale accordingly
+			// a partly visible virtual touchpad could help
+				// position="0 1.6 -0.5" scale="1 0.5 0.01" 
+		fetch('/mouse/move/?options='+mx+' '+ my)
+		  .then( r => r.json() )
+		  .then( r => console.log(r) )
+	})
   }
 })
 
@@ -3044,8 +3080,9 @@ AFRAME.registerComponent('startfunctions', {
 <a-scene cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;" adjust-height-in-vr
 	startfunctions
 	physics="debug:true"
-	toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json keyboard >
+	toolbox disable-components-via-url enable-components-via-url >
-	<!-- screenstack dynamic-view selectionboxonpinches glossary timeline issues fot
+	<!-- screenstack dynamic-view selectionboxonpinches glossary timeline issues fot keyboard 
+	commands-from-external-json 
 	networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;"
 	refresh-text-content-from-wiki-page="pagename:TestingPairCollaboration"
 	-->
@@ -3073,6 +3110,9 @@ AFRAME.registerComponent('startfunctions', {
 </a-box>
       <!-- could attach functions here... BUT then they have to be activable with the other hand! -->
       <!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->
+      <a-console position="0 .5 -0.8" rotation="-45 0 0" font-size="34" height=0.5 skip-intro=true></a-console>
+
+      <a-box id="touchpad" position="0 1.2 -0.5" scale="1 0.5 0.01" color="green" wireframe="true"></a-box>
 
       <a-entity light="type: ambient; color: #BBB; intensity: 0.6"></a-entity>
       <a-entity light="type: directional; color: #FFF; intensity: 1.4" position="-0.5 1 1"></a-entity>
@@ -3084,10 +3124,12 @@ AFRAME.registerComponent('startfunctions', {
       <a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" gltf-model="../content/SourceCityToolkit/SKY_Market_day.glb" scale="1 1 1" position="17 -10 -4" rotation="0 0 0"></a-entity>
       <a-troika-text anchor=left target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
 
-      <a-troika-text anchor=left target value="jxr emptyPinchToMove()" position="0 1.65 -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>
       <a-troika-text anchor=left target id="makeAnchorsVisibleOnTargets" value="jxr makeAnchorsVisibleOnTargets()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+
+	<!--
+      <a-troika-text anchor=left target value="jxr emptyPinchToMove()" position="0 1.65 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+
       <a-troika-text anchor=left target id="startmesher" value="jxr startMesher()" position="0 1.00 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
 
       <a-troika-text anchor=left target value="jxr pushLeftClass('meshed')" position=" -0.2 1.55 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
@@ -3097,19 +3139,16 @@ AFRAME.registerComponent('startfunctions', {
       <a-troika-text anchor=left target value="jxr pushBackClass('meshed')" position=" -0.2 1.35 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target value="jxr pushFrontClass('meshed')" position=" -0.2 1.30 0.1" 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="0 1.1 -0.8" rotation="-45 0 0" font-size="34" height=0.5 skip-intro=true></a-console>
-
-  <!-- Floor -->
   <a-plane rotation="-90 0 0" scale="5 5 5" position="0 1 0" opacity=.5 static-body></a-plane>
 
-  <!-- Immovable box -->
   <a-box static-body position="0 0.5 -5" width="3" height="1" depth="1"></a-box>
 
-  <!-- Dynamic box -->
   <a-box dynamic-unless-picked position="0 1.4 -.3" target scale=".1 .1 .1"></a-box>
+	-->
+
+      <!-- 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-scene>
   </body>

index.js

@@ -79,6 +79,8 @@ const utilsCmd = { // security risk but for now not accepting user input so safe
 		format: res => res.toString().split('\n')
 	},
 	'mousemove' : { cmd: 'xdotool mousemove ', optionsPattern: /\d+ \d+/},
+	'mouseup' : { cmd: 'xdotool mouseup 1'},
+	'mousedown' : { cmd: 'xdotool mousedown 1'},
 	// per device specific (until adjustable per user)
 	'minimizeall' : { cmd: kwinmin}, //KWin script
 	//'minimizeall' : { cmd: '/home/fabien/Prototypes/kwin-scripting/launch'}, //KWin script
@@ -412,8 +414,10 @@ function getSshConfig(){
 	easier to revoke if need be
   */
 
-app.get('/mousemove', (req, res) => {
+app.get('/mouse/up', (req, res) => { res.json( execConfiguredCommand('mouseup') ) })
-	if( !req.query.options?.match(utilsCmd['mousemove']) ) { {res.json( {error: 'use /mousemove/set?options=100 2000'}); return}}
+app.get('/mouse/down', (req, res) => { res.json( execConfiguredCommand('mousedown') ) })
+app.get('/mouse/move', (req, res) => {
+	if( !req.query.options?.match(utilsCmd['mousemove']) ) { {res.json( {error: 'use /mouse/move?options=100 2000'}); return}}
 	res.json( execConfiguredCommand('mousemove',req.query.options) ) }
 )
 app.get('/minimizeall', (req, res) => { res.json( execConfiguredCommand('minimizeall') ) })