Note that the digital artifacts on the screen
are from the camera used to capture
and not the screen itself
How many great artworks or photos have you seen that consist of just lines of characters; words and numbers? Very few. It’s true that a picture paints a thousand words, and whilst printing out strings of characters with your Particle board can be fun, displaying images and graphics is even better.
If you haven’t already, I recommend you go and check out the Character Displays with Particle tutorial, however, let’s press on.
The Gear
To follow only with this tutorial you’ll require the following:
- Particle Photon Starter Kit
- Adafruit Monochrome 0.96” 128x64 OLED Graphic Display
- Male/Male Jumper Wires
The Goal
The great thing about the Adafruit OLED graphic display is that only with providing great libraries on Particle.io, there example code (with some tweaking to run on the Photon) walks through many of the great functions built into the library, making it incredibly easy to customise the code for your own project.
The original example code for Arduino can be found here, however the code provided below supports the appropriate pinout for use with our Particle board.
The Circuit
The Adafruit display is incredibly versatile because it can be used with either SPI or I2C communication, however since using I2C communication requires you to solder two jumper pads, and us DIY’ers tend to be quite lazy the following circuit diagram shows the connection for SPI usage. However, you can quite easily use the I2C bus for communication by soldering the two jumper pads on the rear of the board and connecting it instead to the Photons I2C bus.
As you can see, our circuit layout is super simple, only requiring 5 lines for communication, and two for power.
The Code
As mentioned earlier, the great thing about Adafruit parts is that they come with fantastic supporting libraries and example code. We’re going to use the example code that was written for Arduino, and modify the pinouts to work with our Particle board.
// This #include statement was automatically added by the Particle IDE. #include "Adafruit_SSD1306/Adafruit_SSD1306.h" #define OLED_DC A1 #define OLED_CS A2 #define OLED_RESET A0 Adafruit_SSD1306 display(OLED_DC, OLED_RESET, OLED_CS); #define NUMFLAKES 10 #define XPOS 0 #define YPOS 1 #define DELTAY 2 #define LOGO16_GLCD_HEIGHT 16 #define LOGO16_GLCD_WIDTH 16 static const unsigned char PROGMEM logo16_glcd_bmp[] = { 00000000, 11000000, 00000001, 11000000, 00000001, 11000000, 00000011, 11100000, 11110011, 11100000, 11111110, 11111000, 01111110, 11111111, 00110011, 10011111, 00011111, 11111100, 00001101, 01110000, 00011011, 10100000, 00111111, 11100000, 00111111, 11110000, 01111100, 11110000, 01110000, 01110000, 00000000, 00110000 }; #if (SSD1306_LCDHEIGHT != 64) #error("Height incorrect, please fix Adafruit_SSD1306.h!"); #endif void setup() { Serial.begin(9600); // by default, we'll generate the high voltage from the 3.3v line internally! (neat!) display.begin(SSD1306_SWITCHCAPVCC); // init done // Show image buffer on the display hardware. // Since the buffer is intialized with an Adafruit splashscreen // internally, this will display the splashscreen. display.display(); delay(2000); // Clear the buffer. display.clearDisplay(); // draw a single pixel display.drawPixel(10, 10, WHITE); // Show the display buffer on the hardware. // NOTE: You _must_ call display after making any drawing commands // to make them visible on the display hardware! display.display(); delay(2000); display.clearDisplay(); // draw many lines testdrawline(); display.display(); delay(2000); display.clearDisplay(); // draw rectangles testdrawrect(); display.display(); delay(2000); display.clearDisplay(); // draw multiple rectangles testfillrect(); display.display(); delay(2000); display.clearDisplay(); // draw mulitple circles testdrawcircle(); display.display(); delay(2000); display.clearDisplay(); // draw a white circle, 10 pixel radius display.fillCircle(display.width()/2, display.height()/2, 10, WHITE); display.display(); delay(2000); display.clearDisplay(); testdrawroundrect(); delay(2000); display.clearDisplay(); testfillroundrect(); delay(2000); display.clearDisplay(); testdrawtriangle(); delay(2000); display.clearDisplay(); testfilltriangle(); delay(2000); display.clearDisplay(); // draw the first ~12 characters in the font testdrawchar(); display.display(); delay(2000); display.clearDisplay(); // draw scrolling text testscrolltext(); delay(2000); display.clearDisplay(); // text display tests display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0,0); display.println("Hello, world!"); display.setTextColor(BLACK, WHITE); // 'inverted' text display.println(3.141592); display.setTextSize(2); display.setTextColor(WHITE); display.print("0x"); display.println(0xDEADBEEF, HEX); display.display(); delay(2000); display.clearDisplay(); // miniature bitmap display display.drawBitmap(30, 16, logo16_glcd_bmp, 16, 16, 1); display.display(); // invert the display display.invertDisplay(true); delay(1000); display.invertDisplay(false); delay(1000); display.clearDisplay(); // draw a bitmap icon and 'animate' movement testdrawbitmap(logo16_glcd_bmp, LOGO16_GLCD_HEIGHT, LOGO16_GLCD_WIDTH); } void loop() { } void testdrawbitmap(const uint8_t *bitmap, uint8_t w, uint8_t h) { uint8_t icons[NUMFLAKES][3]; // initialize for (uint8_t f=0; f< NUMFLAKES; f++) { icons[f][XPOS] = random(display.width()); icons[f][YPOS] = 0; icons[f][DELTAY] = random(5) + 1; Serial.print("x: "); Serial.print(icons[f][XPOS], DEC); Serial.print(" y: "); Serial.print(icons[f][YPOS], DEC); Serial.print(" dy: "); Serial.println(icons[f][DELTAY], DEC); } while (1) { // draw each icon for (uint8_t f=0; f< NUMFLAKES; f++) { display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE); } display.display(); delay(200); // then erase it + move it for (uint8_t f=0; f< NUMFLAKES; f++) { display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, BLACK); // move it icons[f][YPOS] += icons[f][DELTAY]; // if its gone, reinit if (icons[f][YPOS] > display.height()) { icons[f][XPOS] = random(display.width()); icons[f][YPOS] = 0; icons[f][DELTAY] = random(5) + 1; } } } } void testdrawchar(void) { display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0,0); for (uint8_t i=0; i < 168; i++) { if (i == '\n') continue; display.write(i); if ((i > 0) && (i % 21 == 0)) display.println(); } display.display(); } void testdrawcircle(void) { for (int16_t i=0; i<display.height(); i+=2) { display.drawCircle(display.width()/2, display.height()/2, i, WHITE); display.display(); } } void testfillrect(void) { uint8_t color = 1; for (int16_t i=0; i<display.height()/2; i+=3) { // alternate colors display.fillRect(i, i, display.width()-i*2, display.height()-i*2, color%2); display.display(); color++; } } void testdrawtriangle(void) { for (int16_t i=0; i<min(display.width(),display.height())/2; i+=5) { display.drawTriangle(display.width()/2, display.height()/2-i, display.width()/2-i, display.height()/2+i, display.width()/2+i, display.height()/2+i, WHITE); display.display(); } } void testfilltriangle(void) { uint8_t color = WHITE; for (int16_t i=min(display.width(),display.height())/2; i>0; i-=5) { display.fillTriangle(display.width()/2, display.height()/2-i, display.width()/2-i, display.height()/2+i, display.width()/2+i, display.height()/2+i, WHITE); if (color == WHITE) color = BLACK; else color = WHITE; display.display(); } } void testdrawroundrect(void) { for (int16_t i=0; i<display.height()/2-2; i+=2) { display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i, display.height()/4, WHITE); display.display(); } } void testfillroundrect(void) { uint8_t color = WHITE; for (int16_t i=0; i<display.height()/2-2; i+=2) { display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i, display.height()/4, color); if (color == WHITE) color = BLACK; else color = WHITE; display.display(); } } void testdrawrect(void) { for (int16_t i=0; i<display.height()/2; i+=2) { display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE); display.display(); } } void testdrawline() { for (int16_t i=0; i<display.width(); i+=4) { display.drawLine(0, 0, i, display.height()-1, WHITE); display.display(); } for (int16_t i=0; i<display.height(); i+=4) { display.drawLine(0, 0, display.width()-1, i, WHITE); display.display(); } delay(250); display.clearDisplay(); for (int16_t i=0; i<display.width(); i+=4) { display.drawLine(0, display.height()-1, i, 0, WHITE); display.display(); } for (int16_t i=display.height()-1; i>=0; i-=4) { display.drawLine(0, display.height()-1, display.width()-1, i, WHITE); display.display(); } delay(250); display.clearDisplay(); for (int16_t i=display.width()-1; i>=0; i-=4) { display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE); display.display(); } for (int16_t i=display.height()-1; i>=0; i-=4) { display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE); display.display(); } delay(250); display.clearDisplay(); for (int16_t i=0; i<display.height(); i+=4) { display.drawLine(display.width()-1, 0, 0, i, WHITE); display.display(); } for (int16_t i=0; i<display.width(); i+=4) { display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE); display.display(); } delay(250); } void testscrolltext(void) { display.setTextSize(2); display.setTextColor(WHITE); display.setCursor(10,0); display.clearDisplay(); display.println("scroll"); display.display(); display.startscrollright(0x00, 0x0F); delay(2000); display.stopscroll(); delay(1000); display.startscrollleft(0x00, 0x0F); delay(2000); display.stopscroll(); delay(1000); display.startscrolldiagright(0x00, 0x07); delay(2000); display.startscrolldiagleft(0x00, 0x07); delay(2000); display.stopscroll(); }
Now at first it may look confusing and complex, however the program simply steps through a list of functions showcasing the wide functionality of the library and display, you can comment out, or even modify various functions in their declaration underneath if you like. Flash it to your board and see what the base example code looks like.
Go ahead and try out modifying the functions to display your own data or byte-arrays.
What Now?
Thanks to our good friends and Adafruit, we’ve now got the tools to display text, images, animations, anything we want! You’ll notice at the top of the code there is a byte array for the miniature Adafruit logo. It’s a good demonstration of how you can display your own images on these displays. Make sure it’s a bitmap, use an online conversion tool to convert to a byte array, and away you go!