Week 10, Output Devices

Objectives

Group assignment:

Measure the power consumption of an output device.

Document your work on the group work page and reflect on your individual page what you learned. Individual assignment:

Add an output device to a microcontroller board you’ve designed and program it to do something.

Group Assignment

For the group assignment, we measured the power output of the high power Neopixels that I am using for my prism prototype. We used a USB power monitor to explore power output for different color combinations and saw how easy it was to figure out the power draw of the circuit. The work from the group assignment may be helpful for me as I figure out the power and battery requirements for my final project.

Link the group page here

Add Output to Do Something

To support the work I am doing for my final project I decided to use my development PCB to drive high power Neopixels to make rainbows projections for photos.

Neopixel Rainbow Maker

The goal of this exercise was to build a prototype to take a rainbow portrait with my DSLR camera. This is functionality that I want in my final project so it was helpful to work on it for this module.

Inspiration

I first learned about this effect while watching a video on a plane about interesting photograpy techniques. The photographer in the video used a CD to direct light into the lens. I could not find a reference to the original video that I saw, but in doing additional research I found a number of other photographers that are using the same technique to create prismatic projections onto the subjects in their photo graphs.

Inspiration for the prismatic photo effect. This video has a great tutorial on how to do it with a CD and was the source of the image.

Prototype Setup

The structure of the prototype was to use the XIAO ESP32-C3 on my development board to drive 2 high power Neopixel LEDs and point them at a piece of CD to project an rainbow onto the subject.

Link to Development Board

The LEDs are pointed perpendicular to the axis of the lens and directed at pieces of CDs that are cut into a rectangle and on a rotating piviot. The pivots are rotating arms to give them another degree of freedom so I can control how far away the CD reflector is and the angle of the projection.

I decided to do this based on some testing of the CD trick from the video mentioned above. In that video he held the CD and his phone in the same hand with the CD at about a 45 degree angle to the light. I tried it myselft and found that it worked quite well and wanted to recreate that geometry but also have some flexibility.

A screenshot from the above video showing how he holds the CD at an angle to the LED.

Mechanical Design

In order to get the physical setup correct, I had to design the mount for the LEDs and CD reflectors. I used SolidWorks to do the CAD. I started with CAD that I had been using for some other prototypes that are outlined in my concept modelling work that can be found here

I updated the CAD so that it I could mount up to 3 of the high power Neopixel LEDs that I procured from Adafruit.

The high power Neopixels I used for the project.

I measured them with calpers and gave them cavities to sit on the top and both sides of the lens. Then I created the arms and a place for the CD reflector to sit. I imported the outside geometry and hole pattern from my dev board and added bosses for it to sit on the lens mount. I split the main ring and added tabs with holes where I could add an M3 screw to tension the ring to the lens.

CAD for the LED and CD mirror mounts.

A few days later after the mechanism was printed and tested, I drew a small adaptor to mount the OLED to the top of the dev board to mount it to the device.

The OLED adapter CAD.

STEP File of the Full Assembly

STEP File of the OLED Adaptor

I then printed and assembled the prototype. I installed M3 threaded inserts into the mirror pivots, dev board mount, and at the split in the ring.

Making Prismatic Panels

I used the waterjet to make the prismatic panels. The CDs they were harvested from were about 1mm thickness and makde of polycarbonate. Because of the material I could not safely laser cut them. I did an attempt on our Zund cutter, but the knives would not penetrate the CDs. So, I landed on waterjetting them. It was still a challenge but I got it to work.

The Zund scored the CDs but did not cut them well.

It was a challenge because the film that makes the prismatic effect is easily blown away by the power of the waterjet. I eventually figured out that if I used a long lead-in and put the top of the CD down, I was able to get good parts.

Hot gluing the CD to a sacrificial board before cutting

Cutting. Note the delamination at the pierce point.

I also found that if I put masking tape on the top of the CD and cut it with the top side up, the film would delaminate perfectly from the CD and stay on the tape. Then it could be used as film and created a different and interesting effect.

Setting up the CD with masking tape before cutting from the top.

The resulting delaminated film that was installed into the prototype.

I installed the LEDs into the 3D printed parts, added the CD cuts to the pivots and installed it onto the 50mm lens of my camera.

Initial build of the prototype.

Initial build of the prototype from the back.

Later I added the OLED mount and OLED which can be seen below.

Initial build of the prototype from the back.

Code

I started with a modified version of my week 9 code that cycles through different colors with the push of the on-board button. I updated it to have 3 pixels and was the same code used for the power testing from the group assigment.

#include <Adafruit_NeoPixel.h>

int pushButton = 21;
int led= 20;
int LED_COUNT= 3;
int LED_PIN= 10;

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

volatile bool buttonPressed = false;
volatile unsigned long lastInterruptTime = 0;
const unsigned long debounceTime = 200; // milliseconds

int colorIndex = 0;

uint32_t colors[] = {
  strip.Color(255, 0, 0),      // Red
  strip.Color(255, 165, 0),    // Orange
  strip.Color(255, 255, 0),    // Yellow
  strip.Color(0, 255, 0),      // Green
  strip.Color(0, 255, 255),    // Cyan
  strip.Color(0, 0, 255),      // Blue
  strip.Color(255, 0, 255),    // Magenta
  strip.Color(128, 0, 128),    // Purple
  strip.Color(255, 255, 255),  // White
  strip.Color(0, 0, 0)         // Off
};

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);

  // make the pushbutton's pin an input:
  pinMode(pushButton, INPUT);
  pinMode(led, OUTPUT);

for (int i =1; i<=2; i++){
  digitalWrite (led, HIGH);
  delay (500);
  digitalWrite (led, LOW);
  delay (500);
}

digitalWrite (led, LOW);

//pinMode(BUTTON_PIN, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(pushButton), handleButtonPress, FALLING);

}

void loop() {

   if (buttonPressed) {
    buttonPressed = false;

    // Change LED color
    strip.setPixelColor(0, colors[colorIndex]);
    strip.show();

    // Move to next color in the list
    colorIndex = (colorIndex + 1) % (sizeof(colors) / sizeof(colors[0]));
  }
}

void handleButtonPress() {
  unsigned long currentTime = millis();

  // Debounce check
  if (currentTime - lastInterruptTime > debounceTime) {
    buttonPressed = true;
    lastInterruptTime = currentTime;
    digitalWrite (led, HIGH);
  }
}

Testing and Results

After uploading the code I pressed the button to run through the colors. The LEDs turned on but I noticed that the on board LED was a different color than the high power pixels. After cycling thrugh more colors, I concluded that the onboard LED was RGB, but the high power LEDs were GRB, hence they were out of order.

During power consumption testing I noticed that red and green channels were swapped.

However, depite that, the device threw pretty nice rainbows on the subject. I took it into the shop and shot a photo of the CNC mill to see how it would look and I was pleased to see how it made the steel of the spindle look.

Image captured without effect.

Image captured with rainbow effect.

Then I brought it home and captured a portrait of my daughter to prove it would work on a human.

Portrait with the prototype.

Color Order Issue

I did go back and fix the color order issue. I went back to Chat GPT and gave it the prompt "can you update this code? the first LED is RGB and the second LED in the string is GRB. can you modify so that they show the same colors"

#include <Adafruit_NeoPixel.h>

#define LED_PIN     10
#define LED_COUNT   2  // Now using 2 LEDs
#define BUTTON_PIN  21

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

volatile bool buttonPressed = false;
volatile unsigned long lastInterruptTime = 0;
const unsigned long debounceTime = 200;

int colorIndex = 0;

// RGB color values (we'll handle GRB conversion manually for 2nd LED)
uint8_t colorTable[][3] = {
  {255, 0, 0},     // Red
  {255, 165, 0},   // Orange
  {255, 255, 0},   // Yellow
  {0, 255, 0},     // Green
  {0, 255, 255},   // Cyan
  {0, 0, 255},     // Blue
  {255, 0, 255},   // Magenta
  {128, 0, 128},   // Purple
  {255, 255, 255}, // White
  {0, 0, 0}        // Off
};

void setup() {
  strip.begin();
  strip.show(); // Initialize all pixels to 'off'

  pinMode(BUTTON_PIN, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(BUTTON_PIN), handleButtonPress, FALLING);
}

void loop() {
  if (buttonPressed) {
    buttonPressed = false;

    // Get RGB values for current color
    uint8_t r = colorTable[colorIndex][0];
    uint8_t g = colorTable[colorIndex][1];
    uint8_t b = colorTable[colorIndex][2];

    // First LED is RGB (even though strip is NEO_GRB by default)
    strip.setPixelColor(0, strip.Color(r, g, b));

    // Second LED is GRB, so swap r and g
    strip.setPixelColor(1, strip.Color(g, r, b));

    strip.show();

    colorIndex = (colorIndex + 1) % (sizeof(colorTable) / sizeof(colorTable[0]));
  }
}

void handleButtonPress() {
  unsigned long currentTime = millis();

  if (currentTime - lastInterruptTime > debounceTime) {
    buttonPressed = true;
    lastInterruptTime = currentTime;
  }
}

I used the output and the coding concept to update my code using the updated color indexing for 3 Neopixels.

#include <Adafruit_NeoPixel.h>

int pushButton = 21;
int led= 20;
int LED_COUNT= 3;
int LED_PIN= 10;

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

volatile bool buttonPressed = false;
volatile unsigned long lastInterruptTime = 0;
const unsigned long debounceTime = 200; // milliseconds

int colorIndex = 0;

// RGB color values (we'll handle GRB conversion manually for 2nd LED)
uint8_t colorTable[][3] = {
  {255, 0, 0},     // Red
  {255, 165, 0},   // Orange
  {255, 255, 0},   // Yellow
  {0, 255, 0},     // Green
  {0, 255, 255},   // Cyan
  {0, 0, 255},     // Blue
  {255, 0, 255},   // Magenta
  {128, 0, 128},   // Purple
  {255, 255, 255}, // White
  {0, 0, 0}        // Off
};

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);

  // make the pushbutton's pin an input:
  pinMode(pushButton, INPUT);
  pinMode(led, OUTPUT);

for (int i =1; i<=2; i++){
  digitalWrite (led, HIGH);
  delay (500);
  digitalWrite (led, LOW);
  delay (500);
}

digitalWrite (led, LOW);

//pinMode(BUTTON_PIN, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(pushButton), handleButtonPress, FALLING);

}

void loop() {

   if (buttonPressed) {
    buttonPressed = false;

   // Get RGB values for current color
    uint8_t r = colorTable[colorIndex][0];
    uint8_t g = colorTable[colorIndex][1];
    uint8_t b = colorTable[colorIndex][2];

    // First LED is RGB (even though strip is NEO_GRB by default)
    strip.setPixelColor(0,r, g, b);

    // Second LED is GRB, so swap r and g
    strip.setPixelColor(1,g, r, b);
    strip.setPixelColor(2,g, r, b);
    strip.show();

    // Move to next color in the list
    colorIndex = (colorIndex + 1) % (sizeof(colorTable) / sizeof(colorTable[0]));
  }
}

void handleButtonPress() {
  unsigned long currentTime = millis();

  // Debounce check
  if (currentTime - lastInterruptTime > debounceTime) {
    buttonPressed = true;
    lastInterruptTime = currentTime;
    digitalWrite (led, HIGH);
  }
}

Once I uploaded this code to the board, the onboard and high power LEDs rendered the same colors.

Prototype after the RGB/GRB fix.

OLED Display

To explore another output device I chose to try an OLED display. I had a few 1.3" 128x64 pixel I2C OLEDs that I had purchased from AliExpress a while back and never got working. So I took on the task to have the OLED display the name of the color the LEDs showing.

Connections

I connected the OLED to the I2C ports on my development board. I used data, clock, and ground on the 4 pin connector and used the 5V pin from the other side of the board to give it 5V power.

Display Test

I started by trying to use the Adafruit SSD1306 library for OLEDs. I had had success with other I2C OLEDs using this library in the past. However, it did not work well for me this time. I uploaded the sample code from the library and tested.

/**************************************************************************
 This is an example for our Monochrome OLEDs based on SSD1306 drivers

 Pick one up today in the adafruit shop!
 ------> http://www.adafruit.com/category/63_98

 This example is for a 128x64 pixel display using I2C to communicate
 3 pins are required to interface (two I2C and one reset).

 Adafruit invests time and resources providing this open
 source code, please support Adafruit and open-source
 hardware by purchasing products from Adafruit!

 Written by Limor Fried/Ladyada for Adafruit Industries,
 with contributions from the open source community.
 BSD license, check license.txt for more information
 All text above, and the splash screen below must be
 included in any redistribution.
 **************************************************************************/

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
// The pins for I2C are defined by the Wire-library. 
// On an arduino UNO:       A4(SDA), A5(SCL)
// On an arduino MEGA 2560: 20(SDA), 21(SCL)
// On an arduino LEONARDO:   2(SDA),  3(SCL), ...
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3D ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp[] =
{ 0b00000000, 0b11000000,
  0b00000001, 0b11000000,
  0b00000001, 0b11000000,
  0b00000011, 0b11100000,
  0b11110011, 0b11100000,
  0b11111110, 0b11111000,
  0b01111110, 0b11111111,
  0b00110011, 0b10011111,
  0b00011111, 0b11111100,
  0b00001101, 0b01110000,
  0b00011011, 0b10100000,
  0b00111111, 0b11100000,
  0b00111111, 0b11110000,
  0b01111100, 0b11110000,
  0b01110000, 0b01110000,
  0b00000000, 0b00110000 };

void setup() {
  Serial.begin(9600);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, SSD1306_WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i<display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i<display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  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, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(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, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    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, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  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();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons[NUMFLAKES][3];

  // Initialize 'snowflake' positions
  for(f=0; f< NUMFLAKES; f++) {
    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons[f][YPOS]   = -LOGO_HEIGHT;
    icons[f][DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons[f][XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons[f][YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons[f][DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f< NUMFLAKES; f++) {
      icons[f][YPOS] += icons[f][DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons[f][YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons[f][YPOS]   = -LOGO_HEIGHT;
        icons[f][DELTAY] = random(1, 6);
      }
    }
  }
}

Unfortunately, this resulted in half of the screen being garbage, while the other half ran the sample routines.

The mess from Adafruit library sample file.

U8G2 Library

After some searching I found that there was another library for OLEDs called the U8G2 which seemed promising. I downloaded the library and tested the sample code for the U8x8 part of the library.

#include <Arduino.h>
#include <U8x8lib.h>//Use U8x8 library file
U8X8_SSD1306_128X64_NONAME_HW_I2C u8x8(/* reset=*/ U8X8_PIN_NONE);
//Set the constructor, define the display type, controller, RAM buffer size, and communication protocol, generally determine according to the used display model

void setup(void) {
    u8x8.begin();//Initialize u8x8 library
    u8x8.setFlipMode(1);//Flip the display 180 degrees, generally numbers 0 and 1
    u8x8.clear();
}

void loop(void) {
    u8x8.setFont(u8x8_font_courB18_2x3_f);//Define u8x8 font (default: u8x8_font_chroma48medium8_r) 
    // this is good u8x8_font_profont29_2x3_f
    u8x8.setCursor(0, 1);//Set the position of the drawing cursor
    u8x8.print("Hello ");//Draw content on OLED: Hello World！
}

Hello World running on the OLED

Centering

I then wanted to center the text on the OLED and I also had to flip the text as i wanted to mount the OLED to my camera with the pins down so they would be closer to the pins on the dev board.

The flipping was easy as I just had to add

u8x8.setFlipMode(1);

which automatically flipped the text.

The centering was a little bit trickier. I had to figure out how long the string of text was and then offset the text the appropriate amount. Using the "u8g2_font_ncenB08_tr" font I had it draw as many characters as it could in a single line. It was able to draw 22 characters. 128 pixels wide divided by 22 characters is about 6 pixels per character.

Then I used the equation:

Pixel Offset= (LCD Width - 6 * Length of string)/2 to find the offset.

In order to use the getDisplayWidth and string length functions in the library I had to switch to the U8G2 part of the library. I started with some sample code from the library and modified with the flip and the centering equation.

#include <Arduino.h>
#include <U8g2lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

const char* message = "purple"; //"0123456789abcdefghijklmn";

#define LCDWidth  u8g2.getDisplayWidth()
#define ALIGN_CENTER(t)  ((LCDWidth - (u8g2.getUTF8Width(message))) / 2)
#define ALIGN_RIGHT(t)   (LCDWidth -  u8g2.getUTF8Width(message))
#define ALIGN_LEFT       0

int width = 22; // num of characters
void setup() {
  Serial.begin(9600);

  u8g2.begin();
  u8g2.setFont(u8g2_font_ncenB08_tr); // choose a suitable font
  u8g2.setFlipMode(1);

} 

void loop() {
  u8g2.clearBuffer();          // clear the internal memory
  u8g2.setFont(u8g2_font_ncenB08_tr); // choose a suitable font
    int len = strlen(message);
    int x = (LCDWidth - 6*len) / 2;
    Serial.print(LCDWidth);
    Serial.print(" ");
    Serial.print(len);
    Serial.print(" ");
    Serial.println(x);
  u8g2.drawStr(x,10,message);  // write something to the internal memory
  u8g2.sendBuffer();          // transfer internal memory to the display
  delay(1000);  
}

Result of the centering routine.

Integrating into the LED Code

The final step was to integrate the OLED code into my main code. I used the ChatGPT prompt "can you add code to send the text for the name of the color to an OLED attached to the I2C pins using the U8x8 display library?" and it replied with the following.

#include <Adafruit_NeoPixel.h>
#include <U8x8lib.h>

#define LED_PIN     10
#define LED_COUNT   2
#define BUTTON_PIN  21

// I2C OLED (e.g., SSD1306 128x64)
U8X8_SSD1306_128X64_NONAME_SW_I2C oled(/* clock=*/ SCL, /* data=*/ SDA, /* reset=*/ U8X8_PIN_NONE);

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

volatile bool buttonPressed = false;
volatile unsigned long lastInterruptTime = 0;
const unsigned long debounceTime = 200;

int colorIndex = 0;

// RGB values
uint8_t colorTable[][3] = {
  {255, 0, 0},     // Red
  {255, 165, 0},   // Orange
  {255, 255, 0},   // Yellow
  {0, 255, 0},     // Green
  {0, 255, 255},   // Cyan
  {0, 0, 255},     // Blue
  {255, 0, 255},   // Magenta
  {128, 0, 128},   // Purple
  {255, 255, 255}, // White
  {0, 0, 0}        // Off
};

// Color names for OLED display
const char* colorNames[] = {
  "Red",
  "Orange",
  "Yellow",
  "Green",
  "Cyan",
  "Blue",
  "Magenta",
  "Purple",
  "White",
  "Off"
};

void setup() {
  strip.begin();
  strip.show(); // Initialize all pixels to 'off'

  pinMode(BUTTON_PIN, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(BUTTON_PIN), handleButtonPress, FALLING);

  oled.begin();
  oled.setFont(u8x8_font_chroma48medium8_r); // Simple readable font
  oled.clear();
  oled.drawString(0, 0, "Color: Ready");
}

void loop() {
  if (buttonPressed) {
    buttonPressed = false;

    uint8_t r = colorTable[colorIndex][0];
    uint8_t g = colorTable[colorIndex][1];
    uint8_t b = colorTable[colorIndex][2];

    // First LED (RGB order)
    strip.setPixelColor(0, strip.Color(r, g, b));
    // Second LED (GRB order)
    strip.setPixelColor(1, strip.Color(g, r, b));
    strip.show();

    // Update OLED display
    oled.clear();
    oled.drawString(0, 0, "Color:");
    oled.drawString(0, 1, colorNames[colorIndex]);

    // Move to next color
    colorIndex = (colorIndex + 1) % (sizeof(colorTable) / sizeof(colorTable[0]));
  }
}

void handleButtonPress() {
  unsigned long currentTime = millis();

  if (currentTime - lastInterruptTime > debounceTime) {
    buttonPressed = true;
    lastInterruptTime = currentTime;
  }
}

I used the concept of the matrix of names that get called from the colorIndex variable and wrapped those elements into my main code.

#include <Adafruit_NeoPixel.h>

//Pre-setup for the OLED
#include <Arduino.h>
#include <U8g2lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

#define LCDWidth  u8g2.getDisplayWidth()

int pushButton = 21;
int led= 20;
int LED_COUNT= 3;
int LED_PIN= 10;
int colorIndex = 0;   //looper for color and the name

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

volatile bool buttonPressed = false;
volatile unsigned long lastInterruptTime = 0;
const unsigned long debounceTime = 200; // milliseconds



// RGB color values (we'll handle GRB conversion manually for 2nd LED)
uint8_t colorTable[][3] = {
  {255, 0, 0},     // Red
  {255, 165, 0},   // Orange
  {255, 255, 0},   // Yellow
  {0, 255, 0},     // Green
  {0, 255, 255},   // Cyan
  {0, 0, 255},     // Blue
  {255, 0, 255},   // Magenta
  {128, 0, 128},   // Purple
  {255, 255, 255}, // White
  {0, 0, 0}        // Off
};

// Color names for OLED display
const char* colorNames[] = {
  "Red",
  "Orange",
  "Yellow",
  "Green",
  "Cyan",
  "Blue",
  "Magenta",
  "Purple",
  "White",
  "Off"
};


  const char* intro = "Device Ready";

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);

  // make the pushbutton's pin an input:
  pinMode(pushButton, INPUT);
  pinMode(led, OUTPUT);

for (int i =1; i<=2; i++){
  digitalWrite (led, HIGH);
  delay (500);
  digitalWrite (led, LOW);
  delay (500);
}

digitalWrite (led, LOW);

//pinMode(BUTTON_PIN, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(pushButton), handleButtonPress, FALLING);

// Setup for Display

  u8g2.begin();
  u8g2.setFont(u8g2_font_ncenB08_tr); // choose a suitable font
  u8g2.setFlipMode(1);
  u8g2.drawStr(0,10,intro);

}

void loop() {

   if (buttonPressed) {
    buttonPressed = false;

   // Get RGB values for current color
    uint8_t r = colorTable[colorIndex][0];
    uint8_t g = colorTable[colorIndex][1];
    uint8_t b = colorTable[colorIndex][2];

    // First LED is RGB (even though strip is NEO_GRB by default)
    strip.setPixelColor(0,r, g, b);

    // Second LED is GRB, so swap r and g
    strip.setPixelColor(1,g, r, b);
    strip.setPixelColor(2,g, r, b);
    strip.show();

    // Send color text to the OLED
    u8g2.clearBuffer();          // clear the internal memory
    int len = strlen(colorNames[colorIndex]);
    int x = (LCDWidth - 6*len) / 2;
    Serial.print(LCDWidth);
    Serial.print(" ");
    Serial.print(len);
    Serial.print(" ");
    Serial.println(x);
    u8g2.drawStr(x,10,colorNames[colorIndex]);  // write something to the internal memory
    u8g2.sendBuffer();          // transfer internal memory to the display


    // Move to next color in the list
    colorIndex = (colorIndex + 1) % (sizeof(colorTable) / sizeof(colorTable[0]));
  }
}

void handleButtonPress() {
  unsigned long currentTime = millis();

  // Debounce check
  if (currentTime - lastInterruptTime > debounceTime) {
    buttonPressed = true;
    lastInterruptTime = currentTime;
    digitalWrite (led, HIGH);
  }
}

Full Device Test

With the updated code uploaded I tested the full device. Every time I pressed the button on the dev board, the LEDs changed colors and the correct color was displayed on the OLED.

Testing the full LED and OLED device

And images of the completed prototype

Front View

Rear View

Closeup of dev board and OLED