Added browse and capture mode

index.html

@@ -70,11 +70,16 @@
             </canvas>
         </div>
         <a href="index.html" id ="resetButton" class = "btn btn-danger">Reset</a>
-        <button id ="fullScreenButton" class = "btn btn-success" onclick="fullScreenCanvas();">Open XaoS in Full Screen Mode</button>
-        <input type="button" id = "fullScreenToggleButton" class = "btn btn-warning" value = "X" onclick="fullScreenMessageToggle();">
-        <p>This is a real-time fractal zoomer.  Using it is simple: left-click to zoom in, right-click to zoom out.</p>
-        <p>Touch Devices: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom out with one finger.</p>
-        <p>Please use fullscreen mode to experience full functionality</p>
+        <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>
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">

js/starter-template.js

@@ -1,24 +1,32 @@
-function fullScreenMessageToggle(){
-    if(fullScreenButton.style.visibility == "collapse"){
-        fullScreenButton.style.visibility = "visible";
+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)";
-        fullScreenToggleButton.value = "X";
+        captureMenuButton.value = "Capture Mode";
     }
     else{
-        fullScreenButton.style.visibility = "collapse";
+        browseButton.style.visibility = "collapse";
         resetButton.style.visibility = "collapse";
+        saveCanvasButton.style.visibility = "visible";
+        instructions.style.visibility = "collapse";
         containerCanvas.style.filter = "none";
-        fullScreenToggleButton.value = "<";
+        captureMenuButton.value = "Go Back";
     }
 }
 
-function fullScreenCanvas(){
-    canvas.style.visibility = "visible";
+function browseMenu(){    
     if(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");
 }

starter-template.css

@@ -5,12 +5,12 @@ body {
     padding: 40px 15px;
     text-align: center;
 }
-#fullScreenButton {
+#browseButton {
     position: absolute;
     top:1em;
-    right:3em
+    right:10em
 }
-#fullScreenToggleButton {
+#captureMenuButton {
     position: absolute;
     top:1em;
     right:1em;
@@ -19,4 +19,15 @@ body {
     position: absolute;
     top:1em;
     left:1em;
+}
+#saveCanvasButton {
+    position: absolute;
+    top:1em;
+    left:1em;
+    visibility: collapse;
+}
+#instructions {
+    position: absolute;
+    bottom:1em;
+    left: 1em;
 }