Dynamic elements in Hololens experiences

I wasn't sure if the idea what I mentioned in my last post would work. That's why I was curious to test it. I tested it and it was working. I didn't want to invest so much time in it, so the calculation is not really precise, but I wanted to test the principle - and it seem to works. It's not very performant but it works fluidly on the HOloLens 2 device with the current Vuforia View version - so that it was no issue with the display , no performance concern. OK such workflow should not be active the whole time because it did consider every tracking event and will perform some no trivial calculations.Therefore should be activated only temporary when a selection is required. So here in preview the test but I tested on HL and the resutls are  better then in preview mode:

The calculation is a vector calculation  with moderate compexity:

// eq 
// calculate tranform of the widget from x,y,z,rx,ry,rz calling $scope.euler2trfMatR
//calculate then the inverse matrix
// calculate from tranform then the vectors plane_X_Vec and plane_Y_Vec
// planeX_Vec = inversMat * [1,0,0]T
// planeY_Vec = inversMat * [0,1,0]T
// Norm_plane = norm(plane_X_vec X plane_Y_vec) here is X for VectorProduct von X and Y plane
// d=(p-p0)*n/(l*n) //according Wiki 
// in javascript looks like this below
// let dist= dot_product( ( new Vector(planeX) ).minus(DEVICE_Location).retArray(),Norm_plane)/dot_product( eyeVecNorm,Norm_plane)
point_intersect = (norm(EYE_VEC)*dist +DEVICE_LOCATION)

so I used as "cursor" a model which I set to the position of the intersection point with the plane where the Image is located.

This all was embeded in the $scope.app.IntersectionEYEvectorTo3DWidget callback. so in the example:

 var arrArg=[]
 let propList=['x','y','z','rx','ry','rz']
// let argStr=""
 propList.forEach((si)=>{ arrArg.push($scope.view.wdg[widgetId][si]);})
// evalStr= "arrArg.push($scope.view.wdg['"+widgetId+"']."+si+");" ; eval(evalStr) })
let transfMat 		 =		euler2trfMatRarr(arrArg);
let transfMatInv	=	 matrix_invert(transfMat)
 
 let X_plane = new Vector( [1.0,0.0,0.0]).norm() 
 let Y_plane = new Vector( [0.0,1.0,0.0]).norm() 
 let N_plane = X_plane.prod(Y_plane).norm()
 let dist = X_plane.minus(new Vector(locVec)).dot(N_plane) / (new Vector(eyeVec)).norm().dot(N_plane)
 
 console.warn("dist="+dist)
 
 let vec_intersect = (( (new Vector( eyeVec)).norm().scale(dist) ).add( new Vector(locVec) )) 
 $scope.app.pointInts=vec_intersect.retArray()
 let point_intersect_projection= vec_intersect.matTr( transfMatInv).retArray();
 console.warn(" point_intersect_projection==> ", point_intersect_projection)
 
 $scope.app.pointIntsProj=point_intersect_projection
 let count=0
 let val=0
 propList.forEach((el)=>{
 if( el.indexOf("r") == -1) val =vec_intersect.retArray()[count]; // x,y,z 		
 		else val = $scope.view.wdg[widgetId][el]; //rotaiton rx,ry,rz
 	 $scope.setWidgetProp("csys",el,val) ; count++;
 })
 $scope.$applyAsync();

and then the projection of the intersction point x,y is used for  rundementery/not exact decsion abou the selected row column - something like this:

$scope.sampleSVG1 = function(text) { console.log("$scope.sampleSVG1")
 let sampleImgWidget = '3DImage-2'; 
 
 let table_Xmin	=	 -0.34579918
 let table_Xmax =	 -0.1663985
 let table_Ymin = 0.0411993
 let table_Ymax = 0.10022511
 let deltaX= (table_Xmax-table_Xmin)/2.3
 let deltaY= (table_Ymax-table_Ymin)/3
 
 let boderXmax	=	-0.1263985
 let boderXmin	 =	- 0.38579918
 let boderYmax	=	 0.14022511
 let boderYmin	 = 0.0011993
 
 let cX = $scope.app.pointIntsProj[0] 
 let cY = $scope.app.pointIntsProj[1] 
 let pnt_inside =false
 console.log("cX=",cX," <> cY=",cY)
 if (cX> boderXmin) 
 if (cX< boderXmax) 
 if(cY> boderYmin) 
 if(cY< boderYmax) 
 pnt_inside = true;
 console.log("pnt_inside="+pnt_inside)
 let color1= "gainsboro" 
 if(pnt_inside) color1="#AB7C94";
 console.log("color1="+color1) 
 let column=0
 let row=0
 if(pnt_inside) {
 row= Math.floor( (boderYmax-cY) /deltaY)-1
 column= 4-Math.floor( (boderXmax-cX) /deltaX)
 console.warn("row="+row+"<> column="+column)
 $scope.app.msg="selected : column="+column+" || row ="+row;
 }
 else
 $scope.app.msg="NOTING SELECTED!";
 
 $scope.setWidgetProp("3DLabel-1","text", $scope.app.msg); 
 
 for(c=0; c<4;c++)
 for(r=0; r<4;r++)
 { let ev_str="$scope.app.r"+r+"c"+c+"= \" \"";
 eval(ev_str) 
 
 }
 
 if(column<=0) column=0;
 else
 column--;
 if(column > 3) column=3;
 
 if(row<=0) row=0;
 else
 row--;
 if(row > 3) row=3;
 
 if(pnt_inside) 
 { let ev_str="$scope.app.r"+row+"c"+column+"= \"fill = \'magenta\'\" ";
 eval(ev_str)
 console.log(ev_str)
 } 
 
 let svgData = `<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width='900' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

 <title>SVG Table</title>

 <g id='columnGroup'>
 <rect x='65' y='10' width='75' height='110' fill='${color1}'/>
 <rect x='265' y='10' width='75' height='110' fill='${color1}'/>

 <text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson'>
 <tspan x='30' dy='1.5em' ${$scope.app.r0c0} >Q1</tspan>
 <tspan x='30' dy='1em' ${$scope.app.r1c0} >Q2</tspan>
 <tspan x='30' dy='1em' ${$scope.app.r2c0} >Q3</tspan>
 <tspan x='30' dy='1em' ${$scope.app.r3c0} >Q4</tspan>
 </text>

 <text x='100' y='30' font-size='18px' text-anchor='middle'>
 <tspan x='100' font-weight='bold' fill='crimson'>Sales</tspan>
 <tspan x='100' dy='1.5em' ${$scope.app.r0c1} >$ 223</tspan>
 <tspan x='100' dy='1em' ${$scope.app.r1c1}>$ 183</tspan>
 <tspan x='100' dy='1em' ${$scope.app.r2c1}>$ 277</tspan>
 <tspan x='100' dy='1em' ${$scope.app.r3c1}>$ 402</tspan>
 </text>

 <text x='200' y='30' font-size='18px' text-anchor='middle'>
 <tspan x='200' font-weight='bold' fill='crimson'>Expenses</tspan>
 <tspan x='200' dy='1.5em' ${$scope.app.r0c2}>$ 195</tspan>
 <tspan x='200' dy='1em' ${$scope.app.r1c2}>$ 70</tspan>
 <tspan x='200' dy='1em' ${$scope.app.r2c2}>$ 88</tspan>
 <tspan x='200' dy='1em' ${$scope.app.r3c2}>$ 133</tspan>
 </text>

 <text x='300' y='30' font-size='18px' text-anchor='middle'>
 <tspan x='300' font-weight='bold' fill='crimson'>Net</tspan>
 <tspan x='300' dy='1.5em' ${$scope.app.r0c3}>$ 28</tspan>
 <tspan x='300' dy='1em' ${$scope.app.r1c3}>$ 113</tspan>
 <tspan x='300' dy='1em' ${$scope.app.r2c3}>$ 189</tspan>
 <tspan x='300' dy='1em' ${$scope.app.r3c3}>$ 269</tspan>
 </text>
 </g>
</svg>`;
 
//console.log(svgData)
 let svgURL = "data&colon;image/svg+xml;base64," + btoa(svgData);
 $scope.setWidgetProp(sampleImgWidget,'src',svgURL)
}
//'''''''''''''''''''''''''''''''''''''''''''''''''''''''''

so that the effect /not very accurate but for the validation test is OK/ that the row/column is displayed in magenta - when there is e.g. double tap then the e.g. specific action is done for row-X column-Y