Introduction: Change Adafruit Library OLED Logo

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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.

Comments

SalvageIt (author)2017-07-10

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 (author)SalvageIt2017-07-11

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 (author)belfastrab2017-07-11

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 (author)SalvageIt2017-07-12

You are extraordinary kind no one has ever called anything I have done "elegant" before. Shame it was just a happy accident

SHAMSUDHEEN MARAKKAR (author)2017-07-11

well explained and useful one.Thanks for sharing :)

Thank you for your comment much appreciated

Swansong (author)2017-07-10

Good instructable, that looks neat :)

belfastrab (author)Swansong2017-07-10

Thank you

About This Instructable

2,297views

50favorites

License:

More by belfastrab:Change Adafruit Library OLED Logo
Add instructable to: