One Screen View

xaos-project · May 12, 2020 · 6899d1d · 6899d1d
1 parent e4daa54
commit 6899d1d
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 75 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -61,25 +61,23 @@
 	</div>
 </nav>
 
-<div class="container-fluid">
-    <div class="container-overlay">
-        <div id="containerCanvas">
-            <canvas id="canvas">
-                <p>Your browser doesn't seem to support the &lt;canvas&gt; tag.
-                    Try <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://firefox.com">Firefox</a>.</p>
-            </canvas>
-        </div>
-        <a href="index.html" id ="resetButton" class = "btn btn-danger">Reset</a>
-        <input type="button" id = "browseButton" class = "btn btn-success" value = "Browse Mode" onclick="browseMenu()">
-        <input type="button" id = "captureMenuButton" class = "btn btn-info" value = "Capture Mode" onclick="captureMenu()">
-        <a href="#" id = "saveCanvasButton" class = "btn btn-success" download="image.png" onclick="saveCanvas()">Capture</a>
-        <div id = "instructions">
-            <p style="font-weight: bold;">Instructions</p>
-            <p>Click on "Browse Mode" to perform zoom</p>
-            <p>Click on "Capture Mode" to export canvas as image</p>
-            <p>Mouse Users: Left-click to zoom in, right-click to zoom out</p>
-            <p>Touch Device Users: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom with one finger.</p>
-        </div>
+<div class="container">
+    <canvas id="canvas">
+        <p>Your browser doesn't seem to support the &lt;canvas&gt; tag.
+            Try <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://firefox.com">Firefox</a>.</p>
+    </canvas>
+    <div id="controls">
+      <button id ="fullScreenButton" class = "btn btn-primary" onclick="goFullScreen();"></button>
+      <a href="index.html" id ="resetButton" class = "btn btn-danger">Reset</a>
+      <a href="#" id = "saveCanvasButton" class = "btn btn-primary" download="image.png" onclick="saveCanvas()">Capture</a><br/>
+    </div>
+    <div id = "instructions">
+        <u style="font-weight: bold;">Instructions</u><br/>
+        <strong>Click on "Browse Mode" to perform zoom</strong><br/>
+        <strong>Click on "Capture Mode" to export canvas as image</strong><br/>
+        <strong>Mouse Users: Left-click to zoom in, right-click to zoom out</strong><br/>
+        <strong>Touch Device Users: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom with one finger.</strong>
+    </div>
     </div>
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">

diff --git a/js/starter-template.js b/js/starter-template.js
@@ -1,32 +1,12 @@
-function captureMenu(){
-    if(browseButton.style.visibility == "collapse"){
-        browseButton.style.visibility = "visible";
-        resetButton.style.visibility = "visible";
-        saveCanvasButton.style.visibility = "collapse";
-        instructions.style.visibility = "visible";
-        containerCanvas.style.filter = "blur(5px)";
-        captureMenuButton.value = "Capture Mode";
-    }
-    else{
-        browseButton.style.visibility = "collapse";
-        resetButton.style.visibility = "collapse";
-        saveCanvasButton.style.visibility = "visible";
-        instructions.style.visibility = "collapse";
-        containerCanvas.style.filter = "none";
-        captureMenuButton.value = "Go Back";
-    }
-}
-
-function browseMenu(){    
+function saveCanvas(){
+    saveCanvasButton.download = "image.png";
+    saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
+  }
+  function goFullScreen() {
     if(canvas.requestFullScreen)    
-        canvas.requestFullScreen();
+    canvas.requestFullScreen();
     else if(canvas.webkitRequestFullScreen)
         canvas.webkitRequestFullScreen();
     else if(canvas.mozRequestFullScreen)
         canvas.mozRequestFullScreen();
-}
-
-function saveCanvas(){
-    saveCanvasButton.download = "image.png";
-    saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
-}
+  }
diff --git a/js/xaos.js b/js/xaos.js
@@ -82,12 +82,13 @@ xaos.zoom = (function() {
      * @constructor
      */
     function CanvasImage(canvas) {
-
-        if (canvas.width !== innerWidth || canvas.height !== innerHeight) {
-            canvas.width = innerWidth;
-            canvas.height = innerHeight;
+        let width = canvas.clientWidth;
+        let height = canvas.clientHeight;
+        if (canvas.width !== width || canvas.height !== height) {
+            canvas.width = width;
+            canvas.height = height;
         } else {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.clearRect(0, 0, width, height);
         }
 
         this.canvas = canvas;
@@ -1268,7 +1269,6 @@ xaos.zoom = (function() {
         };
 
         canvas.ontouchend = function(e) {
-            console.log(e);
             var mouseEvent = new MouseEvent("mouseup", {});
             canvas.dispatchEvent(mouseEvent);
         };

diff --git a/starter-template.css b/starter-template.css
@@ -1,33 +1,48 @@
 body {
     padding-top: 75px;
+    padding-bottom: 20px;
 }
 .starter-template {
     padding: 40px 15px;
     text-align: center;
 }
-#browseButton {
+#controls {
+    position: relative;
+    margin-bottom: 2.5em;
+  }
+
+  #canvas {
+    width: 100%;
+    height: 100vh;
+    margin-bottom: 0.5em;
+  }
+
+  #fullScreenButton {
     position: absolute;
-    top:1em;
-    right:10em
-}
-#captureMenuButton {
-    position: absolute;
-    top:1em;
-    right:1em;
-}
-#resetButton {
+    height: 100vh;
+    width: 100%;
+    bottom: 3rem;
+    visibility: hidden;
+  }
+
+  @media only screen and (max-width: 600px) {
+    #fullScreenButton {
+      visibility: visible;
+      opacity: 0;
+    }
+    #saveCanvasButton {
+      visibility: hidden;
+    }
+  }
+
+  #resetButton {
     position: absolute;
-    top:1em;
-    left:1em;
-}
-#saveCanvasButton {
-    position: absolute;
-    top:1em;
-    left:1em;
-    visibility: collapse;
-}
-#instructions {
+    left: 0em;
+  }
+
+  #saveCanvasButton {
     position: absolute;
-    bottom:1em;
-    left: 1em;
-}
+    right: 0.1em;
+    color: white;
+    visibility: visible;
+  }