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

Adds Arduino example, updates script

Browse Source
This commit is contained in:
javl
2016-01-22 15:43:55 +01:00
parent df6977d002
commit 20ba5c40ec
3 changed files with 101 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+14 -9
View File
@@ -9,6 +9,7 @@
}
.wrapper{
width: 800px;
margin: auto;
}
.numberInput{
width: 50px;
@@ -32,7 +33,7 @@
/*vertical-align: center;*/
}
hr{
height: 1px;
height: 3px;
background-color: black;
border: none;
}
@@ -46,21 +47,25 @@
table{
width: 100%;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>image2cpp</h1>
<p>
<table>
<tr>
<td>
<h3>Select image</h3>
<h2>1. Select image</h2>
<input type="file" id="fileInput" name="fileinput"/><br />
<label>Selected image size:</label> <span id="imageSize">-</span>
<label>Selected image size:</label> <span id="imageSize">no image selected</span>
</h4>
<td class="or">or</td>
<td>
<h3>Paste text</h3>
<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>
@@ -71,7 +76,7 @@
<hr />
<p>
<h3>Image Settings</h3>
<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>
@@ -80,7 +85,7 @@
<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="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>
@@ -88,21 +93,21 @@
<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 />
<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>
<h3>Preview</h3>
<h2>3. Preview</h2>
<canvas id="imageCanvas" style="border: 1px solid black;" width="128" height="64"></canvas>
</p>
<hr />
<p>
<h3>Output</h3>
<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 />