Michel2/image2cpp
1
0
Fork 0
mirror of https://github.com/javl/image2cpp.git synced 2026-09-12 09:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update numerical inputs to "number" type

Browse Source 
-Better numerical input experience with scrolling and ranges
-Makes it easier to adjust the brightness threshold
This commit is contained in:
davidalim
2018-01-14 00:57:29 -08:00
parent 9905389eb9
commit 7159e45cce
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -5
View File
@@ -149,8 +149,8 @@
<h2 class="sub-section-title">1. Paste byte array</h2> <h2 class="sub-section-title">1. Paste byte array</h2>
<textarea id="byte-input" class="byte-input"></textarea><br /> <textarea id="byte-input" class="byte-input"></textarea><br />
<div class="text-input-size"> <div class="text-input-size">
<input type="text" id="text-input-width" class="size-input" value="128" /> x <input type="number" min="0" 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-height" class="size-input" value="64" /> px
</div> </div>
<button onclick="handleTextInput('horizontal')">Read as horizontal</button> <button onclick="handleTextInput('horizontal')">Read as horizontal</button>
<button onclick="handleTextInput('vertical')">Read as vertical</button> <button onclick="handleTextInput('vertical')">Read as vertical</button>
@@ -188,7 +188,7 @@
<div class="table-row"> <div class="table-row">
<div class="table-cell"><label>Brightness threshold: </label></div> <div class="table-cell"><label>Brightness threshold: </label></div>
<div class="table-cell"> <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 class="note"><i>0 - 255; pixels with brightness above become white, below become black.</i></div>
</div> </div>
</div> </div>
@@ -614,15 +614,17 @@
imageEntry.setAttribute('data-img', file.name); imageEntry.setAttribute('data-img', file.name);
var w = document.createElement('input'); var w = document.createElement('input');
w.type = "text"; w.type = "number";
w.name = "width"; w.name = "width";
w.min = 0;
w.className = "size-input"; w.className = "size-input";
w.value = img.width; w.value = img.width;
w.oninput = function() { canvas.width = this.value; update(); }; w.oninput = function() { canvas.width = this.value; update(); };
var h = document.createElement('input'); var h = document.createElement('input');
h.type = "text"; h.type = "number";
h.name = "height"; h.name = "height";
h.min = 0;
h.className = "size-input"; h.className = "size-input";
h.value = img.height; h.value = img.height;
h.oninput = function() { canvas.height = this.value; update(); }; h.oninput = function() { canvas.height = this.value; update(); };