From 7159e45cce8bd18e475b5fe1bb583e053a06cece Mon Sep 17 00:00:00 2001
From: davidalim <14.d.lim@gmail.com>
Date: Sun, 14 Jan 2018 00:40:18 -0800
Subject: [PATCH] Update numerical inputs to "number" type

-Better numerical input experience with scrolling and ranges
-Makes it easier to adjust the brightness threshold
---
 index.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 960dabe..7c66d93 100644
--- a/index.html
+++ b/index.html
@@ -149,8 +149,8 @@
 					<h2 class="sub-section-title">1. Paste byte array</h2>
 					<textarea id="byte-input" class="byte-input"></textarea><br />
 					<div class="text-input-size">
-						<input type="text" id="text-input-width" class="size-input" value="128" /> x
-						<input type="text" id="text-input-height" class="size-input" value="64" /> px
+						<input type="number" min="0" id="text-input-width" class="size-input" value="128" /> x
+						<input type="number" min="0" id="text-input-height" class="size-input" value="64" /> px
 					</div>
 					<button onclick="handleTextInput('horizontal')">Read as horizontal</button>
 					<button onclick="handleTextInput('vertical')">Read as vertical</button>
@@ -188,7 +188,7 @@
 					<div class="table-row">
 						<div class="table-cell"><label>Brightness threshold: </label></div>
 						<div class="table-cell">
-							<input id="threshold" class="size-input" type="text" name="threshold" onchange="updateInteger('threshold')" value="128"/>
+							<input id="threshold" class="size-input" type="number" min="0" max="255" name="threshold" oninput="updateInteger('threshold')" value="128"/>
 							<div class="note"><i>0 - 255; pixels with brightness above become white, below become black.</i></div>
 						</div>
 					</div>
@@ -614,15 +614,17 @@
 							imageEntry.setAttribute('data-img', file.name);
 
 							var w = document.createElement('input');
-							w.type = "text";
+							w.type = "number";
 							w.name = "width";
+							w.min = 0;
 							w.className = "size-input";
 							w.value = img.width;
 							w.oninput = function() { canvas.width = this.value; update(); };
 
 							var h = document.createElement('input');
-							h.type = "text";
+							h.type = "number";
 							h.name = "height";
+							h.min = 0;
 							h.className = "size-input";
 							h.value = img.height;
 							h.oninput = function() { canvas.height = this.value; update(); };