Merge branch 'overlay' into eventSender

owulveryck · Nov 15, 2023 · a4f45f9 · a4f45f9
2 parents fc8b3ca + 7910d7e
commit a4f45f9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/client/index.html b/client/index.html
@@ -23,13 +23,19 @@
 						</button></li>
 						<li><button id="screenshotButton" class="apple-button">Screenshot</button><a id="screenshot"></a></li>
 						<li><button id="pointerButton" class="apple-button">Pointer</button></a></li>
+						<li><button id="switchOrderButton" class="apple-button">Mask drawing</button><a id="switch"></a></li>
 				</ul>
 			</div>
 		</div>
 		<div id="container">
+<<<<<<< HEAD
 			<canvas id="canvas" width="1872" height="1404"></canvas>
 			<canvas id="canvasPresent" width="1872" height="1404"></canvas>
 			<iframe id="content" allowfullscreen="true" frameborder="0" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
+=======
+			<canvas id="canvas" width="1872" height="1404" style="position: absolute; z-index: 2;"></canvas>
+			<iframe id="content" allowfullscreen="true" frameborder="0" style="position: absolute; z-index: 1;" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
+>>>>>>> overlay
 		</div>
 		<!--<iframe id="content" src="https://docs.google.com/presentation/d/e/2PACX-1vQoU3OkrD499XPCjI1kl18dci2Um6eqCkZlKCMJaCVaUkonu6NOWZkLgDOdpTyJwLJlyZ9Yf8SAMTdE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>-->
 

diff --git a/client/main.js b/client/main.js
@@ -4,6 +4,7 @@ const height = 1404;
 const rawCanvas = new OffscreenCanvas(width, height); // Define width and height as needed
 const visibleCanvas = document.getElementById("canvas");
 const canvasPresent = document.getElementById("canvasPresent");
+const iFrame = document.getElementById("content");
 
 // Initialize the worker
 const worker = new Worker('worker_stream_processing.js');

diff --git a/client/style.css b/client/style.css
@@ -15,11 +15,16 @@ body, html {
 }
 
 #canvas {
-	position: fixed;
+	position: absolute;
 	max-width: 100%;
 	max-height: 100%;
+	z-index: 2;
 }
 
+#content {
+	position: absolute;
+	z-index: 1;
+}
 canvas.hidden {
 	display: none;
 }
@@ -39,7 +44,7 @@ canvas.hidden {
 	top: 0;
 	left: -140px;
 	transition: left 0.3s;
-	z-index: 2;
+	z-index: 3;
 
 }
 

diff --git a/client/uiInteractions.js b/client/uiInteractions.js
@@ -33,3 +33,12 @@ sidebar.addEventListener('mouseout', function() {
 // Resize the canvas whenever the window is resized
 window.addEventListener("resize", resizeVisibleCanvas);
 resizeVisibleCanvas();
+
+document.getElementById('switchOrderButton').addEventListener('click', function() {
+	// Swap z-index values
+	var temp = iFrame.style.zIndex;
+	iFrame.style.zIndex = visibleCanvas.style.zIndex;
+	visibleCanvas.style.zIndex = temp;
+});
+
+