Weiying Li
5 min readSep 12, 2022

Lab 2: Digital I/O with Arduino Boards

Weiying Li. Chris Myers. Tangible User Interfaces, Fall 2022

Description

In this lab assignment, our goal is to control the RGB values with multiple key presses and to design a diffusor. Another optional task is controlling the colors of the LEDs using the keyboard.

For the first task, we need to firstly switch the power wires to ones that supports PWM (Pulse Width Modulation) — pin 9, 10, and 11. Then I added serial communications into my LED setup and revised the provided code in the lab.

For the second task, we need to design a diffuser for our RGB LEDs. Since this weekend is the Mid-autumn Festival, I got the inspiration from Chinese paper lanterns and made a lantern diffuser for my LEDs.

For the third task, I revised the codes and tried three colors: aqua, yellow, and purple.

Components Used

  • 1 Arduino UNO
  • 1 Breadboard
  • 3 LEDs (red, green, blue)
  • 3 220Ω Resistors
  • 4 wires
  • 1 A4 paper

Code and Images

  1. In Lab practice: Fading 3 LEDs
Fading 3 LEDs

2. Increasing the LEDs brightness

I revised the provided codes to control the RGB values with multiple key presses. I set the initial brightness as 10% (25.5), then by pressing “r”, or “g”, or “b”, in the serial monitor, we are able to increase the red/green/blue LED brightness by 10%(25.5) each time.

char serInString[100];  // array that will hold the different bytes of the string. 100=100characters;
// -> you must state how long the array will be else it won't work properly
char colorCode;
int colorVal;
int redPin = 9; // Red LED, connected to digital pin 9
int greenPin = 10; // Green LED, connected to digital pin 10
int bluePin = 11; // Blue LED, connected to digital pin 11
// initializing starting values for each Pin as a base for the calculation
float redVal = 25.5; // set the initial brightness to 10%.
float greenVal = 25.5;
float blueVal = 25.5;
// initial setup
void setup() {
pinMode(redPin, OUTPUT); // sets the pins as output
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
Serial.begin(9600);
analogWrite(redPin, redVal); // We take the value that we have set at the beginning. The analogWrite function is used to write a value between 0 and 255 inclusive to the LED pin.
analogWrite(greenPin, greenVal);
analogWrite(bluePin, blueVal);
Serial.println("Enter ('r', 'g', or 'b') to change color and increase intensity.");
}
void loop () {
// clear the string
memset(serInString, 0, 100);
// read the serial port and create a string out of what you read
readSerialString(serInString);
// we set the Pin of which the color we are changing
colorCode = serInString[0]; // store the array in the colorCode variable
if( colorCode == 'r' || colorCode == 'g' || colorCode == 'b' ) {
Serial.print("changing brightness of Pin ");
Serial.print(colorCode);
Serial.print(": ");
serInString[0] = 0; // indicates we've used this string
if(colorCode == 'r') { //if the color code is red, do the following
redVal = setColor(redVal);
analogWrite(redPin, redVal);
} else if(colorCode == 'g') {
greenVal = setColor(greenVal);
analogWrite(greenPin, greenVal);
}
else if(colorCode == 'b') {
blueVal = setColor(blueVal);
analogWrite(bluePin, blueVal);
}
}

delay(100); // wait a bit, for serial data
}
// In the following, we set the color intensity.
float setColor (float key) { // setColor calculates the color based on the times a key is pressed.
float keyvalue; // the keyvalue is the final value we set our lights to.
if (key == 255) { // if the value is 255 or higher, we reset the light to 0.
Serial.print("Maximum brightness is reached. Setting brightness to 0 ");
keyvalue = 0;
} else {
keyvalue = key + 25.5; // take the current keyvalue and add 10%
}
Serial.print(keyvalue);
Serial.println();
return keyvalue;
}
//read a string from the serial and store it in an array
//you must supply the array variable
void readSerialString (char *strArray) {
int i = 0;
if(!Serial.available()) { // Get the number of bytes (characters) available for reading from the serial port.
return;
}
while (Serial.available()) {
strArray[i] = Serial.read(); // put the number from the serial port into strArray
i++;
}
}
Arduino serial monitor output
Increase the brightness of red LED to 65.5, green LED to 51, blue LED to 102 by entering r/g/b

3. Designing the LED diffuser

Inspired by Mid-autumn Festival lantern, I made a paper lantern diffuser.

Paper lantern diffuser
Fading 3 LEDs with diffuser

4. Controlling the colors of the LEDs

I tried three colors: aqua (as ‘a’), yellow (as ‘y’), and purple (as ‘p’).

char serInString[100];  // array that will hold the different bytes of the string. 100=100characters;
// -> you must state how long the array will be else it won't work properly
char colorCode;
int colorVal;
int redPin = 9; // Red LED, connected to digital pin 9
int greenPin = 10; // Green LED, connected to digital pin 10
int bluePin = 11; // Blue LED, connected to digital pin 11
// initial setup
void setup() {
pinMode(redPin, OUTPUT); // sets the pins as output
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
Serial.begin(9600);
analogWrite(redPin, 127); // We take the value that we have set at the beginning. The analogWrite function is used to write a value between 0 and 255 inclusive to the LED pin.
analogWrite(greenPin, 127);
analogWrite(bluePin, 127);
Serial.println("Enter color:");
}
void loop () {
// clear the string
memset(serInString, 0, 100);
// read the serial port and create a string out of what you read
readSerialString(serInString);
// we set the Pin of which the color we are changing
colorCode = serInString[0]; // store the array in the colorCode variable
if( colorCode == 'a' || colorCode == 'y' || colorCode == 'p' ) {
Serial.print("changing Color to ");
Serial.print(colorCode);
Serial.print(": ");
serInString[0] = 0;
if( colorCode == 'a' ) {
analogWrite(redPin, 0);
analogWrite(greenPin, 255);
analogWrite(bluePin, 255);
delay(1000);
} else if(colorCode == 'y') {
analogWrite(redPin, 255);
analogWrite(greenPin, 255);
analogWrite(bluePin, 0);
delay(1000);
}
else if(colorCode == 'p') {
analogWrite(redPin, 128);
analogWrite(greenPin, 0);
analogWrite(bluePin, 128);
delay(1000);
}
}

delay(100); // wait a bit, for serial data
}
//read a string from the serial and store it in an array
//you must supply the array variable
void readSerialString (char *strArray) {
int i = 0;
if(!Serial.available()) { // Get the number of bytes (characters) available for reading from the serial port.
return;
}
while (Serial.available()) {
strArray[i] = Serial.read(); // put the number from the serial port into strArray
i++;
}
}
Changing the colors of the LEDs to yellow, aqua, and purple
Weiying Li
0 Followers

I’m a third year PhD student at Berkeley School of Education. I’m interested in designing culturally responsive educational technologies.