Working example of using the QWIIC Joystick to change Each RGB Channel and display values on OLED

A Grove strip driver was used

DYI .96 OLED

QWIIC Joystick (Sparkfun)

Below is a working example of how I accomplished it.

The code was selected and “copy for forum” was used: Arduino IDE

//Using gitHub library
//The following code is working as of: 10/09/2020:1601
//
/***************************************************************************/
/*
 *  Changed the display to #define SSD1306_128_64  in Adafruit_SSD1306.h  Library 
 * After initializing the display, the above sketch then draws a pixel at each extreme of the display by using drawPixel() to place a pixel in each corner of the screen. The first parameter passed to drawPixel() is the screen X coordinate and the second parameter is the screen Y coordinate.
Screen dimensions are 128 by 64 pixels and pixel coordinates start at 0, 0 for the top left pixel. This means that the X coordinates for the screen are from 0 to 127 (not 1 to 128) left to right; and Y coordinates are from 0 to 63 (not 1 to 64) top to bottom.
As can be seen in the sketch and on the display, the corner pixels are at the following coordinates:

Top left pixel – x = 0, y = 0.
Top right pixel – x = 127, y = 0.
Bottom left pixel – x = 0, y = 63.
Bottom right pixel – x = 127, y = 63.
  xMap = map(joystick.getHorizontal(), 0,1023, 0, 7);
  yMap = map(joystick.getVertical(),0,1023,7,0);
Position of Joystick:
Longside toward me, power light Right hand side
Regular values (non-mapped):
(1023,0)    (1023,518)    (1023,1023)|s
                                     |h
                                     |o
(508,0)     (508,518)     (508,1023) |r  
                                     |t 
                                     |     power led
(0,0)       (0,518)       (0,1023)   |s
Long side----------------------------|
                                          
MAP                                       
Longside toward me, power light Right hand side
(7,7)       (7,4)         (7,0)      |s
 5                                   |h
 4                                   |o
(3,7)  6  5 (3,4) 3  2  1 (3,0)      |r  
 2                                   |t
 1                                   |     power led    
(0,7)       (0,4)         (0,0)      |s
Long side----------------------------|

(7,7) increase Red by 5
(0,7) decrease Red by 5
(3,7) Nothing

(7,4) increase Blue by 5
(0,4) decrease Blue by 5
(3,4)  Nothing - default location

(7,0) increase Green by 5
(0,0) decrease Green by 5
(3,0)  Nothing 

positions: (1) x<=1, y>=6
           (2) 2 <= x<=4; y>=6
           (3) 5<=x <=7;  y>=6
           (4) 5<=x <=7; 3 <= y<=5
           (5) 2 <= x<=4; 3 <= y<=5
           (6) x<=1;   3 <= y<=5
           (7) x<=1, y<=2
           (8) 2 <= x<=4; y<=2
           (9) 5<=x <=7;  y<=2         
*/

#include <Wire.h>
#include "RGBdriver.h"

//#include <SPI.h>

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "SparkFun_Qwiic_Joystick_Arduino_Library.h" //Click here to get the library: http://librarymanager/All#SparkFun_joystick
JOYSTICK joystick; //Create instance of this object

// OLED display TWI address
#define OLED_ADDR   0x3C
//I2C scanner double checked addresses;
//I2C device found at address 0x20 - joystick
//I2C device found at address 0x3C - OLED

// reset pin not used on 4-pin OLED module
Adafruit_SSD1306 display(-1);  // -1 = no reset pin

// 128 x 64 pixel display
#if (SSD1306_LCDHEIGHT != 64)
#error("Height incorrect, please fix Adafruit_SSD1306.h!");
#endif


#define CLK 5   //0  2  pins definitions for the driver        
#define DIO 6   //1  /3
RGBdriver Driver(CLK,DIO);
int k = 16;
int ixCurrent;
int iyCurrent;
int ixOld;
int iyOld;
int iButtonCur;
int iButtonOld;
int indxArray = 0;
bool bButton;
String cString, cColor;    //Conversion for Display
int xMap, yMap; 
int xValue = 0;
int yValue = 0;
int iChng = 10;
int iRed, iBlue, iGreen, iColor;
String sColors[4] = {"ORANGE", "LIGHT BROWN", "HARVEST GOLD", "BLUE" };  // 0, 1, 2, 3
int aRed[4] = {255, 196, 230, 0};  //Orange. Light Brown, Harvest GOld, Blue
int aGreen[4] = {165, 98, 153, 0}; //Orange. Light Brown, Harvest GOld, Blue
int aBlue[4] = {0, 16, 0, 255};    //Orange. Light Brown, Harvest GOld, Blue

//String sColors[5] = {"ORANGE", "LIGHT BROWN", "HARVEST GOLD", "BLUE", "ORANGE" };  // 0, 1, 2, 3
//int aRed[5] = {255, 196, 230, 0, 255};  //Orange. Light Brown, Harvest GOld, Blue
//int aGreen[5] = {165, 98, 153, 0, 165}; //Orange. Light Brown, Harvest GOld, Blue
//int aBlue[5] = {0, 16, 0, 255, 0};    //Orange. Light Brown, Harvest GOld, Blue

//String sColors[8] = {"ORANGE", "LIGHT BROWN", "HARVEST GOLD", "BLUE", "ORANGE", "LIGHT BROWN", "HARVEST GOLD", "BLUE" };  // 0, 1, 2, 3
//int aRed[8] = {255, 196, 230, 0, 255, 196, 230, 0};  //Orange. Light Brown, Harvest GOld, Blue
//int aGreen[8] = {165, 98, 153, 0, 165, 98, 153, 0}; //Orange. Light Brown, Harvest GOld, Blue
//int aBlue[8] = {0, 16, 0, 255, 0, 16, 0, 255};    //Orange. Light Brown, Harvest GOld, Blue
   //If I increase the arrays to >= 5 no values are displayed on the OLED   10/10/2020:0952

void setup()  
{ 

Driver.begin(); // begin
  //Serial.begin(9600); 
  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  // initialize and clear display
  display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
  display.clearDisplay();
  display.display();
  delay(500);

  if(joystick.begin() == false)   //This must be here
  {
    Serial.println("Joystick does not appear to be connected. Please check wiring. Freezing...");
    while(1);
  }
    iRed = 255;
    iBlue = 255;
    iGreen = 255;  
    iColor = 0;
}    // End setup 



void loop()  
{                        //use the values of the joyStick to change the RGB Strip LEDs
  //int xMap, yMap, xValue, yValue;
  //int iRed, iBlue, iGreen;
  //String sColors(4) = {"ORANGE", "LIGHT BROWN", "HARVEST GOLD", "BLUE"};  // 0, 1, 2, 3
  //int cRed(4) = {255, 196, 230, 0};  //Orange. Light Brown, Harvest GOld, Blue
  //int cGreen(4) = {165, 98, 153, 0}; //Orange. Light Brown, Harvest GOld, Blue
  //int cBlue(4) = {0, 16, 0, 255};    //Orange. Light Brown, Harvest GOld, Blue
  
 
   xValue = joystick.getHorizontal();
   //delay(500); 
   xMap = map(joystick.getHorizontal(),0,1023, 0, 7);  //Now works 10/10/20:1718  
   int mapX;
   mapX = xMap;
   display.setCursor(0,36);
   display.print("MX= " + String(mapX));  //"MX= " + String(xMap); + String(xValue)  
   delay(300); 
   yValue = joystick.getVertical();  //having problems
   yMap = map(joystick.getVertical(),0,1023,7,0);

 // xyRJoystick(xValue, yValue, " ");
    
   delay(100);  
   bButton = joystick.checkButton();
   delay(100);   
 if (bButton) {
    iRed = 125;
    iBlue = 125;
    iGreen = 125;  
    changeLEDcolor(iRed, iGreen, iBlue);
 }
 else {
   xyMJoystick(xMap, yMap, " ");
   iChangeColor(xMap, yMap);    //Determine RGB values from joystick location

   String sX, sY, sPrntX, sPrntY;
   sX = String(xMap);
   sY = String(yMap);
   sPrntX = "MX= " + sX;  //joystick Horizontal value
   sPrntY = "MY= " + sY;  //joystick Vertical value       

   changeLEDcolor(iRed, iGreen, iBlue);

    //delay(500);
    display.setTextSize(1);
    display.setTextColor(WHITE);

    //delay(700);

    //delay(600);
    //display.setCursor(0,56); 
    //display.print("R= " + String(iRed)+ " B= " + String(iBlue) + " G=" + String(iGreen));   //Then do something

    //delay(500);
    display.setCursor(0,46);
    display.print(sPrntY);
    //delay(600);    
    //display.setCursor(0,36);   see above
    //display.print(sPrntX);

    //delay(500);
    display.setCursor(0,26); 
    display.print("G= " + String(iGreen));   //Then do something
    
    //delay(500);
    display.setCursor(0,16); 
    display.print("B= " + String(iBlue));   //Then do something
    
    //delay(500);
    display.setCursor(0,0); 
    display.print("R= " + String(iRed));   //Then do something
    delay(500);
    display.display();  
     delay(800);
    display.clearDisplay();
 } 


}   // End Main LOOP



void changeLEDcolor(int iR, int iG, int iB) 
{                   //(int RED, GREEN, BLUE)
// 
 
  //Get Joystick values
  //Default values: X: 508508 Y: 518 Button: 1
  //https://rgbcolorcode.com/color/FFAA00
  //Amber: rgb(255,126,0)
  //Light Brown: rgb(196,98,16)
  //Jarvest Gold  rgb(230, 153,0)
  //Carrot Orange: rgb(255,140,25)
  //Pastel Orange: rgb(255,195,77)
  //Saffron: rgb(255,187,51)
  //Chrome Yellow: rgb(255,170,0)
  //RGB setting example (Chrome Yellow): rgb(255,170,0)
  //But,  stripdriver format:                 G   R   B 
 

    Driver.begin(); // begin
    Driver.SetColor(iG,iR,iB); //GREEN. First node data. SetColor(R,G,B)
    Driver.end();
    delay(500);

}

int iChangeColor(int iX, int iY) {
// ************************* RED Channel  ***************************  

if (iX==0 && iY ==7){
  if (iRed < iChng) {
    //Do not change
  }
  else {
    iRed = iRed - iChng;
  }
}  //End  if
else if (iX==3 && iY == 7) {
  iRed = 255;
  //iBlue = 0;
  //iGreen = 0;
}  //End else if
else if (iX ==7 && iY == 7) {
  if (iRed > 250) {
    //Do not change
  }
  else {
    iRed = iRed + iChng;
  }
}  //End else if
// ************************* Default Joystick  ***************************  
else if (iX == 3 && iY == 4) {
  //Joystick center, default position  : do nothing yet
}
// ************************* BLUE Channel  ***************************
else if (iX ==7 && iY == 4) {
  if (iBlue > 250) {
    //Do not change
  }
  else {
    iBlue = iBlue + iChng;
  }
}  //End else if
else if (iX == 0 && iY == 4) {
  if (iBlue < iChng) {
    //Do not change
  }
  else {
    iBlue = iBlue - iChng;
  }
}  //End else if
// ************************* GREEN Channel  ***************************
else if (iX == 7 && iY == 0) {
  if (iGreen > 250) {
    //Do not change
  }
  else {
    iGreen = iGreen + iChng;
  }
}  //End else if

else if (iX == 0 && iY == 0) {
  if (iGreen < iChng) {
    //Do not change
  }
  else {
    iGreen = iGreen - iChng;
  }
}  //End else if

else if (iX == 3 && iY == 0) {
  //iRed = 0;
  //iBlue = 0;
  iGreen = 255;
}  //End else if

else {
  //oops!
}  

}   // end change Color

void xyRJoystick(int iX, int iY, String sT) 
{                   
// 
  String sX, sY, sPrntX, sPrntY;
  sX = String(iX);
  sY = String(iY);
  sPrntX = "X= " + sX;  //joystick Horizontal value
  sPrntY = "Y= " + sY;  //joystick Vertical value  
  //Get Joystick values
  //Default values: X: 508508 Y: 518 Button: 1
 
}

void xyMJoystick(int iX, int iY, String sT) 
{                   
// 
  String sX, sY, sPrntX, sPrntY;
  sX = String(iX);
  sY = String(iY);
  sPrntX = "MX= " + sX;  //joystick Horizontal value
  sPrntY = "MY= " + sY;  //joystick Vertical value  
  //Get Joystick values
  //Default values: X: 508508 Y: 518 Button: 1

}

void headerOLED() {
    display.setTextSize(2);
    display.setTextColor(WHITE);  
    display.setCursor(0,0);
    display.print("COLORS!");  
    display.display();   
    delay(1000);     ///Somehow the timing was messed up.  Added more delay
}

void comparit() {
  int iX;
  int iY;
  int iPos;
 if (iX<=1 && iY >=6){
  iPos = 0;
 
}
else if (2<= iX <=4 && iY >=6) {
  iPos = 1;
}
else if (5<= iX <=7 && iY >=6) {
  iPos = 2;
}
else if (5<=iX <=7 && 3 <= iY<=5) {
  iPos = 3;
}
else if (2 <= iX<=4 && 3 <= iY<=5) {
  iPos = 4;
}
else if (iX<=1 && 3 <= iY<=5) {
  iPos = 5;
}
else if (iX<=1 && iY<=2) {
  iPos = 6;
}
else if (2 <= iX<=4 && iY<=2) {
  iPos = 7;
}
else if (5<=iX <=7 && iY<=2) {
  iPos = 8;
}
else if (iX==3 && iY==4) {
  iPos = 8;

}
else {
  //oops!
 
  iPos = 0;
} 
}
void textSpacing(void) {
  display.setTextSize(2);
  display.setTextColor(WHITE);
  display.setCursor(0,0);
  display.print("123456789A");  
  display.setTextSize(1);
  display.setCursor(0,16);
  display.print("123456789A123456789B1");
  display.setCursor(0,26);
  display.print("ABCDEFGHIJKLMNOPQRSTU");
  display.setCursor(0,36);
  display.print("123456789A123456789B1");
  display.setCursor(0,46);
  display.print("ABCDEFGHIJKLMNOPQRSTU");  
  display.setCursor(0,56);
  display.print("123456789A12345678");
 
  // update display with all of the above graphics
  display.display();  
}

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.setCursor(0,1);
  display.println(F("123456789A12345678"));
  display.setCursor(0,2);
  display.println(F("ABCDEFGHIJKLMNOP"));
  display.println(F("                "));
  //display.setCursor(0,3);
  //display.println(F("Red Blue Green"));
  
  //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);
}

Thanks for sharing, this will probably be helpful to someone on their own project!