MicroView sliders with text labels using RGB LED

Introduction

It’s possible to draw multiple components of different kinds on the MicroView screen at once.

In this blog, the three inputs to an RGB LED are controlled using pulse width modulation (PWM) signals.  The three sliders are set up with simple labels ‘R’, ‘G’ or ‘B’ to the left.  Each colour is raised to full brightness, then dimmed in sequence.  The sliders show this graphically and display the current PWM value from 0-256 in real time.

Circuit

Pins referenced in code as 3, 5 and 6 (numerical pins 12 to 14) are capable of PWM on the MicroView.  These are connected to the LED via 330 ohm resistors in the usual way, with the COMMON of the LED connected to pin 8 (GND).

Code

#include   // include MicroView library

MicroViewWidget *redWidget, *greenWidget, *blueWidget; // declare 3 widget pointers

int RED = 6;            // declare RED LED pin 6
int GREEN = 5;      // declare GREEN LED pin 5
int BLUE = 3;         // declare BLUE LED pin 3
int fadeStep = 10;  // declare fading steps
int dly=20;             // declare delay

void setup()
{
uView.begin();     // start MicroView
uView.clear(PAGE);    // clear page
uView.setCursor(0,0);  // set cursor at 0,0
uView.print(“R”);   // print R
redWidget = new MicroViewSlider(7,0,0,255); // declare RED widget as slider.  x value of 7 is max before slider wraps
uView.setCursor(0,20);  // set cursor at 0,20
uView.print(“G”);
greenWidget = new MicroViewSlider(7,20,0,255); // declare GREEN widget as slider
uView.setCursor(0,40);  // set cursor at 0,40
uView.print(“B”);
blueWidget = new MicroViewSlider(7,40,0,255); // declare BLUE widget as slider

pinMode(RED, OUTPUT);    // set RED LED pin as OUTPUT
pinMode(GREEN, OUTPUT);    // set GREEN LED pin as OUTPUT
pinMode(BLUE, OUTPUT);    // set BLUE LED pin as OUTPUT
}

void loop()
{
int i;      // init i variable for general use
// brightening
for (i=0;i<=255;i+=fadeStep) {   // step i from 0 to 255 by fadeSteps redWidget->setValue(i);   // set brightness value for RED LED to widget
uView.display();   // display the content of the screen buffer
analogWrite(RED,i);   // set brightness value for RED LED to the pin
delay(dly);
}
// dimming
for (i=255;i>=0;i-=fadeStep) {   // step i from 255 to 0 by fadeSteps
redWidget->setValue(i);
uView.display();
analogWrite(RED,i);
delay(dly);
}

// brightening
for (i=0;i<=255;i+=fadeStep) { greenWidget->setValue(i);
uView.display();
analogWrite(GREEN,i);
delay(dly);
}
// dimming
for (i=255;i>=0;i-=fadeStep) {
greenWidget->setValue(i);
uView.display();
analogWrite(GREEN,i);
delay(dly);
}

// brightening
for (i=0;i<256;i+=fadeStep) { blueWidget->setValue(i);
uView.display();
analogWrite(BLUE,i);
delay(dly);
}
// dimming
for (i=255;i>=0;i-=fadeStep) {
blueWidget->setValue(i);
uView.display();
analogWrite(BLUE,i);
delay(dly);
}
}

 

Notes

1. Avoiding wrapping of the sliders:  The maximum x value offset for the start of the sliders was found to be 7 pixels.  Given that the screen is 64 pixels across, this implies the sliders are of fixed width 58 pixels.  This was sufficient to insert a single character as a label to the left of each slider.
2. Vertical spacing.  This was set to 20 pixels, allowing for three, well spaced sliders.   There is potentially more space remaining for graphics to enhance the display still further.

NB:  All code modified from MicroView Learning Kit supplied by Geek Ammo.  Cheers!

Advertisement