- 
-
+
- image2cpp is a simple tool to convert images into byte arrays (and vice versa) for use with small (monochrome) displays such as OLEDs on your Arduino or ESP.
+ It was originally made to work with the Adafruit OLED library (for which your can find an example Arduino sketch here) but
+ has been expanded by the community.
-
- or
-
-
-
+
+
+
+
+
+
+
1. Paste byte array
--
- x
- px
-
-
-
-
-
- Read images appear at step 3 below
+
+
- More info (and credits) can be found in the Github repository. This is also where you can report any issues you might come across.
++ Did you find this tool useful? Feel free to support my open source software on Github, especially if used commercially. +
+
+ 
+
+
+ 1. Select image
+You can import multiple images at once.
All processing is done locally in your browser: your images are not uploaded or stored anywhere online.
+ All processing is done locally in your browser: your images are not uploaded or stored anywhere online.
+
Only images file type are allowed
+
+
+
+ ![]()
+
+
+
+
+ Add more images or continue to step 2
+
+
+
+
+ 1. Paste existing byte array
++
+ x
+ px
+
+
+
+
+
+
+
+ Byte array is invalid (or empty).
+ If your image looks glitchy try changing the dimensions above and press the read button again.
Read images also appear at step 3 below for further processing.
+ Read images also appear at step 3 below for further processing.
+
+
-
2. Image Settings
+
-
+
+
+
+
+
+ Glyph name is used to identify the image in the output code.
+
+ Only images file type are allowed
- No files selected
+
+
+ ![]()
+
+
+
+ Canvas size:
+
+ x
+
+
+
+ glyph name:
+
+
+ Select one or more images at step 1 first.
-
+
+
+
Used for parts of the canvas that are not covered by your image.
+
@@ -81,35 +144,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead.
-
-
+
-
+
+
-
-
+
+
+
+
-
+
@@ -165,40 +227,67 @@
-
-
+
+
-
+
-
+
+
Centering the image only works when using a canvas larger than the original image.
+
@@ -132,12 +170,36 @@
-
+
+
- Centering the image only works when using a canvas larger than the original image.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pixels with brightness above threshold turn white, below turn black (opaque/transparent for alpha mode).
+
+
+
+
@@ -147,7 +209,7 @@
-
+
3. Preview
+Preview
+Click image to view at actual size
No files selected
+ No files selected
4. Output
+3. Output
-
+
+
+
+
+
+
+
+
+ If your image looks all messed up on your display, like the image below, try using a different mode.
+
+
+
+
+
+
+
@@ -230,49 +333,38 @@
+
@@ -222,7 +311,21 @@
+ Outputs just the raw bytes of the image(s).
+
- Adds some extra Arduino code around the output for easy copy-paste into
- this example.
- If multiple images are loaded, generates a byte array for each and appends a counter to the identifier.
+ Adds some extra Arduino code around the output.
+ If multiple images are loaded, generates a byte array for each and appends its glyph name (from step 2 above) to the identifier.
- Adds some extra Arduino code around the output for easy copy-paste.
- If multiple images are loaded, generates a single byte array.
+ Adds some extra Arduino code around the output.
+ If multiple images are loaded, generates a single byte array.
- Creates a
First ASCII character value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph.
@@ -208,13 +297,13 @@
GFXbitmapFont formatted ouput. Used by a modified version of the Adafruit GFX library.
- GitHub project and example here.
+ Creates a GFXbitmapFont formatted ouput. Used by a modified version of the Adafruit GFX library.
+ GitHub project and example here.
First ASCII character value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph.
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- If your image looks all messed up on your display, like the image below, try using a different mode.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Useful when working with the u8g2 library.
-
-
+
@@ -281,12 +373,53 @@
-
-
+
+
+
+
+
+
+
+ MSB -> LSB. Useful when working with the u8g2 library.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set to 0 to wrap using the image's width instead, e.g. an 8px wide image adds a newline every 8th byte.
+
+
+
+
+ Add an ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row".
+
+
Select one or more images at step 1 first.