First version of the tool

2026-07-28 04:05:35 +00:00 · 2016-01-22 15:04:54 +01:00
parent bdcc557070
commit 2a635f471b
3 changed files with 553 additions and 0 deletions
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>image2cpp</title>
+    <style type="text/css">
+        body{
+            font-family: arial;
+        }
+        .wrapper{
+            width: 800px;
+        }
+        .numberInput{
+            width: 50px;
+        }
+        label{
+            width: 220px;
+            display: inline-block;
+            font-weight: bold;
+        }
+        label.smallLabel{
+            width: auto;
+        }
+        td{
+            text-align: left;
+            vertical-align: top;
+        }
+        td.or{
+            padding: 20px;
+            width: 100px;
+            font-size: 30px;
+            /*vertical-align: center;*/
+        }
+        hr{
+            height: 1px;
+            background-color: black;
+            border: none;
+        }
+        img.inlineImg{
+            display: inline-block;
+        }
+        textarea.fullWidth{
+            width: 100%;
+            height: 100px;
+        }
+        table{
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrapper">
+        <p>
+        <table>
+            <tr>
+                <td>
+                    <h3>Select image</h3>
+                    <input type="file" id="fileInput" name="fileinput"/><br />
+                    <label>Selected image size:</label> <span id="imageSize">-</span>
+                </h4>
+                <td class="or">or</td>
+                <td>
+                    <h3>Paste text</h3>
+                    <textarea id="textInput" class="fullWidth"></textarea><br />
+                    <button onclick="handleTextInput('horizontal')">Read as horizontal</button>
+                    <button onclick="handleTextInput('vertical')">Read as vertical</button>
+                </td>
+            </tr>
+        </table>
+        </p>
+        <hr />
+
+        <p>
+            <h3>Image Settings</h3>
+            <label>Canvas size: </label> <input id="screenWidth" class="numberInput" type="text" name="screenWidth" onchange="updateInteger('screenWidth')" value="128"/> * <input id="screenHeight" class="numberInput" type="text" name="screenHeight" onchange="updateInteger('screenHeight')" value="64"/> pixels<br />
+            <label>Background color:</label>
+            <input id="backgroundColorWhite" type="radio" name="backgroundColor" value="white" checked="checked" onchange="updateRadio('backgroundColor')"/><label for="backgroundColorWhite" class="smallLabel">White</label>
+            <input id="backgroundColorBlack" type="radio" name="backgroundColor" value="black" onchange="updateRadio('backgroundColor')"/><label for="backgroundColorBlack" class="smallLabel">Black</label><br />
+            <label>Brightness threshold: </label> <input id="threshold" class="numberInput" type="text" name="threshold" onchange="updateInteger('threshold')" value="128"/> <i>0 - 255; pixels with brightness above become white, below become black.</i><br/>
+            <label for="scale">Scaling</label>
+            <select id="scale" name="scale" onchange="updateInteger('scale')">
+                <option value="1">original size</option>
+                <option value="2">scale to fit canvas</option>
+                <option value="3">stretch to fill canvas</option>
+                <option value="4">stretch to fill canvas horizontally</option>
+                <option value="5">stretch to fill canvas vertically</option>
+            </select><br />
+
+            <label for="centerHorizontally">Center horizontally</label><input id="centerHorizontally" type="checkbox" onchange="updateBoolean('centerHorizontally')" /><br />
+            <label for="centerVertically">Center vertically</label><input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" /><br />
+            <i>Centering the image is only relevant when using a canvas larger than the selected image.</i><br />
+            <label for="invertColors">Invert image colors</label><input id="invertColors" type="checkbox" onchange="updateBoolean('invertColors')" />
+        </p>
+
+        <hr />
+
+        <p>
+            <h3>Preview</h3>
+            <canvas id="imageCanvas" style="border: 1px solid black;" width="128" height="64"></canvas>
+        </p>
+
+        <hr />
+
+        <p>
+            <h3>Output</h3>
+            <label for="addArduinoCode">Add Arduino code</label><input id="addArduinoCode" type="checkbox" onchange="updateBoolean('addArduinoCode')" /><br />
+            <i>Adds some extra Arduino code around the output for easy copy-paste into <a href="#" target="_blank">this example</a>.</i><br />
+            <br />
+            <label>Draw mode:</label>
+            <input id="drawModeHorizontal" type="radio" name="drawMode" value="horizontal" checked="checked" onchange="updateRadio('drawMode')"/><label for="drawModeHorizontal" class="smallLabel">Horizontal</label>
+            <input id="drawModeVertical" type="radio" name="drawMode" value="vertical" onchange="updateRadio('drawMode')"/><label for="drawModeVertical" class="smallLabel">Vertical</label><br />
+            <i>If your image looks all messed up on your display, like the image below, try the other mode.</i><br />
+            <br />
+            <img class="inlineImg" src="img/error.jpg" width="150" height="64" alt="" /><br /><br />
+            <button type="button" onclick="outputString()">Generate code</button><br /><br />
+            <textarea id="outputField" class="fullWidth"></textarea>
+        </p>
+    </div>
+    <script type="text/javascript" src="script.js"></script>
+</body>
+</html>
+