diff --git a/extensions/gcodeViewer/dist/gcodeViewer.html.gz b/extensions/gcodeViewer/dist/gcodeViewer.html.gz
new file mode 100644
index 00000000..c9cb976b
Binary files /dev/null and b/extensions/gcodeViewer/dist/gcodeViewer.html.gz differ
diff --git a/extensions/gcodeViewer/dist/gcodeViewer.html/gcodeViewer.html b/extensions/gcodeViewer/dist/gcodeViewer.html/gcodeViewer.html
deleted file mode 100644
index 25b22eba..00000000
--- a/extensions/gcodeViewer/dist/gcodeViewer.html/gcodeViewer.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>const gcodeView_version="1.0.0";let gl;const programGridInfo={},programGCodeInfo={};let file,mvMatrix=createIdentityMatrix(),pMatrix=createIdentityMatrix(),animationFrameId=null,autoRotationSpeed=1e-4,lastFrameTime=0,gcodePoints=[],visiblePoints=[],fileReader=new FileReader,chunkSize=8192,fileOffset=0,totalFileSize=0,processedSize=0,lastPosition={x:0,y:0,z:0,e:0},gcodeMinX=1/0,gcodeMaxX=-1/0,gcodeMinY=1/0,gcodeMaxY=-1/0,gcodeMinZ=1/0,gcodeMaxZ=-1/0,gcode_vertices=[],gcode_colors=[],gcode_normals=[],layers=new Set,currentLayer=-1,lastSignificantZ=-1/0;const lineWidths={extrude:.4,move:.1,retract:.1},MAX_VERTICES=1e6;let isFileProcessing=!1,isComputing=!1,lastLayerZ=null,layerHeightSum=0,layerCount=0,printStarted=!1;const firstLayerMaxHeight=1,minLayerHeight=.05;let verticesPerLayer,currentZoom=1,averageLayerHeight=0,showNonExtrusionMoves=!1,startLayer=0,endLayer=1/0,invertXY=!1,invertFrontBack=!1,isSmartZoomEnabled=!1,isWheelInverted=!1,gridSide=200;const gridStep=10;let scaleFactor=1;const initialCameraDistance=500,minZoom=.1,maxZoom=15,LAYER_OPTIMIZATION_THRESHOLD=200;let startPanX,startPanY,rotation=[0,0],rotationCenter=[gridSide/2,gridSide/2,gridSide/2],cameraPosition=[0,0,initialCameraDistance],upVector=[0,1,0],totalRotation=[0,0],currentCameraDistance=initialCameraDistance,mouseDown=!1,lastMouseX=0,lastMouseY=0,isPanning=!1,lastPinchDistance=0;function vec3_cross(e,r){return[e[1]*r[2]-e[2]*r[1],e[2]*r[0]-e[0]*r[2],e[0]*r[1]-e[1]*r[0]]}function vec3_normalize(e){let r=Math.sqrt(e[0]*e[0]+e[1]*e[1]+e[2]*e[2]);return[e[0]/r,e[1]/r,e[2]/r]}function createRotationMatrix(e,r){let t=Math.cos(e),o=Math.sin(e),a=1-t,[i,n,s]=r,l=a*i,c=a*n;return[l*i+t,l*n-o*s,l*s+o*n,0,l*n+o*s,c*n+t,c*s-o*i,0,l*s-o*n,c*s+o*i,a*s*s+t,0,0,0,0,1]}function createTranslationMatrix(e,r,t){return[1,0,0,0,0,1,0,0,0,0,1,0,e,r,t,1]}function createIdentityMatrix(){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}function multiplyMatrices(e,r){let t=createIdentityMatrix();for(let o=0;o<4;o++)for(let a=0;a<4;a++)t[4*o+a]=e[4*o+0]*r[0+a]+e[4*o+1]*r[4+a]+e[4*o+2]*r[8+a]+e[4*o+3]*r[12+a];return t}function perspectiveMatrix(e,r,t,o){let a=Math.tan(.5*Math.PI-.5*e),i=1/(t-o);return[a/r,0,0,0,0,a,0,0,0,0,(t+o)*i,-1,0,0,t*o*i*2,0]}function invertMatrix(e){let r,t=new Array(16);if(t[0]=e[5]*e[10]*e[15]-e[5]*e[11]*e[14]-e[9]*e[6]*e[15]+e[9]*e[7]*e[14]+e[13]*e[6]*e[11]-e[13]*e[7]*e[10],t[4]=-e[4]*e[10]*e[15]+e[4]*e[11]*e[14]+e[8]*e[6]*e[15]-e[8]*e[7]*e[14]-e[12]*e[6]*e[11]+e[12]*e[7]*e[10],t[8]=e[4]*e[9]*e[15]-e[4]*e[11]*e[13]-e[8]*e[5]*e[15]+e[8]*e[7]*e[13]+e[12]*e[5]*e[11]-e[12]*e[7]*e[9],t[12]=-e[4]*e[9]*e[14]+e[4]*e[10]*e[13]+e[8]*e[5]*e[14]-e[8]*e[6]*e[13]-e[12]*e[5]*e[10]+e[12]*e[6]*e[9],r=e[0]*t[0]+e[1]*t[4]+e[2]*t[8]+e[3]*t[12],0==r)return!1;r=1/r;for(let e=0;e<16;e++)t[e]*=r;return t}function multiplyMatrixAndPoint(e,r){const t=new Array(4);for(let o=0;o<4;o++){t[o]=0;for(let a=0;a<4;a++)t[o]+=e[4*o+a]*r[a]}return t}const viewMatrices={front:{normal:applyZoomToView([0,0,1,0,0,1,0,0,-1,0,0,0,0,0,-initialCameraDistance,1],1),inverted:applyZoomToView([1,0,0,0,0,1,0,0,0,0,1,0,0,0,-initialCameraDistance,1],1)},back:{normal:applyZoomToView([0,0,-1,0,0,1,0,0,1,0,0,0,0,0,initialCameraDistance,1],1),inverted:applyZoomToView([-1,0,0,0,0,1,0,0,0,0,-1,0,0,0,initialCameraDistance,1],1)},right:{normal:applyZoomToView([-1,0,0,0,0,1,0,0,0,0,-1,0,initialCameraDistance,0,0,1],1),inverted:applyZoomToView([0,0,-1,0,0,1,0,0,1,0,0,0,0,0,-initialCameraDistance,1],1)},left:{normal:applyZoomToView([1,0,0,0,0,1,0,0,0,0,1,0,-initialCameraDistance,0,0,1],1),inverted:applyZoomToView([0,0,1,0,0,1,0,0,-1,0,0,0,0,0,-initialCameraDistance,1],1)},bottom:{normal:applyZoomToView([0,1,0,0,0,0,-1,0,-1,0,0,0,0,0,initialCameraDistance,1],1),inverted:applyZoomToView([1,0,0,0,0,0,-1,0,0,1,0,0,0,initialCameraDistance,0,1],1)},top:{normal:applyZoomToView([0,-1,0,0,0,0,1,0,-1,0,0,0,0,0,-initialCameraDistance,1],1),inverted:applyZoomToView([1,0,0,0,0,0,1,0,0,-1,0,0,0,-initialCameraDistance,0,1],1)}};function applyZoomToView(e,r){let t=e.slice(),o=t[12],a=t[13],i=t[14],n=gridSide/2,s=gridSide/2,l=gridSide/2;for(let e=0;e<12;e++)t[e]*=r;return t[12]=n+(o-n)*r,t[13]=s+(a-s)*r,t[14]=l+(i-l)*r,t}function setView(e){currentCameraDistance=initialCameraDistance,currentZoom=1,scaleFactor=1;let r=e.toLowerCase();if(invertFrontBack)switch(r){case"front":r="back";break;case"back":r="front";break;case"right":r="left";break;case"left":r="right"}mvMatrix=viewMatrices[r][invertXY?"inverted":"normal"].slice(),totalRotation=[0,0];let t=createTranslationMatrix(-gridSide/2,-gridSide/2,-gridSide/2);if(mvMatrix=multiplyMatrices(mvMatrix,t),invertXY)switch(r){case"back":mvMatrix[14]=-currentCameraDistance+gridSide,mvMatrix[12]+=gridSide;break;case"left":mvMatrix[14]=-currentCameraDistance,mvMatrix[12]+=gridSide;break;case"right":mvMatrix[14]=-currentCameraDistance+gridSide;break;case"top":mvMatrix[13]=gridSide/2,mvMatrix[14]=-currentCameraDistance;break;case"bottom":mvMatrix[13]=-gridSide/2,mvMatrix[14]=-currentCameraDistance+gridSide;break;default:mvMatrix[14]=-currentCameraDistance}else switch(r){case"back":mvMatrix[14]=-currentCameraDistance+gridSide;break;case"left":mvMatrix[12]=-gridSide/2,mvMatrix[14]=-currentCameraDistance;break;case"right":mvMatrix[12]=gridSide/2,mvMatrix[14]=-currentCameraDistance+gridSide;break;case"top":mvMatrix[12]=gridSide/2,mvMatrix[13]=gridSide/2,mvMatrix[14]=-currentCameraDistance;break;case"bottom":mvMatrix[12]=gridSide/2,mvMatrix[13]=-gridSide/2,mvMatrix[14]=-currentCameraDistance+gridSide;break;default:mvMatrix[12]=gridSide/2,mvMatrix[14]=-currentCameraDistance}cameraPosition=[mvMatrix[12],mvMatrix[13],mvMatrix[14]],upVector=[mvMatrix[1],mvMatrix[5],mvMatrix[9]],currentCameraDistance=Math.sqrt(cameraPosition[0]*cameraPosition[0]+cameraPosition[1]*cameraPosition[1]+cameraPosition[2]*cameraPosition[2])}function checkBufferStatus(e,r,t=gl.ARRAY_BUFFER_BINDING){return!!e&&(!checkGLError()&&gl.getParameter(t)==e)}function checkGLError(e=null){const r=gl.getError();return r!==gl.NO_ERROR&&(console.error(`Error in WebGL ${e||""}:`,r),!0)}function checkglStatus(){return gl?gl.isContextLost()?(console.error("WebGL context is lost"),!1):!checkGLError():(console.error("WebGL is not initialized"),!1)}function checkProgramStatus(e,r){return e?(gl.validateProgram(e),gl.getProgramParameter(e,gl.VALIDATE_STATUS)?!!gl.getProgramParameter(e,gl.LINK_STATUS)||(console.error("Shader program ${name} failed to link:",gl.getProgramInfoLog(e)),!1):(console.error("Validation error for shader program:",gl.getProgramInfoLog(e)),!1)):(console.error("Shader program ${name} is null"),!1)}function checkAttribut(e,r){return-1!==e||(console.error("Impossible to locate the attribute ",r),!1)}function checkUniform(e,r){return!(!e||-1===e)||(console.error("Impossible to locate the uniform ",r),!1)}function checkShader(e,r){return e?!!gl.getShaderParameter(e,gl.COMPILE_STATUS)||(console.error(`Error compiling shader ${r}:`,gl.getShaderInfoLog(e)),gl.deleteShader(e),!1):(console.error(`Shader ${r} is null`),!1)}function enableAttributes(e){e.attribLocations&&Object.values(e.attribLocations).forEach((e=>{gl.enableVertexAttribArray(e)}))}function disableAttributes(e){e.attribLocations&&Object.values(e.attribLocations).forEach((e=>{gl.disableVertexAttribArray(e)}))}function useProgram(e,r){gl.useProgram(e.program),disableAttributes(r),enableAttributes(e)}function initCamera(){cameraPosition=[0,0,initialCameraDistance],upVector=[0,1,0],totalRotation=[0,0]}function initWebGL(e){gl=e.getContext("webgl"),gl?(gl.clearColor(1,1,1,1),gl.enable(gl.DEPTH_TEST)):alert("Failed to initialize WebGL. Your browser may not support this feature.")}function debounce(e,r){let t;return function(...o){clearTimeout(t),t=setTimeout((()=>{clearTimeout(t),e(...o)}),r)}}async function updatePointsAndRedraw(){try{await updateVisiblePoints(!0),drawScene()}catch(e){console.error("Error updating visible points:",e)}}const debouncedUpdateAndRedraw=debounce(updatePointsAndRedraw,250);function getShader(e,r){const t=document.getElementById(r);if(!t)return console.error(`Shader script not found: ${r}`),null;const o=t.textContent.trim();if(!o)return console.error(`Shader content is empty: ${r}`),null;let a;if("x-shader/x-vertex"===t.type)a=e.createShader(e.VERTEX_SHADER);else{if("x-shader/x-fragment"!==t.type)return console.error(`Type de shader inconnu: ${t.type}`),null;a=e.createShader(e.FRAGMENT_SHADER)}return e.shaderSource(a,o),e.compileShader(a),checkShader(a,r)?a:null}function createShaderProgram(e,r,t,o){if(!checkShader(e,`${t} vertex shader`)||!checkShader(r,`${t} fragment shader`))return null;const a=gl.createProgram();return gl.attachShader(a,e),gl.attachShader(a,r),o.forEach(((e,r)=>{gl.bindAttribLocation(a,r,e)})),gl.linkProgram(a),gl.getProgramParameter(a,gl.LINK_STATUS)?a:(console.error(`Unable to initialize the shader program ${t}:`,gl.getProgramInfoLog(a)),null)}function createShaders(){return createGridShader()?!!createGCodeShader()||(console.error("Impossible to create the gcode shader"),!1):(console.error("Impossible to create the grid shader"),!1)}function createGridShader(){disableAttributes(programGCodeInfo);const e=getShader(gl,"grid-vertex-shader");if(!e)return!1;const r=getShader(gl,"fragment-shader-grid");return!!r&&(programGridInfo.program=createShaderProgram(e,r,"programGrid",["grid_aVertexPosition","grid_aVertexColor","grid_aVertexNormal"]),!!checkProgramStatus(programGridInfo.program,"programGrid")&&(programGridInfo.attribLocations={},programGridInfo.attribLocations.vertexPosition=gl.getAttribLocation(programGridInfo.program,"grid_aVertexPosition"),!!checkAttribut(programGridInfo.attribLocations.vertexPosition,"grid_aVertexPosition")&&(programGridInfo.attribLocations.vertexColor=gl.getAttribLocation(programGridInfo.program,"grid_aVertexColor"),!!checkAttribut(programGridInfo.attribLocations.vertexColor,"grid_aVertexColor")&&(programGridInfo.uniformLocations={},programGridInfo.uniformLocations.pMatrix=gl.getUniformLocation(programGridInfo.program,"grid_uPMatrix"),!!checkUniform(programGridInfo.uniformLocations.pMatrix,"grid_uPMatrix")&&(programGridInfo.uniformLocations.mvMatrix=gl.getUniformLocation(programGridInfo.program,"grid_uMVMatrix"),!!checkUniform(programGridInfo.uniformLocations.mvMatrix,"grid_uMVMatrix"))))))}function createGCodeShader(){disableAttributes(programGridInfo);const e=getShader(gl,"gcode-vertex-shader");if(!e)return console.error("Failed to get vertex shader"),!1;const r=getShader(gl,"fragment-shader-gcode");if(!r)return console.error("Failed to get fragment shader"),!1;const t=createShaderProgram(e,r,"programGCode",["gcode_aVertexPosition","gcode_aVertexColor","gcode_aVertexNormal"]);return t?!!checkProgramStatus(t,"programGCode")&&(programGCodeInfo.program=t,programGCodeInfo.attribLocations={},programGCodeInfo.attribLocations={vertexPosition:gl.getAttribLocation(t,"gcode_aVertexPosition"),vertexNormal:gl.getAttribLocation(t,"gcode_aVertexNormal"),vertexColor:gl.getAttribLocation(t,"gcode_aVertexColor")},programGCodeInfo.uniformLocations={pMatrix:gl.getUniformLocation(t,"gcode_uPMatrix"),mvMatrix:gl.getUniformLocation(t,"gcode_uMVMatrix"),lightPosition:gl.getUniformLocation(t,"gcode_uLightPosition"),ambientColor:gl.getUniformLocation(t,"gcode_uAmbientColor"),diffuseColor:gl.getUniformLocation(t,"gcode_uDiffuseColor")},!0):(console.error("Failed to create shader program"),!1)}function createGridBuffers(){if(disableAttributes(programGCodeInfo),gridSide=calculateGridSide(),0===gridSide||"NaN"==gridSide.toString())return console.error("Impossible to calculate the grid side. Please check your GCode file."),!1;const e=[],r=[];for(let t=0;t<=gridSide;t+=gridStep){e.push(0,0,t,gridSide,0,t),e.push(t,0,0,t,0,gridSide);for(let e=0;e<4;e++)r.push(.8,.8,.8,1)}if(programGridInfo.buffer=gl.createBuffer(),programGridInfo.buffer&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.buffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(e),gl.STATIC_DRAW)),!checkBufferStatus(programGridInfo.buffer,"Grid buffer"))return!1;if(programGridInfo.buffer.itemSize=3,programGridInfo.buffer.numItems=e.length/3,programGridInfo.colorBuffer=gl.createBuffer(),programGridInfo.colorBuffer&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.colorBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(r),gl.STATIC_DRAW)),!checkBufferStatus(programGridInfo.colorBuffer,"Grid color buffer"))return!1;const t=.5,o=[0,-.5,-.5,gridSide,-.5,-.5,0,t,-.5,gridSide,t,-.5,0,t,t,gridSide,t,t,0,-.5,t,gridSide,-.5,t,-.5,-.5,0,-.5,-.5,gridSide,t,-.5,0,t,-.5,gridSide,t,t,0,t,t,gridSide,-.5,t,0,-.5,t,gridSide,-.5,0,-.5,-.5,gridSide,-.5,t,0,-.5,t,gridSide,-.5,t,0,t,t,gridSide,t,-.5,0,t,-.5,gridSide,t],a=[];for(let e=0;e<8;e++)invertXY?a.push(1,0,0,1):a.push(0,1,0,1);for(let e=0;e<8;e++)invertXY?a.push(0,1,0,1):a.push(1,0,0,1);for(let e=0;e<8;e++)a.push(0,0,1,1);if(programGridInfo.axesBuffer=gl.createBuffer(),programGridInfo.axesBuffer&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.axesBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(o),gl.STATIC_DRAW),programGridInfo.axesBuffer.itemSize=3,programGridInfo.axesBuffer.numItems=o.length/3),!checkBufferStatus(programGridInfo.axesBuffer,"Grid axes buffer"))return!1;if(programGridInfo.axesBuffer.itemSize=3,programGridInfo.axesBuffer.numItems=o.length/3,programGridInfo.axesColorBuffer=gl.createBuffer(),programGridInfo.axesColorBuffer&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.axesColorBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(a),gl.STATIC_DRAW)),!checkBufferStatus(programGridInfo.axesColorBuffer,"Grid axes color buffer"))return!1;const i=[0,1,2,2,1,3,2,3,6,6,3,7,4,5,6,6,5,7,0,4,1,1,4,5,8,9,10,10,9,11,10,11,14,14,11,15,12,13,14,14,13,15,8,12,9,9,12,13,16,17,18,18,17,19,18,19,22,22,19,23,20,21,22,22,21,23,16,20,17,17,20,21];return programGridInfo.axesIndexBuffer=gl.createBuffer(),programGridInfo.axesIndexBuffer&&(gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,programGridInfo.axesIndexBuffer),gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(i),gl.STATIC_DRAW),programGridInfo.axesIndexBuffer.numItems=i.length),!!checkBufferStatus(programGridInfo.axesIndexBuffer,"Grid axes index buffer",gl.ELEMENT_ARRAY_BUFFER_BINDING)&&createAxisLabelsBuffers()}function updateAxisColors(){const e=[];for(let r=0;r<8;r++)e.push(invertXY?1:0,invertXY?0:1,0,1);for(let r=0;r<8;r++)e.push(invertXY?0:1,invertXY?1:0,0,1);for(let r=0;r<8;r++)e.push(0,0,1,1);gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.axesColorBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(e),gl.STATIC_DRAW)}function createAxisLabelsBuffers(){return!!createXLabelBuffer()&&(!!createYLabelBuffer()&&createZLabelBuffer())}function createLabelBuffer(e){const r=gl.createBuffer();return r&&(gl.bindBuffer(gl.ARRAY_BUFFER,r),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(e),gl.STATIC_DRAW),r.itemSize=3,r.numItems=e.length/3),r}function createLabelColorBuffer(e){const r=new Array(6).fill(e).flat(),t=gl.createBuffer();return t&&(gl.bindBuffer(gl.ARRAY_BUFFER,t),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(r),gl.STATIC_DRAW)),t}function createXLabelBuffer(){const e=.05*gridSide,r=gridSide+.05*gridSide/4,t=invertXY?.05*-gridSide/2:0,o=invertXY?0:.05*-gridSide,a=(invertXY?[[0,0,0],[e,e,0],[0,e,0],[e,0,0]]:[[0,0,e/2],[e/2,0,0],[e,0,e/2],[e/2,0,0],[e/2,0,0],[e/2,0,-e/2]]).flatMap((e=>invertXY?[e[0]+r,e[1]+t,e[2]+o]:[e[1]+r,e[2]+t,e[0]+o]));return programGridInfo.xLabelBuffer=createLabelBuffer(a),!!checkBufferStatus(programGridInfo.xLabelBuffer,"X Label Buffer")&&(programGridInfo.xLabelColorBuffer=createLabelColorBuffer(invertXY?[1,0,0,1]:[0,1,0,1]),!!checkBufferStatus(programGridInfo.xLabelColorBuffer,"X Label Color Buffer"))}function createYLabelBuffer(){const e=.05*gridSide,r=invertXY?-.05*gridSide:0,t=invertXY?0:.05*-gridSide/4,o=invertXY?gridSide+.06*gridSide/2:gridSide+.05*gridSide/2,a=(invertXY?[[0,0,e/2],[e/2,0,0],[e,0,e/2],[e/2,0,0],[e/2,0,0],[e/2,0,-e/2]]:[[0,0,0],[e,e,0],[0,e,0],[e,0,0]]).flatMap((e=>invertXY?[e[0]+r-10,e[2]+t,e[1]+o]:[e[2]+r,e[0]+t,e[1]+o]));return programGridInfo.yLabelBuffer=createLabelBuffer(a),!!checkBufferStatus(programGridInfo.yLabelBuffer,"Y Label Buffer")&&(programGridInfo.yLabelColorBuffer=createLabelColorBuffer(invertXY?[0,1,0,1]:[1,0,0,1],a.length/3),!!checkBufferStatus(programGridInfo.yLabelColorBuffer,"Y Label Color Buffer"))}function createZLabelBuffer(){const e=.05*gridSide,r=invertXY?.05*-gridSide/2:0,t=invertXY?gridSide+.07*gridSide:gridSide+.05*gridSide/2,o=invertXY?0:.05*-gridSide/2,a=(invertFrontBack?[[e,0,0],[0,0,0],[0,0,0],[e,0,e],[e,0,e],[0,0,e]]:[[0,0,0],[e,0,0],[e,0,0],[0,0,e],[0,0,e],[e,0,e]]).flatMap((e=>invertXY?[e[0]+r,-e[2]+t,e[1]+o]:[e[1]+r,e[2]+t,e[0]+o]));return programGridInfo.zLabelBuffer=createLabelBuffer(a),!!checkBufferStatus(programGridInfo.zLabelBuffer,"Z Label Buffer")&&(programGridInfo.zLabelColorBuffer=createLabelColorBuffer([0,0,1,1]),!!checkBufferStatus(programGridInfo.zLabelColorBuffer,"Z Label Color Buffer"))}function cleanupGCodeBuffers(){programGCodeInfo.buffers&&programGCodeInfo.buffers.forEach((e=>{gl.deleteBuffer(e.vertexBuffer),gl.deleteBuffer(e.colorBuffer),gl.deleteBuffer(e.normalBuffer)})),programGCodeInfo.buffers=[]}function drawScene(){return!!checkglStatus()&&(!!checkProgramStatus(programGridInfo.program,"programGrid")&&(useProgram(programGridInfo,programGCodeInfo),gl.viewport(0,0,gl.canvas.width,gl.canvas.height),gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT),pMatrix=perspectiveMatrix(45*Math.PI/180,gl.canvas.width/gl.canvas.height,.1,1e4),gl.uniformMatrix4fv(programGridInfo.uniformLocations.pMatrix,!1,new Float32Array(pMatrix)),!checkGLError("pMatrix")&&(gl.uniformMatrix4fv(programGridInfo.uniformLocations.mvMatrix,!1,new Float32Array(mvMatrix)),!checkGLError("mvMatrix")&&(!!drawGrid()&&(!!drawAxes()&&(!!drawAxisLabels()&&(gcodePoints.length>0?drawGCode():(isComputing=!1,updateProgress("",100),!0))))))))}function drawGrid(){return!!checkProgramStatus(programGridInfo.program,"programGrid")&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.buffer),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexPosition,3,gl.FLOAT,!1,0,0),checkBufferStatus(programGridInfo.buffer,"Grid buffer"),!checkGLError("Grid buffer")&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.colorBuffer),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexColor,4,gl.FLOAT,!1,0,0),!checkGLError("Grid color buffer")&&(checkBufferStatus(programGridInfo.colorBuffer,"Grid color buffer"),gl.drawArrays(gl.LINES,0,programGridInfo.buffer.numItems),!checkGLError("Draw grid"))))}function drawAxes(){return!!checkProgramStatus(programGridInfo.program,"programGrid")&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.axesBuffer),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexPosition,3,gl.FLOAT,!1,0,0),!checkGLError("Axes buffer")&&(gl.bindBuffer(gl.ARRAY_BUFFER,programGridInfo.axesColorBuffer),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexColor,4,gl.FLOAT,!1,0,0),!checkGLError("Axes color buffer")&&(gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,programGridInfo.axesIndexBuffer),gl.drawElements(gl.TRIANGLES,programGridInfo.axesIndexBuffer.numItems,gl.UNSIGNED_SHORT,0),!checkGLError("Draw axes"))))}function drawAxisLabels(){return!!drawLabel(programGridInfo.xLabelBuffer,programGridInfo.xLabelColorBuffer)&&(!!drawLabel(programGridInfo.yLabelBuffer,programGridInfo.yLabelColorBuffer)&&drawLabel(programGridInfo.zLabelBuffer,programGridInfo.zLabelColorBuffer))}function drawLabel(e,r,t){return!!checkProgramStatus(programGridInfo.program,"programGrid")&&(gl.bindBuffer(gl.ARRAY_BUFFER,e),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexPosition,3,gl.FLOAT,!1,0,0),!checkGLError(`Axes buffer ${t}`)&&(gl.bindBuffer(gl.ARRAY_BUFFER,r),gl.vertexAttribPointer(programGridInfo.attribLocations.vertexColor,4,gl.FLOAT,!1,0,0),!checkGLError(`Axes color buffer ${t}`)&&(gl.drawArrays(gl.LINES,0,e.numItems),!checkGLError(`Draw label ${t}`))))}function loadGCodeFile(e){updateProgress("Initializing:",0),isFileProcessing=!0,startProcessing(e),processEntireFile()}async function finishProcessing(){document.getElementById("fileInput").value=null,updateProgress("Processing G-code:",90),createGridBuffers(),initLayerSliders(),await updateVisiblePoints(!1),updateProgress("Rendering:",100),isFileProcessing=!1,setView("front"),drawScene()}function readNextChunk(){return new Promise(((e,r)=>{if(fileOffset>=file.size)return void e("EOF");let t=file.slice(fileOffset,fileOffset+chunkSize);fileReader.onload=function(t){processChunk(t.target.result).then(e).catch(r)},fileReader.onerror=r,fileReader.readAsText(t)}))}async function processChunk(e){let r=e.split("\n");if(fileOffset>0){let e=gcodePoints[gcodePoints.length-1];r[0]=e.gcode+r[0],gcodePoints.pop()}for(let e=0;e<r.length-1;e++)processGCodeLine(r[e]);fileOffset+chunkSize<file.size?gcodePoints.push({gcode:r[r.length-1]}):processGCodeLine(r[r.length-1]),fileOffset+=chunkSize,updateProgress("Loading file:",fileOffset/file.size*90)}async function processEntireFile(){try{for(;;){if("EOF"===await readNextChunk())break}await finishProcessing()}catch(e){console.error("Error processing file:",e)}}function startProcessing(e){file=e,fileOffset=0,gcodePoints=[],gcodeMinX=gcodeMinY=gcodeMinZ=1/0,gcodeMaxX=gcodeMaxY=gcodeMaxZ=-1/0,lastLayerZ=null,layerHeightSum=0,layerCount=0,printStarted=!1,totalFileSize=e.size,processedSize=0,lastSignificantZ=-1/0,currentLayer=-1,lastPosition={x:0,y:0,z:0,e:0,layer:0}}function processGCodeLine(e){let r="move";if(processedSize+=e.length+1,e.trim().startsWith(";")||""===e.trim())return;if(!e.trim().startsWith("G0")&&!e.trim().startsWith("G1")&&!e.trim().startsWith("G28"))return;let t=null,o=null,a=null,i=null,n=e.split(" "),s=e.trim().startsWith("G0");if(e.trim().startsWith("G28")){r="move";for(let e of n){parseFloat(e.substring(1));switch(e[0]){case"X":t||(t=0);break;case"Y":o||(o=0);break;case"Z":a||(a=0)}}null==t&&null==o&&null==a&&(t=0,o=0,a=0)}else for(let e of n){let r=parseFloat(e.substring(1));if("NaN"!=r)switch(e[0]){case"X":t||(t=r);break;case"Y":o||(o=r);break;case"Z":a||(a=r);break;case"E":i||(i=r)}}null!==i&&(r=i>0?"extrude":"retract");let l={x:null!==t?t:lastPosition.x,y:null!==o?o:lastPosition.y,z:null!==a?a:lastPosition.z,e:null!==i?i:lastPosition.e};"extrude"===r&&(!printStarted&&l.z>0&&l.z<firstLayerMaxHeight?(printStarted=!0,lastLayerZ=l.z):printStarted&&Math.abs(l.z-lastLayerZ)>=minLayerHeight&&(layerHeightSum+=Math.abs(l.z-lastLayerZ),layerCount++,lastLayerZ=l.z)),l.z!==lastPosition.z&&Math.abs(l.z-lastSignificantZ)>.001&&(lastSignificantZ=l.z,currentLayer++,layers.add(currentLayer)),gcodeMinX=Math.min(gcodeMinX,l.x),gcodeMaxX=Math.max(gcodeMaxX,l.x),gcodeMinY=Math.min(gcodeMinY,l.y),gcodeMaxY=Math.max(gcodeMaxY,l.y),gcodeMinZ=Math.min(gcodeMinZ,l.z),gcodeMaxZ=Math.max(gcodeMaxZ,l.z),invertXY||(lastPosition.x==l.x&&(l.x+=1e-5),lastPosition.y==l.y&&(l.y+=1e-5));let c=transformGCodePoint(lastPosition),d=transformGCodePoint(l);if(null!==t||null!==o||null!==a){let e={x:d.x-c.x,y:d.y-c.y,z:d.z-c.z},t=Math.sqrt(e.x*e.x+e.y*e.y+e.z*e.z),o={x:e.x/t,y:e.y/t,z:e.z/t};gcodePoints.push({start:c,end:d,isG0:s,moveType:r,layer:currentLayer,normal:o})}lastPosition=l}function getAverageLayerHeight(){return layerCount>0?layerHeightSum/layerCount:0}function calculateGridSide(){if(0===gcodePoints.length)return 200;const e=gcodeMaxX-gcodeMinX+(gcodeMinX>0?gcodeMinX:0),r=gcodeMaxY-gcodeMinY+(gcodeMinY>0?gcodeMinY:0),t=gcodeMaxZ-gcodeMinZ+(gcodeMinZ>0?gcodeMinZ:0);let o=Math.max(e,r,t);return 10*Math.ceil(o/10)+10}const getSkipFactor=(e,r)=>1;function transformGCodePoint(e){return{x:e.y,y:e.z,z:e.x,e:e.e}}function getTransformedPoint(e){return invertXY?{x:e.z,y:e.y,z:e.x,e:e.e}:e}function roundToInteger(e){return e.map((e=>Math.round(127*e)))}async function updateVisiblePoints(e=!1){isComputing||(isComputing=!0,updateProgress("Processing G-code:",90),e&&programGCodeInfo.buffers&&0!==programGCodeInfo.buffers.length?createVisibleBuffer():await recalculateBuffers(),isComputing=!1,drawScene())}async function recalculateBuffers(){cleanupGCodeBuffers(),gcode_vertices=[],gcode_colors=[],gcode_normals=[],programGCodeInfo.buffers=[],visiblePoints=gcodePoints.filter((e=>(showNonExtrusionMoves||"extrude"===e.moveType)&&e.layer>=startLayer&&e.layer<=endLayer)).map((e=>({...e,start:getTransformedPoint(e.start),end:getTransformedPoint(e.end)})));const e=visiblePoints.length,r=Math.max(1,Math.floor(e/100));if(0===e)return;let t=0,o={vertices:[],colors:[],normals:[],firstLayer:1/0,lastLayer:-1/0};for(let a=0;a<visiblePoints.length;a++){const i=visiblePoints[a],n=lineWidths[i.moveType]||lineWidths.move,s={x:i.end.x-i.start.x,y:i.end.y-i.start.y,z:i.end.z-i.start.z},l=Math.sqrt(s.x**2+s.y**2+s.z**2),c={x:s.x/l,y:s.y/l,z:s.z/l};let d;d=Math.abs(c.y)<.99?vec3_normalize(vec3_cross([c.x,c.y,c.z],[0,1,0])):vec3_normalize(vec3_cross([c.x,c.y,c.z],[1,0,0]));const f=vec3_cross([c.x,c.y,c.z],d),g=8;for(let e=0;e<g;e++){const r=e/g*2*Math.PI,t=(e+1)/g*2*Math.PI,a=Math.cos(r),s=Math.sin(r),l=Math.cos(t),c=Math.sin(t),u={x:i.start.x+(d[0]*a+f[0]*s)*n/2,y:i.start.y+(d[1]*a+f[1]*s)*n/2,z:i.start.z+(d[2]*a+f[2]*s)*n/2},m={x:i.start.x+(d[0]*l+f[0]*c)*n/2,y:i.start.y+(d[1]*l+f[1]*c)*n/2,z:i.start.z+(d[2]*l+f[2]*c)*n/2},p={x:i.end.x+(d[0]*a+f[0]*s)*n/2,y:i.end.y+(d[1]*a+f[1]*s)*n/2,z:i.end.z+(d[2]*a+f[2]*s)*n/2},h={x:i.end.x+(d[0]*l+f[0]*c)*n/2,y:i.end.y+(d[1]*l+f[1]*c)*n/2,z:i.end.z+(d[2]*l+f[2]*c)*n/2};o.vertices.push(u.x,u.y,u.z,m.x,m.y,m.z,p.x,p.y,p.z,m.x,m.y,m.z,p.x,p.y,p.z,h.x,h.y,h.z);const x=roundToInteger(vec3_normalize([d[0]*a+f[0]*s,d[1]*a+f[1]*s,d[2]*a+f[2]*s])),v=roundToInteger(vec3_normalize([d[0]*l+f[0]*c,d[1]*l+f[1]*c,d[2]*l+f[2]*c]));let y;switch(o.normals.push(...x,...v,...x,...v,...x,...v),i.moveType){case"extrude":y=[0,1,1,1];break;case"retract":y=[1,0,0,1];break;default:y=[0,0,1,1]}for(let e=0;e<6;e++)o.colors.push(...y)}o.firstLayer=Math.min(o.firstLayer,i.layer),o.lastLayer=Math.max(o.lastLayer,i.layer),(o.vertices.length>=MAX_VERTICES||a===visiblePoints.length-1)&&(gcode_vertices.push(o.vertices),gcode_colors.push(o.colors),gcode_normals.push(o.normals),programGCodeInfo.buffers.push({firstLayer:o.firstLayer,lastLayer:o.lastLayer}),o={vertices:[],colors:[],normals:[],firstLayer:1/0,lastLayer:-1/0}),t++,t%r==0&&(updateProgress("Processing G-code:",Math.ceil(t/e*100)),await new Promise((e=>setTimeout(e,0))))}verticesPerLayer=Math.ceil(gcode_vertices.reduce(((e,r)=>e+r.length),0)/(endLayer-startLayer+1)),await createGCodeBuffers()}async function createGCodeBuffers(){for(let e=0;e<gcode_vertices.length;e++){const r=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,r),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(gcode_vertices[e]),gl.STATIC_DRAW);const t=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,t),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(gcode_colors[e]),gl.STATIC_DRAW);const o=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,o),gl.bufferData(gl.ARRAY_BUFFER,new Int8Array(gcode_normals[e]),gl.STATIC_DRAW),programGCodeInfo.buffers[e].vertexBuffer=r,programGCodeInfo.buffers[e].colorBuffer=t,programGCodeInfo.buffers[e].normalBuffer=o,programGCodeInfo.buffers[e].vertexCount=gcode_vertices[e].length/3,await new Promise((e=>setTimeout(e,0)))}createVisibleBuffer()}function createVisibleBuffer(){programGCodeInfo.visibleBuffers=[];let e=0;for(let r=0;r<programGCodeInfo.buffers.length;r++){let t=programGCodeInfo.buffers[r];if(t.lastLayer>=startLayer&&t.firstLayer<=endLayer){let r=0,o=t.vertexCount;t.firstLayer<startLayer&&(r=Math.floor((startLayer-t.firstLayer)/(t.lastLayer-t.firstLayer+1)*t.vertexCount)),t.lastLayer>endLayer&&(o=Math.ceil((endLayer-t.firstLayer+1)/(t.lastLayer-t.firstLayer+1)*t.vertexCount));let a=o-r;programGCodeInfo.visibleBuffers.push({vertexBuffer:t.vertexBuffer,colorBuffer:t.colorBuffer,normalBuffer:t.normalBuffer,startVertex:r,vertexCount:a}),e+=a}}programGCodeInfo.totalVisibleVertices=e}function drawGCode(){if(!checkProgramStatus(programGCodeInfo.program,"programGCode"))return!1;if(!programGCodeInfo.buffers||0===programGCodeInfo.buffers.length)return console.warn("No GCode buffers to draw"),!0;if(useProgram(programGCodeInfo,programGridInfo),gl.uniformMatrix4fv(programGCodeInfo.uniformLocations.pMatrix,!1,new Float32Array(pMatrix)),checkGLError("pMatrix"))return!1;if(gl.uniformMatrix4fv(programGCodeInfo.uniformLocations.mvMatrix,!1,new Float32Array(mvMatrix)),checkGLError("mvMatrix"))return!1;if(invertXY?gl.uniform3fv(programGCodeInfo.uniformLocations.lightPosition,[-2*gridSide,-gridSide,gridSide]):gl.uniform3fv(programGCodeInfo.uniformLocations.lightPosition,[2*gridSide,-gridSide,2*gridSide]),gl.uniform3fv(programGCodeInfo.uniformLocations.ambientColor,[.2,.2,.2]),gl.uniform3fv(programGCodeInfo.uniformLocations.diffuseColor,[.8,.8,.8]),checkGLError("GCode uniforms"))return!1;let e=0;return programGCodeInfo.visibleBuffers.forEach(((r,t)=>{gl.bindBuffer(gl.ARRAY_BUFFER,r.vertexBuffer),gl.vertexAttribPointer(programGCodeInfo.attribLocations.vertexPosition,3,gl.FLOAT,!1,0,12*r.startVertex),gl.bindBuffer(gl.ARRAY_BUFFER,r.normalBuffer),gl.vertexAttribPointer(programGCodeInfo.attribLocations.vertexNormal,3,gl.BYTE,!0,0,3*r.startVertex),gl.bindBuffer(gl.ARRAY_BUFFER,r.colorBuffer),gl.vertexAttribPointer(programGCodeInfo.attribLocations.vertexColor,4,gl.FLOAT,!1,0,16*r.startVertex),gl.drawArrays(gl.TRIANGLES,0,r.vertexCount),e+=r.vertexCount})),isComputing=!1,updateProgress("",100),!0}function updateProgress(e,r=null){const t=document.getElementById("progressBar");t.style.display=null===r||r>0&&r<100?"block":"none",r?(t.style.width=r+"%",t.textContent=e+" "+r.toFixed(1)+"%"):(r=0,t.textContent=e)}function initLayerSliders(){const e=layers.size,r=document.getElementById("startLayerSlider"),t=document.getElementById("endLayerSlider");r.max=e-1,t.max=e-1,t.value=e-1,r.value=0,startLayer=0,endLayer=e-1,updateLayerDisplay()}function updateLayerDisplay(){document.getElementById("startLayerDisplay").textContent=startLayer+1,document.getElementById("endLayerDisplay").textContent=endLayer,document.getElementById("startLayerSlider").value=startLayer,document.getElementById("endLayerSlider").value=endLayer}function autoRotate(e){if(!animationFrameId)return;const r=e-lastFrameTime;lastFrameTime=e;const t=createRotationMatrix(autoRotationSpeed*r,vec3_normalize([mvMatrix[1],mvMatrix[5],mvMatrix[9]])),o=gridSide/2,a=gridSide/2,i=gridSide/2;let n=createTranslationMatrix(-o,-a,-i),s=createTranslationMatrix(o,a,i);mvMatrix=multiplyMatrices(s,mvMatrix),mvMatrix=multiplyMatrices(t,mvMatrix),mvMatrix=multiplyMatrices(n,mvMatrix),cameraPosition=[mvMatrix[12],mvMatrix[13],mvMatrix[14]],drawScene(),requestAnimationFrame(autoRotate)}function animate(e){animationFrameId&&(autoRotate(e),drawScene(),animationFrameId=requestAnimationFrame(animate))}function stopAnimation(){animationFrameId&&(cancelAnimationFrame(animationFrameId),animationFrameId=null),document.getElementById("toggleAutoRotation").checked=!1}function toggleAutoRotation(){animationFrameId?(cancelAnimationFrame(animationFrameId),animationFrameId=null,document.getElementById("toggleAutoRotation").checked=!1):(lastFrameTime=performance.now(),animationFrameId=requestAnimationFrame(animate),document.getElementById("toggleAutoRotation").checked=!0),updateAutoRotationButton()}function updateAutoRotationButton(){document.getElementById("toggleAutoRotation").textContent=animationFrameId?"Stop animation":"Start animation"}async function toggleXYInversion(){invertXY=document.getElementById("invertXY").checked,useProgram(programGridInfo,programGridInfo),updateAxisColors(),createAxisLabelsBuffers(),useProgram(programGCodeInfo,programGridInfo);try{await updateVisiblePoints(!1),setView("front"),drawScene()}catch(e){console.error("Error updating visible points:",e)}}async function toggleFrontBackInversion(){invertFrontBack=document.getElementById("invertFrontBack").checked,useProgram(programGridInfo,programGridInfo),createZLabelBuffer();try{setView("front"),drawScene()}catch(e){console.error("Error updating visible points:",e)}}function handleMouseDown(e){stopAnimation(),isComputing||isFileProcessing?console.warn("Computing is already running, ignoring mouse down event"):(mouseDown=!0,lastMouseX=e.clientX,lastMouseY=e.clientY,startPanX=e.clientX,startPanY=e.clientY,isPanning=2===e.button)}function handleMouseMove(e){if(!mouseDown)return;stopAnimation();const r=e.clientX,t=e.clientY,o=r-lastMouseX,a=t-lastMouseY;isPanning?panScene(o,a):rotateScene(o,a),lastMouseX=r,lastMouseY=t,drawScene()}function handleMouseUp(e){mouseDown=!1,isPanning=!1,lastPinchDistance=0}function rotateScene(e,r){const t=[mvMatrix[0],mvMatrix[4],mvMatrix[8]],o=[mvMatrix[1],mvMatrix[5],mvMatrix[9]],a=vec3_normalize(t),i=createRotationMatrix(.005*-e,vec3_normalize(o)),n=createRotationMatrix(.005*-r,a),s=gridSide/2,l=gridSide/2,c=gridSide/2;let d=createTranslationMatrix(-s,-l,-c),f=createTranslationMatrix(s,l,c);mvMatrix=multiplyMatrices(f,mvMatrix),mvMatrix=multiplyMatrices(i,mvMatrix),mvMatrix=multiplyMatrices(n,mvMatrix),mvMatrix=multiplyMatrices(d,mvMatrix),cameraPosition=[mvMatrix[12],mvMatrix[13],mvMatrix[14]]}function panScene(e,r){mvMatrix[12]+=.5*e,mvMatrix[13]-=.5*r,cameraPosition[0]=mvMatrix[12],cameraPosition[1]=mvMatrix[13]}function handleWheel(e){if(stopAnimation(),e.preventDefault(),isComputing||isFileProcessing)return void console.warn("Computing is already running, ignoring wheel event");const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;let a=Math.sign(e.deltaY);isWheelInverted&&(a=-a);const i=scaleFactor;scaleFactor-=.1*a,scaleFactor=Math.max(minZoom,Math.min(scaleFactor,maxZoom));const n=scaleFactor/i,s=-gridSide/2,l=gcodePoints>0?-gcodeMaxZ/2:-gridSide/2,c=-gridSide/2,d=createTranslationMatrix(-s,-l,-c),f=createTranslationMatrix(s,l,c);if(mvMatrix=multiplyMatrices(f,multiplyMatrices([n,0,0,0,0,n,0,0,0,0,n,0,0,0,0,1],multiplyMatrices(d,mvMatrix))),isSmartZoomEnabled){const e=t/gl.canvas.width*2-1,r=1-o/gl.canvas.height*2,a=e*(1-n)*mvMatrix[14],i=r*(1-n)*mvMatrix[14];mvMatrix[12]+=a,mvMatrix[13]+=i}cameraPosition=[mvMatrix[12],mvMatrix[13],mvMatrix[14]],currentCameraDistance=initialCameraDistance*scaleFactor;getSkipFactor(i,layers.size)!==getSkipFactor(scaleFactor,layers.size)?updateVisiblePoints(!1).then((()=>{drawScene()})).catch((e=>{console.error("Error updating visible points:",e)})):drawScene()}function handleTouchStart(e){e.preventDefault(),stopAnimation(),1===e.touches.length?handleMouseDown(e.touches[0]):2===e.touches.length&&(isPanning=!0,handleMouseDown(e.touches[0]))}function handleTouchMove(e){if(e.preventDefault(),stopAnimation(),1===e.touches.length)handleMouseMove(e.touches[0]);else if(2===e.touches.length){const r=e.touches[0],t=e.touches[1];handlePinchZoom(Math.hypot(r.pageX-t.pageX,r.pageY-t.pageY))}}function handleTouchEnd(e){handleMouseUp(e)}function handlePinchZoom(e){if(stopAnimation(),0===lastPinchDistance)return void(lastPinchDistance=e);handleWheel({preventDefault:()=>{},deltaY:lastPinchDistance-e,clientX:0,clientY:0,target:gl.canvas}),lastPinchDistance=e}function resizeCanvas(){stopAnimation();const e=document.getElementById("glCanvas"),r=document.getElementById("controls"),t=document.getElementById("container"),o=window.innerWidth,a=window.innerHeight,i=Math.min(o,a)-20;let n,s,l;o>a?(n=Math.min(i,a-20),l=n,t.style.flexDirection="row"):(n=Math.min(i,o-20),s=n,l=Math.max(200,a-n),t.style.flexDirection="column"),e.width=e.height=n,r.style.width=`${s}px`,r.style.height=`${l}px`,drawScene()}function formatFileSize(e){if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,r)).toFixed(2))+" "+["Bytes","KB","MB","GB"][r]}function init(){const e=document.getElementById("glCanvas");if(initWebGL(e),gl){if(initCamera(),!createShaders())return void console.error("Impossible to initialize the shaders");if(!createGridBuffers())return void console.error("Impossible to initialize the grid buffers");if(["front","back","left","right","top","bottom"].forEach((e=>{document.getElementById(`${e}View`).addEventListener("click",(()=>{setView(e),drawScene()}))})),setView("front"),window.addEventListener("resize",resizeCanvas),resizeCanvas(),!drawScene())return void console.error("Impossible to draw the scene");e.onmousedown=handleMouseDown,document.onmouseup=handleMouseUp,document.onmousemove=handleMouseMove,e.addEventListener("wheel",handleWheel,{passive:!1}),e.oncontextmenu=e=>e.preventDefault(),e.addEventListener("touchstart",handleTouchStart,{passive:!1}),e.addEventListener("touchmove",handleTouchMove,{passive:!1}),e.addEventListener("touchend",handleTouchEnd),document.getElementById("toggleNonExtrusion").addEventListener("change",(async function(){if(isComputing||isFileProcessing)this.checked=!this.checked;else if(stopAnimation(),0!==gcodePoints.length){showNonExtrusionMoves=!this.checked;try{startLayer=0,endLayer=layers.size-1,updateLayerDisplay(),await updateVisiblePoints(!1),drawScene()}catch(e){console.error("Error updating visible points:",e)}}})),document.getElementById("toggleNonExtrusion").checked=!showNonExtrusionMoves;const r=document.getElementById("fileInput"),t=document.getElementById("uploadButton"),o=document.getElementById("fileName"),a=document.getElementById("fileSize");t.addEventListener("click",(function(){r.click()})),r.addEventListener("change",(function(e){if(isComputing||isFileProcessing)return;stopAnimation(),gcodePoints=[],visiblePoints=[],setView("front"),drawScene();let r=e.target.files[0];r&&(o.textContent=r.name,a.textContent=formatFileSize(r.size),loadGCodeFile(r))})),document.getElementById("startLayerSlider").addEventListener("input",(function(){isComputing||isFileProcessing||(stopAnimation(),0!==gcodePoints.length&&(startLayer=parseInt(this.value),startLayer>endLayer&&(endLayer=startLayer,document.getElementById("endLayerSlider").value=endLayer),updateLayerDisplay(),debouncedUpdateAndRedraw()))})),document.getElementById("endLayerSlider").addEventListener("input",(function(){isComputing||isFileProcessing||(stopAnimation(),0!==gcodePoints.length&&(endLayer=parseInt(this.value),endLayer<startLayer&&(startLayer=endLayer,document.getElementById("startLayerSlider").value=startLayer),updateLayerDisplay(),debouncedUpdateAndRedraw()))})),document.getElementById("toggleAutoRotation").addEventListener("change",(function(){isComputing||isFileProcessing?this.checked=!this.checked:toggleAutoRotation()})),document.getElementById("invertXY").addEventListener("change",(async function(){if(isComputing||isFileProcessing)this.checked=!this.checked;else{stopAnimation();try{startLayer=0,endLayer=layers.size-1,updateLayerDisplay(),await toggleXYInversion()}catch(e){console.error("Error toggling XY inversion:",e)}}})),document.getElementById("invertFrontBack").addEventListener("change",(async function(){if(isComputing||isFileProcessing)this.checked=!this.checked;else{stopAnimation();try{await toggleFrontBackInversion()}catch(e){console.error("Error toggling Front/Back inversion:",e)}}})),document.getElementById("smartZoomToggle").addEventListener("change",(function(e){isSmartZoomEnabled=e.target.checked})),isSmartZoomEnabled&&(document.getElementById("smartZoomToggle").checked=!0),document.getElementById("wheelInvertToggle").addEventListener("change",(function(e){isWheelInverted=e.target.checked})),isWheelInverted&&(document.getElementById("wheelInvertToggle").checked=!0)}}window.onload=init</script><script id="grid-vertex-shader" type="x-shader/x-vertex">attribute vec3 grid_aVertexPosition;
-    attribute vec4 grid_aVertexColor;
-    uniform mat4 grid_uMVMatrix;
-    uniform mat4 grid_uPMatrix;
-    varying vec4 grid_vColor;
-    void main(void) {
-        gl_Position = grid_uPMatrix * grid_uMVMatrix * vec4(grid_aVertexPosition, 1.0);
-        grid_vColor = grid_aVertexColor;
-    }</script><script id="fragment-shader-grid" type="x-shader/x-fragment">precision mediump float;
-    varying vec4 grid_vColor;
-    void main(void) {
-        gl_FragColor = grid_vColor;
-    }</script><antartifact identifier="lambert-shaders" type="application/vnd.ant.code" language="html" title="Définitions des shaders Lambert"></antartifact><script id="gcode-vertex-shader" type="x-shader/x-vertex">attribute vec3 gcode_aVertexPosition;
-    attribute vec3 gcode_aVertexNormal;
-    attribute vec4 gcode_aVertexColor;
-
-    uniform mat4 gcode_uMVMatrix;
-    uniform mat4 gcode_uPMatrix;
-    uniform vec3 gcode_uLightPosition;
-
-    varying vec3 vNormal;
-    varying vec3 vLightRay;
-    varying vec4 vColor;
-
-    void main(void) {
-        vec4 vertex = gcode_uMVMatrix * vec4(gcode_aVertexPosition, 1.0);
-        gl_Position = gcode_uPMatrix * vertex;
-
-        vNormal = mat3(gcode_uMVMatrix) * gcode_aVertexNormal;
-        vLightRay = gcode_uLightPosition - vertex.xyz;
-        vColor = gcode_aVertexColor;
-    }</script><script id="fragment-shader-gcode" type="x-shader/x-fragment">precision mediump float;
-
-    varying vec3 vNormal;
-    varying vec3 vLightRay;
-    varying vec4 vColor;
-
-    uniform vec3 gcode_uAmbientColor;
-    uniform vec3 gcode_uDiffuseColor;
-
-    void main(void) {
-        vec3 L = normalize(vLightRay);
-        vec3 N = normalize(vNormal);
-
-        float lambertTerm = max(dot(N, L), 0.0);
-
-        vec3 finalColor = gcode_uAmbientColor + lambertTerm * gcode_uDiffuseColor;
-
-        gl_FragColor = vec4(finalColor * vColor.rgb, vColor.a);
-    }</script><style>body,html{margin:0;padding:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#extensionUI-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;box-sizing:border-box}#glCanvas{margin:10px;padding:0}</style><div id="extensionUI-container"><canvas id="glCanvas" width="4001" height="400"></canvas><div id="controls" style="overflow-y:auto"><div id="progressBar" style="width:0%;height:30px;background-color:#4caf50;text-align:center;line-height:30px;color:#fff">0%</div><div><input type="checkbox" id="toggleNonExtrusion"> <label for="toggleNonExtrusion">Hide travel moves</label></div><div><input type="checkbox" id="toggleAutoRotation"> <label for="toggleAutoRotation">Animate</label></div><div><input type="checkbox" id="invertXY"> <label for="invertXY">Invert X/Y</label></div><div><input type="checkbox" id="invertFrontBack"> <label for="invertFrontBack">Invert Front/Back</label></div><div><input type="checkbox" id="smartZoomToggle"> <label for="smartZoomToggle">Enable Smart Zoom</label></div><div><input type="checkbox" id="wheelInvertToggle"> <label for="wheelInvertToggle">Invert Wheel Direction</label></div><div id="viewControls"><button id="frontView">Front</button> <button id="backView">Back</button> <button id="leftView">Left</button> <button id="rightView">Right</button> <button id="topView">Top</button> <button id="bottomView">Bottom</button></div><div><label for="startLayerSlider">Start layer:</label> <input type="range" id="startLayerSlider" min="0" max="100" value="0"> <span id="startLayerDisplay">0</span></div><div><label for="endLayerSlider">End layer:</label> <input type="range" id="endLayerSlider" min="0" max="100" value="100"> <span id="endLayerDisplay">100</span></div><div id="fileUploadContainer"><input type="file" id="fileInput" accept=".gcode" style="display:none"> <button id="uploadButton">Upload</button> <span id="fileName"></span> <span id="fileSize"></span></div></div></div>
\ No newline at end of file
diff --git a/extensions/gcodeViewer/src/gcodeViewer.html b/extensions/gcodeViewer/src/gcodeViewer.html
index dec69d67..a39ccd2b 100644
--- a/extensions/gcodeViewer/src/gcodeViewer.html
+++ b/extensions/gcodeViewer/src/gcodeViewer.html
@@ -1,5 +1,5 @@
 <script type="text/javascript">
-    const gcodeView_version = "1.0.0"
+    const gcodeViewer_version = "1.0.0"
     // The code use batch processing to avoid memory overflow
     // The code use async/await to avoid blocking the UI due to some long process
     // The code is standalone does not need any external library like Three.js or similar to limit the size of the code
@@ -59,7 +59,7 @@
     let verticesPerLayer
 
     // UI state
-    let showNonExtrusionMoves = false
+    let showTravels = false
     let startLayer = 0
     let endLayer = Infinity
     let invertXY = false
@@ -85,6 +85,7 @@
     let currentCameraDistance = initialCameraDistance
 
     // Mouse
+    let controlRendering = true
     let mouseDown = false
     let lastMouseX = 0
     let lastMouseY = 0
@@ -635,8 +636,8 @@
         upVector = [mvMatrix[1], mvMatrix[5], mvMatrix[9]]
         currentCameraDistance = Math.sqrt(
             cameraPosition[0] * cameraPosition[0] +
-                cameraPosition[1] * cameraPosition[1] +
-                cameraPosition[2] * cameraPosition[2]
+            cameraPosition[1] * cameraPosition[1] +
+            cameraPosition[2] * cameraPosition[2]
         )
     }
 
@@ -676,7 +677,11 @@
         }
         if (gl.isContextLost()) {
             console.error("WebGL context is lost")
-            return false
+            gl = initWebGL(canvas)
+            if (gl.isContextLost()) {
+                return false
+            }
+            console.log("WebGL context is recovered")
         }
         if (checkGLError()) {
             return false
@@ -1356,19 +1361,19 @@
         // Dots for drawing an 'X'
         const originalPoints = invertXY
             ? [
-                  [0, 0, 0],
-                  [labelSize, labelSize, 0], // First diagonal
-                  [0, labelSize, 0],
-                  [labelSize, 0, 0], // Second diagonal
-              ]
+                [0, 0, 0],
+                [labelSize, labelSize, 0], // First diagonal
+                [0, labelSize, 0],
+                [labelSize, 0, 0], // Second diagonal
+            ]
             : [
-                  [0, 0, labelSize / 2],
-                  [labelSize / 2, 0, 0], // Left branch
-                  [labelSize, 0, labelSize / 2],
-                  [labelSize / 2, 0, 0], // Right branch
-                  [labelSize / 2, 0, 0],
-                  [labelSize / 2, 0, -labelSize / 2], // Center branch
-              ]
+                [0, 0, labelSize / 2],
+                [labelSize / 2, 0, 0], // Left branch
+                [labelSize, 0, labelSize / 2],
+                [labelSize / 2, 0, 0], // Right branch
+                [labelSize / 2, 0, 0],
+                [labelSize / 2, 0, -labelSize / 2], // Center branch
+            ]
         const xLabelVertices = originalPoints.flatMap((point) => {
             if (invertXY) {
                 return [
@@ -1421,19 +1426,19 @@
         // Dots for drawing an 'Y'
         const originalPoints = invertXY
             ? [
-                  [0, 0, labelSize / 2],
-                  [labelSize / 2, 0, 0], // Left branch
-                  [labelSize, 0, labelSize / 2],
-                  [labelSize / 2, 0, 0], // Right branch
-                  [labelSize / 2, 0, 0],
-                  [labelSize / 2, 0, -labelSize / 2], // Center branch
-              ]
+                [0, 0, labelSize / 2],
+                [labelSize / 2, 0, 0], // Left branch
+                [labelSize, 0, labelSize / 2],
+                [labelSize / 2, 0, 0], // Right branch
+                [labelSize / 2, 0, 0],
+                [labelSize / 2, 0, -labelSize / 2], // Center branch
+            ]
             : [
-                  [0, 0, 0],
-                  [labelSize, labelSize, 0], // First diagonal
-                  [0, labelSize, 0],
-                  [labelSize, 0, 0], // Second diagonal
-              ]
+                [0, 0, 0],
+                [labelSize, labelSize, 0], // First diagonal
+                [0, labelSize, 0],
+                [labelSize, 0, 0], // Second diagonal
+            ]
 
         const yLabelVertices = originalPoints.flatMap((point) => {
             if (invertXY) {
@@ -1487,21 +1492,21 @@
 
         const originalPoints = invertFrontBack
             ? [
-                  [zLabelSize, 0, 0],
-                  [0, 0, 0],
-                  [0, 0, 0],
-                  [zLabelSize, 0, zLabelSize],
-                  [zLabelSize, 0, zLabelSize],
-                  [0, 0, zLabelSize],
-              ]
+                [zLabelSize, 0, 0],
+                [0, 0, 0],
+                [0, 0, 0],
+                [zLabelSize, 0, zLabelSize],
+                [zLabelSize, 0, zLabelSize],
+                [0, 0, zLabelSize],
+            ]
             : [
-                  [0, 0, 0],
-                  [zLabelSize, 0, 0],
-                  [zLabelSize, 0, 0],
-                  [0, 0, zLabelSize],
-                  [0, 0, zLabelSize],
-                  [zLabelSize, 0, zLabelSize],
-              ]
+                [0, 0, 0],
+                [zLabelSize, 0, 0],
+                [zLabelSize, 0, 0],
+                [0, 0, zLabelSize],
+                [0, 0, zLabelSize],
+                [zLabelSize, 0, zLabelSize],
+            ]
 
         const zLabelVertices = originalPoints.flatMap((point) => {
             if (invertXY) {
@@ -1544,6 +1549,7 @@
 
     // Cleanup the GCode object buffers
     function cleanupGCodeBuffers() {
+        useProgram(programGCodeInfo, programGridInfo)
         if (programGCodeInfo.buffers) {
             programGCodeInfo.buffers.forEach((buffer) => {
                 gl.deleteBuffer(buffer.vertexBuffer)
@@ -1552,6 +1558,19 @@
             })
         }
         programGCodeInfo.buffers = []
+        programGCodeInfo.visibleBuffers = [];
+        programGCodeInfo.totalVisibleVertices = 0;
+        if (window.gc) {
+            window.gc();
+        } else if (window.opera && window.opera.collect) {
+            window.opera.collect();
+        } else {
+            try {
+                window.CollectGarbage();
+            } catch (e) {
+                //no collect garbage
+            }
+        }
     }
 
     //Draw Functions
@@ -2009,8 +2028,8 @@
             }
             let length = Math.sqrt(
                 direction.x * direction.x +
-                    direction.y * direction.y +
-                    direction.z * direction.z
+                direction.y * direction.y +
+                direction.z * direction.z
             )
             let normal = {
                 x: direction.x / length,
@@ -2130,12 +2149,12 @@
         gcode_vertices = []
         gcode_colors = []
         gcode_normals = []
-        programGCodeInfo.buffers = [] 
+        programGCodeInfo.buffers = []
 
         visiblePoints = gcodePoints
             .filter(
                 (point) =>
-                    (showNonExtrusionMoves || point.moveType === "extrude") &&
+                    (showTravels || point.moveType === "extrude") &&
                     point.layer >= startLayer &&
                     point.layer <= endLayer
             )
@@ -2237,68 +2256,68 @@
                         point.start.x +
                         ((bitangent[0] * cos1 + tangent[0] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                     y:
                         point.start.y +
                         ((bitangent[1] * cos1 + tangent[1] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                     z:
                         point.start.z +
                         ((bitangent[2] * cos1 + tangent[2] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                 }
                 const v2 = {
                     x:
                         point.start.x +
                         ((bitangent[0] * cos2 + tangent[0] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                     y:
                         point.start.y +
                         ((bitangent[1] * cos2 + tangent[1] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                     z:
                         point.start.z +
                         ((bitangent[2] * cos2 + tangent[2] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                 }
                 const v3 = {
                     x:
                         point.end.x +
                         ((bitangent[0] * cos1 + tangent[0] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                     y:
                         point.end.y +
                         ((bitangent[1] * cos1 + tangent[1] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                     z:
                         point.end.z +
                         ((bitangent[2] * cos1 + tangent[2] * sin1) *
                             lineWidth) /
-                            2,
+                        2,
                 }
                 const v4 = {
                     x:
                         point.end.x +
                         ((bitangent[0] * cos2 + tangent[0] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                     y:
                         point.end.y +
                         ((bitangent[1] * cos2 + tangent[1] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                     z:
                         point.end.z +
                         ((bitangent[2] * cos2 + tangent[2] * sin2) *
                             lineWidth) /
-                            2,
+                        2,
                 }
 
                 currentBatch.vertices.push(
@@ -2404,7 +2423,7 @@
 
         verticesPerLayer = Math.ceil(
             gcode_vertices.reduce((sum, batch) => sum + batch.length, 0) /
-                (endLayer - startLayer + 1)
+            (endLayer - startLayer + 1)
         )
         //console.log(`Vertices per layer: ${verticesPerLayer}`);
         //console.log(`Total vertices: ${gcode_vertices.reduce((sum, batch) => sum + batch.length, 0)}`);
@@ -2478,14 +2497,14 @@
                     startVertex = Math.floor(
                         ((startLayer - buffer.firstLayer) /
                             (buffer.lastLayer - buffer.firstLayer + 1)) *
-                            buffer.vertexCount
+                        buffer.vertexCount
                     )
                 }
                 if (buffer.lastLayer > endLayer) {
                     endVertex = Math.ceil(
                         ((endLayer - buffer.firstLayer + 1) /
                             (buffer.lastLayer - buffer.firstLayer + 1)) *
-                            buffer.vertexCount
+                        buffer.vertexCount
                     )
                 }
 
@@ -2655,6 +2674,9 @@
         document.getElementById("endLayerDisplay").textContent = endLayer
         document.getElementById("startLayerSlider").value = startLayer
         document.getElementById("endLayerSlider").value = endLayer
+        if (gcodePoints.length > 0) {
+            document.getElementById("layers_control").classList.remove("d-none")
+        }
     }
 
     // Auto rotation function
@@ -2713,7 +2735,7 @@
             cancelAnimationFrame(animationFrameId)
             animationFrameId = null
         }
-        document.getElementById("toggleAutoRotation").checked = false
+        updateAutoRotationButton()
     }
 
     // toggleAutoRotation function
@@ -2722,22 +2744,25 @@
             // Stop animation
             cancelAnimationFrame(animationFrameId)
             animationFrameId = null
-            document.getElementById("toggleAutoRotation").checked = false
         } else {
             // Start animation
             lastFrameTime = performance.now()
             animationFrameId = requestAnimationFrame(animate)
-            document.getElementById("toggleAutoRotation").checked = true
         }
         updateAutoRotationButton()
     }
 
     // Update the auto rotation button text
     function updateAutoRotationButton() {
-        const button = document.getElementById("toggleAutoRotation")
-        button.textContent = animationFrameId
-            ? "Stop animation"
-            : "Start animation"
+        const index = getIndexOfIcon(
+            iconsToLoad,
+            animationFrameId ? "CheckCircle" : "Circle"
+        )
+        const menuItem = document.getElementById("animateIcon")
+        if (index && menuItem) {
+            menuItem.innerHTML =
+                loadedIcons[animationFrameId ? "CheckCircle" : "Circle"]
+        }
     }
 
     //invertXY function
@@ -2760,24 +2785,10 @@
         }
     }
 
-    async function toggleFrontBackInversion() {
-        invertFrontBack = document.getElementById("invertFrontBack").checked
-        //console.log("toggleFrontBackInversion:", invertFrontBack);
-        useProgram(programGridInfo, programGridInfo)
-        createZLabelBuffer()
-        // Update the visible points
-        try {
-            setView("front")
-            drawScene()
-        } catch (error) {
-            console.error("Error updating visible points:", error)
-        }
-    }
-
     // Mouse functions
-
     //Mouse down event
     function handleMouseDown(event) {
+        if (!controlRendering) return;
         stopAnimation()
         if (isComputing || isFileProcessing) {
             console.warn(
@@ -2795,6 +2806,7 @@
 
     //Mouse move event
     function handleMouseMove(event) {
+        if (!controlRendering) return;
         if (!mouseDown) {
             return
         }
@@ -2819,6 +2831,7 @@
 
     //Mouse up event
     function handleMouseUp(event) {
+        if (!controlRendering) return;
         mouseDown = false
         isPanning = false
         lastPinchDistance = 0
@@ -2880,6 +2893,7 @@
 
     // handleWheel function
     function handleWheel(event) {
+        if (!controlRendering) return;
         stopAnimation()
         event.preventDefault()
         if (isComputing || isFileProcessing) {
@@ -2988,6 +3002,7 @@
 
     // Handle touch start event
     function handleTouchStart(event) {
+        if (!controlRendering) return;
         event.preventDefault()
         stopAnimation()
         if (event.touches.length === 1) {
@@ -3000,6 +3015,7 @@
 
     // Handle touch move event
     function handleTouchMove(event) {
+        if (!controlRendering) return;
         event.preventDefault()
         stopAnimation()
         if (event.touches.length === 1) {
@@ -3017,11 +3033,13 @@
 
     // Handle touch end event
     function handleTouchEnd(event) {
+        if (!controlRendering) return;
         handleMouseUp(event)
     }
 
     // Handle pinch zoom event
     function handlePinchZoom(newDistance) {
+        if (!controlRendering) return;
         stopAnimation()
         if (lastPinchDistance === 0) {
             lastPinchDistance = newDistance
@@ -3030,7 +3048,7 @@
 
         const delta = lastPinchDistance - newDistance
         handleWheel({
-            preventDefault: () => {},
+            preventDefault: () => { },
             deltaY: delta,
             clientX: 0,
             clientY: 0,
@@ -3045,14 +3063,14 @@
         stopAnimation()
         const canvas = document.getElementById("glCanvas")
         const controls = document.getElementById("controls")
-        const container = document.getElementById("container")
+        const container = document.getElementById("extensionUI-container")
 
         // Get the window dimensions
         const windowWidth = window.innerWidth
         const windowHeight = window.innerHeight
 
         // Define the maximum canvas size (90% of the smallest window dimension)
-        const maxCanvasSize = Math.min(windowWidth, windowHeight) - 20 // 5px for left/right margins
+        const maxCanvasSize = Math.min(windowWidth, windowHeight) - 40 // 5px for left/right margins
 
         // Define the minimum size for the controls (adjust as needed)
         const minControlsSize = 200
@@ -3061,12 +3079,12 @@
 
         if (windowWidth > windowHeight) {
             // Mode landscape
-            canvasSize = Math.min(maxCanvasSize, windowHeight - 20)
+            canvasSize = Math.min(maxCanvasSize, windowHeight - 40)
             controlsHeight = canvasSize
             container.style.flexDirection = "row"
         } else {
             // Mode portrait
-            canvasSize = Math.min(maxCanvasSize, windowWidth - 20)
+            canvasSize = Math.min(maxCanvasSize, windowWidth - 40)
             controlsWidth = canvasSize
             controlsHeight = Math.max(
                 minControlsSize,
@@ -3077,6 +3095,7 @@
 
         // Apply the new dimensions
         canvas.width = canvas.height = canvasSize
+        console.log("Canvas w x h", canvas.width, canvas.height)
         controls.style.width = `${controlsWidth}px`
         controls.style.height = `${controlsHeight}px`
         //draw the scene
@@ -3157,38 +3176,8 @@
             canvas.addEventListener("touchend", handleTouchEnd)
 
             //Button events
-            // Toggle travel moves
-            document
-                .getElementById("toggleNonExtrusion")
-                .addEventListener("change", async function () {
-                    if (isComputing || isFileProcessing) {
-                        //console.log("Computing is already running");
-                        this.checked = !this.checked
-                        return
-                    }
-                    stopAnimation()
-                    if (gcodePoints.length === 0) return
-                    showNonExtrusionMoves = !this.checked
-                    try {
-                        startLayer = 0
-                        endLayer = layers.size - 1
-                        updateLayerDisplay()
-                        await updateVisiblePoints(false)
-                        drawScene()
-                    } catch (error) {
-                        console.error("Error updating visible points:", error)
-                    }
-                })
-            document.getElementById("toggleNonExtrusion").checked =
-                !showNonExtrusionMoves
             const fileInput = document.getElementById("fileInput")
-            const uploadButton = document.getElementById("uploadButton")
             const fileNameSpan = document.getElementById("fileName")
-            const fileSizeSpan = document.getElementById("fileSize")
-
-            uploadButton.addEventListener("click", function () {
-                fileInput.click()
-            })
 
             // Load GCode file
             fileInput.addEventListener("change", function (event) {
@@ -3203,9 +3192,9 @@
                 drawScene()
                 let file = event.target.files[0]
                 if (file) {
-                    fileNameSpan.textContent = file.name
-                    fileSizeSpan.textContent = formatFileSize(file.size)
-
+                    if (fileNameSpan) {
+                        fileNameSpan.textContent = `${file.name} (${formatFileSize(file.size)})`
+                    }
                     loadGCodeFile(file)
                 }
             })
@@ -3249,74 +3238,276 @@
                     updateLayerDisplay()
                     debouncedUpdateAndRedraw()
                 })
-            // Toggle auto rotation
-            document
-                .getElementById("toggleAutoRotation")
-                .addEventListener("change", function () {
-                    if (isComputing || isFileProcessing) {
-                        //console.log("Computing is already running");
-                        this.checked = !this.checked
-                        return
-                    }
-                    toggleAutoRotation()
-                })
+            updateAutoRotationButton()
+        }
+    }
 
-            // Toggle invert XY
-            document
-                .getElementById("invertXY")
-                .addEventListener("change", async function () {
-                    if (isComputing || isFileProcessing) {
-                        //console.log("Computing is already running");
-                        this.checked = !this.checked
-                        return
-                    }
-                    stopAnimation()
-                    try {
-                        startLayer = 0
-                        endLayer = layers.size - 1
-                        updateLayerDisplay()
-                        await toggleXYInversion()
-                    } catch (error) {
-                        console.error("Error toggling XY inversion:", error)
-                    }
-                })
+    const iconsToLoad = [
+        {
+            icon: "Settings",
+            id: "settingsIcon",
+        },
+        {
+            icon: "Info",
+            id: "aboutIcon",
+        },
+        {
+            icon: "Upload",
+            id: "uploadButtonIcon",
+        },
+        {
+            icon: "List",
+            id: "drop-btn",
+        },
+        {
+            icon: "CheckCircle",
+            id: "CheckCircleIcon",
+        },
+        {
+            icon: "Circle",
+            id: "CircleIcon",
+        },
+    ]
+    const loadedIcons = {}
+    let iconsLoaded = false
+    let settingsLoaded = false
+    const about_text = `<div class='modal-content'>
+<h2>GCode Viewer Extension v${gcodeViewer_version}</h2>
+<p>This ESP3D-WebUI extension  is a WebGL-based G-code viewer designed to provide an interactive and high-performance visualization of G-code files directly in the web browser.</p>
+<p>It offers the following features:</p>
+<ul>
+<li>Real-time 3D rendering of 3D printing toolpaths.</li>
+<li>Efficient loading and processing of large G-code files.</li>
+<li>Intuitive user interface with visualization controls.</li>
+<li>Dynamic filtering of print layers.</li>
+<li>Customizable viewing options (auto-rotation, axis inversion, etc.).</li>
+<li>Performance optimizations for smooth experience even with complex models.</li> 
+</ul>
+<p>
+  Developed by <a href='https://github.com/luc-github/esp3d-webui' target='_blank'>Luc Lebosse</a>. 
+  Licensed under <a href='https://www.gnu.org/licenses/lgpl-3.0.en.html' target='_blank'>LGPL</a>. 
+  Copyright © 2024.
+</p>
+</div>`
+    //About modal msg
+    const about_modal = {
+        type: "modal",
+        target: "webui",
+        id: "gcodeViewer_about",
+        content: {
+            title: "About gcodeViewer",
+            id: "simple_modal",
+            icon: "Info",
+            style: "default",
+            bt1Txt: "S24",
+            response1: "ok",
+            text: about_text,
+            overlay: true,
+        },
+    }
 
-            // Toggle invert Front/Back
-            document
-                .getElementById("invertFrontBack")
-                .addEventListener("change", async function () {
-                    if (isComputing || isFileProcessing) {
-                        //console.log("Computing is already running");
-                        this.checked = !this.checked
-                        return
-                    }
-                    stopAnimation()
-                    try {
-                        await toggleFrontBackInversion()
-                    } catch (error) {
-                        console.error(
-                            "Error toggling Front/Back inversion:",
-                            error
-                        )
-                    }
-                })
+    //Command message format
+    const command_msg = {
+        type: "query",
+        target: "webui",
+        id: "gcodeViewer_command",
+        url: "command",
+        args: { cmd: "" },
+    }
+
+    //Settings storage
+    const currentSettings = {
+        showTravels: false,
+        invertXY: false,
+        invertFrontBack: false,
+        enableSmartZoom: false,
+        invertWheelDirection: false,
+        controlRendering: true,
+    }
+
+    //Settings format
+    const settingsFormat = [
+        {
+            id: "showTravels",
+            type: "boolean",
+            label: "Show Travels",
+            help: "Show/Hide travels without extrusion",
+            value: false,
+        },
+        {
+            id: "invertXY",
+            type: "boolean",
+            label: "Invert X/Y",
+            help: "Invert X/Y axes",
+            value: false,
+        },
+        {
+            id: "invertFrontBack",
+            type: "boolean",
+            label: "Invert Front/Back",
+            help: "Invert Front/Back views",
+            value: false,
+        },
+        {
+            id: "controlRendering",
+            type: "boolean",
+            label: "Enable View Control",
+            help: "Enable View Control",
+            value: true,
+        },
+        {
+            id: "enableSmartZoom",
+            type: "boolean",
+            label: "Enable Smart Zoom",
+            help: "Enable Smart Zoom",
+            value: false,
+        },
+        {
+            id: "invertWheelDirection",
+            type: "boolean",
+            label: "Invert Wheel Direction",
+            help: "Invert Wheel Direction for the Zoom",
+            value: false,
+        },
+    ]
+    //Settings modal msg
+    const settings_modal = {
+        type: "modal",
+        target: "webui",
+        id: "gcodeViewer_settings",
+        content: {
+            title: "GCode Viewer Settings",
+            id: "fields_modal",
+            icon: "Settings",
+            style: "fields",
+            validation: "bt1",
+            bt1Txt: "S61",
+            response1: "update",
+            bt2Txt: "S28",
+            response2: "cancel",
+            fields: settingsFormat,
+            values: currentSettings,
+            hideclose: true,
+        },
+    }
 
-            document
-                .getElementById("smartZoomToggle")
-                .addEventListener("change", function (event) {
-                    isSmartZoomEnabled = event.target.checked
-                })
-            if (isSmartZoomEnabled)
-                document.getElementById("smartZoomToggle").checked = true
+    //Settings modal msg
+    const please_wait_modal = {
+        type: "modal",
+        target: "webui",
+        id: "gcodeViewer_please_wait",
+        content: {
+            title: "GCode Viewer Settings",
+            id: "simple_modal",
+            style: "default",
+            bt1Txt: "S126",
+            response1: "ok",
+            text: "Please wait end of processing. ",
+            overlay: true,
+        },
+    }
 
-            document
-                .getElementById("wheelInvertToggle")
-                .addEventListener("change", function (event) {
-                    isWheelInverted = event.target.checked
-                })
-            if (isWheelInverted)
-                document.getElementById("wheelInvertToggle").checked = true
+    //Request settings
+    const settings_request_msg = {
+        type: "capabilities",
+        target: "webui",
+        id: "extensions",
+        name: "gcodeViewer",
+    }
+
+    //Save data to settings message
+    const save_settings_msg = {
+        type: "extensionsData",
+        target: "webui",
+        id: "gcodeViewer",
+        content: "",
+    }
+
+    //Toast message
+    const toast_msg = {
+        type: "toast",
+        target: "webui",
+        content: { text: "", type: "default" },
+    }
+
+    //Save settings
+    function onSave(settings) {
+        currentSettings.showTravels = settings.showTravels
+        currentSettings.invertXY = settings.invertXY
+        currentSettings.invertFrontBack = settings.invertFrontBack
+        currentSettings.controlRendering = settings.controlRendering
+        currentSettings.enableSmartZoom = settings.enableSmartZoom
+        currentSettings.invertWheelDirection = settings.invertWheelDirection
+        updateSettings()
+        //Todo: Save settings to preferences.json
+        save_settings_msg.content = currentSettings
+        sendMessage(save_settings_msg)
+    }
+
+    function updateSettings() {
+        showLoader()
+        let redraw = false
+        let computeObject = false
+        let computeGrid = false
+        if (invertXY != currentSettings.invertXY) {
+            invertXY = currentSettings.invertXY
+            computeGrid=true;
+            redraw = true;
+            if (gcodePoints.length > 0) {
+                computeObject = true;
+            }
+        }
+        if (showTravels != currentSettings.showTravels) {
+            showTravels = currentSettings.showTravels
+            redraw = true;
+            if (gcodePoints.length > 0) {
+                computeObject = true;
+            }
+        }
+        if (invertFrontBack != currentSettings.invertFrontBack) {
+            invertFrontBack = currentSettings.invertFrontBack
+            computeGrid = true
+            redraw = true
+        }
+        if (currentSettings.controlRendering != controlRendering) {
+            controlRendering = currentSettings.controlRendering ;
+            redraw = true
+        }
+        isSmartZoomEnabled = currentSettings.enableSmartZoom
+        isWheelInverted = currentSettings.invertWheelDirection
+        if (gl && checkglStatus()) {
+            stopAnimation();
+            if (computeGrid) {
+                useProgram(programGridInfo, programGridInfo)
+                updateAxisColors()
+                createAxisLabelsBuffers()
+            }
+            if (computeObject) {
+                useProgram(programGCodeInfo, programGridInfo)
+                // Update the visible points
+                updateVisiblePoints(false)
+            }
+            if (redraw) {
+                setView("front")
+                drawScene();
+            }
         }
+        hideLoader()
+
+    }
+
+    //Settings modal
+    function settingsFn() {
+        if (isComputing || isFileProcessing) {
+            sendMessage(please_wait_modal)
+        } else {
+            sendMessage(settings_modal)
+        }
+    }
+
+    //About modal
+    function aboutFn() {
+        sendMessage(about_modal)
     }
 
     //Send message to WebUI
@@ -3324,21 +3515,84 @@
         window.parent.postMessage(msg, "*")
     }
 
-     //Load icons from WebUI
-     function loadIcons() {
-        iconsToLoad.forEach(iconName => {
-            sendMessage({ type: 'icon', target: 'webui', id: iconName });
-        });
+    function applySettings(settings) {
+        settingsLoaded = true
+        if (settings != null && Object.keys(settings).length > 2) {
+            currentSettings.showTravels = settings.showTravels
+            currentSettings.invertXY = settings.invertXY
+            currentSettings.invertFrontBack = settings.invertFrontBack
+            currentSettings.controlRendering = settings.controlRendering
+            currentSettings.enableSmartZoom = settings.enableSmartZoom
+            currentSettings.invertWheelDirection = settings.invertWheelDirection
+            updateSettings()
+        } else {
+            console.log("No Settings")
+        }
+        initExtension()
+    }
+
+    //Initialize the extension and add event listeners
+    //Should be called on load and only once
+    function initExtension() {
+        init()
+        hideLoader()
+        console.log("Init extension")
+    }
+
+    //Use loaded icons
+    function useLoadedIcons() {
+        const buttonContainer = document.getElementById("controls")
+        // Create a button for each button definition
+        iconsToLoad.forEach((item) => {
+            const element = document.getElementById(item.id)
+            if (element) {
+                element.innerHTML = loadedIcons[item.icon]
+            }
+        })
+    }
+
+    function containsIcon(icons, iconName) {
+        return icons.some((iconObj) => iconObj.icon === iconName)
+    }
+
+    function getIndexOfIcon(icons, iconName) {
+        return icons.findIndex((iconObj) => iconObj.icon === iconName)
+    }
+
+
+    function processSavingSettings(response) {
+        //Displaying result
+        if (response.status == "success") {
+            toast_msg.content.text = "Settings saved successfully"
+            toast_msg.content.type = "success"
+            sendMessage(toast_msg)
+        } else if (response.status == "error") {
+            toast_msg.content.text = "Error saving settings"
+            toast_msg.content.type = "error"
+            sendMessage(toast_msg)
+        }
+    }
+
+    //Load icons from WebUI
+    function loadIcons() {
+        iconsToLoad.forEach((element) => {
+            sendMessage({ type: "icon", target: "webui", id: element.icon })
+        })
+    }
+
+    function loadSettings() {
+        sendMessage(settings_request_msg)
     }
 
     //Process message from WebUI
     function processMessage(eventMsg) {
         //Check if icons are loaded
+        console.log(eventMsg.data)
         if (!iconsLoaded) {
             if (
                 eventMsg.data.type &&
                 eventMsg.data.id &&
-                iconsToLoad.includes(eventMsg.data.id)
+                containsIcon(iconsToLoad, eventMsg.data.id)
             ) {
                 if (eventMsg.data.type === "icon") {
                     const iconName = eventMsg.data.id
@@ -3359,16 +3613,17 @@
                 eventMsg.data.type === "capabilities" &&
                 eventMsg.data.id === "extensions"
             ) {
-                if (eventMsg.data.content.initiator.name === "click2go") {
+                if (eventMsg.data.content.initiator.name === "gcodeViewer") {
                     applySettings(eventMsg.data.content.response)
                 }
             } else if (
                 eventMsg.data.type &&
-                (!eventMsg.data.id || eventMsg.data.id.startsWith("click2go"))
+                (!eventMsg.data.id ||
+                    eventMsg.data.id.startsWith("gcodeViewer"))
             ) {
                 if (
                     eventMsg.data.type === "modal" &&
-                    eventMsg.data.id === "click2go_settings"
+                    eventMsg.data.id === "gcodeViewer_settings"
                 ) {
                     if (eventMsg.data.content.response === "update") {
                         onSave(eventMsg.data.content.inputData)
@@ -3376,19 +3631,31 @@
                 } // Check if message is a response to a extensionsData for saving settings
                 else if (
                     eventMsg.data.type === "extensionsData" &&
-                    eventMsg.data.id === "click2go"
+                    eventMsg.data.id === "gcodeViewer"
                 ) {
                     processSavingSettings(eventMsg.data.content.response)
                 }
             }
         }
     }
+    function showLoader() {
+        const loader = document.getElementById("loaderContainer")
+        if (loader) {
+            loader.classList.remove("d-none");
+        }
+    }
+
+    function hideLoader() {
+        const loader = document.getElementById("loaderContainer")
+        if (loader) {
+            loader.classList.add("d-none");
+        }
+    }
 
     window.onload = (event) => {
         window.addEventListener("message", processMessage, false)
-        //loadIcons()
-        //loadSettings()
-        init()
+        loadIcons()
+        loadSettings()
     }
 </script>
 <script id="grid-vertex-shader" type="x-shader/x-vertex">
@@ -3464,6 +3731,7 @@
         justify-content: center;
         align-items: center;
     }
+
     #extensionUI-container {
         display: flex;
         flex-direction: column;
@@ -3471,102 +3739,120 @@
         align-items: center;
         width: 100%;
         height: 100%;
-        padding: 20px;
+
         box-sizing: border-box;
     }
+
     #glCanvas {
-        margin: 10px;
+        margin: 0px;
         padding: 0;
+        border: 1px solid rgb(215, 215, 215);
+        max-width: 100%;
+        max-height: calc(100% - 50px);
     }
-</style>
-<div id="extensionUI-container">
-    <canvas id="glCanvas" width="4001" height="400"></canvas>
-    <div id="controls" style="overflow-y: auto">
-        <div
-            id="progressBar"
-            style="
-                width: 0%;
-                height: 30px;
-                background-color: #4caf50;
-                text-align: center;
-                line-height: 30px;
-                color: white;
-            "
-        >
-            0%
-        </div>
-        <div>
-            <input type="checkbox" id="toggleNonExtrusion" />
-            <label for="toggleNonExtrusion">Hide travel moves</label>
-        </div>
 
-        <div>
-            <input type="checkbox" id="toggleAutoRotation" />
-            <label for="toggleAutoRotation">Animate</label>
-        </div>
-        <div>
-            <input type="checkbox" id="invertXY" />
-            <label for="invertXY">Invert X/Y</label>
-        </div>
-
-        <div>
-            <input type="checkbox" id="invertFrontBack" />
-            <label for="invertFrontBack">Invert Front/Back</label>
-        </div>
+    #progressBar {
+        width: 0%;
+        height: 30px;
+        background-color: #4c53af;
+        text-align: center;
+        line-height: 30px;
+        color: white;
+        margin: 5px;
+    }
 
-        <div>
-            <input type="checkbox" id="smartZoomToggle" />
-            <label for="smartZoomToggle">Enable Smart Zoom</label>
-        </div>
+    #controls {
+        min-height: 2rem;
+    }
 
-        <div>
-            <input type="checkbox" id="wheelInvertToggle" />
-            <label for="wheelInvertToggle">Invert Wheel Direction</label>
+    .loader-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 0.8);
+        z-index: 1000;
+    }
+</style>
+<div id="extensionUI-container" lass="flex-row-between">
+    <div id="loaderContainer" class="loader-container">
+        <div class="loading loading-lg"></div>
+    </div>
+    <div class="flex-cols">
+        <div class="flex-row-between" style="width: 100%; padding-right: 10px">
+            <div class="dropdown">
+                <span class="dropdown-toggle btn m-1" tabindex="0" id="drop-btn" style="z-index: 10000"></span>
+                <ul class="menu">
+                    <li class="menu-item">
+                        <div class="menu-entry" onclick="document.getElementById('fileInput').click()">
+                            <div class="menu-panel-item">
+                                <span class="text-menu-item"> Upload </span>
+                                <span id="uploadButtonIcon"></span>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="menu-item">
+                        <div class="menu-entry" onclick="toggleAutoRotation()">
+                            <div class="menu-panel-item">
+                                <span class="text-menu-item"> Animate </span>
+                                <span id="animateIcon"></span>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="divider"></li>
+                    <li class="menu-item">
+                        <div class="menu-entry" onclick="settingsFn()">
+                            <div class="menu-panel-item">
+                                <span class="text-menu-item"> Settings </span>
+                                <span id="settingsIcon"></span>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="divider"></li>
+                    <li class="menu-item">
+                        <div class="menu-entry" onclick="aboutFn()">
+                            <div class="menu-panel-item">
+                                <span class="text-menu-item"> About </span>
+                                <span id="aboutIcon"></span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="text-primary mt-2" id="fileName"></div>
         </div>
-
-        <div id="viewControls">
-            <button id="frontView">Front</button>
-            <button id="backView">Back</button>
-            <button id="leftView">Left</button>
-            <button id="rightView">Right</button>
-            <button id="topView">Top</button>
-            <button id="bottomView">Bottom</button>
+    <canvas id="glCanvas" width="400" height="400"></canvas>
+    </div>
+    <div id="controls" class="flex-cols" style="overflow-y: auto">
+        <div style="align-self: stretch">
+            <div id="progressBar">0%</div>
         </div>
-
-        <div>
-            <label for="startLayerSlider">Start layer: </label>
-            <input
-                type="range"
-                id="startLayerSlider"
-                min="0"
-                max="100"
-                value="0"
-            />
-            <span id="startLayerDisplay">0</span>
+        <div class="btn-group btn-group-block m-1" width="100%">
+            <button class="btn btn-sm" id="frontView">Front</button>
+            <button class="btn btn-sm" id="backView">Back</button>
+            <button class="btn btn-sm" id="leftView">Left</button>
+            <button class="btn btn-sm" id="rightView">Right</button>
+            <button class="btn btn-sm" id="topView">Top</button>
+            <button class="btn btn-sm" id="bottomView">Bottom</button>
         </div>
-
-        <div>
-            <label for="endLayerSlider">End layer: </label>
-            <input
-                type="range"
-                id="endLayerSlider"
-                min="0"
-                max="100"
-                value="100"
-            />
-            <span id="endLayerDisplay">100</span>
+        <div id="layers_control" class="d-none">
+            <div>
+                <label for="startLayerSlider">Start layer: </label>
+                <input type="range" id="startLayerSlider" min="0" max="100" value="0" />
+                <span id="startLayerDisplay">0</span>
+            </div>
+
+            <div>
+                <label for="endLayerSlider">End layer: </label>
+                <input type="range" id="endLayerSlider" min="0" max="100" value="100" />
+                <span id="endLayerDisplay">100</span>
+            </div>
         </div>
 
-        <div id="fileUploadContainer">
-            <input
-                type="file"
-                id="fileInput"
-                accept=".gcode"
-                style="display: none"
-            />
-            <button id="uploadButton">Upload</button>
-            <span id="fileName"></span>
-            <span id="fileSize"></span>
-        </div>
+        <input type="file" id="fileInput" accept=".gcode" style="display: none" />
     </div>
 </div>
diff --git a/src/areas/elementsCache.js b/src/areas/elementsCache.js
new file mode 100644
index 00000000..44bb1a03
--- /dev/null
+++ b/src/areas/elementsCache.js
@@ -0,0 +1,102 @@
+/*
+ elementsCache.js - ESP3D WebUI MainPage file
+
+ Copyright (c) 2020 Luc Lebosse. All rights reserved.
+  Original code inspiration : 2021 Alexandre Aussourd
+
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+import { h, render } from "preact"
+import { useState, useEffect, useMemo } from "preact/hooks"
+import { ExtraContentItem } from "../components/ExtraContent"
+import { useUiContext,useUiContextFn, useSettingsContext } from "../contexts"
+import {  eventBus } from "../hooks/eventBus"
+
+const ElementsCache = () => {
+    const { ui } = useUiContext()
+    const { interfaceSettings } = useSettingsContext()
+    const [content, setContent] = useState([])
+
+    const extractValues = (entry) => {
+        const result = { id: "extra_content_" + entry.id };
+        entry.value.forEach(param => {
+            result[param.name] = param.value;
+        });
+        return result;
+    };
+    console.log("ElementsCache is rendering")
+    useEffect(() => {
+        if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
+            //console.log("ElementsCache can now be created")
+            const isEnabled  = useUiContextFn.getValue("showextracontents")
+            if (!isEnabled) {
+                console.log("ExtraContent are disabled")
+                return
+            }
+            const isVisibleOnStart = useUiContextFn.getValue("openextrapanelsonstart")
+            const extraContentSettings = interfaceSettings.current.settings.extracontents;
+            const extraContentsEntry = extraContentSettings.find(entry => entry.id === 'extracontents');
+           
+            if (extraContentsEntry?.value?.length > 0) {
+                const newContent = extraContentsEntry.value.map(entry => {
+                    const item = extractValues(entry)
+                   // console.log(item)
+                    return <ExtraContentItem key={item.id} {...item} isVisibleOnStart={isVisibleOnStart} />
+                });
+                setContent(newContent);
+            }
+        }
+    }, [ui.ready, interfaceSettings]);
+
+    const memoizedContent = useMemo(() => content, [content]);
+
+    return (
+        <div style="position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible;" id="elementsCache">
+            {memoizedContent}
+        </div>
+    )
+}
+
+export default ElementsCache;
+
+const elementsCache = {
+
+    isExtraContent: (id) => {
+    const itemid = "extra_content_" + id
+    return elementsCache.has(itemid)
+    },
+
+    getRootfromId: (id) => {
+        return id.replace("extra_content_", "")
+    },
+
+    getIdFromRoot: (id) => {
+        return "extra_content_" + id
+    },
+
+    has: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return false
+        return cacheHost.querySelector('#' + id) !== null
+    },
+
+    get: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return null
+        return cacheHost.querySelector('#' + id)
+    }
+}
+
+export { ElementsCache, elementsCache }
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 7f92d3c1..bc80d97e 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -28,13 +28,14 @@ import {
     WsContextProvider,
 } from "../../contexts"
 import { TargetContextProvider } from "../../targets"
-import { ToastsContainer } from "../Toast"
-import { ModalContainer } from "../Modal"
+import { ContainerHelper } from "../Controls"
 import { ContentContainer } from "../../areas"
+import { ElementsCache } from "../../areas/elementsCache"
 
 const App = () => {
     return (
         <div id="app">
+            
             <DatasContextProvider>
                 <TargetContextProvider>
                     <RouterContextProvider>
@@ -42,8 +43,8 @@ const App = () => {
                             <HttpQueueContextProvider>
                                 <SettingsContextProvider>
                                     <WsContextProvider>
-                                        <ToastsContainer id="top_toasts_container"/>
-                                        <ModalContainer id="top_modals_container"/>
+                                        <ContainerHelper id="top_container" active={true}/>
+                                        <ElementsCache />
                                         <ContentContainer />
                                     </WsContextProvider>
                                 </SettingsContextProvider>
diff --git a/src/components/Controls/CloseButton.js b/src/components/Controls/CloseButton.js
index 29fd6480..f1931416 100644
--- a/src/components/Controls/CloseButton.js
+++ b/src/components/Controls/CloseButton.js
@@ -17,45 +17,57 @@
 */
 import { h } from "preact"
 import { useState, useEffect } from "preact/hooks"
-
 import { useUiContext, useUiContextFn } from "../../contexts"
+import { eventBus } from "../../hooks/eventBus"
+import { elementsCache } from "../../areas/elementsCache"
 
-const isFullScreen = (element) => {
-    return document.fullscreenElement === element
-}
 
-const CloseButton = ({ panelRef, panelId, hideOnFullScreen, callbackfn }) => {
+const CloseButton = ({elementId, hideOnFullScreen, onclick }) => {
     const { panels } = useUiContext()
     const [isFullScreenMode, setIsFullScreenMode] = useState(false)
-
+    //at each render, check if the element is fullscreen
     useEffect(() => {
-        const handleFullscreenChange = () => {
-            setIsFullScreenMode(isFullScreen(panelRef.current))
+        //Handle fullscreen change event
+        const handleFullScreenChange = () => {
+            const element =document.getElementById(elementId)
+            if ( document.getElementById(elementId)) {
+            //console.log("Button close Fullscreen state changed for " + elementId)
+            setIsFullScreenMode(document.fullscreenElement==element)
+            }
         }
-
-        document.addEventListener("fullscreenchange", handleFullscreenChange)
-
+         //Add event listener to handle fullscreen change
+        document.addEventListener("fullscreenchange", handleFullScreenChange)
+        //Remove event listener on unmount
         return () => {
             document.removeEventListener(
                 "fullscreenchange",
-                handleFullscreenChange
+                handleFullScreenChange
             )
         }
-    }, [panelRef])
-
+    })
+    //Hide the button if fullscreen mode is active and hideOnFullScreen is true
     if (hideOnFullScreen && isFullScreenMode) {
         return null
     }
-
+    //display the button according to the props
     return (
         <span
             class="btn btn-clear btn-close m-1"
             aria-label="Close"
             onclick={(e) => {
                 useUiContextFn.haptic()
-                panels.hide(panelId)
-                if (callbackfn) {
-                    callbackfn()
+                panels.hide(elementId)
+                console.log("Close button clicked for element " + elementId)
+                if (elementsCache.isExtraContent(elementId)) { 
+                    console.log("emit for root element " + elementsCache.getIdFromRoot(elementId), " isVisible: false")
+                    eventBus.emit('updateState', {id: elementsCache.getIdFromRoot(elementId), isVisible: false, from: "closeButton"})
+                } else {
+                    console.log("emit for element " + elementId, " isVisible: false")
+                    eventBus.emit('updateState', {id: elementId, isVisible: false, from: "closeButton"})
+                    
+                }
+                if (onclick) {
+                    onclick()
                 }
             }}
         />
diff --git a/src/components/Controls/ContainerHelper.js b/src/components/Controls/ContainerHelper.js
index 88a02d78..480d29dd 100644
--- a/src/components/Controls/ContainerHelper.js
+++ b/src/components/Controls/ContainerHelper.js
@@ -18,29 +18,46 @@ ContainerHelper.js - ESP3D WebUI component file
 */
 
 import { Fragment, h } from "preact"
-import { getFullscreenElement } from "../Helpers"
 import { ModalContainer } from "../Modal"
 import { ToastsContainer } from "../Toast"
+import { useState, useEffect,  } from "preact/hooks"
+import { eventBus } from "../../hooks/eventBus"
 
-const ContainerHelper = (props) => {
-    const { id } = props
-    //console.log("ContainerHelper id", id)
-    const fullScreenElement = getFullscreenElement()
-    if (!fullScreenElement) {
-        //console.log("No fullscreen element")
-        return null
-    } else {
-        //console.log("Fullscreen element", fullScreenElement.id)
-    }
-    //console.log("ContainerHelper id ", id, " vs fullscreen element id ", fullScreenElement.id)
-    if (fullScreenElement.id != id) {
-        return null
-    }
-    return (
+const ContainerHelper = ({id, active=false}) => {
+    
+   const  [enabled, setEnabled] = useState(active)
+    //console.log("ContainerHelper id", id ,"active", active)
+    const listenerId = `listener_containerhelper_${id}`;
+    useEffect(() => {
+        const handleUpdateState = (msg) => {
+                if ('isFullScreen' in msg) {
+                  if (msg.isFullScreen) {
+                    if (id==msg.id) {
+                      setEnabled(true)
+                    } else {
+                      setEnabled(false)
+                    }
+                 } else {
+                    if (id==="top_container") {
+                      setEnabled(true)
+                    } else {
+                        setEnabled(false)
+                    }
+                 }
+                }
+            }
+        eventBus.on("updateState", handleUpdateState, listenerId)
+        return () => {
+            //eventBus.off("updateState", handleUpdateState,listenerId)
+        }})
+
+
+    if (enabled)return (
         <Fragment>
-            <ModalContainer id={"modal_" + id} />
-            <ToastsContainer id={"toast_" + id} />
+            <ModalContainer />
+            <ToastsContainer />
         </Fragment>
     )
+    return null
 }
 export default ContainerHelper
diff --git a/src/components/Controls/FullScreenButton.js b/src/components/Controls/FullScreenButton.js
index 11b9bba4..5cd8774e 100644
--- a/src/components/Controls/FullScreenButton.js
+++ b/src/components/Controls/FullScreenButton.js
@@ -16,88 +16,95 @@
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import { h } from "preact"
-import { useState, useEffect } from "preact/hooks"
+import { useState, useEffect, useRef } from "preact/hooks"
 import { Maximize, Minimize } from "preact-feather"
 import { useUiContextFn } from "../../contexts"
 import { ButtonImg } from "."
+import { eventBus } from "../../hooks/eventBus"
 
-const isFullScreen = (element) => {
-    return document.fullscreenElement === element
-}
+const FullScreenButton = ({ elementId, hideOnFullScreen, asButton, onclick }) => {
+    const isFullScreenModeRef = useRef(false)
+    const [isFullScreenMode, setIsFullScreenMode] = useState(isFullScreenModeRef.current)
 
-const FullScreenButton = ({ panelRef, hideOnFullScreen, asButton }) => {
-    const [isFullScreenMode, setIsFullScreenMode] = useState(false)
+    // Set internal state to follow the document.fullscreenElement state
+    function setFullScreenMode(value) {
+        isFullScreenModeRef.current = value
+        setIsFullScreenMode(value)
+    }
 
-    useEffect(() => {
-        const handleFullscreenChange = () => {
-            setIsFullScreenMode(isFullScreen(panelRef.current))
+    //Click handler
+    const handleClick = () => {
+        if (isFullScreenModeRef.current) {
+            exitFullscreen()
+        } else {
+            enterFullscreen()
         }
+        if (onclick) {
+            onclick()
+        }
+    }
 
-        document.addEventListener("fullscreenchange", handleFullscreenChange)
-
-        return () => {
-            document.removeEventListener(
-                "fullscreenchange",
-                handleFullscreenChange
-            )
+    //Handle fullscreen change event
+    const handleFullscreenChange = () => {
+        //we actuallyonly care about the event of exiting fullscreen because we control the entering one
+        console.log("Fullscreen state changed to false for " + elementId)
+        if (!document.fullscreenElement) {
+            exitFullscreen()
         }
-    }, [panelRef])
+    }
 
-    const toggleFullScreen = () => {
-        if (!isFullScreenMode) {
-            panelRef.current.requestFullscreen()
+    //Enter fullscreen mode
+    function enterFullscreen() {
+        const element = document.getElementById(elementId)
+        if (element) {
+            eventBus.emit("updateState", { id: elementId, isFullScreen: true, from: "fullScreenButton" })
+            element.requestFullscreen()
+            setFullScreenMode(true)
+            document.addEventListener("fullscreenchange", handleFullscreenChange)
+            console.log("Fullscreen activated for " + elementId)
         } else {
-            if (document.fullscreenElement) {
-                document.exitFullscreen()
-            }
+            console.log("Element " + elementId + " doesn't exist")
         }
     }
 
-    if (hideOnFullScreen && isFullScreenMode) {
-        return null
+    //Exit fullscreen mode
+    function exitFullscreen() {
+        document.removeEventListener(
+            "fullscreenchange",
+            handleFullscreenChange
+        )
+        eventBus.emit("updateState", { id: elementId, isFullScreen: false, from: "fullScreenButton" })
+        if (document.fullscreenElement) document.exitFullscreen()
+        setFullScreenMode(false)
+        console.log("Fullscreen deactivated for " + elementId)
     }
 
-    if (asButton) {
-        return (
-            <ButtonImg
-                id="btn-screen"
-                m1
-                icon={
-                    isFullScreenMode ? (
-                        <Minimize size="0.8rem" />
-                    ) : (
-                        <Maximize size="0.8rem" />
-                    )
-                }
-                onclick={(e) => {
-                    useUiContextFn.haptic()
-                    toggleFullScreen()
-                    e.target.blur()
-                }}
-            />
-        )
-    } else {
-        return (
-            <ButtonImg
-                xs
-                m1
-                class="btn btn-screen"
-                nomin="yes"
-                icon={
-                    isFullScreenMode ? (
-                        <Minimize size="0.8rem" />
-                    ) : (
-                        <Maximize size="0.8rem" />
-                    )
-                }
-                onclick={(e) => {
-                    useUiContextFn.haptic()
-                    toggleFullScreen()
-                    e.target.blur()
-                }}
-            />
-        )
+    //Hide the button if fullscreen mode is active and hideOnFullScreen is true
+    if (hideOnFullScreen && isFullScreenModeRef.current) {
+        return null
     }
+
+    const commonProps = {
+        icon: isFullScreenMode ? <Minimize size="0.8rem" /> : <Maximize size="0.8rem" />,
+        m1: true,
+    };
+
+    const conditionalProps = asButton
+        ? { id: "btn-screen" }
+        : { xs: true, class: "btn btn-screen", nomin: "yes" };
+        
+    //display the button according to the props
+    return (
+        <ButtonImg
+            {...commonProps}
+            {...conditionalProps}
+            onclick={(e) => {
+                useUiContextFn.haptic();
+                e.target.blur();
+                handleClick();
+            }}
+        />
+    );
 }
 
 export default FullScreenButton
diff --git a/src/components/ExtraContent/extraContentItem.js b/src/components/ExtraContent/extraContentItem.js
new file mode 100644
index 00000000..637a3c40
--- /dev/null
+++ b/src/components/ExtraContent/extraContentItem.js
@@ -0,0 +1,331 @@
+/*
+ extraContentItem.js - ESP3D WebUI navigation page file
+
+ Copyright (c) 2020 Luc Lebosse. All rights reserved.
+
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+import { Fragment, h } from "preact"
+import { useState, useEffect, useCallback, useRef, useMemo } from "preact/hooks"
+import { espHttpURL } from "../Helpers"
+import { useHttpFn } from "../../hooks"
+import { ButtonImg, ContainerHelper } from "../Controls"
+import { T } from "../Translations"
+import { Play, Pause, Aperture } from "preact-feather"
+import { eventBus } from "../../hooks/eventBus"
+import { useUiContextFn } from "../../contexts"
+import { elementsCache } from "../../areas/elementsCache"
+
+const visibilityState = {};
+const isLoadedState = {};
+
+const ExtraContentItem = ({
+    id,
+    source,
+    type,
+    name,
+    target,
+    refreshtime,
+    isVisibleOnStart,
+}) => {
+    const [contentUrl, setContentUrl] = useState("")
+    const [hasError, setHasError] = useState(false)
+    const [isLoading, setIsLoading] = useState(true)
+    const [isPaused, setIsPaused] = useState(false)
+    const { createNewRequest } = useHttpFn
+    const element_id = id.replace("extra_content_", type)
+    const refreshIntervalRef = useRef(null)
+    console.log(`Rendering ExtraContentItem ${id} at ${Date.now()}`);
+    if (visibilityState[id] === undefined) {
+        visibilityState[id] = target=="panel" ? isVisibleOnStart : true;
+    }
+    if (isLoadedState[id] === undefined) {
+        isLoadedState[id] = false;
+    }
+
+
+    const handleContentSuccess = useCallback((result) => {
+        let blob
+        switch (type) {
+            case "camera":
+            case "image":
+                blob = new Blob([result], { type: "image/jpeg" })
+                break
+            case "extension":
+            case "content":
+                blob = new Blob([result], { type: "text/html" })
+                break
+            default:
+                blob = new Blob([result], { type: "text/plain" })
+        }
+        const url = URL.createObjectURL(blob)
+        setContentUrl(url)
+        setHasError(false)
+        setIsLoading(false)
+    }, [type])
+
+    const handleContentError = useCallback((error) => {
+        console.error(`Error loading content for ${id}:`, error)
+        setHasError(true)
+        setIsLoading(false)
+        isLoadedState[id] = false;
+    }, [id])
+
+    const loadContent = useCallback(() => {
+        if (target=="page"){
+            console.log("Loading content for page " + id)
+            console.log(useUiContextFn.panels.isVisible(elementsCache.getRootfromId(id)))
+        }
+
+        if (isPaused || !visibilityState[id] ||  (target=="panel" && !useUiContextFn.panels.isVisible(elementsCache.getRootfromId(id)))) return
+        setIsLoading(true)
+        if (source.startsWith("http")) {
+            setContentUrl(source)
+            setHasError(false)
+            setIsLoading(false)
+            isLoadedState[id] = true;
+        } else {
+            const idquery = type === "content" ? type + id : "download" + id
+            createNewRequest(
+                espHttpURL(source),
+                { method: "GET", id: idquery, max: 2 },
+                {
+                    onSuccess: handleContentSuccess,
+                    onFail: handleContentError,
+                }
+            )
+        }
+    }, [id, source, type, createNewRequest, handleContentSuccess, handleContentError, isPaused])
+
+    useEffect(() => {
+        loadContent()
+    }, [loadContent])
+
+    useEffect(() => {
+        const listenerId = `listener_${id}`;
+        const handleUpdateState = (msg) => {
+            if (msg.id == id) { 
+                console.log(`Received message for ${id} with listener ${listenerId}`, msg);
+                const element = document.getElementById(id)
+                if ( 'forceRefresh' in msg && msg.forceRefresh) {
+                    console.log(`Processing forceRefresh for ${id}`);
+                    loadContent()
+                }
+                if ('isVisible' in msg) {
+                    
+                    if (element) {
+                        console.log("Updating visibility for element " + id + " to " + msg.isVisible)
+                        element.style.display = msg.isVisible ? 'block' : 'none';
+                        //is it the same as the current state?
+                        if (visibilityState[id]!= msg.isVisible){
+                            //if it is extension, check if the content is loaded
+                            if (type=="extension" && isLoadedState[id]){    
+                                const iframeElement = element.querySelector('iframe.extensionContainer');
+                                if (iframeElement){
+                                    iframeElement.contentWindow.postMessage(
+                                        { type: "notification", content: {isVisible: msg.isVisible}, id },
+                                        "*"
+                                    )
+                                }
+                            }
+                        }
+                        visibilityState[id]= msg.isVisible;
+                        if (!isLoadedState[id] && msg.isVisible) {
+                            loadContent()
+                            }
+
+                    } else {
+                        console.error("Element " + id + " doesn't exist")
+                    }
+
+                }
+                if ('position' in msg) {
+                    console.log("Updating position for element " + id )
+                    console.log(msg.position)
+                    const element = document.getElementById(id)
+                    element.style.top = `${msg.position.top}px`;
+                    element.style.left = `${msg.position.left}px`;
+                    element.style.width = `${msg.position.width}px`;
+                    element.style.height = `${msg.position.height}px`;
+                }
+            }
+        }
+        eventBus.on("updateState", handleUpdateState, listenerId)
+        return () => {
+            console.log(`Removing listener ${listenerId} for ${id}`);
+            //eventBus.off("updateState", handleUpdateState, listenerId)
+        }
+    }, [id, loadContent])
+
+    useEffect(() => {
+        if (refreshtime > 0 && (type === "camera" || type === "image") && visibilityState[id] && !isPaused) {
+            refreshIntervalRef.current = setInterval(loadContent, refreshtime)
+        }
+        return () => {
+            if (refreshIntervalRef.current) {
+                clearInterval(refreshIntervalRef.current)
+            }
+        }
+    }, [refreshtime, type, isPaused, loadContent])
+
+
+    const handleError = () => {
+        setHasError(true)
+        setIsLoading(false)
+        isLoadedState[id] = false;
+    }
+
+    const handleLoad = () => {
+        setHasError(false)
+        setIsLoading(false)
+        isLoadedState[id] = true;
+        const iframeElement = document.getElementById(element_id)
+        if (type === "extension" && iframeElement) {
+           
+            const doc = iframeElement.contentWindow.document
+            const body = doc.querySelector("body")
+            body.classList.add("body-extension")
+            const css = document.querySelectorAll("style")
+            css.forEach((csstag) => {
+                doc.head.appendChild(csstag.cloneNode(true))
+            })
+        }
+    }
+
+    const captureImage = useCallback(() => {
+        if (type === "camera" || type === "image") {
+            const image = document.getElementById(element_id);
+            if (image && image.complete) {
+                const canvas = document.createElement('canvas');
+                canvas.width = image.naturalWidth;
+                canvas.height = image.naturalHeight;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(image, 0, 0);
+                
+                canvas.toBlob((blob) => {
+                    const typeImage = type === "camera" ? "image/jpeg" : blob.type;
+                    const filename = `snap.${typeImage.split("/")[1]}`;
+                    
+                    if (window.navigator.msSaveOrOpenBlob) {
+                        window.navigator.msSaveOrOpenBlob(blob, filename);
+                    } else {
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement("a");
+                        a.style.display = "none";
+                        a.href = url;
+                        a.download = filename;
+                        document.body.appendChild(a);
+                        a.click();
+                        
+                        setTimeout(() => {
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(url);
+                        }, 100);
+                    }
+                }, type === "camera" ? "image/jpeg" : "image/png");
+            } else {
+                console.error("Image not loaded or not found");
+            }
+        }
+    }, [type, element_id]);
+
+    const togglePause = useCallback(() => {
+        setIsPaused(prevPaused => {
+            const newPausedState = !prevPaused;
+            if (newPausedState) {
+                if (refreshIntervalRef.current) {
+                    clearInterval(refreshIntervalRef.current);
+                }
+            } else {
+                if (refreshtime > 0 && (type === "camera" || type === "image") && visibilityState[id]) {
+                    refreshIntervalRef.current = setInterval(loadContent, refreshtime);
+                }
+            }
+            return newPausedState;
+        });
+    }, [refreshtime, type, loadContent]);
+
+    const renderContent = useMemo(() => {
+        if (isLoading && type !== "image" && type !== "camera") {
+            return <div>Loading...</div>
+        }
+
+        if (hasError) {
+            return (
+                <div id={"fallback_" + element_id} class="fallback-content">
+                    <p>Error loading {type}</p>
+                    <p>Please check the URL</p>
+                </div>
+            )
+        }
+
+        if (type === "camera" || type === "image") {
+            return (
+                <div class="picture-container">
+                <img
+                    src={contentUrl}
+                    alt={name ? name : "image jpeg"}
+                    class={type === "camera" ? "cameraContainer" : "imageContainer"}
+                    id={element_id}
+                    onError={handleError}
+                    onLoad={handleLoad}
+                />
+                </div>
+            )
+        } else {
+            return (
+                <iframe
+                    src={contentUrl}
+                    class={type === "extension" ? "extensionContainer" : "contentContainer"}
+                    id={element_id}
+                    onError={handleError}
+                    onLoad={handleLoad}
+                />
+            )
+        }
+    }, [isLoading, hasError, type, contentUrl, name, element_id, handleError, handleLoad]);
+
+    const RenderControls = useMemo(() => (
+        <div class="m-2 image-button-bar">
+            {(type === "camera" || type === "image") && (
+                <ButtonImg
+                    m1
+                    tooltip
+                    data-tooltip={T("S186")}
+                    icon={<Aperture />}
+                    onclick={captureImage}
+                />
+            )}
+            {parseInt(refreshtime) > 0 && (type === "camera" || type === "image") && (
+                <ButtonImg
+                    m1
+                    tooltip
+                    data-tooltip={isPaused ? T("S185") : T("S184")}
+                    icon={isPaused ? <Play /> : <Pause />}
+                    onclick={togglePause}
+                />
+            )}
+        </div>
+    ), [type, refreshtime, isPaused, captureImage, togglePause]);
+    return (
+        <div id={id} class="extra-content-container">
+            <ContainerHelper id={id} />
+            {renderContent}
+            {RenderControls}
+        </div>
+    )
+}
+
+export { ExtraContentItem }
diff --git a/src/components/ExtraContent/index.js b/src/components/ExtraContent/index.js
index 3ea62fb7..39e93c7c 100644
--- a/src/components/ExtraContent/index.js
+++ b/src/components/ExtraContent/index.js
@@ -17,374 +17,188 @@
  License along with This code; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
-import { Fragment, h } from "preact"
-import { useRef, useEffect, useState } from "preact/hooks"
-import { espHttpURL } from "../Helpers"
-import { useUiContextFn } from "../../contexts"
-import { useHttpFn } from "../../hooks"
-import { Play, Pause, Aperture, RefreshCcw } from "preact-feather"
+import { h, Fragment } from "preact"
+import { useRef, useEffect, useCallback, useState } from "preact/hooks"
+import { elementsCache } from "../../areas/elementsCache"
+import { ExtraContentItem } from "./extraContentItem"
+import { eventBus } from "../../hooks/eventBus"
 import {
     ButtonImg,
     FullScreenButton,
     CloseButton,
-    ContainerHelper,
 } from "../Controls"
 import { T } from "../Translations"
+import { RefreshCcw } from "preact-feather"
 import { iconsFeather } from "../Images"
 import { iconsTarget } from "../../targets"
+import { useUiContextFn, useUiContext } from "../../contexts"
 
-const contentCache = {}
-const refreshPausedList = {}
-const timerIDs = {}
+const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) => {
 
-const ExtraContent = ({
-    id,
-    source,
-    refreshtime,
-    label,
-    type,
-    target,
-    icon,
-}) => {
-    const { createNewRequest } = useHttpFn
-    const [refreshPaused, setRefreshPaused] = useState(refreshPausedList[id])
     const [isFullScreen, setIsFullScreen] = useState(false)
-    const element = useRef(null)
-    const imageCache = useRef(null)
-    const panelRef = useRef(null)
-    const pageSource = type == "camera" ? "/snap" : source
+    const { panels } = useUiContext()
+    const extra_content_id = `extra_content_${id}`
+    const target_id = `target_${id}`
     const iconsList = { ...iconsTarget, ...iconsFeather }
-    useEffect(() => {
-        const handleFullScreenChange = () => {
-            setIsFullScreen(document.fullscreenElement !== null)
-        }
-
-        document.addEventListener("fullscreenchange", handleFullScreenChange)
+    console.log("Extra Content " + id)
 
-        return () => {
-            document.removeEventListener(
-                "fullscreenchange",
-                handleFullScreenChange
-            )
-        }
-    }, [])
-    const loadContent = (init = false) => {
-        if (!init && refreshPausedList[id]) {
+    const updateContentPosition = () => {
+        if (!useUiContextFn.panels.isVisible(id)&& target=="panel") {
+            console.log("Not updating position for element " + extra_content_id, "in target", target_id, " of panel ", id, " because it is not visible")
             return
         }
-        if (pageSource.startsWith("http")) {
-            switch (type) {
-                case "image":
-                    if (element.current) element.current.src = pageSource
-                    break
-                default:
-                    if (element.current) element.current.src = pageSource
-            }
+        console.log("Updating position for element " + extra_content_id, "in target", target_id, " of panel ", id)
+        const container = document.getElementById(target_id)
+        if (container) {
+            const { top, left, width, height } = container.getBoundingClientRect()
+            //console.log("New Position for element " + extra_content_id + ":", top, left, width, height)
+            eventBus.emit('updateState', { id: extra_content_id, position: { top, left, width, height }, isVisible: true, from: "extraContent(position)" })
         } else {
-            if (
-                (type == "image" || type == "extension") &&
-                contentCache[id] != undefined
-            ) {
-                element.current.classList.remove("d-block")
-                element.current.classList.add("d-none")
-                element.current.onload = () => {
-                    URL.revokeObjectURL(element.current.src)
-                    if (type == "extension") {
-                        const doc = element.current.contentWindow.document
-                        const body = doc.querySelector("body")
-                        body.classList.add("body-extension")
-                        const css = document.querySelectorAll("style")
-                        //inject css
-                        css.forEach((csstag) => {
-                            doc.head.appendChild(csstag.cloneNode(true))
-                        }) //to avoid the flickering when apply css
-                    }
-                    element.current.classList.remove("d-none")
-                    element.current.classList.add("d-block")
-                }
-                element.current.src = URL.createObjectURL(contentCache[id])
-            } else {
-                const idquery = type == "content" ? type + id : "download" + id
-                createNewRequest(
-                    espHttpURL(pageSource),
-                    { method: "GET", id: idquery, max: 2 },
-                    {
-                        onSuccess: (result) => {
-                            switch (type) {
-                                case "camera":
-                                case "image":
-                                    if (element.current) {
-                                        imageCache.current = result
-                                        element.current.onload = () => {
-                                            URL.revokeObjectURL(
-                                                element.current.src
-                                            )
-                                        }
-                                        contentCache[id] = result
-                                        element.current.src =
-                                            URL.createObjectURL(
-                                                contentCache[id]
-                                            )
-                                    }
-                                    break
-                                //cannot be used because this way disable javascript in iframe
-                                case "extension":
-                                    element.current.onload = () => {
-                                        URL.revokeObjectURL(element.current.src)
-                                        const doc =
-                                            element.current.contentWindow
-                                                .document
-                                        const body = doc.querySelector("body")
-                                        body.classList.add("body-extension")
-                                        const css =
-                                            document.querySelectorAll("style")
-                                        //inject css
-                                        css.forEach((csstag) => {
-                                            doc.head.appendChild(
-                                                csstag.cloneNode(true)
-                                            )
-                                        })
-                                        //to avoid the flickering when apply css
-                                        element.current.classList.remove(
-                                            "d-none"
-                                        )
-                                        element.current.classList.add("d-block")
-                                    }
-                                    contentCache[id] = result
-                                    element.current.src = URL.createObjectURL(
-                                        contentCache[id]
-                                    )
-                                    //todo inject css
-                                    break
-                                default:
-                                    if (
-                                        element.current &&
-                                        element.current.contentWindow
-                                    )
-                                        element.current.contentWindow.document.body.innerHTML =
-                                            result
-                            }
-                        },
-                        onFail: (error) => {
-                            const errorContent =
-                                "<div style='display: flex; justify-content: center; align-items: center; height: 100%; font-family: Arial, sans-serif;'><p>" +
-                                T("S222") +
-                                pageSource +
-                                "</p></div>"
-                            element.current.contentWindow.document.body.innerHTML =
-                                errorContent
-                        },
-                    }
-                )
-            }
+            console.error("Element " + target_id + " doesn't exist")
         }
     }
-    const ControlButtons = () => {
-        return (
-            <div class="m-2 image-button-bar">
-                {parseInt(refreshtime) == 0 && target == "page" && (
-                    <ButtonImg
-                        m1
-                        icon={<RefreshCcw size="0.8rem" />}
-                        onclick={() => {
-                            loadContent()
-                        }}
-                    />
-                )}
-                {parseInt(refreshtime) > 0 && type != "extension" && (
-                    <Fragment>
-                        <ButtonImg
-                            m1
-                            tooltip
-                            data-tooltip={refreshPaused ? T("S185") : T("S184")}
-                            icon={refreshPaused ? <Play /> : <Pause />}
-                            onclick={() => {
-                                useUiContextFn.haptic()
-                                setRefreshPaused(!refreshPaused)
-                                refreshPausedList[id] = !refreshPaused
-                            }}
-                        />
-                        {type != "content" && (
-                            <ButtonImg
-                                m1
-                                tooltip
-                                data-tooltip={T("S186")}
-                                icon={<Aperture />}
-                                onclick={() => {
-                                    useUiContextFn.haptic()
-                                    const typeImage =
-                                        type == "camera"
-                                            ? "image/jpeg"
-                                            : imageCache.current.type
-                                    const filename =
-                                        "snap." + typeImage.split("/")[1]
-                                    const file = new Blob(
-                                        [imageCache.current],
-                                        {
-                                            type: typeImage,
-                                        }
-                                    )
-                                    if (window.navigator.msSaveOrOpenBlob)
-                                        // IE10+
-                                        window.navigator.msSaveOrOpenBlob(
-                                            file,
-                                            filename
-                                        )
-                                    else {
-                                        // Others
-                                        const a = document.createElement("a")
-                                        const url = URL.createObjectURL(file)
-                                        a.href = url
-                                        a.download = filename
-                                        a.onload = () => {
-                                            URL.revokeObjectURL(a.href)
-                                        }
-                                        document.body.appendChild(a)
-                                        a.click()
-                                        setTimeout(function () {
-                                            document.body.removeChild(a)
-                                            window.URL.revokeObjectURL(url)
-                                        }, 0)
-                                    }
-                                }}
-                            />
-                        )}
-                    </Fragment>
-                )}
-                {target == "page" && (
-                    <Fragment>
-                        <span class="m-1" />
-                        <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
-                            asButton={true}
-                        />
-                    </Fragment>
-                )}
-            </div>
-        )
-    }
 
-    const MainContent = () => {
-        switch (type) {
-            case "camera":
-                return (
-                    <img
-                        class="mt-2"
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    />
-                )
-            case "image":
-                return (
-                    <img
-                        class="mt-2"
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    />
-                )
-            default:
-                const handleIframeError = () => {
-                    console.log("Error loading iframe")
-                }
-                return (
-                    <iframe
-                        class={
-                            type == "extension"
-                                ? "extensionContainer d-block iframe-container"
-                                : "content-container d-block iframe-container"
-                        }
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    ></iframe>
-                )
-        }
+    const handleScrollAndResize = useCallback(() => {
+        requestAnimationFrame(updateContentPosition);
+    }, [updateContentPosition]);
+    
+    useEffect(() => {
+        console.log("Updating element " + extra_content_id + " because visible list changed")
+        if (useUiContextFn.panels.isVisible(id)) {
+            const main = document.getElementById("main")
+            if (main) {
+                main.removeEventListener('scroll', handleScrollAndResize)
+                main.removeEventListener('resize', handleScrollAndResize)
+           }
+            window.removeEventListener('resize', handleScrollAndResize)
+            if (main) {
+                 main.addEventListener('scroll', handleScrollAndResize)
+                 main.addEventListener('resize', handleScrollAndResize)
+            }
+            window.addEventListener('resize', handleScrollAndResize)
+            
+            updateContentPosition()
     }
+    }, [panels.updateTrigger])
 
     useEffect(() => {
-        //load using internal http manager
-        if (!pageSource.startsWith("http")) loadContent(true)
-        //init timer if any
+        console.log("Mount element " + id)
+        if (!elementsCache.has(extra_content_id)) {
+            console.error("Error display element " + extra_content_id, " because it doesn't exist")
+        } else {
+            console.log("Updating element " + extra_content_id + " because it already exists")
+            if (target=="page"){
+                updateContentPosition()
+            }
+        }
 
-        if (refreshtime != 0 && type != "extension") {
-            clearInterval(timerIDs[id])
-            timerIDs[id] = setInterval(loadContent, refreshtime)
+        const main = document.getElementById("main")
+        if (main) {
+            main.addEventListener('scroll', handleScrollAndResize)
+            main.addEventListener('resize', handleScrollAndResize)
         }
+        window.addEventListener('resize', handleScrollAndResize)
+
 
         return () => {
-            //cleanup
-            if (refreshtime != 0 && type != "extension") {
-                clearInterval(timerIDs[id])
+            const main = document.getElementById("main")
+            if (main) {
+                main.removeEventListener('scroll', handleScrollAndResize)
+                main.removeEventListener('resize', handleScrollAndResize)
             }
+            window.removeEventListener('resize', handleScrollAndResize)
+            console.log("Hiding element " + id)
+            eventBus.emit('updateState', { id: extra_content_id, isVisible: false, from: "extraContent(return)" })
         }
-    })
-    if (target == "page")
-        return (
-            <div id={"page_"+id} ref={panelRef} style="height: 100%">
-                <ContainerHelper id={"page_"+id} /> 
-                <MainContent />
-                <ControlButtons />
+    }, [])
+
+
+const handleRefresh = () => {
+    useUiContextFn.haptic()
+    //console.log("Refreshing element " + extra_content_id)
+    eventBus.emit('updateState', { id: extra_content_id, isVisible: true, forceRefresh: true, from: "extraContent(refresh)-" + Date.now() })
+    updateContentPosition()
+}
+
+
+
+const PanelRenderControls = () => (
+    <span class="full-height">
+
+        <ButtonImg
+            xs
+            m1
+            nomin="yes"
+            icon={<RefreshCcw size="0.8rem" />}
+            onclick={handleRefresh}
+        />
+        <FullScreenButton
+            elementId={extra_content_id}
+        />
+        <CloseButton
+            elementId={id}
+            hideOnFullScreen={true}
+        />
+
+
+    </span>
+)
+
+const PageRenderControls = () => (
+    <div class="m-2 image-button-bar">
+        <ButtonImg
+            m1
+            nomin="yes"
+            icon={<RefreshCcw size="0.8rem" />}
+            onclick={handleRefresh}
+        />
+
+        <FullScreenButton
+            elementId={extra_content_id}
+            asButton={true}
+        />
+
+    </div>
+)
+
+if (target === "page") {
+    //console.log("Rendering page element " + extra_content_id)
+    //console.log("Page Id " + id)
+    return (
+        <div class="page-container" id={id}>
+            <div id={target_id} class="page-target-container">
+                {/* content should fit this container */}
             </div>
-        )
-    if (target == "panel") {
-        const displayIcon = iconsList[icon] ? iconsList[icon] : ""
-        //console.log("Panel :", id, "Ref :", panelRef.current)
-        return (
-            <div class="panel panel-dashboard" id={id} ref={panelRef}>
-                <ContainerHelper id={id} />
+            <PageRenderControls />
+        </div>
+    )
+}
+
+if (target === "panel") {
+    // console.log("Rendering panel element " + extra_content_id)
+    //console.log("Panel Id " + id)
+    const displayIcon = iconsList[icon] || ""
+    return (
+        <Fragment>
+            <div class="panel panel-dashboard" id={id}>
+
                 <div class="navbar">
-                    <span class="navbar-section  feather-icon-container">
+                    <span class="navbar-section feather-icon-container">
                         {displayIcon}
                         <strong class="text-ellipsis">{T(label)}</strong>
                     </span>
                     <span class="navbar-section">
-                        {refreshtime == 0 && (
-                            <ButtonImg
-                                xs
-                                m1
-                                nomin="yes"
-                                icon={<RefreshCcw size="0.8rem" />}
-                                onclick={() => {
-                                    useUiContextFn.haptic()
-                                    if (contentCache[id])
-                                        contentCache[id] = undefined
-                                    loadContent()
-                                }}
-                            />
-                        )}
-                        <span class="full-height">
-                            <FullScreenButton
-                                panelRef={panelRef}
-                                hideOnFullScreen={true}
-                            />
-                            <CloseButton
-                                panelRef={panelRef}
-                                panelId={id}
-                                hideOnFullScreen={true}
-                                callbackfn={() => {
-                                    clearInterval(timerIDs[id])
-                                }}
-                            />
-                        </span>
+                        {PanelRenderControls()}
                     </span>
                 </div>
-                <div class="panel-body panel-body-dashboard no-margin-no-padding">
-                    <MainContent />
+                <div class="panel-body panel-body-dashboard no-margin-no-padding panel-target-container" id={target_id}>
+                    {/* content should fit this container */}
                 </div>
-                {parseInt(refreshtime) > 0 && type != "extension" && (
-                    <div class="panel-footer">
-                        <ControlButtons />
-                    </div>
-                )}
             </div>
-        )
-    }
+
+        </Fragment>
+    )
+}
 }
 
-export default ExtraContent
+export { ExtraContent, ExtraContentItem }
\ No newline at end of file
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index 8cc50457..e1e38199 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -37,10 +37,9 @@ const ModalContainer = ({ id }) => {
         modals.modalList.length > 0 &&
         id === "top_modals_container"
     ) {
-        const fullScreenElement = getFullscreenElement()
         disableUI(
             true,
-            fullScreenElement ? "modal_" + fullScreenElement.id : null
+      null
         )
     }
     return (
@@ -49,15 +48,7 @@ const ModalContainer = ({ id }) => {
                 modals.modalList.length > 0 &&
                 modals.modalList.map((modal, index) => {
                     const modalSize = modal.size || "sm"
-                    const divRef = document.fullscreenElement
-                    console.log("Active modal", divRef)
-                    if (
-                        divRef &&
-                        (id === "top_modals_container" ||
-                            "modal_" + divRef.id != id)
-                    ) {
-                        return null
-                    }
+                    
                     return (
                         <SpectreModal
                             class={`active`}
diff --git a/src/components/Panels/Charts.js b/src/components/Panels/Charts.js
index bfeb8152..f711081a 100644
--- a/src/components/Panels/Charts.js
+++ b/src/components/Panels/Charts.js
@@ -351,7 +351,6 @@ const Legendes = ({ index, temperatures, temperaturesList }) => {
 const ChartsPanel = () => {
     const { temperatures, temperaturesList, sensor, sensorList } =
         useTargetContext()
-    const panelRef = useRef(null)
     charts[0].ref = useRef(null)
     charts[1].ref = useRef(null)
     charts[1].ref = useRef(null)
@@ -395,7 +394,7 @@ const ChartsPanel = () => {
         updateCharts(2, sensor)
     }, [sensor])
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id} >
          <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -406,12 +405,10 @@ const ChartsPanel = () => {
                     <span class="H-100">
                         <PanelMenu items={menu} />
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/ExtraControls.js b/src/components/Panels/ExtraControls.js
index dc5bde20..1c3f2f8c 100644
--- a/src/components/Panels/ExtraControls.js
+++ b/src/components/Panels/ExtraControls.js
@@ -295,7 +295,6 @@ const ExtraInputControl = ({ element, index, size, pos }) => {
 const ExtraControlsPanel = () => {
     const { temperatures, fanSpeed, flowRate, feedRate } = useTargetContext()
     const id = "extraControlsPanel"
-    const panelRef = useRef(null)
     const inputList = [
         { name: "P91", list: fanSpeed },
         { name: "P92", list: flowRate },
@@ -305,7 +304,7 @@ const ExtraControlsPanel = () => {
     console.log("Extra Controls panel")
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id} >
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -315,12 +314,10 @@ const ExtraControlsPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/ExtraPanel.js b/src/components/Panels/ExtraPanel.js
index 6449679b..85d100b4 100644
--- a/src/components/Panels/ExtraPanel.js
+++ b/src/components/Panels/ExtraPanel.js
@@ -17,7 +17,7 @@ Files.js - ESP3D WebUI component file
 */
 
 import { h } from "preact"
-import ExtraContent from "../ExtraContent"
+import {ExtraContent} from "../ExtraContent"
 
 /*
  * Local const
@@ -26,6 +26,7 @@ import ExtraContent from "../ExtraContent"
 const ExtraPanel = ({ id, source, refreshtime, label, type, icon }) => {
     return (
         <ExtraContent
+            key={id}
             label={label}
             icon={icon}
             id={id}
@@ -43,6 +44,7 @@ const ExtraPanelElement = (element, id) => {
         id,
         content: (
             <ExtraPanel
+                key={id}
                 label={element.name}
                 icon={element.icon}
                 id={id}
diff --git a/src/components/Panels/Extruders.js b/src/components/Panels/Extruders.js
index 6f7a2bba..3378d43a 100644
--- a/src/components/Panels/Extruders.js
+++ b/src/components/Panels/Extruders.js
@@ -241,9 +241,8 @@ const ExtrudersPanel = () => {
         },
     ]
     console.log(id)
-    const panelRef = useRef(null)
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -254,12 +253,10 @@ const ExtrudersPanel = () => {
                     <span class="H-100">
                         <PanelMenu items={menu} />
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Files.js b/src/components/Panels/Files.js
index bc0568a5..f552635a 100644
--- a/src/components/Panels/Files.js
+++ b/src/components/Panels/Files.js
@@ -650,11 +650,9 @@ const FilesPanel = () => {
         setMenu(newMenu())
     }, [fileSystem])
 
-    const panelRef = useRef(null)
-
     console.log(id)
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <input
                 type="file"
                 ref={fileref}
@@ -674,12 +672,10 @@ const FilesPanel = () => {
                             <PanelMenu items={menu} />
                         )}
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Jog.js b/src/components/Panels/Jog.js
index a89f182d..36d0b54d 100644
--- a/src/components/Panels/Jog.js
+++ b/src/components/Panels/Jog.js
@@ -79,7 +79,6 @@ const JogPanel = () => {
     )
     const [moveToTitleZ, setMoveToTitleZ] = useState(T("P75") + movetoZ)
     const id = "jogPanel"
-    const panelRef = useRef(null)
     console.log(id)
 
     //Send a request to the ESP
@@ -363,7 +362,7 @@ const JogPanel = () => {
     label_v_axis_top = V_axis_top_dir + V_axis
 
     return (
-        <div id={id} class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id} >
             <ContainerHelper id={id} />
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -374,12 +373,10 @@ const JogPanel = () => {
                     <span class="H-100">
                         <PanelMenu items={menu} />
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/JogCNC.js b/src/components/Panels/JogCNC.js
index d10471e6..60eb84ce 100644
--- a/src/components/Panels/JogCNC.js
+++ b/src/components/Panels/JogCNC.js
@@ -118,7 +118,6 @@ const JogPanel = () => {
     const { positions } = useTargetContext()
     const id = "jogPanel"
     console.log(id)
-    const panelRef = useRef(null)
     function onChangeAxis(e) {
         let value = e.target ? e.target.value : e
         setCurrentSelectedAxis(value)
@@ -337,7 +336,7 @@ const JogPanel = () => {
         }
     })
     return (
-        <div id={id} class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id} >
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -399,12 +398,10 @@ const JogPanel = () => {
                             </ul>
                         </div>
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/JogPlotter.js b/src/components/Panels/JogPlotter.js
index d8df00a1..cac727ef 100644
--- a/src/components/Panels/JogPlotter.js
+++ b/src/components/Panels/JogPlotter.js
@@ -110,7 +110,6 @@ const JogPanel = () => {
     const { positions } = useTargetContext()
     const id = "jogPanel"
     console.log(id)
-    const panelRef = useRef(null)
     //Send a request to the ESP
     const SendCommand = (command) => {
         createNewRequest(
@@ -353,7 +352,7 @@ const JogPanel = () => {
         currentSteps = useUiContextFn.getValue("steps")
     }, [])
     return (
-        <div id={id} class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -404,12 +403,10 @@ const JogPanel = () => {
                             </ul>
                         </div>
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/LaserCNC.js b/src/components/Panels/LaserCNC.js
index ea78e9f4..f1756c48 100644
--- a/src/components/Panels/LaserCNC.js
+++ b/src/components/Panels/LaserCNC.js
@@ -82,7 +82,6 @@ const LaserPanel = () => {
     const { states } = useTargetContext()
     const { createNewRequest } = useHttpFn
     const id = "laserPanel"
-    const panelRef = useRef(null)
 
     console.log("Laser panel")
     if (typeof laserPercentage.current === "undefined") {
@@ -243,7 +242,7 @@ const LaserPanel = () => {
         },
     ]
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -253,12 +252,10 @@ const LaserPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Macros.js b/src/components/Panels/Macros.js
index 18800923..0e9769ac 100644
--- a/src/components/Panels/Macros.js
+++ b/src/components/Panels/Macros.js
@@ -42,7 +42,6 @@ const MacrosPanel = () => {
     const { createNewRequest } = useHttpFn
     const iconsList = { ...iconsTarget, ...iconsFeather }
     const id = "macrosPanel"
-    const panelRef = useRef(null)
     console.log(id)
     const getSDSource = () => {
         for (const source of files.supported) {
@@ -146,7 +145,7 @@ const MacrosPanel = () => {
     }
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -155,10 +154,9 @@ const MacrosPanel = () => {
                 </span>
                 <span class="navbar-section">
                     <span class="full-height">
-                        <FullScreenButton panelRef={panelRef} />
+                        <FullScreenButton elementId={id}/>
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Notifications.js b/src/components/Panels/Notifications.js
index 65a71b1e..a0677d7c 100644
--- a/src/components/Panels/Notifications.js
+++ b/src/components/Panels/Notifications.js
@@ -48,7 +48,6 @@ const NotificationsPanel = () => {
     const messagesEndRef = useRef(null)
     const notificationsOutput = useRef(null)
     const id = "notificationsPanel"
-    const panelRef = useRef(null)
 
     const scrollToBottom = () => {
         if (
@@ -108,7 +107,7 @@ const NotificationsPanel = () => {
     console.log("Notifications panel")
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -119,12 +118,10 @@ const NotificationsPanel = () => {
                     <span class="full-height">
                         <PanelMenu items={menu} />
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/OverridesCNC.js b/src/components/Panels/OverridesCNC.js
index 7c0fe1ae..a7cb57bc 100644
--- a/src/components/Panels/OverridesCNC.js
+++ b/src/components/Panels/OverridesCNC.js
@@ -72,7 +72,6 @@ const OverridesPanel = () => {
     const { toasts, panels } = useUiContext()
     const { createNewRequest } = useHttpFn
     const id = "OverridesPanel"
-    const panelRef = useRef(null)
 
     const buttons_list = [
         {
@@ -181,7 +180,7 @@ const OverridesPanel = () => {
         )
     }
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -191,12 +190,10 @@ const OverridesPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                           elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/ProbeCNC.js b/src/components/Panels/ProbeCNC.js
index 3b38a200..81eebc63 100644
--- a/src/components/Panels/ProbeCNC.js
+++ b/src/components/Panels/ProbeCNC.js
@@ -88,7 +88,6 @@ const ProbePanel = () => {
     //const { status } = useTargetContext()
     const { createNewRequest } = useHttpFn
     const id = "ProbePanel"
-    const panelRef = useRef(null)
 
     console.log("Probe panel")
     if (typeof maxprobe.current === "undefined") {
@@ -375,7 +374,7 @@ const ProbePanel = () => {
     ]
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} />
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -385,12 +384,10 @@ const ProbePanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/SpindleCNC.js b/src/components/Panels/SpindleCNC.js
index 00f0dac6..d4e94697 100644
--- a/src/components/Panels/SpindleCNC.js
+++ b/src/components/Panels/SpindleCNC.js
@@ -107,7 +107,6 @@ const SpindlePanel = () => {
     const { status, states } = useTargetContext()
     const { createNewRequest } = useHttpFn
     const id = "SpindlePanel"
-    const panelRef = useRef(null)
     if (typeof spindleSpeedValue.current === "undefined") {
         spindleSpeedValue.current = useUiContextFn.getValue("spindlespeed")
     }
@@ -248,7 +247,7 @@ const SpindlePanel = () => {
     }
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -258,12 +257,10 @@ const SpindlePanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Status.js b/src/components/Panels/Status.js
index b23b486d..b12cf243 100644
--- a/src/components/Panels/Status.js
+++ b/src/components/Panels/Status.js
@@ -172,7 +172,6 @@ const StatusPanel = () => {
     //console.log(status, streamStatus)
     const { createNewRequest } = useHttpFn
     const id = "statusPanel"
-    const panelRef = useRef(null)
 
     const deviceList = [
         {
@@ -298,7 +297,7 @@ const StatusPanel = () => {
         return true
     }
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -308,12 +307,9 @@ const StatusPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
-                        />
+                            elementId={id}/>
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/StatusCNC.js b/src/components/Panels/StatusCNC.js
index b065ce2b..de679c11 100644
--- a/src/components/Panels/StatusCNC.js
+++ b/src/components/Panels/StatusCNC.js
@@ -122,7 +122,6 @@ const StatusPanel = () => {
     const { status, states, pinsStates, streamStatus } = useTargetContext()
     const { createNewRequest } = useHttpFn
     const id = "statusPanel"
-    const panelRef = useRef(null)
     const buttonsList = [
         {
             name: "CN40",
@@ -231,7 +230,7 @@ const StatusPanel = () => {
     }
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -241,12 +240,10 @@ const StatusPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Temperatures.js b/src/components/Panels/Temperatures.js
index 7e26299a..eae6ab5d 100644
--- a/src/components/Panels/Temperatures.js
+++ b/src/components/Panels/Temperatures.js
@@ -272,7 +272,6 @@ const TemperatureInputControl = ({ tool, index, size }) => {
 }
 
 const TemperaturesPanel = () => {
-    const panelRef = useRef(null)
     const { temperatures } = useTargetContext()
     const { createNewRequest } = useHttpFn
     const sendCommand = (command) => {
@@ -298,7 +297,7 @@ const TemperaturesPanel = () => {
         if (temperatures[tool].length != 0) hasTemp = true
     })
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id} /> 
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -308,12 +307,10 @@ const TemperaturesPanel = () => {
                 <span class="navbar-section">
                     <span class="full-height">
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Panels/Terminal.js b/src/components/Panels/Terminal.js
index 10683683..2be93c45 100644
--- a/src/components/Panels/Terminal.js
+++ b/src/components/Panels/Terminal.js
@@ -54,7 +54,6 @@ const TerminalPanel = () => {
     )
     const [isAutoScrollPaused, setIsAutoScrollPaused] = useState(false)
     let lastPos = 0
-    const panelRef = useRef(null)
     const inputRef = useRef()
     const messagesEndRef = useRef(null)
     const terminalOutput = useRef(null)
@@ -223,7 +222,7 @@ const TerminalPanel = () => {
     ]
 
     return (
-        <div class="panel panel-dashboard" id={id} ref={panelRef}>
+        <div class="panel panel-dashboard" id={id}>
             <ContainerHelper id={id}/>
             <div class="navbar">
                 <span class="navbar-section feather-icon-container">
@@ -234,12 +233,10 @@ const TerminalPanel = () => {
                     <span class="full-height">
                         <PanelMenu items={menu} />
                         <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
+                            elementId={id}
                         />
                         <CloseButton
-                            panelRef={panelRef}
-                            panelId={id}
+                            elementId={id}
                             hideOnFullScreen={true}
                         />
                     </span>
diff --git a/src/components/Toast/index.js b/src/components/Toast/index.js
index 482dba43..59e16277 100644
--- a/src/components/Toast/index.js
+++ b/src/components/Toast/index.js
@@ -53,7 +53,7 @@ const ToastsContainer = () => {
     const { toasts } = useUiContext()
     return (
         toasts.toastList && (
-            <div class="toasts-container">
+            <div class="toasts-container" >
                 {toasts.toastList.map((toast) => {
                     const { id, type, content } = toast
                     return (
diff --git a/src/contexts/UiContext.js b/src/contexts/UiContext.js
index ffbe250d..127ec1ba 100644
--- a/src/contexts/UiContext.js
+++ b/src/contexts/UiContext.js
@@ -17,7 +17,7 @@
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import { h, createContext } from "preact"
-import { useContext, useState, useRef, useEffect } from "preact/hooks"
+import { useContext, useState, useRef, useEffect, useCallback } from "preact/hooks"
 import {
     generateUID,
     removeEntriesByIDs,
@@ -35,7 +35,8 @@ const useUiContext = () => useContext(UiContext)
 const UiContextProvider = ({ children }) => {
     const [panelsList, setPanelsList] = useState([])
     const [panelsOrder, setPanelsOrder] = useState([])
-    const [visiblePanelsList, setVisiblePanelsList] = useState([])
+    const visiblePanelsListRef = useRef([]);
+    const [updateTrigger, setUpdateTrigger] = useState(0);
     const uiRefreshPaused = useRef({})
     const timersList = useRef({})
     const [initPanelsVisibles, setInitPanelsVisibles] = useState(false)
@@ -53,41 +54,46 @@ const UiContextProvider = ({ children }) => {
         authenticate: true,
         page: "connecting",
     })
-
+    const [uiSetup, setUiSetup] = useState(false)
     const toastsRef = useRef(toasts)
     toastsRef.current = toasts
     const notificationsRef = useRef(notifications)
     notificationsRef.current = notifications
 
-    const removeFromVisibles = (id) => {
-        setVisiblePanelsList(
-            visiblePanelsList.filter((element) => element.id != id)
-        )
-    }
+    const removeFromVisibles = useCallback((id) => {
+        visiblePanelsListRef.current = visiblePanelsListRef.current.filter(
+            (element) => element.id != id
+        );
+        setUpdateTrigger(prev => prev + 1);
+    }, []);
 
-    const addToVisibles = (id, fixed) => {
+    const addToVisibles = useCallback((id, fixed) => {
         if (fixed && panelsOrder.length > 0) {
             const unSortedVisiblePanelsList = [
-                ...visiblePanelsList.filter((element) => element.id != id),
+                ...visiblePanelsListRef.current.filter((element) => element.id != id),
                 ...panelsList.filter((element) => element.id == id),
-            ]
-            const sortedVisiblePanelsList = [
-                ...panelsOrder.reduce((acc, panel) => {
-                    const paneldesc = unSortedVisiblePanelsList.filter(
-                        (p) => p.settingid == panel.id
-                    )
-                    if (paneldesc.length > 0) acc.push(...paneldesc)
-                    return acc
-                }, []),
-            ]
-            setVisiblePanelsList([...sortedVisiblePanelsList])
+            ];
+            visiblePanelsListRef.current = panelsOrder.reduce((acc, panel) => {
+                const paneldesc = unSortedVisiblePanelsList.filter(
+                    (p) => p.settingid == panel.id
+                );
+                if (paneldesc.length > 0) acc.push(...paneldesc);
+                return acc;
+            }, []);
         } else {
-            setVisiblePanelsList([
+            visiblePanelsListRef.current = [
                 ...panelsList.filter((element) => element.id == id),
-                ...visiblePanelsList.filter((element) => element.id != id),
-            ])
+                ...visiblePanelsListRef.current.filter((element) => element.id != id),
+            ];
         }
-    }
+        setUpdateTrigger(prev => prev + 1);
+    }, [panelsList, panelsOrder]);
+
+    const isPanelVisible = useCallback((id) => {
+        console.log("Checking visibility for panel " + id)
+        console.log(visiblePanelsListRef.current)
+        return visiblePanelsListRef.current.some((element) => element.id == id);
+    }, []);
 
     const addToast = (newToast) => {
         const id = generateUID()
@@ -327,8 +333,10 @@ const UiContextProvider = ({ children }) => {
         play(seq)
     }
 
+
     useUiContextFn.toasts = { addToast, removeToast, toastList: toasts }
-    useUiContextFn.panels = { hide: removeFromVisibles }
+    useUiContextFn.panels = { hide: removeFromVisibles,isVisible: isPanelVisible }
+
 
     useEffect(() => {
         initAudio()
@@ -339,13 +347,18 @@ const UiContextProvider = ({ children }) => {
         panels: {
             list: panelsList,
             set: setPanelsList,
-            visibles: visiblePanelsList,
-            setVisibles: setVisiblePanelsList,
+            visibles: visiblePanelsListRef.current,
+            setVisibles: (newList) => {
+                visiblePanelsListRef.current = newList;
+                setUpdateTrigger(prev => prev + 1);
+            },
             hide: removeFromVisibles,
             show: addToVisibles,
+            isVisible: isPanelVisible,
             initDone: initPanelsVisibles,
             setInitDone: setInitPanelsVisibles,
             setPanelsOrder: setPanelsOrder,
+            updateTrigger: updateTrigger,
         },
         shortcuts: {
             enabled: isKeyboardEnabled,
@@ -382,6 +395,10 @@ const UiContextProvider = ({ children }) => {
             showKeepConnected,
             setShowKeepConnected,
         },
+        ui: {
+            ready:uiSetup,
+            setReady:setUiSetup,
+        },
     }
 
     return <UiContext.Provider value={store}>{children}</UiContext.Provider>
diff --git a/src/hooks/eventBus.js b/src/hooks/eventBus.js
new file mode 100644
index 00000000..e761097b
--- /dev/null
+++ b/src/hooks/eventBus.js
@@ -0,0 +1,80 @@
+/*
+ eventBus.js - ESP3D WebUI hooks file
+
+ Copyright (c) 2024 Luc LEBOSSE. All rights reserved.
+
+ 
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+
+/*
+ * Basic EventBus to share data between components without using context
+ *
+ */
+
+class EventBus {
+  //Constructor init listeners list
+  constructor() {
+      this.listeners = {};
+      this.listenerId = 0;
+  }
+// Listener
+on(event, callback, id = null) {
+  if (!this.listeners[event]) {
+      this.listeners[event] = [];
+  }
+
+  const listenerId = id !== null ? id : this.listenerId++;
+
+  // check if listener with this ID already exists
+  const existingListenerIndex = this.listeners[event].findIndex(listener => listener.id === listenerId);
+  if (existingListenerIndex !== -1) {
+      console.warn(`Listener with ID ${listenerId} for event ${event} already exists. Replacing.`);
+      // Replace existing listener
+      this.listeners[event][existingListenerIndex] = { id: listenerId, callback };
+  } else {
+      // Add new listener
+      this.listeners[event].push({ id: listenerId, callback });
+  }
+
+  //console.log(`Listener ${existingListenerIndex !== -1 ? 'updated' : 'added'} for event: ${event}, ID: ${listenerId}, Total listeners: ${this.listeners[event].length}`);
+  return listenerId;
+}
+
+// Remove listener from memory
+  off(event, id) {
+      if (!this.listeners[event]) return;
+      this.listeners[event] = this.listeners[event].filter(listener => listener.id !== id);
+  }
+// Emitter
+emit(event, data) {
+  //console.log(`Emitting event: ${event}`, data);
+  ////console.log(`Current listeners for ${event}:`, this.listeners[event]);
+  if (!this.listeners[event]) return;
+  this.listeners[event].forEach(listener => {
+      ////console.log(`Calling listener with ID: ${listener.id}`);
+      listener.callback(data);
+  });
+}
+// List active listeners for debugging
+  list() {
+      //console.log("Active listeners:");
+      for (const event in this.listeners) {
+          this.listeners[event].forEach(listener => {
+              //console.log(`Event: ${event}, ID: ${listener.id}`);
+          });
+      }
+  }
+}
+
+export const eventBus = new EventBus();
\ No newline at end of file
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 71bb3d57..16c0e057 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,7 +1,7 @@
 /*
  index.js - ESP3D WebUI hooks file
 
- Copyright (c) 2020 Luc Lebosse. All rights reserved.
+ Copyright (c) 2020~2024 Luc Lebosse. All rights reserved.
 
  This code is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
@@ -21,4 +21,4 @@ import { h } from "preact"
 import { useHttpQueue, useHttpFn } from "./useHttpQueue"
 import { useSettings } from "./useSettings"
 
-export { useHttpQueue, useSettings, useHttpFn }
+export { useHttpQueue, useSettings, useHttpFn}
diff --git a/src/hooks/useSettings.js b/src/hooks/useSettings.js
index 5302c165..7a2902df 100644
--- a/src/hooks/useSettings.js
+++ b/src/hooks/useSettings.js
@@ -19,7 +19,6 @@
 import { h } from "preact"
 import { useState } from "preact/hooks"
 import { webUIversion } from "../components/App/version"
-import { useSettingsContext } from "../contexts/"
 import {
     espHttpURL,
     getBrowserTime,
@@ -31,6 +30,7 @@ import {
     useUiContext,
     useRouterContext,
     useSettingsContextFn,
+    useSettingsContext
 } from "../contexts"
 import {
     baseLangRessource,
@@ -55,7 +55,7 @@ import { showModal } from "../components/Modal"
  */
 const useSettings = () => {
     const { createNewRequest } = useHttpQueue()
-    const { toasts, modals, connection, uisettings } = useUiContext()
+    const { ui, toasts, modals, connection, uisettings } = useUiContext()
     const { processData } = useTargetContextFn
     const { interfaceSettings, connectionSettings, activity } =
         useSettingsContext()
@@ -312,6 +312,8 @@ const useSettings = () => {
             })
             document.title = connectionSettings.current.Hostname
             setTimeout(initPolling, 2000)
+            console.log("Ui is ready")
+            ui.setReady(true)
         }
         function loadTheme(themepack) {
             if (!themepack) {
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index dd1c9cfc..37bdf124 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -194,6 +194,9 @@ const Dashboard = () => {
         } else {
             //console.log("Init Done")
         }
+        return () => {
+            console.log("Unmount dashboard")
+        }
     }, [])
 
     useEffect(() => {
@@ -269,7 +272,7 @@ const Dashboard = () => {
                 }, {})
 
                 if (item.target == "panel") {
-                    acc.push(ExtraPanelElement(item, "EXTRAPANEL_" + curr.id))
+                    acc.push(ExtraPanelElement(item,  curr.id))
                 }
                 return acc
             }, [])
@@ -293,7 +296,7 @@ const Dashboard = () => {
                         <span
                             class="dropdown-toggle btn tooltip tooltip-right m-1"
                             tabindex="0"
-                            style="z-index: 10000"
+                            style="z-index: 1000"
                             data-tooltip={T("S187")}
                             onclick={() => {
                                 useUiContextFn.haptic()
diff --git a/src/pages/extrapages/index.js b/src/pages/extrapages/index.js
index 06973735..ec5d94fb 100644
--- a/src/pages/extrapages/index.js
+++ b/src/pages/extrapages/index.js
@@ -18,11 +18,12 @@
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import { h } from "preact"
-import ExtraContent from "../../components/ExtraContent"
+import {ExtraContent} from "../../components/ExtraContent"
 
 const ExtraPage = ({ id, source, refreshtime, label, type }) => {
     return (
         <ExtraContent
+            key={id}
             id={id}
             label={label}
             source={source}
diff --git a/src/style/components/_app.scss b/src/style/components/_app.scss
index a94a0115..9da1d6e9 100644
--- a/src/style/components/_app.scss
+++ b/src/style/components/_app.scss
@@ -19,10 +19,7 @@ body {
     height: 100vh;
 }
 
-.menu-container,
-.information-container {
-    flex: 0 1 auto;
-}
+
 
 .flex-row-between {
     display: flex;
@@ -44,22 +41,10 @@ body {
     }
 }
 
-.toasts-container {
-    position: fixed;
-    z-index: 1000;
-    right: 0.5rem;
-    top: 0.5rem;
 
-    > .toast {
-        margin: 0.2rem 0;
-    }
-}
-:fullscreen .toasts-container{
-    top: 1.2rem;
-}
 
 .footer-container {
-    height: 3rem;
+    height: 1rem;
 }
 
 .no-box {
@@ -109,3 +94,10 @@ body {
 .modal-container {
     max-height: 95vh;
 }
+
+.page_extra {
+    height: 100%;
+    display: flex;
+    flex-direction: column; 
+}
+
diff --git a/src/style/components/_control.scss b/src/style/components/_control.scss
index 6a892afa..dcd256c0 100644
--- a/src/style/components/_control.scss
+++ b/src/style/components/_control.scss
@@ -1,5 +1,6 @@
 .image-button-bar {
     text-align: center;
+    height: 3rem;
 }
 .buttons-bar {
     display: flex;
@@ -316,11 +317,6 @@ span.input-group-addon {
     border-radius: $border-radius;
 }
 
-.image-container,
-.camera-container {
-    border: none;
-    width: 100%;
-}
 
 .m-05 {
     margin: 0.05rem !important;
@@ -333,13 +329,81 @@ span.input-group-addon {
     text-align: center;
 }
 
-.content-container,
-.extensionContainer {
+.contentContainer,
+.extensionContainer ,
+.cameraContainer,
+.imageContainer {
     border: none;
+    overflow: hidden;
+    flex: 1;
+    padding: 10px;
+}
+.cameraContainer,
+.imageContainer {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto; /* Centers the image horizontally */
+}
+.picture-container {
+    width: 100%;
+    max-height: calc(100% - 3rem);
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    object-fit: contain;
+}
+.contentContainer,
+.extensionContainer {
     height: 100%;
     width: 100%;
+    
 }
 
+.page-container {
+    display:flex;
+    flex-direction: column;
+    height: calc(100% - 1rem);
+    
+}
+.extra-content-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position:absolute;
+    z-index: 9999;
+    opacity: 1;
+    display: block;
+    pointer-events: auto!important;
+    user-select: auto!important;
+    -moz-user-select: auto!important;
+    -webkit-user-select:auto!important;
+    -ms-user-select: auto!important;
+    overflow: hidden;
+    background-color: #fff;
+}
+
+.fallback-content {
+    display: none;
+    text-align: center; font-size: 1.5rem; background-color: red; color: white; margin-top: 0.5rem;
+}
+
+.page-target-container {
+    flex:1;
+    z-index: auto;
+}
+
+.panel-target-container {
+    z-index: auto;
+    overflow: hidden;
+}
+
+
 .body-extension {
     overflow-y: auto !important;
 }
@@ -641,5 +705,22 @@ a label {
 
 
 .modals-container {
-    z-index:20000;
+    overlay: auto!important;
+    z-index:100000 !important;
+}
+
+.toasts-container {
+    position: fixed;
+    z-index: 100000 !important;
+    right: 0.5rem;
+    top: 0.5rem;
+
+    > .toast {
+        margin: 0.2rem 0;
+    }
+}
+:fullscreen .toasts-container{
+    top: 1.2rem;
+    z-index: 100000 !important;
+    overlay: auto!important;
 }
\ No newline at end of file
diff --git a/src/style/components/_menu.scss b/src/style/components/_menu.scss
index 9ff9ddf2..fa380d4c 100644
--- a/src/style/components/_menu.scss
+++ b/src/style/components/_menu.scss
@@ -37,6 +37,13 @@
     color: #5755d9;
 }
 
+.menu-container,
+.information-container {
+    flex: 0 1 auto;
+    z-index: 10000;
+    border: 0px !important;
+}
+
 .menu-item-panel{
     pointer-events: none!important;
 }