When I was making a code to show a menu on an Arduino OLED screen, I needed to convert pictures to a specific format for showing it on the screen. I’m sure there may be another easier way to do it easy, but this is the way I found.
For converting the pictures to XBM we need to use the convertio.co website. I don’t like too much because it has a limit of 10 pictures per day, but it’s the website that convert the pictures with less graphics mistakes.
We can import a PNG picture and export to XBM file, first we must edit our picture to have the specific resolution we need. I’m using icons with a resolution of 14×14 px.
For example, if we import this image (14×14 px the first one, and 96×96 px the second one to allow you to see it!) :
We will receive this as result:
|
1 2 3 4 5 6 7 8 9 |
#define 6cbbffc2ba73415ecbbf3464ca5d9717BHWicX19vwTnG5Z0_width 14 #define 6cbbffc2ba73415ecbbf3464ca5d9717BHWicX19vwTnG5Z0_height 14 static char 6cbbffc2ba73415ecbbf3464ca5d9717BHWicX19vwTnG5Z0_bits[] = { 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0xE0, 0x05, 0xBF, 0x1C, 0xA0, 0x30, 0xE0, 0x27, 0xA0, 0x27, 0xA8, 0x20, 0xBF, 0x1B, 0xE0, 0x06, 0x40, 0x00, 0x00, 0x00, 0x00, 0x00 }; |
This is how it looks on the screen:
This is how the code looks like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
#include <Wire.h> #include <U8g2lib.h> U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R2, U8X8_PIN_NONE); const unsigned char icon[] U8X8_PROGMEM = { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x07, 0xbf, 0x18, 0xa0, 0x30, 0xa0, 0x27, 0xa0, 0x27, 0xa0, 0x30, 0xbf, 0x18, 0xe0, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 }; void setup() { u8g2.begin(); u8g2.firstPage(); do{ u8g2.drawXBMP(5, 5, 14, 14, icon); } while( u8g2.nextPage() ); } void loop() { } |
Sometimes the picture can have some problem. I found another software that allows us to edit the XBM files in our computer. The Simple xbm Image Editor app is made in Python so we will need to install Python in our computer if we don’t have it yet.
With this software we can import the picture, adding or removing the wrong pixels and after that exporting it again as an XBM file.
Finally, if you are interested to find a lot of icons, I recommend you use Icons8, you can use the online version or the app for your computer, both are incredible because include a lot of icons. I use the Windows 10 pack icons, they have only one colour, so it’s perfect for an OLED screen.
