mirror of
https://github.com/javl/image2cpp.git
synced 2026-07-27 19:56:07 +00:00
Adds Arduino example, updates script
This commit is contained in:
javl
+14
-9
@@ -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 />
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
/*********************************************************************
|
||||
This is an example for Adafuit's Monochrome OLEDs based on SSD1306 drivers
|
||||
|
||||
Pick one up today in the adafruit shop!
|
||||
------> http://www.adafruit.com/category/63_98
|
||||
|
||||
This example is for a 128x64 size display using I2C to communicate
|
||||
3 pins are required to interface (2 I2C and one reset)
|
||||
|
||||
Adafruit invests time and resources providing this open source code,
|
||||
please support Adafruit and open-source hardware by purchasing
|
||||
products from Adafruit!
|
||||
|
||||
Written by Limor Fried/Ladyada for Adafruit Industries.
|
||||
BSD license, check license.txt for more information
|
||||
All text above, and the splash screen must be included in any redistribution
|
||||
*********************************************************************/
|
||||
|
||||
#include <SPI.h>
|
||||
#include <Wire.h>
|
||||
#include <Adafruit_GFX.h>
|
||||
#include <Adafruit_SSD1306.h>
|
||||
|
||||
#define OLED_RESET 4
|
||||
Adafruit_SSD1306 display(OLED_RESET);
|
||||
|
||||
#if (SSD1306_LCDHEIGHT != 64)
|
||||
#error("Height incorrect, please fix Adafruit_SSD1306.h!");
|
||||
#endif
|
||||
const unsigned char myBitmap [] PROGMEM = {
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38,
|
||||
0x0f, 0xbe, 0xf7, 0xc0, 0x00, 0x00, 0x01, 0xc0, 0x02, 0x20, 0x81, 0x00, 0x00, 0x00, 0x01, 0xc0,
|
||||
0x02, 0x3e, 0xf1, 0x00, 0x00, 0x00, 0x01, 0xc0, 0x02, 0x20, 0x11, 0x00, 0x00, 0x00, 0x0e, 0x00,
|
||||
0x02, 0x20, 0x11, 0x00, 0x00, 0x00, 0x0e, 0x00, 0x02, 0x3e, 0xf1, 0x00, 0x00, 0x00, 0x0e, 0x00,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x70, 0x00,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00,
|
||||
0x00, 0x00, 0x00, 0x07, 0xfe, 0x03, 0x80, 0x00, 0x0f, 0xfe, 0x00, 0x08, 0x01, 0x03, 0x80, 0x00,
|
||||
0x0f, 0xfe, 0x00, 0x14, 0x02, 0x80, 0x70, 0x00, 0x0f, 0xfe, 0x00, 0x12, 0x04, 0x80, 0x70, 0x00,
|
||||
0x0e, 0x0e, 0x00, 0x11, 0x08, 0x80, 0x70, 0x00, 0x0e, 0x0e, 0x00, 0x10, 0xf0, 0x80, 0x0e, 0x00,
|
||||
0x0e, 0x0e, 0x00, 0x10, 0x90, 0x80, 0x0e, 0x00, 0x0e, 0x0e, 0x00, 0x10, 0x90, 0x80, 0x0e, 0x00,
|
||||
0x0f, 0xfe, 0x00, 0x10, 0xf0, 0x80, 0x01, 0xc0, 0x0f, 0xfe, 0x00, 0x11, 0x08, 0x80, 0x01, 0xc0,
|
||||
0x0f, 0xfe, 0x00, 0x12, 0x04, 0x80, 0x01, 0xc0, 0x0e, 0x0e, 0x00, 0x14, 0x02, 0x80, 0x00, 0x38,
|
||||
0x0e, 0x0e, 0x00, 0x08, 0x01, 0x00, 0x00, 0x38, 0x0e, 0x0e, 0x00, 0x07, 0xfe, 0x00, 0x00, 0x38,
|
||||
0x0e, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07,
|
||||
0x0e, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0x0e, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
|
||||
|
||||
};
|
||||
void setup() {
|
||||
// by default, we'll generate the high voltage from the 3.3v line internally! (neat!)
|
||||
display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // initialize with the I2C addr 0x3D (for the 128x64)
|
||||
// If the screen doesn't update, try using 0x3C instead
|
||||
|
||||
display.clearDisplay(); // Make sure the display is cleared
|
||||
// Draw the bitmap:
|
||||
// drawBitmap(x position, y position, bitmap data, bitmap width, bitmap height, color)
|
||||
display.drawBitmap(0, 0, myBitmap, 64, 64, WHITE);
|
||||
|
||||
// Update the display
|
||||
display.display();
|
||||
}
|
||||
|
||||
|
||||
void loop() {
|
||||
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user