SALES INQUIRIES: 1 (888) 767-9864

Arduino RGB Mixing GUI:: Student Project

Arduino in color

Jaco Coetsee put this project together to better understand how RGB values work together to make color. The RGB color scheme is used in HTML coding create the colors we see on websites, and it’s a great way to illustrate the properties of colors in general. He also got to program an Arduino to read and display user input, and generate neat text and visual outputs. Jaco’s project can also be used as a handy tool for someone who has to work with RGB values regularly as a dedicated color calculator.

How it works

The mixer enables you to select color values via a rotary encoder that increments and decrements the values between 0 and 255 with a simple twist. When you’re happy with the value displayed on the LCD screen, simply press the rotary encoder to select it and move to the next color component.  The RGB LED shows the current result (color) of the settings as you’re going along, so it basically lets you mix colors on the spot using the RGB scheme e.g. (R=128, G=128, B=128)= Grey, (R=0, G=0, B=0)=Black, (R=255 ,G=0 ,B=0)=Red and so on (see chart).

Red Value

Green Value

Blue Value

Output Color

0

0

0

Black

255

255

255

White

128

128

128

Grey

255

0

0

Red

0

0

255

Blue

255

255

0

Yellow

After all the values are input, the program checks values of each RGB component, gives the mixed color a name corresponding to a pre-defined list of colors, and displays it on the LCD screen. It does this by using nested switch/case statements, and it will approximate the RGB value to 27 different color names.

As mentioned, there is also the RGB LED module that displays the final mixed color as well as all the color changes in real time. It is controlled using the analogWrite Function and using the same values as input by the user.

Jaco’s project is another example of using Arduino projects to explore the world through tools and programming that are easy to learn and connect.

Part list:

  • Rotary Encoder
  • Sensor Shield
  • Arduino Uno
  • RGB LED
  • LCD 16×2 display with I2C

Arduino Code:

#include <LiquidCrystal_I2C.h>

//rotary encoder pins
const byte rotClocPin = 2;
const byte rotDataPin = 3;
const byte rotButton = 4;
const byte rotPinArray[] = { 2, 3 , 4 };
//RGB pins
const byte red = 9;
const byte green = 11;
const byte blue = 10;
const byte RGBarray[] = { 9, 11 , 10 };
//global variables for program
boolean clockOut;
boolean dataOut;
volatile int countValue = 0;
boolean buttonPress;
int redVal = 0;
int greenVal = 0;
int blueVal = 0;
String colourName;
LiquidCrystal_I2C lcd(0x27, 2, 1, 0, 4, 5, 6, 7, 3, POSITIVE);

void setup() {

  Serial.begin(9600);
  lcd.begin(16, 2);  // initialize the lcd for 16 chars 2 lines, turn on backlight
  lcd.backlight();
  attachInterrupt(digitalPinToInterrupt(2), rotValCheck, HIGH);
  for (int i = 0 ; i < 3 ; i ++) {
    digitalWrite(rotPinArray[i], HIGH);
    pinMode(RGBarray[i], OUTPUT);
  }
}

void loop() {
    for (int i = 0 ; i < 3 ; i ++) {
    digitalWrite(RGBarray[i], LOW);
    
  }
  buttonPress = 0;
  LCDstringStringPrint("Press button to" , "start mixing!" , 0 , 1);
  delay(500);
  buttonPress = digitalRead(rotButton);
  if (buttonPress == false) {
    LCDstringStringPrint("Setting red..." , "release button" , 0 , 0);
    delay(2000);
    countValue = 0;
    buttonPress = 1 ;
    while (buttonPress != false) {
      LCDstringIntPrint("Red Value:" , countValue , 2 , 4);
      analogWrite(red, countValue);
      redVal = countValue;
      buttonPress = digitalRead(rotButton);
      delay(400);
    }
    LCDstringStringPrint("Setting Green..." , "release button" , 0 , 0);
    delay(2000);
    countValue = 0;
    buttonPress = 1 ;
    while (buttonPress != false) {
      LCDstringIntPrint("Green Value:" , countValue , 2 , 4);
      analogWrite(green, countValue);
      greenVal = countValue;
      buttonPress = digitalRead(rotButton);
      delay(400);
    }
    LCDstringStringPrint("Setting Blue..." , "release button" , 0 , 0);
    delay(2000);
    buttonPress = 1 ;
    countValue = 0;
    while (buttonPress != false) {
      LCDstringIntPrint("Blue Value:" , countValue , 2 , 4);
      analogWrite(blue, countValue);
      blueVal = countValue;
      buttonPress = digitalRead(rotButton);
      delay(400);
    }
    LCDstringStringPrint("Checking colour" , "you mixed" , 0 , 0);
    delay(2000);
    buttonPress = 1 ;
    countValue = 0;
    mapColourVals(redVal, greenVal , blueVal);
    while (buttonPress != false) {
    colourName = checkColour(redVal, greenVal , blueVal);
    LCDstringStringPrint("Mixed colour is:" , colourName , 0 , 0);
    delay(500);
    buttonPress = digitalRead(rotButton);
    }
  }

}

void rotValCheck(void) {
  clockOut = digitalRead(rotClocPin);
  dataOut = digitalRead(rotDataPin);
  if (clockOut == dataOut) {
    countValue = countValue - 5;
  } else {
    countValue = countValue + 5;
  }
}

void LCDstringStringPrint(String printVal , String printVal2, byte charac , byte charac2) {
  lcd.clear();
  lcd.setCursor(charac, 0); //Start at character 0 on line 0
  lcd.print(printVal);
  lcd.setCursor(charac2, 1);
  lcd.print(printVal2);
}
void LCDstringIntPrint(String printVal , int printVal2, byte charac , byte charac2) {
  lcd.clear();
  lcd.setCursor(charac, 0); //Start at character 0 on line 0
  lcd.print(printVal);
  lcd.setCursor(charac2, 1);
  lcd.print(printVal2);
}
void mapColourVals( int redCol, int greenCol , int blueCol){
  redVal = map(redCol , 0 , 255 , 0 , 5);
  greenVal = map(greenCol , 0 , 255 , 0 , 5);
  blueVal = map(blueCol , 0 , 255 , 0 , 5);
}

String checkColour (int redValue , int greenValue , int blueValue) {
  
  switch (redValue) {
    case 5:
    case 4:
      switch (blueValue) {
        case 5:
        case 4:
          switch (greenValue) {
            case 5:
            case 4:
              return "white";
              break;
            case 3:
            case 2:
              return "Fuschia Pink";
              break;
            case 1:
            case 0:
              return "Magenta";
              break;
          }
          break;
        case 3:
        case 2:
          switch (greenValue) {
            case 5:
            case 4:
              return "Yellow Haze";
              break;
            case 3:
            case 2:
              return "Salmon";
              break;
            case 1:
            case 0:
              return "Deep Pink";
              break;
          }
          break;
        case 1:
        case 0:
          switch (greenValue) {
            case 5:
            case 4:
            return "Yellow";
              break;
            case 3:
            case 2:
              return "Dark Orange";
              break;
            case 1:
            case 0:
              return "Red";
              break;
          }//green
          break;
      }//blue
      break;
    case 3:
    case 2:
      switch (blueValue) {
        case 5:
        case 4:
          switch (greenValue) {
            case 5:
            case 4:
              return "Electric Blue";
              break;
            case 3:
            case 2:
              return "Light Slate Blue";
              break;
            case 1:
            case 0:
              return "Indigo";
              break;
          }
          break;
        case 3:
        case 2:
          switch (greenValue) {
            case 5:
            case 4:
              return "Light Green";
              break;
            case 3:
            case 2:
              return "Grey";
              break;
            case 1:
            case 0:
              return "Purple";
              break;
          }
          break;
        case 1:
        case 0:
          switch (greenValue) {
            case 5:
            case 4:
              return "Charteuse";
              break;
            case 3:
            case 2:
              return "Olive";
              break;
            case 1:
            case 0:
              return "Maroon";
              break;
          }//green
          break;
      }//blue
      break;
    case 1:
    case 0:
      switch (blueValue) {
        case 5:
        case 4:
          switch (greenValue) {
            case 5:
            case 4:
              return "Cyan";
              break;
            case 3:
            case 2:
              return "Azure";
              break;
            case 1:
            case 0:
              return "Blue";
              break;
          }
          break;
        case 3:
        case 2:
          switch (greenValue) {
            case 5:
            case 4:
              return "Spring Green";
              break;
            case 3:
            case 2:
              return "Teal";
              break;
            case 1:
            case 0:
              return "Navy";
              break;
          }
          break;
        case 1:
        case 0:
          switch (greenValue) {
            case 5:
            case 4:
              return "Green";
              break;
            case 3:
            case 2:
              return "Office Green";
              break;
            case 1:
            case 0:
              return "Black";
              break;
          }//green
          break;
      }//blue
      break;
  }//red

}//close function



 

 

2 Comments

  1. Avatar hbarkhof on July 25, 2017 at 3:51 am

    How to connect the components ? Do you have a electric scheme ?

  2. Avatar Walter Hynson on August 12, 2017 at 4:59 pm

    no wiring diagram,look at the library for each part and then check the program listing especially the top section of the list,also nothing on how the program works,what happened to explain every line of a program,before building this experiment ,I would verify the program to insure it will check out.

Leave a Comment