mirror of
https://github.com/javl/image2cpp.git
synced 2026-07-27 19:56:07 +00:00
128 lines
5.6 KiB
HTML
128 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>image2cpp</title>
|
|
<style type="text/css">
|
|
body{
|
|
font-family: arial;
|
|
}
|
|
.wrapper{
|
|
width: 800px;
|
|
margin: auto;
|
|
}
|
|
.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: 3px;
|
|
background-color: black;
|
|
border: none;
|
|
}
|
|
img.inlineImg{
|
|
display: inline-block;
|
|
}
|
|
textarea.fullWidth{
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
table{
|
|
width: 100%;
|
|
}
|
|
h1{
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<h1>image2cpp</h1>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h2>1. Select image</h2>
|
|
<input type="file" id="fileInput" name="fileinput"/><br />
|
|
<label>Selected image size:</label> <span id="imageSize">no image selected</span>
|
|
</h4>
|
|
<td class="or">or</td>
|
|
<td>
|
|
<h2>1. Paste byte array</h2>
|
|
<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>
|
|
<h2>2. Image Settings</h2>
|
|
<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, keeping proportions</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 only works 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>
|
|
<h2>3. Preview</h2>
|
|
<canvas id="imageCanvas" style="border: 1px solid black;" width="128" height="64"></canvas>
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<p>
|
|
<h2>4. Output</h2>
|
|
<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>
|
|
|