Merge branch 'tazza' into 'develop'

modifiche iniziali tazza

See merge request egalware/xylexp!2

XylExp.UI/XylExp.UI.sln

@@ -3,9 +3,9 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.2.32616.157
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "XylExp.UI", "XylExp.UI\XylExp.UI.csproj", "{EB7F3FB2-44DA-4042-96A6-D45B60D0A3C3}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "XylExp.UI", "XylExp.UI\XylExp.UI.csproj", "{EB7F3FB2-44DA-4042-96A6-D45B60D0A3C3}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "XylExp.Data", "XylExp.Data\XylExp.Data.csproj", "{52554A64-0FFC-489F-B835-692CA8E1EA73}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "XylExp.Data", "XylExp.Data\XylExp.Data.csproj", "{52554A64-0FFC-489F-B835-692CA8E1EA73}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

XylExp.UI/XylExp.UI/Pages/Tazzina.razor

@@ -0,0 +1,12 @@
+@page "/tazzina"
+@inject IJSRuntime JSrun
+
+<div id="WebGL-output">
+</div>
+
+@code{
+
+}
+
+
+

XylExp.UI/XylExp.UI/Pages/Tazzina.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.JSInterop;
+
+namespace XylExp.UI.Pages
+{
+    public partial class Tazzina
+    {
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await JSrun.InvokeVoidAsync("initTazzina");
+        }
+    }
+}

XylExp.UI/XylExp.UI/Pages/_Layout.cshtml

@@ -29,5 +29,8 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="lib/Tazzina/Tazzina.js"></script>
+    <script src="lib/ThreeJS/three.js"></script>
+    <script src="Lib/ThreeJS/OrbitControlsM.js"></script>
 </body>
 </html>

XylExp.UI/XylExp.UI/Shared/NavMenu.razor

@@ -19,6 +19,11 @@
                 <span class="oi oi-account-login" aria-hidden="true"></span> Enroll
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="tazzina">
+                <span class="oi oi-plus" aria-hidden="true"></span> Tazzina
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter

XylExp.UI/XylExp.UI/XylExp.UI.csproj

@@ -18,4 +18,10 @@
     <ProjectReference Include="..\XylExp.Data\XylExp.Data.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="wwwroot\images\LOGO_EGALWARE.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
 </Project>

XylExp.UI/XylExp.UI/libman.json

@@ -5,6 +5,10 @@
     {
       "library": "font-awesome@6.1.1",
       "destination": "wwwroot/lib/font-awesome/"
+    },
+    {
+      "library": "three.js@r99",
+      "destination": "wwwroot/lib/ThreeJS/three.js/"
     }
   ]
 }

XylExp.UI/XylExp.UI/wwwroot/lib/ThreeJS/OrbitControlsM.js

@@ -0,0 +1,414 @@
+/**
+ * @author qiao / https://github.com/qiao
+ * @author mrdoob / http://mrdoob.com
+ * @author alteredq / http://alteredqualia.com/
+ * @author WestLangley / http://github.com/WestLangley
+ */
+
+// xs, ys, zs per la posizione di vista iniziale
+/* Modifiche alla libreria:
+    -	riga 12			(camera lookAt + zoom)
+    -	riga 22			(camera lookAt + zoom)
+    - 	riga 149 		(pan)
+    -	riga 329->337	(Zoom near e far clipping plane disabilitata) 
+*/
+THREE.OrbitControls = function (object, domElement, xs, ys, zs, zo) { // togliere i parametri
+
+    this.object = object;
+    this.domElement = (domElement !== undefined) ? domElement : document;
+
+    // API
+
+    this.enabled = true;
+
+    this.center = new THREE.Vector3(xs, ys, zs); // per riportare a dafult, togliere xs, ys, zs
+
+    this.userZoom = true;
+    this.userZoomSpeed = 1.0;
+    this.vec = new THREE.Vector3(); // create once and reuse
+    this.pos = new THREE.Vector3(); // create once and reuse
+    this.lastVec = new THREE.Vector3(); // create once and reuse
+    this.lastPos = new THREE.Vector3();	// create once and reuse
+    this.vecHelp = new THREE.Vector3(); // create once and reuse
+    this.pointSet = false;				// controllo primo movimento di zoom
+
+    this.userRotate = true;
+    this.userRotateSpeed = 1.0;
+
+    this.userPan = true;
+    this.userPanSpeed = (object.right + object.top) / 200; // basic velocity
+    this.panSpeed = 1.0;
+
+    this.autoRotate = false;
+    this.autoRotateSpeed = 7.0; // 30 seconds per round when fps is 60
+
+    this.minPolarAngle = 0; // radians
+    this.maxPolarAngle = Math.PI; // radians
+
+    this.minDistance = 0;
+    this.maxDistance = Infinity;
+
+    this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+
+    // internals
+
+    var scope = this;
+
+    var EPS = 0.000001;
+    var PIXELS_PER_ROUND = 1800;
+
+    var rotateStart = new THREE.Vector2();
+    var rotateEnd = new THREE.Vector2();
+    var rotateDelta = new THREE.Vector2();
+
+    var zoomStart = new THREE.Vector2();
+    var zoomEnd = new THREE.Vector2();
+    var zoomDelta = new THREE.Vector2();
+
+    var phiDelta = 0;
+    var thetaDelta = 0;
+    var scale = 1;
+
+    var lastPosition = new THREE.Vector3();
+
+    var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };
+    var state = STATE.NONE;
+
+    // events
+
+    var changeEvent = { type: 'change' };
+
+
+    this.rotateLeft = function (angle) {
+
+        if (angle === undefined) {
+
+            angle = getAutoRotationAngle();
+
+        }
+
+        thetaDelta -= angle;
+
+    };
+
+    this.rotateRight = function (angle) {
+
+        if (angle === undefined) {
+
+            angle = getAutoRotationAngle();
+
+        }
+
+        thetaDelta += angle;
+
+    };
+
+    this.rotateUp = function (angle) {
+
+        if (angle === undefined) {
+
+            angle = getAutoRotationAngle();
+
+        }
+
+        phiDelta -= angle;
+
+    };
+
+    this.rotateDown = function (angle) {
+
+        if (angle === undefined) {
+
+            angle = getAutoRotationAngle();
+
+        }
+
+        phiDelta += angle;
+
+    };
+
+    this.zoomIn = function (zoomScale) {
+
+        if (zoomScale === undefined) {
+
+            zoomScale = getZoomScale();
+
+        }
+
+        scale /= zoomScale;
+
+    };
+
+    this.zoomOut = function (zoomScale) {
+
+        if (zoomScale === undefined) {
+
+            zoomScale = getZoomScale();
+
+        }
+
+        scale *= zoomScale;
+
+    };
+
+    this.pan = function (distance) {
+
+        //window.alert(distance.x + "," + distance.y + "," + distance.z);
+        //distance.transformDirection(this.object.matrix);
+        //distance.multiplyScalar(scope.userPanSpeed / zo);
+        //this.object.position.add(distance);
+        //this.center.add(distance);
+
+    };
+
+
+    // per traslazione durante lo zoom
+    this.translation = function (distance) {
+        //window.alert('oks');
+        //zo += event.wheelDeltaY *  0.00075;
+        //zo = Math.max( Math.min( zoom, 10000000 ), 0.00000001);
+        //window.alert(zo);
+        this.object.position.add(distance);
+        this.center.add(distance);
+        //this.update(zo, 327.328682, 191.689057);
+        //this.object.zo = zo;
+        //this.object.updateProjectionMatrix();
+    }
+
+    this.newCenter = function (event) {
+
+
+        //window.alert(movementX);
+        //var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+        //var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+
+        //scope.pan(new THREE.Vector3(- movementX , movementY, 0));
+
+
+        // panLeft( deltaX * ( this.scope.object.right - this.scope.object.left ) / this.scope.object.zoom / element.clientWidth, this.scope.object.matrix );
+        // panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+    }
+
+    this.update = function (zoom, leftEGT, rightEGT) { // passaggio zoom telecamera, clientX, clientY
+
+        zo = zoom;
+        l = leftEGT;
+        r = rightEGT;
+
+
+        var position = this.object.position;
+        var offset = position.clone().sub(this.center);
+
+        // angle from z-axis around y-axis
+
+        var theta = Math.atan2(offset.x, offset.z);
+
+        // angle from y-axis
+
+        var phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.z * offset.z), offset.y);
+
+        if (this.autoRotate) {
+
+            this.rotateLeft(getAutoRotationAngle());
+
+        }
+
+        theta += thetaDelta;
+        phi += phiDelta;
+
+        // restrict phi to be between desired limits
+        phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, phi));
+
+        // restrict phi to be betwee EPS and PI-EPS
+        phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));
+
+        var radius = offset.length() * scale;
+
+        // restrict radius to be between desired limits
+        radius = Math.max(this.minDistance, Math.min(this.maxDistance, radius));
+
+        offset.x = radius * Math.sin(phi) * Math.sin(theta);
+        offset.y = radius * Math.cos(phi);
+        offset.z = radius * Math.sin(phi) * Math.cos(theta);
+
+        position.copy(this.center).add(offset); // rotazione
+
+        this.object.lookAt(this.center); // rotazione
+
+        thetaDelta = 0;
+        phiDelta = 0;
+        scale = 1;
+
+        if (lastPosition.distanceTo(this.object.position) > 0) {
+
+            this.dispatchEvent(changeEvent);
+
+            lastPosition.copy(this.object.position);
+
+        }
+
+    };
+
+
+    function getAutoRotationAngle() {
+
+        return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+    }
+
+    function getZoomScale() {
+
+        return Math.pow(0.95, scope.userZoomSpeed);
+        //return Math.pow(0.95, scope.userZoomSpeed * (2 - zo)) ;
+        //return 1;
+    }
+
+    // se premo il muose
+    function onMouseDown(event) {
+
+        if (scope.enabled === false) return;
+        if (scope.userRotate === false) return;
+
+        event.preventDefault();
+
+        if (event.button === 0) {	// rotazione
+
+            state = STATE.ROTATE;
+
+            rotateStart.set(event.clientX, event.clientY);
+
+        } else if (event.button === 1) { // zooming
+
+            state = STATE.ZOOM;
+
+            zoomStart.set(event.clientX, event.clientY);
+
+        } else if (event.button === 2) { // panning
+
+            state = STATE.PAN;
+
+        }
+
+        //aggiungo due eventi, il 1) muose move e il 2) muose down
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+
+    }
+
+    // 1) se muovo il muose dopo averlo premuto
+    function onMouseMove(event) {
+
+        if (scope.enabled === false) return;
+
+        event.preventDefault();
+
+        if (state === STATE.ROTATE) {		// se si tratta di una rotazione
+
+            rotateEnd.set(event.clientX, event.clientY);
+            rotateDelta.subVectors(rotateEnd, rotateStart);
+
+            scope.rotateLeft(2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed);
+            scope.rotateUp(2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed);
+
+            rotateStart.copy(rotateEnd);
+
+        } else if (state === STATE.ZOOM) {		// se si tratta di uno zoom 
+
+        } else if (state === STATE.PAN) { // se si tratta di un panning 
+
+            var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+            var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+            scope.pan(new THREE.Vector3(- movementX, movementY, 0));
+
+        }
+
+    }
+
+    function onMouseUp(event) {
+
+        if (scope.enabled === false) return;
+        if (scope.userRotate === false) return;
+
+        document.removeEventListener('mousemove', onMouseMove, false);
+        document.removeEventListener('mouseup', onMouseUp, false);
+
+        state = STATE.NONE;
+
+    }
+
+    function onMouseWheel(event) { // se si tratta di un movimento della rotella del mouse --> Zoom 
+        /*
+       scope.vec.set(( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+       if(!(scope.lastVec.x == scope.vec.x && scope.lastVec.y == scope.vec.y && scope.lastVec.z == scope.vec.z)){ 	//posizione cambiata
+           scope.vecHelp.set(scope.vec.x, scope.vec.y, scope.vec.z);
+           scope.vec.set(scope.vec.x - scope.lastVec.x, scope.vec.y - scope.lastVec.y, scope.vec.z - scope.lastVec.z);
+           scope.lastVec.set(scope.vecHelp.x, scope.vecHelp.y, scope.vecHelp.z);
+           scope.vec.unproject( scope.object );
+           scope.vec.sub( scope.object.position ).normalize();
+           var distance = - scope.object.position.y / scope.vec.y;
+           scope.pos.copy( scope.object.position ).add( scope.vec.multiplyScalar( distance ) );
+           scope.pos.y = - scope.pos.y;
+           //window.alert(scope.pos.x + "," + scope.pos.y + "," + scope.pos.z);
+           scope.translation(scope.pos);
+       }
+       */
+
+
+        scope.pointSet = true;
+
+
+        /*
+        var mouseX = event.clientX;
+        var mouseY = event.clientY;
+        //window.alert("x:" + mouseX + "	y:" + mouseY);
+        //var posMid_x = window.innerWidth / 2;
+        //var posMid_y = window.innerHeight / 2;
+    	
+        var posMid_x = scope.center.x;
+        var posMid_y = scope.center.y;
+    	
+        //var distToCenter = Math.sqrt(Math.pow((posMid_x - mouseX), 2) + Math.pow((posMid_y - mouseY), 2));
+        //window.alert('x:' + mouseX + "	y:" + mouseY + "	d:" + distToCenter);
+        var deltaX = mouseX - posMid_x;
+        var deltaY = mouseY - posMid_y;
+        var distance = new THREE.Vector3( -deltaX , -deltaY, 0);//.normalize();
+        //distance.multiplyScalar(scope.userPanSpeed/zo);
+        //window.alert(distance.x + "," + distance.y + "," + distance.z);
+        //scope.translation(distance);	
+        */
+    }
+
+    function onKeyDown(event) {
+
+        if (scope.enabled === false) return;
+        if (scope.userPan === false) return;
+
+        switch (event.keyCode) {
+
+            case scope.keys.UP:
+                scope.pan(new THREE.Vector3(0, 1, 0));
+                break;
+            case scope.keys.BOTTOM:
+                scope.pan(new THREE.Vector3(0, - 1, 0));
+                break;
+            case scope.keys.LEFT:
+                scope.pan(new THREE.Vector3(- 1, 0, 0));
+                break;
+            case scope.keys.RIGHT:
+                scope.pan(new THREE.Vector3(1, 0, 0));
+                break;
+        }
+
+    }
+
+    this.domElement.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);
+    this.domElement.addEventListener('mousedown', onMouseDown, false);
+    this.domElement.addEventListener('mousewheel', onMouseWheel, false);
+    this.domElement.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox
+    this.domElement.addEventListener('keydown', onKeyDown, false);
+
+};
+
+THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);