From 07fcc4768588ccda429c50c322b9b3fadf4354a7 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Wed, 26 Jun 2024 15:51:08 +0200 Subject: [PATCH] Update area TJSD + yaml x robocopy --- .gitlab-ci.yml | 11 +- TestArea_IIS01/TJSD/Images/LogoEgw.png | Bin 0 -> 3051 bytes TestArea_IIS01/TJSD/index.html | 739 ++++++++---------- TestArea_IIS01/TJSD/index2.html | 59 -- TestArea_IIS01/TJSD/index3.html | 80 -- TestArea_IIS01/TJSD/index_1.html | 437 +++++++++++ TestArea_IIS01/TJSD/index_2.html | 151 ++++ .../webgl-door-visualizer/draw_call.js | 238 +++++- .../webgl-door-visualizer/jsm/libs/stats.js | 179 +++++ .../webgl-door-visualizer/webgl_draw.js | 315 +++++--- TestArea_IIS01/TJSD/style.css | 63 +- 11 files changed, 1565 insertions(+), 707 deletions(-) create mode 100644 TestArea_IIS01/TJSD/Images/LogoEgw.png delete mode 100644 TestArea_IIS01/TJSD/index2.html delete mode 100644 TestArea_IIS01/TJSD/index3.html create mode 100644 TestArea_IIS01/TJSD/index_1.html create mode 100644 TestArea_IIS01/TJSD/index_2.html create mode 100644 TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/jsm/libs/stats.js diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 5013538..a2ba516 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -32,16 +32,13 @@ variables: - | net use X: /delete SLEEP 2 - $mountCmd = "net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD" - Write-Output $mountCmd; + #$mountCmd = "net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD" + #Write-Output $mountCmd; net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD Foreach ($sDir in ($env:DIR_PATH -split " ")) { - Write-Output ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\ + Write-Output "ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\" + ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\ } - # for FOLDER in $env:DIR_PATH - # do - # Write-Output ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\ - # done SLEEP 2 net use X: /delete diff --git a/TestArea_IIS01/TJSD/Images/LogoEgw.png b/TestArea_IIS01/TJSD/Images/LogoEgw.png new file mode 100644 index 0000000000000000000000000000000000000000..8d5a7c1fa3da8f7edbd0edfaa5b299fee87505ec GIT binary patch literal 3051 zcmds3YgAKL8jbZq0hOT&S|Xr8u}TBhLKG1gPy(!$hk&>wMZknm@Cp@>M0up*R79|Z zN0qk<6lE}oH*hI0k%AC`BvJ@)3E@q6n1n|vhygO^I{)VH{Fyab>zLJ0< zR8!9^(m4?Qn{aUQZ9(Hmqd@c;m3n6KUk{9xwN6yF35BCGH`xO{qYGSADw=wWbPO~I zM2YMHkz|Qk-hZW}7w(iiY8n+!D^fXwJh8mFcdqQ!#JyVaz~o~6o0;CR1;Nnd@QmWk z@O*3E+w!)FoVwwQ`Q2iPtfoucIXH*#rplVT2Pfx%cD<6IPrzgw?d9&R`Y%2>b&IC~ zAd&iyF6X0gxScK7v#CAe2^ELah;}{g;KR5e6VJj!i1w|Z^U3+guj~u)$a0EVjvpyj zHdWw!DF65-iF0LOZ=85u;eGam>4I^jbEfYo4RVwp`na-r9F} zFnsNV(=pb^AfCnOBIyFim>hujh3>PxV9e2!M}6m^M&B zGDmn;Ik;L?nt3cw#h}iE*dVm|7gGH2`kqjZ&`PsjEy(^)Eku4Ev+%0n-MWIlXgFBGTv@RJM4b{9s6u_|4i#NfF;B_o zH&VVw*V0G@Nq%nsgf?ni?t{*hbolnqcB}yLhcNM7H`y*(pu%3}6QN0m@449yB?ukN zQ+7X5g7&!)Rg2u)fcA?#RlSOZeIff7m2Y}%RbT>0&JaWbhe)czUQge$H!PA`t{FY` z0SMTQ4yBRW!3#M`1*L7rhgqq^t4&I+gi0NCxHiq11ayywM1f=0yNN9jvDUs0h z+DZUR=I6Z~nA<-z5hJMh<~0VqO1oaElLXm6w~g^+HvC>@0KGaO!iy+s@7gcrVftkn zijSv)U^TJ>(n+&s&$47iIk)_FpyqHvt_EtJGmVMTG(CYu8a}tfDpN>eF~+AThU4c< z?3&b}+E8GOn4kSuvoA|lrJe*r?zwX8u(t&GizUlC^l>j6+#=Rxaq43$eVEOW<>;Wk zyc4})T!dDEUA@b%N6pA)6zgkY&N7yV;*I?h=;x_025u_`v$axSeepn%E;%Q% zjB1np0YeTC0gLTJ?U?cUqO8>^E-mG*u@mxO@ZtoQb$R2)2Ja}9^BXB+zeoU;rMC)} zqsXCOE^<&uiuwb$iw~Kc88jj2?RHZJ5-@nQSiO)SAsoGq1fYjo)C*+&2$$g)!m--6 z+nU^Slr^>Th*bGEba7SKAmq?6>j z#oOI{-Su--9vS?5)1b0HQFz#>niIS)ZSNSAV^?Won$PoPWrQQGH7;XNEw+)ztFS*L zgscy8)rwF!K9K&MWuAY$UoN`zi*qU!i394ryYA5w;~r)c)(Kum$#a0D^WHVEai3>? z@>nhOy4{#WAj^S3KVrR9+6phqRloQm(p{6A%b*7$r&EXVHC)mmJXk-1n9skx_kj#?B`2y4YOz zt|QT|GM01zqzl=Cq2-3b0TO|le>69T zgPt9CL35KiUpv@6lJXkBzB~)IR?s+?TE7X7D&@5?CQD!&4vlg$(hn_k#c;(^K?(Z1 zQ{kEA5Iz(aNOwmc9^x$C5T6fDD(#}(Pr4eMMC$_Q8epegG)iKe16r)kL0^q!!On`{ z39%{zcKsGPhqUhu$Mo&_)!z?pthSB$F^X7kneQ7DiaNyqZ_#l@s?yVV&>@@zqA>=(^eT+?JI<9~B#;H*cjt`6kT5#~DHMk)9S8t~si zB3e^3PZM4L4~BV8<8%8PIM~%F&*VP`-gHxh`Sk}fVam!z&6;}YvN^t$<@QEYqf-0+ Y*WH$Z+O?m9KczTVC->78j)95)0#(IYY5)KL literal 0 HcmV?d00001 diff --git a/TestArea_IIS01/TJSD/index.html b/TestArea_IIS01/TJSD/index.html index ad2e9d1..191eaa9 100644 --- a/TestArea_IIS01/TJSD/index.html +++ b/TestArea_IIS01/TJSD/index.html @@ -2,9 +2,12 @@ - Door render + WebDoor3D Render + + + - -
- -
- +
+
+
+ + +
+
+ + + +
-
- -
-
-
- 
-                        Camera settings : 
-                        Zoom : Wheel-Scroll 
-                        Pan : Mouse-Wheel and Drag
-                        Rotate : Key-CTRL + Mouse-Right and Drag
-                        Center : Key-'Space' 
-                        Type : Key-O ( orthographic ) 
-                                Key-P ( perspective ) 
-                                                
-                        Toggle Auto-rotation : Key-R 
-                                                
-                        Toggle Show-Dimension : Key-D
-
-                        Toggle Show-Cube : Key-C
-
-                        Toggle Show-Frame : Key-F
-
-                        Toggle Show-Grid : Key-G
-
+
+
+ +
+ + +
+ +
+
+
    +
  • + Camera settings +
    • +
  • + Zoom Wheel-Scroll +
    • +
  • + Pan Drag Mouse-Wheel +
    • +
  • + Rotate CTRL + Drag Mouse-Wheel +
    • +
  • +
    Iso / Ortho
    +
    + | key : O +
    +
    • +
  • +
    Perspective
    +
    + | key : P +
    +
    • +
  • +
    AutoRotate
    +
    + | key : R +
    +
    • +
  • +
    Quotes
    +
    + | key : Q +
    +
    • +
  • +
    Grid
    +
    + | key : G +
    +
    • +
  • +
    Reset
    +
    + | key: SpaceBar +
    +
    • +
  • +
    Menu
    +
    + | key : H +
    +
    • +
+ +
+
+
+
+
+
+ WebDoor 3D +
+
+ Egalware | +
+
+
+ + \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/index2.html b/TestArea_IIS01/TJSD/index2.html deleted file mode 100644 index d9f7041..0000000 --- a/TestArea_IIS01/TJSD/index2.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - Door render - - - - - - -
- -
- -
-
- -
-
-
- 
-                        Camera settings : 
-                        Zoom : Wheel-Scroll 
-                        Pan : Mouse-Wheel and Drag
-                        Rotate : Key-CTRL + Mouse-Right and Drag
-                        Center : Key-'Space' 
-                        Type : Key-O ( orthographic ) 
-                                Key-P ( perspective ) 
-                                                
-                        Toggle Auto-rotation : Key-R 
-                                                
-                        Toggle Show-Dimension : Key-D
-
-                        Toggle Show-Cube : Key-C
-
-                        Toggle Show-Frame : Key-F
-
-                        Toggle Show-Grid : Key-G
-
-
-
-
- -
-
-
- - - - - \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/index3.html b/TestArea_IIS01/TJSD/index3.html deleted file mode 100644 index c55d3a3..0000000 --- a/TestArea_IIS01/TJSD/index3.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - Door render - - - - - - -
- -
- -
-
- -
-
-
- 
-                        Camera settings : 
-                        Zoom : Wheel-Scroll 
-                        Pan : Mouse-Wheel and Drag
-                        Rotate : Key-CTRL + Mouse-Right and Drag
-                        Center : Key-'Space' 
-                        Type : Key-O ( orthographic ) 
-                                Key-P ( perspective ) 
-                                                
-                        Toggle Auto-rotation : Key-R 
-                                                
-                        Toggle Show-Dimension : Key-D
-
-                        Toggle Show-Cube : Key-C
-
-                        Toggle Show-Frame : Key-F
-
-                        Toggle Show-Grid : Key-G
-
-
-
-
- -
-
-
- - - - - \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/index_1.html b/TestArea_IIS01/TJSD/index_1.html new file mode 100644 index 0000000..ad2e9d1 --- /dev/null +++ b/TestArea_IIS01/TJSD/index_1.html @@ -0,0 +1,437 @@ + + + + + Door render + + + + + + +
+ +
+ +
+
+ +
+
+
+ 
+                        Camera settings : 
+                        Zoom : Wheel-Scroll 
+                        Pan : Mouse-Wheel and Drag
+                        Rotate : Key-CTRL + Mouse-Right and Drag
+                        Center : Key-'Space' 
+                        Type : Key-O ( orthographic ) 
+                                Key-P ( perspective ) 
+                                                
+                        Toggle Auto-rotation : Key-R 
+                                                
+                        Toggle Show-Dimension : Key-D
+
+                        Toggle Show-Cube : Key-C
+
+                        Toggle Show-Frame : Key-F
+
+                        Toggle Show-Grid : Key-G
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/index_2.html b/TestArea_IIS01/TJSD/index_2.html new file mode 100644 index 0000000..edf2a49 --- /dev/null +++ b/TestArea_IIS01/TJSD/index_2.html @@ -0,0 +1,151 @@ + + + + + WebDoor3D Render + + + + + + + + +
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+ + +
+ + +
+
+
    +
  • + Camera settings +
    • +
  • + Zoom Wheel-Scroll +
    • +
  • + Pan Drag Mouse-Wheel +
    • +
  • + Rotate CTRL + Drag Mouse-Wheel +
    • + +
  • +
    Iso / Ortho
    +
    + | key : O +
    + +
    • +
  • +
    Perspective
    +
    + | key : P +
    + +
    • +
  • +
    AutoRotate
    +
    + | key : R +
    + +
    • +
  • +
    Quotes
    +
    + | key : Q +
    + +
    • +
  • +
    Grid
    +
    + | key : G +
    + +
    • +
  • +
    Reset
    +
    + | key: SpaceBar +
    + +
    • +
  • +
    Menu
    +
    + | key : H +
    + +
    • +
+
+
+
+ +
+
+
+
+
+
+ WebDoor 3D +
+
+ Egalware | +
+
+
+ + + + + \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js index 48b4119..a6dc8db 100644 --- a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js +++ b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js @@ -1,20 +1,240 @@ -import { webgl_original } from './webgl_draw.js'; - +import { webgl_original } from "./webgl_draw.js"; const WGL = new webgl_original(); +const infoDiv = document.getElementById( "infoDiv") ; +const doorDiv = document.getElementById( "DoorRender") ; +const cubeDiv = document.getElementById( "Ref1Render") ; +infoDiv.style.display = "none"; + +var isAnimated = true; +var isRotating = true; +var showQuote = true; +var showGrid = true; + let options ={ - modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models', - fName: getUrlParameter('src') + modelPath: "https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models", + fName: getUrlParameter("src") } +// init controllo +WGL.initcall(options); + + +// --------------------------------------------------- +// Funzioni pubbliche +// --------------------------------------------------- +window.toggleAnim = () => +{ + isAnimated = !isAnimated; + fixAnimate(true); +} + +// reset camera +window.resetCamera = () => +{ + console.log("Reset Camera"); + document.getElementById("btnReset").className = "btn btn-lg btn-light"; + isAnimated = true; + // isRotating = true; + fixAnimate(true); + // fixBtnRotate(); + // WGL.toggleRotation(); + WGL.resetCamera(); + var millisecondsToWait = 500; + setTimeout(function() { + document.getElementById("btnReset").className = "btn btn-lg btn-secondary"; + }, millisecondsToWait); +} + +// set camera persp +window.setOrtho = () => +{ + console.log("Set Camera ISO/ORTHO"); + document.getElementById("btnOrto").className = "btn btn-lg btn-light"; + document.getElementById("btnPers").className = "btn btn-lg btn-secondary"; + WGL.setCameraOrtho(); +} + +// reset camera persp +window.setPersp = () => +{ + console.log("Set Camera Perspective"); + document.getElementById("btnOrto").className = "btn btn-lg btn-secondary"; + document.getElementById("btnPers").className = "btn btn-lg btn-light"; + WGL.setCameraPersp(); +} + +// toggle griglia +window.toggleGrid = () => +{ + console.log("Toggle Grid"); + showGrid = !showGrid; + if(showGrid) + { + document.getElementById("btnGrid").className = "btn btn-lg btn-light"; + } + else{ + document.getElementById("btnGrid").className = "btn btn-lg btn-secondary"; + } + WGL.toggleGrid(); +} + +// toggle quotatura +window.toggleHelp = () => +{ + console.log("Toggle Menu"); + toggleMenu(); +} + +// toggle quotatura +window.toggleQuote = () => +{ + console.log("Toggle Quote"); + showQuote = !showQuote; + if(showQuote) + { + document.getElementById("btnQuote").className = "btn btn-lg btn-light"; + } + else{ + document.getElementById("btnQuote").className = "btn btn-lg btn-secondary"; + } + WGL.toggleQuotes(); +} + +// toggle rotazione +window.toggleRotate = () => +{ + console.log("Toggle Rotate"); + isRotating = !isRotating; + fixBtnRotate(); + WGL.toggleRotation(); +} + +// --------------------------------------------------- +// Funzioni private +// --------------------------------------------------- + // Reading URL parameters ------------------------------------------------------------------------- function getUrlParameter( name) { // get query string from URL - const queryString = window.location.search ; + const queryString = window.location.search ; // create URLSearchParams object from query string - const urlParams = new URLSearchParams( queryString) ; + const urlParams = new URLSearchParams( queryString) ; // get parameter value by name - return urlParams.get( name) ; - } + return urlParams.get( name) ; +} -WGL.initcall(options); \ No newline at end of file +function toggleMenu() +{ + console.log("Toggle Menu Camera"); + if ( infoDiv.style.display == "none") + infoDiv.style.display = "block" ; + else + infoDiv.style.display = "none"; +} + +function fixAnimate(setRotate) +{ + if( isAnimated ) + { + document.getElementById("btnPlay").className = "btn btn-lg btn-light"; + document.getElementById("btnPause").className = "btn btn-lg btn-secondary"; + if(setRotate) + isRotating = true; + fixBtnRotate(); + WGL.setRotate(isRotating); + WGL.doAnimate(); + } + else + { + document.getElementById("btnPlay").className = "btn btn-lg btn-secondary"; + document.getElementById("btnPause").className = "btn btn-lg btn-light"; + if(setRotate) + isRotating = false; + fixBtnRotate(); + WGL.setRotate(isRotating); + WGL.doFreeze(); + } +} + + +function fixBtnRotate() +{ + var cssClass = "btn btn-lg btn-secondary"; + if(isRotating) + { + cssClass = "btn btn-lg btn-light"; + } + document.getElementById("btnRotate").className = cssClass; +} + +function onKeyPress( event) { + + switch (event.key.toLowerCase() ){ + case " ": + resetCamera(); + break; + case "a": + toggleAnim(); + break; + case "h": + toggleMenu(); + break; + case "g": + toggleGrid(); + break; + case "o": + setOrtho(); + break; + case "p": + setPersp(); + break; + case "q": + toggleQuote(); + break; + case "r": + toggleRotate(); + break; + } +} + +function checkButton(event) +{ + switch(event.button){ + case 0: + // salto! + break; + default: + reAnimate(); + break; + } +} + +function reAnimate() +{ + if( !isAnimated ) + { + isAnimated = true; + fixAnimate(false); + } +} + +function reAnimateRotate() +{ + if( !isAnimated ) + { + isAnimated = true; + fixAnimate(true); + } +} + + +// Event Listner ------------------------------------------------------------------- +// KEY +document.addEventListener( "keypress", onKeyPress) ; +doorDiv.addEventListener( 'pointerup', checkButton ); +doorDiv.addEventListener( 'touchstart', reAnimate ); +// doorDiv.addEventListener( 'touchend', reAnimate ); +// doorDiv.addEventListener( 'touchcancel', reAnimate ); +doorDiv.addEventListener( 'touchmove', reAnimateRotate ); +doorDiv.addEventListener( 'click', toggleAnim ); \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/jsm/libs/stats.js b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/jsm/libs/stats.js new file mode 100644 index 0000000..4875f72 --- /dev/null +++ b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/jsm/libs/stats.js @@ -0,0 +1,179 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.Stats = factory()); +}(this, (function () { 'use strict'; + +/** + * @author mrdoob / http://mrdoob.com/ + */ + +var Stats = function () { + + var mode = 0; + + var container = document.createElement( 'div' ); + container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; + container.addEventListener( 'click', function ( event ) { + + event.preventDefault(); + showPanel( ++ mode % container.children.length ); + + }, false ); + + // + + function addPanel( panel ) { + + container.appendChild( panel.dom ); + return panel; + + } + + function showPanel( id ) { + + for ( var i = 0; i < container.children.length; i ++ ) { + + container.children[ i ].style.display = i === id ? 'block' : 'none'; + + } + + mode = id; + + } + + // + + var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; + + var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); + var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); + + if ( self.performance && self.performance.memory ) { + + var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); + + } + + showPanel( 0 ); + + return { + + REVISION: 16, + + dom: container, + + addPanel: addPanel, + showPanel: showPanel, + + begin: function () { + + beginTime = ( performance || Date ).now(); + + }, + + end: function () { + + frames ++; + + var time = ( performance || Date ).now(); + + msPanel.update( time - beginTime, 200 ); + + if ( time >= prevTime + 1000 ) { + + fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); + + prevTime = time; + frames = 0; + + if ( memPanel ) { + + var memory = performance.memory; + memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); + + } + + } + + return time; + + }, + + update: function () { + + beginTime = this.end(); + + }, + + // Backwards Compatibility + + domElement: container, + setMode: showPanel + + }; + +}; + +Stats.Panel = function ( name, fg, bg ) { + + var min = Infinity, max = 0, round = Math.round; + var PR = round( window.devicePixelRatio || 1 ); + + var WIDTH = 80 * PR, HEIGHT = 48 * PR, + TEXT_X = 3 * PR, TEXT_Y = 2 * PR, + GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, + GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; + + var canvas = document.createElement( 'canvas' ); + canvas.width = WIDTH; + canvas.height = HEIGHT; + canvas.style.cssText = 'width:80px;height:48px'; + + var context = canvas.getContext( '2d' ); + context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; + context.textBaseline = 'top'; + + context.fillStyle = bg; + context.fillRect( 0, 0, WIDTH, HEIGHT ); + + context.fillStyle = fg; + context.fillText( name, TEXT_X, TEXT_Y ); + context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); + + context.fillStyle = bg; + context.globalAlpha = 0.9; + context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); + + return { + + dom: canvas, + + update: function ( value, maxValue ) { + + min = Math.min( min, value ); + max = Math.max( max, value ); + + context.fillStyle = bg; + context.globalAlpha = 1; + context.fillRect( 0, 0, WIDTH, GRAPH_Y ); + context.fillStyle = fg; + context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); + + context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); + + context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); + + context.fillStyle = bg; + context.globalAlpha = 0.9; + context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); + + } + + }; + +}; + +return Stats; + +}))); diff --git a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js index 8371ee6..697753a 100644 --- a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js +++ b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js @@ -1,11 +1,12 @@ // importing import * as THREE from './three.module.js' ; +// import Stats from './jsm/libs/stats.js'; import { OrbitControls } from './jsm/controls/OrbitControls.js'; import { Rhino3dmLoader} from './jsm/loaders/3DMLoader.js' ; import ViewCubeControls from './custom/cubeControls.js'; -import { getStaticRef, updateRef } from './custom/refControls.js' ; +// import { getStaticRef, updateRef } from './custom/refControls.js' ; -// VARIABILI DI CONTROLLO +// COSTANTI/VARIABILI DI CONTROLLO const EPS_SMALL = 0.001 ; const GRID_GROUP_NAME = 'gridGroup' ; const FRAME_GROUP_NAME = 'frameGroup' ; @@ -15,23 +16,34 @@ const DIMENSION_GROUP_NAME = 'dimGroup' ; const DIMENSION_DISCRIMINANT_NAME = 'dim_' ; const GENERAL_ENTITY_GROUP_NAME = 'generalGroup' ; const START_CAMERA_POSITION = ( new THREE.Vector3( -0.3994, 0.6339, 0.66223)).normalize() ; -var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x808080) ; +const _changeEvent = { type: 'change' }; +const _startEvent = { type: 'start' }; +const _endEvent = { type: 'end' }; +const clock = new THREE.Clock(); +const fpsTgtHigh = 1 / 60; // Target 60 FPS MAX +const fpsTgtLow = 1 / 6; // Target 6 FPS low +// // statistiche fps +// const stats = new Stats(); +// variabili +var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x87a7ad) ; var CAMERA_TYPE = CAMERA_ORTHO ; var SHOW_DIMENSION = true ; var GRID_MAIN_COLOR = new THREE.Color( 0x000000) ; -var GRID_SECOND_COLOR = new THREE.Color( 0xcccccc) ; +var GRID_SECOND_COLOR = new THREE.Color( 0x363636) ; var PATH = './Door_models' ; var FILE_NAME = 'Demo.3dm' var CTRL_DOWN = false ; +var targetTimeStep = fpsTgtHigh; // ref global variables --------- var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ; -var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var frame_ref1 ; +// var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var frame_ref1 ; // shared variables /* Box3d of the door ------------ */ var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame() /* ------------------------------ */ +var freezed = false; // costanti globali // scene @@ -49,6 +61,10 @@ renderer.setPixelRatio( 2 * window.devicePixelRatio) ; document.getElementById( 'DoorRender').appendChild( renderer.domElement) ; renderer.shadowMap.enabled = true ; +// // aggiunta panel statistiche +// stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom +// document.body.appendChild(stats.dom) + // light const ambientLight = new THREE.AmbientLight( 0xffffff, 2.5) ; // color, intensity scene.add( ambientLight) ; @@ -67,8 +83,16 @@ const gridGroup = new THREE.Group() ; const frameGroup = new THREE.Group() ; -//init(); +/* +* Oggetto principale gestione WebGL Door visualizer +*/ class webgl_original { + + /** + * Metodo Init con visualizzazzione dati + * @param {string} modelPath Percorso base recupero modello 3dm + * @param {string} fName Nome del modello 3dm da visualizzare + */ async initcall({ modelPath, fName}) { PATH = modelPath; FILE_NAME = fName; @@ -82,6 +106,95 @@ class webgl_original { let timeElapsed = endTime - startTime; console.log('init done in : ' + timeElapsed); } + + async doFreeze() + { + freezed = true; + } + + async doAnimate() + { + freezed = false; + // if(freezed) + // { + // freezed = false; + // await animate(); + // } + } + + /** + * reset posizione camera + */ + resetCamera() + { + myResetCamera(); + } + + + /** + * imposta vista isometrica/ortografica + */ + setCameraOrtho() + { + mySetCameraOrtho() + } + + /** + * imposta vista prospettica + */ + setCameraPersp() + { + mySetCameraPersp() + } + + /** + * toggle visualizzazione cubo + */ + toggleCube() + { + myToggleCubeVisibility(); + } + + // /** + // * toggle visualizzazione frame assi + // */ + // toggleFrame() + // { + // myToggleFrameVisibility(); + // } + + /** + * toggle visualizzazione griglia + */ + toggleGrid() + { + myToggleGridVisibility(); + } + + /** + * toggle visualizzazione quotature + */ + toggleQuotes() + { + myToggleQuote() + } + + /** + * toggle rotazione + */ + toggleRotation() + { + myToggleRotation() + } + + /** + * Imposta rotazione + * @param {boolean} isRotating + */ + setRotate(isRotating) + { + mySetRotation(isRotating); + } } export { webgl_original } @@ -90,12 +203,31 @@ export { webgl_original } // rendering function animate() { requestAnimationFrame( animate) ; + + const elapsedTime = clock.getElapsedTime(); + targetTimeStep = fpsTgtHigh; + if (freezed) + { + targetTimeStep = fpsTgtLow; + // Update only if enough time has passed for target FPS + if (elapsedTime < targetTimeStep) + return; + } + + + // if (freezed) + // { + // console.log(freezed); + // return; + // } + renderer.render( scene, controls.object) ; controls.update() ; cube_ref.update( controls) ; renderer_ref.render( scene_ref, camera_ref) ; - updateRef( frame_ref1, camera_ref1, controls) ; - renderer_ref1.render( scene_ref1, camera_ref1) ; + // updateRef( frame_ref1, camera_ref1, controls) ; + // renderer_ref1.render( scene_ref1, camera_ref1) ; + clock.start(); } function readDoor() { @@ -105,22 +237,22 @@ function readDoor() { // removing shading from colors and adjusting z-fighting with lines ( organizing groups entities ) for ( let i = 0 ; i < object.children.length ; ++ i) setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ; - // adding groups to scene + // adding groups to scene scene.add( dimensionGroup) ; scene.add( general_entity_Group) ; - // setting Box3d of the door + // setting Box3d of the door set3dBox( object) ; - // setting camera position + // setting camera position setCameraPosition() ; - // setting grid + // setting grid setGrid() ; - // setting frame + // setting frame setFrame() ; - // static cube + // static cube setStaticCube() ; - // static frame - setStaticFrame() ; - // render loop + // // static frame + // setStaticFrame() ; + // render loop animate() ; }) ; } @@ -258,6 +390,8 @@ function setStaticCube() { // renderer renderer_ref = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ; renderer_ref.setSize( divContainer.clientWidth, divContainer.clientHeight) ; + // valutare abbassamento risoluzione + // renderer_ref.setPixelRatio( 1 * window.devicePixelRatio) ; renderer_ref.setPixelRatio( 2 * window.devicePixelRatio) ; divContainer.appendChild( renderer_ref.domElement) ; // scene @@ -288,38 +422,30 @@ function setStaticCube() { cube_ref._colorCube() ; } -function setStaticFrame() { - // container of the cube - const divContainer = document.getElementById( 'Ref1Render') ; - // renderer - renderer_ref1 = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ; - renderer_ref1.setSize( divContainer.clientWidth, divContainer.clientHeight) ; - renderer_ref1.setPixelRatio( 2 * window.devicePixelRatio) ; - divContainer.appendChild( renderer_ref1.domElement) ; - // scene - scene_ref1 = new THREE.Scene() ; - if ( CAMERA_TYPE == CAMERA_ORTHO) - camera_ref1 = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, - divContainer.clientHeight / 5, - divContainer.clientHeight / 5, 0.1, 1000) ; - else - camera_ref1 = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ; - // setting standard camera posizion and lookAt -> made according cube dimension - camera_ref1.position.set( 0, 0, 70) ; - camera_ref1.lookAt( 0, 0, 0) ; - // creating the cube object and adding it to the scene - frame_ref1 = getStaticRef( 1, 25) ; - scene_ref1.add( frame_ref1) ; -} +// function setStaticFrame() { +// // container of the cube +// const divContainer = document.getElementById( 'Ref1Render') ; +// // renderer +// renderer_ref1 = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ; +// renderer_ref1.setSize( divContainer.clientWidth, divContainer.clientHeight) ; +// renderer_ref1.setPixelRatio( 2 * window.devicePixelRatio) ; +// divContainer.appendChild( renderer_ref1.domElement) ; +// // scene +// scene_ref1 = new THREE.Scene() ; +// if ( CAMERA_TYPE == CAMERA_ORTHO) +// camera_ref1 = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, +// divContainer.clientHeight / 5, - divContainer.clientHeight / 5, 0.1, 1000) ; +// else +// camera_ref1 = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ; +// // setting standard camera posizion and lookAt -> made according cube dimension +// camera_ref1.position.set( 0, 0, 70) ; +// camera_ref1.lookAt( 0, 0, 0) ; +// // creating the cube object and adding it to the scene +// frame_ref1 = getStaticRef( 1, 25) ; +// scene_ref1.add( frame_ref1) ; +// } -function ToggleRotation() { - controls.autoRotate = ( ! controls.autoRotate) ; -} - -function toggleDimensionVisibility() { - dimensionGroup.visible = ! dimensionGroup.visible ; -} - -function toggleCubeVisibility() { +function myToggleCubeVisibility() { var cubeContainer = document.getElementById( 'RefRender') ; if ( cubeContainer.style.display === "none") cubeContainer.style.display = "block"; @@ -327,67 +453,46 @@ function toggleCubeVisibility() { cubeContainer.style.display = "none"; } -function toggleFrameVisibility() { - var frameContainer = document.getElementById( 'Ref1Render') ; - if ( frameContainer.style.display === "none") - frameContainer.style.display = "block"; - else - frameContainer.style.display = "none"; -} +// function myToggleFrameVisibility() { +// var frameContainer = document.getElementById( 'Ref1Render') ; +// if ( frameContainer.style.display === "none") +// frameContainer.style.display = "block"; +// else +// frameContainer.style.display = "none"; +// } -function toggleGridVisibility() { +function myToggleGridVisibility() { gridGroup.visible = ! gridGroup.visible ; frameGroup.visible = ! frameGroup.visible ; } -// Event Listner ------------------------------------------------------------------- - // KEY -document.addEventListener( "keypress", function( event) { - if ( event.key.toLowerCase() === "r") - ToggleRotation() ; - else if ( event.key.toLowerCase() === 'p') { - if ( CAMERA_TYPE == CAMERA_PERSP) - return ; - controls.object = perspCamera.clone() ; - CAMERA_TYPE = CAMERA_PERSP ; - setCameraPosition() ; - } - else if ( event.key.toLowerCase() === 'o') { - if ( CAMERA_TYPE == CAMERA_ORTHO) - return ; - controls.object = ortoCamera.clone() ; - CAMERA_TYPE = CAMERA_ORTHO ; - setCameraPosition() ; - } - else if ( event.key.toLowerCase() === 'd') - toggleDimensionVisibility() ; - else if ( event.key.toLowerCase() === ' ') - setCameraPosition() ; - else if ( event.key.toLowerCase() === 'c') - toggleCubeVisibility() ; - else if ( event.key.toLowerCase() === 'f') - toggleFrameVisibility() ; - else if ( event.key.toLowerCase() === 'g') - toggleGridVisibility() ; -}) ; +function mySetRotation(isRotating) { + controls.autoRotate = isRotating ; +} +function myToggleRotation() { + controls.autoRotate = ( ! controls.autoRotate) ; +} - // Elements -var helpButton = document.getElementById( "helpButton") ; -var infoDiv = document.getElementById( "infoDiv") ; -infoDiv.style.display = "none"; -helpButton.addEventListener( "click", function() { - if ( infoDiv.style.display === "none") - infoDiv.style.display = "block" ; - else - infoDiv.style.display = "none"; -}) ; +function myToggleQuote() { + dimensionGroup.visible = ! dimensionGroup.visible ; +} -// // Reading URL parameters ------------------------------------------------------------------------- -// function getUrlParameter( name) { -// // get query string from URL -// const queryString = window.location.search ; -// // create URLSearchParams object from query string -// const urlParams = new URLSearchParams( queryString) ; -// // get parameter value by name -// return urlParams.get( name) ; -// } \ No newline at end of file +function mySetCameraOrtho() { + if ( CAMERA_TYPE == CAMERA_ORTHO) + return ; + controls.object = ortoCamera.clone() ; + CAMERA_TYPE = CAMERA_ORTHO ; + setCameraPosition() ; +} + +function mySetCameraPersp() { + if ( CAMERA_TYPE == CAMERA_PERSP) + return ; + controls.object = perspCamera.clone() ; + CAMERA_TYPE = CAMERA_PERSP ; + setCameraPosition() ; +} + +function myResetCamera() { + setCameraPosition() ; +} diff --git a/TestArea_IIS01/TJSD/style.css b/TestArea_IIS01/TJSD/style.css index 505f31f..fec1c16 100644 --- a/TestArea_IIS01/TJSD/style.css +++ b/TestArea_IIS01/TJSD/style.css @@ -14,59 +14,38 @@ canvas { #divMenu { position: fixed ; - top: 10px ; - right: 10px ; + top: 0.5rem; + right: 0.2rem; background-color: transparent ; - width: 275px ; } -.container { - width: 100% ; - height: auto ; - margin-bottom: 10px ; -} - -.container::after { - content: "" ; - display: table ; - clear: both ; -} - -.container img { - width: 100% ; - height: auto ; - display: block ; -} - -#helpButton { - text-decoration: underline ; - float: right ; - height: auto ; +#divLogo{ + position: fixed ; + top: 4rem; + right: 0.5rem; + height: 5rem; + width: 4rem; + font-size: 0.8rem; } #infoDiv { - width: 100% ; - height: auto ; - color: white ; + position: fixed ; + top: 3.75rem; + right: 0.5rem; + z-index: 10; + + width: 15rem; + height: auto; + /* color: white ; */ background-color: transparent ; font-size: 0.9em ; } #RefRender { position: fixed ; - width: 200px ; - height: 200px ; - bottom: 10px ; - right: 10px ; - /*border: 1px solid black ;*/ -} - -#Ref1Render { - position: fixed ; - width: 150px ; - height: 150px ; - bottom: 10px ; - left: 10px ; + width: 8rem ; + height: 8rem ; + bottom: 0.5rem ; + left: 0.5rem ; background-color: transparent ; - /*border: 1px solid black ;*/ }