Skip to content

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.

Electrical Connections

The Neopixels are connected to the 3 pin connector on my board. The way I designed the board in week 6 was that the onboard Neopixel was the first pixel in the chain and a string of however many other LEDs could be connected to the board to be the second through end pixels. The data pin is D10 on the board. In the board design I have an option to inject more power if necessary. However, for all of the testing below, the power was provided by the USB power the XIAO.

The high power Neopixels came from Adafruit with wires already on them. However, I desoldered the input wires of the first one, and soldered dupont wires to the so I could easily plug them into my PCB. Then the second high power Neopixel was connected to the first with the provided compatible connectors.

I am not sure, nor could I find documentation about how much current can be sourced through the 5V pin on the XIAO. However, from the group project this week, we found that we could relably source almost 1A at full brightness running all 3 of my Neopixels in white color mode. This was enough to run the circuit for this test.

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.

Change Color with Button
 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#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"

GPT Output GRB fix
 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#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.

RGB GRB fix
 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
#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. On the XIAO, the clock pin ties back to pin D5 and the data pin ties back to pin D4 and these are what they are connected to on my board.

The front of the board showing the clock (blue), data (green), and GND (grey) connected to my 4 pin and the 5V power sourced from the exposed pin on the upper right (orange).

Detail of I2C connections on the back of the OLED.

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.

ssd1306_128x64-i2c
  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
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
/**************************************************************************
 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.

Link to the U8x8 library

Note that this library knows which pins to set for the I2C lines as I chose the "HW_I2C" in the setup of the display and microcontroller in line 3 below. In this case it defaults to the defined pins that are defined inside the microcontroller.

U8x8_hello_world
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
#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 World");//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.

U8g2_text_center
 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
31
32
33
34
35
36
37
38
39
40
41
42
43
#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.

GPT integration
 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
#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.

XIAO_Wk10_mixed_rgb_w_display.ino
  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
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
#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