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

Update pages

Browse Source
This commit is contained in:
javl
2016-01-22 15:46:51 +01:00
parent 4ca3c46b40
commit 3b3cdb8f8c
2 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15 -10
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,23 +93,23 @@
<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 />
<i>Adds some extra Arduino code around the output for easy copy-paste into <a href="https://github.com/javl/image2cpp/blob/master/oled_example/oled_example.ino" 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>
script.js
+5 -6
View File
@@ -68,11 +68,7 @@ function blackAndWhite(){
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i +1] + data[i +2]) / 3;
if (settings['invertColors']){
avg > settings['threshold'] ? avg = 0 : avg = 255;
}else{
avg > settings['threshold'] ? avg = 255 : avg = 0;
}
avg > settings['threshold'] ? avg = 255 : avg = 0;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
@@ -101,7 +97,7 @@ function place_image(){
canvas.width = settings['screenWidth'];
canvas.height = settings['screenHeight'];
// Invert colors if needed
// Invert background if needed
if (settings['invertColors']){
settings['backgroundColor'] == 'white' ? ctx.fillStyle = 'black' : ctx.fillStyle = 'white';
}else{
@@ -149,6 +145,9 @@ function place_image(){
}
// Make sure the image is black and white
blackAndWhite();
if(settings['invertColors']){
invert();
}
}