Improve styling and improve input processing

petetetete · Jul 6, 2017 · 35f460b · 35f460b
1 parent 4cec2e6
commit 35f460b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -66,13 +66,28 @@
             .option > label {
                 display: block;
             }
+            .button {
+                font-size: 1.5em;
+                margin: 5px 0 15px 0;
+                font-family: Roboto Condensed;
+            }
+
+            @media (max-width: 768px) {
+                .image-container {
+                    flex-direction: column;
+                }
+                .image:nth-child(1) {
+                    border-right: 4px solid #424242;
+                    border-bottom: none;
+                }
+            }
         </style>
     </head>
     <body>
         <div class="image-container">
             <div class="image">
                 <!-- https://upload.wikimedia.org/wikipedia/commons/f/f0/Valve_original_%281%29.PNG -->
-                <img id="img-start" src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Valve_original_%281%29.PNG" crossorigin="anonymous" />
+                <img id="img-start" src="images/valve.png" crossorigin="anonymous" />
             </div>
             <div class="image">
                 <canvas id="canvas"></canvas>
@@ -86,15 +101,15 @@
             </div>
             <div class="option">
                 <label class="">Blur Radius (Sigma)</label>  
-                <input id="sigma" type="number" value="5" />
+                <input id="sigma" type="number" value="8" />
             </div>
             <div class="option">
                 <label>X-Axis Edge Width</label>  
-                <input id="edge-width" type="number" value="100" />
+                <input id="edge-width" type="number" value="75" />
             </div>
             <div class="option">
                 <label>Y-Axis Edge Height</label>  
-                <input id="edge-height" type="number" value="100" />
+                <input id="edge-height" type="number" value="75" />
             </div>
             <div class="option">
                 <label>Grayscale Blur</label>
@@ -108,7 +123,7 @@
                 <input id="img-url" type="text" placeholder="Set custom image url" />
             </div>
 
-            <button id="blur" style="font-size:1.5em;margin:5px 0 15px 0;">Blur!</button>
+            <button id="blur" class="button">Blur!</button>
 
             <div id="time"></div>
         </div>

diff --git a/js/main.js b/js/main.js
@@ -48,18 +48,18 @@ function createConvolution(rad, sig) {
 
 
 radius.onchange = function(e) {
-    rad = Math.max(0, parseInt(e.target.value));
+    rad = Math.max(0, parseInt(e.target.value || 0));
     conv = createConvolution(rad, sig);
 }
 sigma.onchange = function(e) {
-    sig = Math.max(0, parseFloat(e.target.value));
+    sig = Math.max(0, parseFloat(e.target.value || 0));
     conv = createConvolution(rad, sig);
 }
 edgeWidth.onchange = function(e) {
-    edgeW = Math.max(0, parseInt(e.target.value));
+    edgeW = Math.max(0, parseInt(e.target.value || 0));
 }
 edgeHeight.onchange = function(e) {
-    edgeH = Math.max(0, parseInt(e.target.value));
+    edgeH = Math.max(0, parseInt(e.target.value || 0));
 }
 imgUrl.onchange = function(e) {
     img.src = e.target.value;
@@ -137,35 +137,6 @@ button.onclick = function() {
 
     }
 
-
-    // Black and white Gaussian
-    /*for (let y1 = 0; y1 < h; y1++) {
-        for (let x1 = 0; x1 < w; x1++) {
-
-            let sum = 0;
-            let totalNum = 0;
-
-            for (let y2 = Math.max(0, y1 - rad), end1 = Math.min(h, y1 + rad + 1); y2 < end1; y2++) {
-                for (let x2 = Math.max(0, x1 - rad), end2 = Math.min(w, x1 + rad + 1); x2 < end2; x2++) {
-
-                    let start = 4 * (w*y2 + x2);
-
-                    sum += (tmpPx[start] + tmpPx[start + 1] + tmpPx[start + 2]) / 3;
-
-                    totalNum++;
-
-                }
-            }
-
-            let start = 4 * (w*y1 + x1);
-            let avg = sum / totalNum;
-            px[start] = avg;
-            px[start + 1] = avg;
-            px[start + 2] = avg;
-
-        }
-    }*/
-
     // Log generation time
     let t2 = performance.now();
     times.push(Math.floor(t2-t1));