Change Adafruit Library OLED Logo
Intro: Change Adafruit Library OLED Logo
Welcome to my first Instructable!
I have only started Arduino and electronics as a hobby and Instructables has been a great learning resource for me so I am far from any type of expert.
This Instructable covers how to change the Adafruit Industries logo that appears as a splash screen on a OLED display / screen when using their library (Adafruit_SSD1306) to drive it which is one of the main libraries used for small screens to a logo of your own design or choosing.
It tooks me days to work it out thanks to very limited information online about how to do it and when I did finally find some information the author left out most of the important steps which as a beginner is very frustrating so hopefully this helps out someone.
This Instructable covers the popular 128 x 64 size of OLED but all the steps are the same for other sizes so you can still follow along as long as your screen uses the Adafruit library.
STEP 1: Create Your Logo Graphic
Use the graphics editor of your choice to create a 8 bit bitmap of your logo in this instance making the size 128 x 64 or whatever size your OLED or LCD is.
It must be saved a a 8 bit bitmap as no other file format or type will work.
Also make sure the background is actually white (#ffffff) and the foreground (the logo or image) is black (#000000) these color steps are important as the software we use to convert the graphic to code won't work properly if these two color values are not used.
Save the bitmap and move onto converting it into code
STEP 2: Use LCD Assistant to Convert Your Bitmap to Code
Download the free bitmap to code converter called LCD Assistant the link for it is HERE
Open the program and then from the file menu load in your bitmap graphic. LCD Assistant should automatically detect the size of the graphic in this case 128 x 64 and for every other setting leave everything else as is.
Then again from the file menu select output and save the output file to somewhere handy on your computer such as the Desktop for example.
STEP 3: Edit Logo Hex Code Output File
Open the file generated by LCD Assistant in any text editor even Notepad will do. Here I am using the excellent Sublime Text.
You want to delete everything apart from the actual hex code so remove the part at the top of the file so the first line should just be code and at the bottom delete the ending " }; " symbols.
STEP 4: Break Logo Code Into Three Sections
In this step we just want to break the logo hex code into three sections so we end up with three separate sections. The first of which will have 12 lines of code, the second 20 lines of code and the third secton 32 lines of code to make a total of 64 lines of code which is the same height as your OLED... 64. (If you are using a different size then you will have more or less lines of code to match the height of your display)
All you do to separate these sections is to add a blank line in between them.
STEP 5: Copy Your Logo Code to Replace the Adafruit Logo Code
For this step you need to already have the Adafruit_SSD1306 library downloaded and installed. If you are using the Arduino web ide rather than the standard version that runs on your computer you will need to add the library once customized as a custom library because you are unable to edit the library using the web / cloud version and be sure to include the custom version into your sketch and not include the pre installed version or this won't work.
Inside the Adafruit_SSD1306 library open the file named Adafruit_SSD1306.cpp using a text editor. Scroll down into you find the following section starting with this line:
static uint8_t buffer[SSD1306_LCDHEIGHT * SSD1306_LCDWIDTH / 8] = {
You will then copy and paste replacing the code with your new logo code into each section:
static uint8_t buffer[SSD1306_LCDHEIGHT * SSD1306_LCDWIDTH / 8] = {
CODE SECTION ONE GOES HERE
#if (SSD1306_LCDHEIGHT * SSD1306_LCDWIDTH > 96*16)
CODE SECTION TWO GOES HERE
#if (SSD1306_LCDHEIGHT == 64)
CODE SECTION THREE GOES HERE
#endif #endif };
Leave everything exactly as it is being careful to only replace the code in each section and nothing else otherwise it won't work.
Once all that is done save the file.
STEP 6: Use Modified Library in Your Sketch
Use any sketch that uses the Adafruit_SSD1306 library there is loads out there but for the sake of completion you can use the one provided in this excellent Instructable by Bay Yoyal found here but whatever sketch you use it will need to make use of the splash screen on first boot / turn on of OLED as not all sketches will do that.
If using the computer / software version of the Arduino IDE you should be good to go assuming you only have one version of the Adafruit_SSD1306 library on your system.
For the web / cloud version of the Arduino IDE that I use you will need to put all the files within the main Adafruit_SS1306 library directory / folder into a zip file and name it whatever you like. Then using the ide navigate to libraries and add this new modified library as a custom version. Once the new custom library has been added there is a button beside it which says include which will add it your sketch. (PLEASE NOTE: double check the sketch to make sure you are only including the library once)
Verify and upload your sketch to your Arduino.
STEP 7: Enjoy Your Custom Logo
That's it all done. Assuming everything has been done right your logo will now replace the Adafruit Industries one.
I hope you liked this Instructable and sorry if it was not written very well it's my first one.
24 Comments
aryapoladin 3 years ago
Please see my free developed projects for OLEDH : OLED image to Hex :
https://elvand.com/oledh/
And LCD Font Generator LFG :
https://elvand.com/lcd-font-generator-lfg/
It's my pleasure to have your suggestions.
With best regard.
pyromaniac303 4 years ago
Additionally did you know that if you're low on space, you can edit Adafruit_SSD1306.cpp and comment out the splash screen altogether? In most applications I'm guessing you don't bother to display it, but it is put into the display buffer as soon as the screen is initialised! To do this edit the file like so:
boolean Adafruit_SSD1306::begin(uint8_t vcs, uint8_t addr, boolean reset,
boolean periphBegin) {
if((!buffer) && !(buffer = (uint8_t *)malloc(WIDTH * ((HEIGHT + 7) / 8))))
return false;
clearDisplay();
//remove the splash screen to save flash space!
/*
if(HEIGHT > 32) {
drawBitmap((WIDTH - splash1_width) / 2, (HEIGHT - splash1_height) / 2,
splash1_data, splash1_width, splash1_height, 1);
} else {
drawBitmap((WIDTH - splash2_width) / 2, (HEIGHT - splash2_height) / 2,
splash2_data, splash2_width, splash2_height, 1);
}
*/
If you're running short on flash memory this may help you, it saved 2% on my STM32F103 (blue pill) project. Note that doing so may make some of the code examples behave weirdly, so be sure to make a mental note of what you've done and change it back if that happens.
Regards,
Paul
MichaelW739 5 years ago
christian.braga 4 years ago
All the passages are the same as reported in this tutorial, but you have to paste your custom logo data in the file "splash.h" (instead of the older Adafruit_SSD1306.cpp).
This file in in the same folder
christian.braga 4 years ago
in latest version of Adafruit_SSD1306 library the image data is no more stored in Adafruit_SSD1306.cpp, but is stored in an external file called "splash.h".
All the passages are the same as reported in this tutorial, but you have to paste your custom logo data in the file "splash.h" (instead of the older Adafruit_SSD1306.cpp).
This file in in the same folder
ЯрославШ2 4 years ago
www.el-sys.com.ua/wp-content/uploads/SCB-Calculator.rar
Fdavey 6 years ago
Hi belfastrab
Ive been looking for a program to help setting up a OLED and yours looks good and I agree with you that as you say in step 1 (“when I did finally find some information the author left out most of the important steps which as a beginner is very frustrating” ) . Then you say (“Use the graphics editor of your choice”) ?? WTF is a graphics editor ?. Well I give up at that point. Help please
dunk8888young 5 years ago
Lion83 6 years ago
If you don't have any graphic editor in your machine, you can use https://www.canva.com/ to fix 126x64pixels image. Download the file in png format and then open it with Paint. Now you can save the file in the monochromatic bitmap type. Now you have a white (#FFFFFF) and black (#000000) image to work with.
eric(NJ) 5 years ago
Paraeus 5 years ago
JKPina 5 years ago
Easy to follow man, thank you!
RomanS129 6 years ago
Thanks!
Ten minutes read, ten minutes doing a simple logo just to try it...
Working! Now I have my own splash (ugly but it's mine ;-)
Lion83 6 years ago
Thanks a lot! Pretty useful!
lipton5001 6 years ago
Awesome, thanks a lot ! This went incredibly smoothly xD
PentiumII 6 years ago
Simple... fast.. short... very nice... Thanks
SalvageIt 6 years ago
Very nice !
If you are too lazy, you can also skip the part where you slice the data in 3 parts, but that means the library will only work with 128x64 displays after the modification.
belfastrab 6 years ago
Thanks for the comment. I did try that and could not get it to work just kept coming up with a load of errors on verification??
SalvageIt 6 years ago
What kind of errors did you have ? On a 128x64 display, the two IF defines are true, so its exactly as if you had the whole data in one bloc.
But your solution is more elegant :). Modifying the library like I said will show errors if you work with a smaller screen because the data will be too large
belfastrab 6 years ago