Category Archives: arduino

Blinky the one-eyed Clock

This is a rewrite of a project I created in 2010 which brought me a lot of joy, so I hope you enjoy it too. Please read the entire article before starting your own. You can still make it today, the parts are easily available.

I’ve always enjoyed making Arduino-powered clocks, however over time they tended to become increasingly complex. So to counter this, allow me to introduce you to “Blinky” the one-eyed clock:

It reminds me of the giant killer orb “Rover” from “The Prisoner“… Using a minimal Arduino bootrom system, a DS1307 real time clock IC and an RGB diffused LED, you can make a clock that blinks the time, using the colours of the LED to note different numerical values.

For example, if the time is 12:45, the clock will blink red 12 times, then show blue for a second (think of this as the colon on a digital clock) then blink four times in green (for forty minutes), then blink three times in red for the individual minutes.

If there is a zero, blink blue quickly. Then the clock will not display anything for around forty seconds, then repeat the process. Here he (she, it?) is blinking the time:

Setting the clock is simple. It is set to start at 12:00 upon power up. So for the first use you have to wait until about five seconds before midday or midnight, then power it up. To save cost it doesn’t use a backup lithium battery on the real-time clock IC, but you could add one if required. So let’s get started.

The first thing to do was test the RGB LED for brightness levels, so I just connected it to the digital output pins of my Arduino-compatible board via suitable current-limiting resistors. Red, green and blue to D9, D10 and D11 respectively. Each LED is going to be different, so to ensure maximum brightness without causing any damage you need to calculate the appropriate resistor values.

This is quite easy, the formula is: resistor (ohms) = voltage drop / LED current So if you have a 5V supply, and LED that needs only 2 volts, and draws 20 milliamps (0.2 amps) , the calculation will be: resistor = (5-2)/0.02 = 150 ohms. To be safe I used 180 ohm resistors. The LED was tested with this simple sketch:

/*
blinky LED test
*/
int red = 2;
int green = 3;
int blue = 4;
int d = 300;
void setup()
{
pinMode(red, OUTPUT);
pinMode(green, OUTPUT);
pinMode(blue, OUTPUT);
}
void loop()
{
digitalWrite(red, HIGH);
delay(d);
digitalWrite(red, LOW);
delay(d);
digitalWrite(green, HIGH);
delay(d);
digitalWrite(green, LOW);
delay(d);
digitalWrite(blue, HIGH);
delay(d);
digitalWrite(blue, LOW);
delay(d);
}

It was interesting to alter the value of d, the delay variable, to get an idea for an appropriate blinking speed. Originally the plan was to have the LED in a photo frame, but it was decided to mount a ping-pong ball over the LED for a retro-style look. Here is a short video of the result of the test:

If you are going to use a ping-pong ball, please be careful when cutting into it with a knife, initially it may require a lot of force, but once the knife cuts through it does so very quickly.

Now it was time to develop the sketch to convert time into blinks. The sketch itself is quite simple. Read the hours and minutes from the DS1307 timer IC; convert the hours to 12 hour time; then blink an LED for the number of hours, display another colour for the colon; divide the minutes by ten and blink that in another colour; then the modulus of minutes and ten to find the individual minutes, and blink those out. Here is the first test sketch:

/*
"blinky" the one-eyed clock
Version beta 1
John Boxall August 2010/6th April 2022 – http://tronixstuff.com
DS1307/i2c timekeeping based on code by Maurice Ribble 17-4-2008 – http://www.glacialwanderer.com/hobbyrobotics
*/
#include "Wire.h"
#define DS1307_I2C_ADDRESS 0x68
int red = 9; // LEDs connected to these pins as you might want to PWM them to alter brightness
int green = 10;
int blue = 11;
// Convert normal decimal numbers to binary coded decimal
byte decToBcd(byte val)
{
return ( (val / 10 * 16) + (val % 10) );
}
// Convert binary coded decimal to normal decimal numbers
byte bcdToDec(byte val)
{
return ( (val / 16 * 10) + (val % 16) );
}
void setDateDs1307(byte second, // 0-59
byte minute, // 0-59
byte hour, // 1-23
byte dayOfWeek, // 1-7
byte dayOfMonth, // 1-28/29/30/31
byte month, // 1-12
byte year) // 0-99
{
Wire.beginTransmission(DS1307_I2C_ADDRESS);
Wire.write(0);
Wire.write(decToBcd(second)); // 0 to bit 7 starts the clock
Wire.write(decToBcd(minute));
Wire.write(decToBcd(hour));
Wire.write(decToBcd(dayOfWeek));
Wire.write(decToBcd(dayOfMonth));
Wire.write(decToBcd(month));
Wire.write(decToBcd(year));
Wire.write(0x10); // sends 0x10 (hex) 00010000 (binary) to control register – turns on square wave
Wire.endTransmission();
}
void getDateDs1307(byte *second,
byte *minute,
byte *hour,
byte *dayOfWeek,
byte *dayOfMonth,
byte *month,
byte *year)
{
// Reset the register pointer
Wire.beginTransmission(DS1307_I2C_ADDRESS);
Wire.write(0);
Wire.endTransmission();
Wire.requestFrom(DS1307_I2C_ADDRESS, 7);
*second = bcdToDec(Wire.read() & 0x7f);
*minute = bcdToDec(Wire.read());
*hour = bcdToDec(Wire.read() & 0x3f); // Need to change this if 12 hour am/pm
*dayOfWeek = bcdToDec(Wire.read());
*dayOfMonth = bcdToDec(Wire.read());
*month = bcdToDec(Wire.read());
*year = bcdToDec(Wire.read());
}
void blinkLED(int colour, int ondelay, int offdelay, int blinks)
// blinks LED on pin 'colour' for 'blinks' times with on and off delay of 'ondelay', 'offdelay'
// colour: 9 is red, 10 is green, 11 is blue
{
for (int a = 0; a < blinks; a++) {
digitalWrite(colour, HIGH); delay(ondelay); digitalWrite(colour, LOW); delay(offdelay);
}
}
void blinkTime() // blinks the time
{
byte second, minute, hour, dayOfWeek, dayOfMonth, month, year;
float aa;
int bb;
getDateDs1307(&second, &minute, &hour, &dayOfWeek, &dayOfMonth, &month, &year);
// convert hours from 24 to 12 hour time
if (hour == 0)
{
hour = 12;
}
if (hour > 12)
{
hour = hour – 12;
}
blinkLED(9, 500, 500, hour); // blink hours in red
blinkLED(11, 1000, 500, 1); // show blue for one second
aa = minute;
aa = aa / 10;
bb = int(aa); // find the value of tens of minutes (0~5)
if (bb > 0)
{
blinkLED(10, 500, 500, bb); // blink tens of minutes
}
if (bb == 0) // but if the time is something like 03:02?
{
blinkLED(11, 200, 200, 1); // blink blue quickly for zero
}
aa = minute % 10; // find modulo of minutes to get single minutes
if (bb > 0)
{
blinkLED(9, 500, 500, bb);
}
if (bb == 0)
{
blinkLED(11, 200, 200, 1); // blink blue quickly for zero
}
}
void setup()
{
byte second, minute, hour, dayOfWeek, dayOfMonth, month, year;
Wire.begin();
second = 0;
minute = 17;
hour = 4;
dayOfWeek = 6; // these values are moot, but need to store something
dayOfMonth = 28;
month = 5;
year = 10;
setDateDs1307(second, minute, hour, dayOfWeek, dayOfMonth, month, year);
pinMode(red, OUTPUT);
pinMode(green, OUTPUT);
pinMode(blue, OUTPUT);
}
void loop()
{
blinkTime();
delay(5000);
}
view raw blinkybeta1.ino hosted with ❤ by GitHub

Finally, the code was tested using the Arduino-compatible board and my home-made DS1307 real time clock shield (hey it was 2010, DS32xx were expensive). It is best to use existing hardware while testing, before committing to purchasing new hardware and so on. So here it is on the breadboard:

Here is the prototype in action:

If you’re wondering why the videos are potato-cam quality, smartphones couldn’t record using 4K Ultra HD in 2010.

But perhaps the first version was a little bland. By using analogWrite() we can control the brightness of the LED segments. So I’ve added two more functions, whiteGlow() and blueGlow(); whose purpose is to make the display “glow” by increasing then decreasing the brightness.

And I’ve scaled back the amount of blinking, to make blinky less obvious. So now the display will glow white to announce the forthcoming display of time, wait a second, blink the time (with a blue glowing colon) then stay dark for ten seconds before repeating the process. Here is a quick demonstration of this display style:

Here is the sketch for the above demonstration, and the final one I will use with the hardware prototype:

/*
"blinky" the one-eyed clock – Version 2.1
John Boxall 04 August 2010/6th April 2022
IDGAF licence
DS1307/i2c timekeeping based on code by Maurice Ribble
17-4-2008 – http://www.glacialwanderer.com/hobbyrobotics
*/
#include "Wire.h"
#define DS1307_I2C_ADDRESS 0x68
int red = 9; // LEDs connected to these pins as you might want to PWM them to alter brightness
int green = 10;
int blue = 11;
// Convert normal decimal numbers to binary coded decimal
byte decToBcd(byte val)
{
return ( (val / 10 * 16) + (val % 10) );
}
// Convert binary coded decimal to normal decimal numbers
byte bcdToDec(byte val)
{
return ( (val / 16 * 10) + (val % 16) );
}
void setDateDs1307(byte second, // 0-59
byte minute, // 0-59
byte hour, // 1-23
byte dayOfWeek, // 1-7
byte dayOfMonth, // 1-28/29/30/31
byte month, // 1-12
byte year) // 0-99
{
Wire.beginTransmission(DS1307_I2C_ADDRESS);
Wire.write(0);
Wire.write(decToBcd(second)); // 0 to bit 7 starts the clock
Wire.write(decToBcd(minute));
Wire.write(decToBcd(hour));
Wire.write(decToBcd(dayOfWeek));
Wire.write(decToBcd(dayOfMonth));
Wire.write(decToBcd(month));
Wire.write(decToBcd(year));
Wire.write(0x10); // sends 0x10 (hex) 00010000 (binary) to control register – turns on square wave
Wire.endTransmission();
}
void getDateDs1307(byte *second,
byte *minute,
byte *hour,
byte *dayOfWeek,
byte *dayOfMonth,
byte *month,
byte *year)
{
// Reset the register pointer
Wire.beginTransmission(DS1307_I2C_ADDRESS);
Wire.write(0);
Wire.endTransmission();
Wire.requestFrom(DS1307_I2C_ADDRESS, 7);
*second = bcdToDec(Wire.read() & 0x7f);
*minute = bcdToDec(Wire.read());
*hour = bcdToDec(Wire.read() & 0x3f); // Need to change this if 12 hour am/pm
*dayOfWeek = bcdToDec(Wire.read());
*dayOfMonth = bcdToDec(Wire.read());
*month = bcdToDec(Wire.read());
*year = bcdToDec(Wire.read());
}
void blinkLED(int colour, int ondelay, int offdelay, int blinks)
// blinks LED on pin 'colour' for 'blinks' times with on and off delay of 'ondelay', 'offdelay'
// colour: 9 is red, 10 is green, 11 is blue
{
for (int a = 0; a < blinks; a++)
{
digitalWrite(colour, HIGH);
delay(ondelay);
digitalWrite(colour, LOW);
delay(offdelay);
}
}
void blinkTime()
// blinks the time
{
byte second, minute, hour, dayOfWeek, dayOfMonth, month, year;
float aa;
int bb;
getDateDs1307(&second, &minute, &hour, &dayOfWeek, &dayOfMonth, &month, &year);
// convert hours from 24 to 12 hour time
if (hour == 0)
{
hour = 12;
}
if (hour > 12)
{
hour = hour – 12;
}
blinkLED(9, 500, 500, hour); // blink hours in red
blueGlow(1, 10);
aa = minute;
aa = aa / 10;
bb = int(aa); // find the value of tens of minutes (0~5)
if (bb > 0)
{
blinkLED(10, 500, 500, bb); // blink tens of minutes
}
if (bb == 0) // but if the time is something like 03:02?
{
blinkLED(11, 200, 200, 1); // blink blue quickly for zero
}
aa = minute % 10; // find modulo of minutes to get single minutes
bb = aa;
if (bb > 0)
{
blinkLED(9, 500, 500, bb); // blink tens of minutes
}
if (bb == 0)
{
blinkLED(11, 200, 200, 1); // blink blue quickly for zero
}
}
void whiteGlow(int n, int d)
{
for (int nn = 0; nn < n; nn++)
{
for (int a = 0; a <= 255; a++)
{
analogWrite(red, a);
analogWrite(green, a);
analogWrite(blue, a);
delay(d);
}
for (int a = 255; a >= 0; –a)
{
analogWrite(red, a);
analogWrite(green, a);
analogWrite(blue, a);
delay(d);
}
}
}
void blueGlow(int n, int d)
{
for (int nn = 0; nn < n; nn++)
{
for (int a = 0; a <= 255; a++)
{
analogWrite(blue, a);
delay(d);
}
for (int a = 255; a >= 0; –a)
{
analogWrite(blue, a);
delay(d);
}
}
}
void setup()
{
byte second, minute, hour, dayOfWeek, dayOfMonth, month, year;
Wire.begin();
second = 0;
minute = 17;
hour = 4;
dayOfWeek = 6; // these values are moot, but need to store something
dayOfMonth = 28;
month = 5;
year = 10;
setDateDs1307(second, minute, hour, dayOfWeek, dayOfMonth, month, year); // every time blinky has new batteries, it will start from midnight/midday
pinMode(red, OUTPUT);
pinMode(green, OUTPUT);
pinMode(blue, OUTPUT);
}
void loop()
{
whiteGlow(1, 10); // glow white – announces that the time will now be shown
delay(1000); // give people a second to focus on blinky
blinkTime();
delay(50000); // wait 50 seconds
}
view raw blinkyV2-1.ino hosted with ❤ by GitHub

Once happy with the sketch, I put a fresh ATmega328P-PU with Arduino bootloader in the board and programmed it with the sketch, to be used in the final version. The next step is to build my own hardware. The last hardware unknown is the amount of current the circuit draws. Once I know this the correct voltage regulator and power supply can be decided upon.

I had a fair idea it would be less than 100 milliamps, so I put a 6V battery onto supply duty via a 78L05 5V regulator (data sheet), and recorded the result:

So it varies, between 20.5 and 46 mA. As it only reaches 46 mA for a short time, we could consider the constant draw to be averaged out at 30 mA. I really want this to be able to run from a battery, but without having an external lead-acid battery lurking around, it will need a plug-pack with an output voltage greater than 7V DC.

Another alternative would be to run it from a USB socket, a nice source of 5V. If doing so, there wouldn’t be a need for the 78L05 regulator. Which brings us to the circuit diagram, which includes the power regulator. I’ve also altered the resistors to suit the RGB LED used, your values may be different:

And since it’s 2022, not 2010 – I’ve replaced the DS1307 circuit with a RTC module. Y1 is a three pin 16MHz ceramic resonator, we used those in 2010 as they were cheaper and easier than a crystal and two 22pF capacitors.

The circuit does not allow for uploading code, so you will need to program the microcontroller on another Arduino or compatible board, then transfer it to the blinky circuit board as described above. At this stage you should test it again – but using a solderless breadboard. In doing so you can make final hardware checks, and generally make sure everything works as it should. This is also a good stage to double-check you are happy with the display behaviour, default time and so on.

Used the Duemilanove as a lazy 5V for testing.

Time to solder up the circuit on some stripboard. Blank stripboard varies, but luckily I found this and a nice box to hold it in:

Stripboard does vary between retailers and so on, so you will need to work out the layout with your own board. In doing so, please double-check your work – follow the layout against the schematic and so on.

Have a break, then check it again. There is nothing worse than soldering away to realise you are one strip too far over or something. My hand-eye coordination is not the best, therefore my soldering isn’t pretty, but it works:

Note that the images above are using the 2010 circuit – which had a DS1307 sub-circuit.

One would say that there is a good argument for making your own PCBs… and I would agree with that. In 2010 it wasn’t that easy or inexpensive. Now you have KiCAD and Chinese PCB fabs tripping over themselves to give you cheap boards.

The LED is soldered to some short leads to give it a bit of play, and some heatshrink over the legs to keep them isolated:

And finally, to add a DC socket to feed blinky some power:

The last thing was to check the soldering once more under natural light, to check for bridges or shorts, then have a cup of tea. Upon my return I drilled out a hole in the enclosure lid for the LED, and one one the side for the DC socket, and fitted the lot together… and success! It worked.

I hope you enjoyed making this or at least reading about it. If you find this sort of thing interesting, please consider ordering one or both of my books from No Starch Press, or other book sellers:

  • Arduino Workshop, 2nd Edition – a hands-on introduction to electronics and Arduino with 65 projects
  • AVR Workshop – A comprehensive introduction to working with electronics and the Microchip AVR 8-bit family of microcontrollers with over 55 projects

And as always, have fun and make something.

A tiny tiny 0.49″ 64 x 32 Graphic I2C OLED Display with Arduino

In this article we look at the tiny 0.49″ 64×32 graphic OLED from PMD Way. It is a compact and useful display, that only requires a small amount of time to get working with your Arduino or compatible board.

0.49" 64 x 32 White Graphic OLED - I2C from PMD Way with free delivery worldwide

The purpose of this guide is to get your display successfully operating with your Arduino, so you can move forward and experiment and explore further types of operation with the display.

This includes installing the Arduino library, making a succesful board connection and running a demonstration sketch. So let’s get started!

Connecting the display to your Arduino

The display uses the I2C data bus for communication, and is a 5V and 3.3V-tolerant board.

Arduino Uno to Display

GND ---- GND (GND)
5V/3.3V- Vcc (power supply, can be 3.3V or 5V)
A5 ----- SCL (I2C bus clock)
A4 ----- SDA (I2C bus data)

I2C pinouts vary for other boards. Arduino Leonard uses D2/D3 for SDA and SCL or the separate pins to the left of D13. Arduino Mega uses D20/D21 for SDA and SCL. If you can’t find your I2C pins on other boards, email admin at tronixstuff dot com for assistance.

Installing the Arduino library

To install the library – simply open the Arduino IDE and select Manage Libraries… from the Tools menu. Enter “u8g2” in the search box, and after a moment it should appear in the results as shown in the image below. Click on the library then click “Install”:

install-library-u8g2_grande

After a moment the library will be installed and you can close that box.

Now it’s time to check everything necessary is working. Open a new sketch in the IDE, then copy and paste the following sketch into the IDE (you may find the “view raw” link at the end useful):


// Display – https://pmdway.com/collections/oled-displays/products/0-49-64-x-32-white-graphic-oled-i2c
// Guide – https://pmdway.com/blogs/product-guides-for-arduino/tutorial-using-the-0-49-64-x-32-graphic-i2c-oled-display-with-arduino
#include <Arduino.h>
#include <U8g2lib.h>
#include <Wire.h>
U8G2_SSD1306_64X32_1F_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
void setup() {
u8g2.begin();
}
// fonts https://github.com/olikraus/u8g2/wiki/fntlistall#4-pixel-height
void loop()
{
u8g2.clearBuffer(); // clear the internal memory
u8g2.setFont(u8g2_font_u8glib_4_tf); // choose a suitable font
u8g2.drawStr(0, 5, "Hello,"); // write something to the internal memory
u8g2.drawStr(0, 10, "World…");
u8g2.drawStr(0, 15, "I'm tiny…");
u8g2.drawStr(0, 20, "So tiny!");
u8g2.drawStr(0, 25, "However you can");
u8g2.drawStr(0, 30, "have six lines");
u8g2.sendBuffer(); // transfer internal memory to the display
delay(1000);
u8g2.clearBuffer(); // clear the internal memory
u8g2.setFont(u8g2_font_t0_11_tf); // choose a suitable font
u8g2.drawStr(0, 10, "Hello,"); // write something to the internal memory
u8g2.drawStr(0, 20, "World…");
u8g2.drawStr(0, 30, "I'm tiny…");
u8g2.sendBuffer(); // transfer internal memory to the display
delay(1000);
u8g2.clearBuffer(); // clear the internal memory
u8g2.setFont(u8g2_font_tenstamps_mf); // choose a suitable font
u8g2.drawStr(0, 12, "ABCD"); // write something to the internal memory
u8g2.drawStr(0, 30, "1234");
u8g2.sendBuffer(); // transfer internal memory to the display
delay(1000);
for (int a = 999; a >= 0; –a)
{
u8g2.clearBuffer(); // clear the internal memory
u8g2.setFont(u8g2_font_inb24_mr ); // choose a suitable font
u8g2.setCursor(0, 24);
u8g2.print(a);
a = a – 47;
u8g2.sendBuffer(); // transfer internal memory to the display
delay(100);
}
delay(1000);
}

Your display should go through the demonstration of various font sizes and so on as shown in the video below:

You can see how we’ve used a different font in the sketch – at lines 19, 30 and 38. The list of fonts included with the library are provided at https://github.com/olikraus/u8g2/wiki/fntlistall.

Note that the initial location for each line of text (for example in line 20):

  u8g2.drawStr(0, 5, "Hello,");	 // write something to the internal memory 

The x and y coordinates (0,5) are for the bottom-left of the first character.

If you want to display values, not text – such as integers, use:

    u8g2.print();

… an example of which is show around line 49 in the example sketch.

Where to from here?

Now it’s time for you to explore the library reference guide which explains all the various functions available to create text and graphics on the display, as well as the fonts and so on. These can all be found on the right-hand side of the driver wiki page.

And that’s all for now. This post brought to you by pmdway.com – everything for makers and electronics enthusiasts, with free delivery worldwide.

To keep up to date with new posts at tronixstuff.com, please subscribe to the mailing list in the box on the right, or follow us on twitter @tronixstuff.

 

0.96" 80 x 160 Full Color IPS LCD Module from PMD Way with free delivery worldwide

Tutorial – Using the 0.96″ 80 x 160 Full Color IPS LCD Module with Arduino

The purpose of this guide is to get your 0.96″ color LCD display successfully operating with your Arduino, so you can move forward and experiment and explore further types of operation with the display. This includes installing the Arduino library, making a succesful board connection and running a demonstration sketch.

Although you can use the display with an Arduino Uno or other boad with an ATmega328-series microcontroller – this isn’t recommended for especially large projects. The library eats up a fair amount of flash memory – around 60% in most cases.

So if you’re running larger projects we recommend using an Arduino Mega or Due-compatible board due to the increased amount of flash memory in their host microcontrollers.

Installing the Arduino library

So let’s get started. We’ll first install the Arduino library then move on to hardware connection and then operating the display.

(As the display uses the ST7735S controller IC, you may be tempted to use the default TFT library included with the Arduino IDE – however it isn’t that reliable. Instead, please follow the instructions below). 

First – download the special Arduino library for your display and save it into your Downloads or a temp folder.

Next – open the Arduino IDE and select the Sketch > Include Library > Add .ZIP library option as shown below:

libraryinstall

A dialog box will open – navigate to and select the zip file you downloaded earlier. After a moment or two the IDE will then install the library.

Please check that the library has been installed – to do this, select the Sketch > Include Library option in the IDE and scroll down the long menu until you see “ER-TFTM0.96-1” as shown below:

libraryinstalled

Once that has been successful, you can wire up your display.

Connecting the display to your Arduino

The display uses the SPI data bus for communication, and is a 3.3V board. You can use it with an Arduino or other 5V board as the logic is tolerant of higher voltages.

Arduino to Display

GND ----- GND (GND)
3.3V ---- Vcc (3.3V power supply)
D13 ----- SCL (SPI bus clock)
D11 ----- SDA (SPI bus data out from Arduino)
D10 ----- CS (SPI bus "Chip Select")
D9 ------ DC (Data instruction select pin)
D8 ------ RES (reset input)

If your Arduino has different pinouts than the Uno, locate the SPI pins for your board and modify as appropriate.

Demonstration sketch

Open a new sketch in the IDE, then copy and paste the following sketch into the IDE:

// https://pmdway.com/products/0-96-80-x-160-full-color-lcd-module
#include <UTFT.h>

// Declare which fonts we will be using
extern uint8_t SmallFont[];

// Initialize display
// Library only supports software SPI at this time
//NOTE: support  DUE , MEGA , UNO 
//SDI=11  SCL=13  /CS =10  /RST=8  D/C=9
UTFT myGLCD(ST7735S_4L_80160,11,13,10,8,9);    //LCD:  4Line  serial interface      SDI  SCL  /CS  /RST  D/C    NOTE:Only support  DUE   MEGA  UNO

// Declare which fonts we will be using
extern uint8_t BigFont[];

int color = 0;
word colorlist[] = {VGA_WHITE, VGA_BLACK, VGA_RED, VGA_BLUE, VGA_GREEN, VGA_FUCHSIA, VGA_YELLOW, VGA_AQUA};
int  bsize = 4;

void drawColorMarkerAndBrushSize(int col)
{
  myGLCD.setColor(VGA_BLACK);
  myGLCD.fillRect(25, 0, 31, 239);
  myGLCD.fillRect(myGLCD.getDisplayXSize()-31, 161, myGLCD.getDisplayXSize()-1, 191);
  myGLCD.setColor(VGA_WHITE);
  myGLCD.drawPixel(25, (col*30)+15);
  for (int i=1; i<7; i++)
    myGLCD.drawLine(25+i, ((col*30)+15)-i, 25+i, ((col*30)+15)+i);
  
  if (color==1)
    myGLCD.setColor(VGA_WHITE);
  else
    myGLCD.setColor(colorlist[col]);
  if (bsize==1)
    myGLCD.drawPixel(myGLCD.getDisplayXSize()-15, 177);
  else
    myGLCD.fillCircle(myGLCD.getDisplayXSize()-15, 177, bsize);
    
  myGLCD.setColor(colorlist[col]);
}
void setup()
{
  randomSeed(analogRead(0));
  
// Setup the LCD
  myGLCD.InitLCD();
  myGLCD.setFont(SmallFont);
}

void loop()
{
  int buf[158];
  int x, x2;
  int y, y2;
  int r;

// Clear the screen and draw the frame
  myGLCD.clrScr();

  myGLCD.setColor(255, 0, 0);
  myGLCD.fillRect(0, 0, 159, 13);
  myGLCD.setColor(64, 64, 64);
  myGLCD.fillRect(0, 114, 159, 127);
  myGLCD.setColor(255, 255, 255);
  myGLCD.setBackColor(255, 0, 0);
  myGLCD.print("pmdway.com.", CENTER, 1);
  myGLCD.setBackColor(64, 64, 64);
  myGLCD.setColor(255,255,0);
  myGLCD.print("pmdway.com", LEFT, 114);


  myGLCD.setColor(0, 0, 255);
  myGLCD.drawRect(0, 13, 159, 113);

// Draw crosshairs
  myGLCD.setColor(0, 0, 255);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.drawLine(79, 14, 79, 113);
  myGLCD.drawLine(1, 63, 158, 63);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);
 
  for (int i=9; i<150; i+=10)
    myGLCD.drawLine(i, 61, i, 65);
  for (int i=19; i<110; i+=10)
    myGLCD.drawLine(77, i, 81, i);
    

// Draw sin-, cos- and tan-lines  
  myGLCD.setColor(0,255,255);
  myGLCD.print("Sin", 5, 15);
  for (int i=1; i<158; i++)
  {
    myGLCD.drawPixel(i,63+(sin(((i*2.27)*3.14)/180)*40));
  }
  
  myGLCD.setColor(255,0,0);
  myGLCD.print("Cos", 5, 27);
  for (int i=1; i<158; i++)
  {
    myGLCD.drawPixel(i,63+(cos(((i*2.27)*3.14)/180)*40));
  }

  myGLCD.setColor(255,255,0);
  myGLCD.print("Tan", 5, 39);
  for (int i=1; i<158; i++)
  {
    myGLCD.drawPixel(i,63+(tan(((i*2.27)*3.14)/180)));
  }

  delay(2000);

  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  myGLCD.setColor(0, 0, 255);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.drawLine(79, 14, 79, 113);
  myGLCD.drawLine(1, 63, 158, 63);

 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);  

// Draw a moving sinewave
  x=1;
  for (int i=1; i<(158*20); i++) 
  {
    x++;
    if (x==159)
      x=1;
    if (i>159)
    {
      if ((x==79)||(buf[x-1]==63))
        myGLCD.setColor(0,0,255);
      else
        myGLCD.setColor(0,0,0);
      myGLCD.drawPixel(x,buf[x-1]);
    }
    myGLCD.setColor(0,255,255);
    y=63+(sin(((i*2.5)*3.14)/180)*(40-(i / 100)));
    myGLCD.drawPixel(x,y);
    buf[x-1]=y;
  }

  delay(2000);
 
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);  

// Draw some filled rectangles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        myGLCD.setColor(255,0,255);
        break;
      case 2:
        myGLCD.setColor(255,0,0);
        break;
      case 3:
        myGLCD.setColor(0,255,0);
        break;
      case 4:
        myGLCD.setColor(0,0,255);
        break;
      case 5:
        myGLCD.setColor(255,255,0);
        break;
    }
    myGLCD.fillRect(39+(i*10), 23+(i*10), 59+(i*10), 43+(i*10));
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);   

// Draw some filled, rounded rectangles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        myGLCD.setColor(255,0,255);
        break;
      case 2:
        myGLCD.setColor(255,0,0);
        break;
      case 3:
        myGLCD.setColor(0,255,0);
        break;
      case 4:
        myGLCD.setColor(0,0,255);
        break;
      case 5:
        myGLCD.setColor(255,255,0);
        break;
    }
    myGLCD.fillRoundRect(99-(i*10), 23+(i*10), 119-(i*10), 43+(i*10));
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);

 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);  
// Draw some filled circles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        myGLCD.setColor(255,0,255);
        break;
      case 2:
        myGLCD.setColor(255,0,0);
        break;
      case 3:
        myGLCD.setColor(0,255,0);
        break;
      case 4:
        myGLCD.setColor(0,0,255);
        break;
      case 5:
        myGLCD.setColor(255,255,0);
        break;
    }
    myGLCD.fillCircle(49+(i*10),33+(i*10), 15);
  }

  delay(2000);
    
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);    

// Draw some lines in a pattern
  myGLCD.setColor (255,0,0);
  for (int i=14; i<113; i+=5)
  {
    myGLCD.drawLine(1, i, (i*1.44)-10, 112);
  }
  myGLCD.setColor (255,0,0);
  for (int i=112; i>15; i-=5)
  {
    myGLCD.drawLine(158, i, (i*1.44)-12, 14);
  }
  myGLCD.setColor (0,255,255);
  for (int i=112; i>15; i-=5)
  {
    myGLCD.drawLine(1, i, 172-(i*1.44), 14);
  }
  myGLCD.setColor (0,255,255);
  for (int i=15; i<112; i+=5)
  {
    myGLCD.drawLine(158, i, 171-(i*1.44), 112);
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);    

// Draw some random circles
  for (int i=0; i<100; i++)
  {
    myGLCD.setColor(random(255), random(255), random(255));
    x=22+random(116);
    y=35+random(57);
    r=random(20);
    myGLCD.drawCircle(x, y, r);
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);    
  

// Draw some random rectangles
  for (int i=0; i<100; i++)
  {
    myGLCD.setColor(random(255), random(255), random(255));
    x=2+random(156);
    y=16+random(95);
    x2=2+random(156);
    y2=16+random(95);
    myGLCD.drawRect(x, y, x2, y2);
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);    

// Draw some random rounded rectangles
  for (int i=0; i<100; i++)
  {
    myGLCD.setColor(random(255), random(255), random(255));
    x=2+random(156);
    y=16+random(95);
    x2=2+random(156);
    y2=16+random(95);
    myGLCD.drawRoundRect(x, y, x2, y2);
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);  
 
  for (int i=0; i<100; i++)
  {
    myGLCD.setColor(random(255), random(255), random(255));
    x=2+random(156);
    y=16+random(95);
    x2=2+random(156);
    y2=16+random(95);
    myGLCD.drawLine(x, y, x2, y2);
  }

  delay(2000);
  
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,14,158,113);
  
 myGLCD.setColor(0, 0, 255);
 myGLCD.drawLine(0, 79, 159, 79);  
 
  for (int i=0; i<5000; i++)
  {
    myGLCD.setColor(random(255), random(255), random(255));
    myGLCD.drawPixel(2+random(156), 16+random(95));
  }

  delay(2000);

  myGLCD.fillScr(0, 0, 255);
  myGLCD.setColor(255, 0, 0);
  myGLCD.fillRoundRect(10, 17, 149, 72);
  
  myGLCD.setColor(255, 255, 255);
  myGLCD.setBackColor(255, 0, 0);
  myGLCD.print("That's it!", CENTER, 20);
  myGLCD.print("Restarting in a", CENTER, 45);
  myGLCD.print("few seconds...", CENTER, 57);
  
  myGLCD.setColor(0, 255, 0);
  myGLCD.setBackColor(0, 0, 255);
  myGLCD.print("Runtime: (msecs)", CENTER, 103);
  myGLCD.printNumI(millis(), CENTER, 115);

  delay (5000);   
}

 

Once you’re confident with the physical connection, upload the sketch. It should result with output as shown in the video below:

Now that you have succesfully run the demonstration sketch – where to from here?

The library used is based on the uTFT library by Henning Karlsen. You can find all the drawing and other commands in the user manual – so download the pdf and enjoy creating interesting displays.

This post brought to you by pmdway.com – everything for makers and electronics enthusiasts, with free delivery worldwide.

To keep up to date with new posts at tronixstuff.com, please subscribe to the mailing list in the box on the right, or follow us on twitter @tronixstuff.

0.96" 128 x 64 Graphic OLED Displays - I2C or SPI - Various Colors from PMD Way with free delivery worldwide

Tutorial – Using the 0.96″ 128 x 64 Graphic I2C OLED Displays with Arduino

The purpose of this guide is to have an SSD1306-based OLED display successfully operating with your Arduino, so you can move forward and experiment and explore further types of operation with the display.

This includes installing the Arduino library, making a succesful board connection and running a demonstration sketch. So let’s get started!

Connecting the display to your Arduino

The display uses the I2C data bus for communication, and is a 5V and 3.3V-tolerant board.

Arduino Uno to Display

GND ---- GND (GND)
5V/3.3V- Vcc (power supply, can be 3.3V or 5V)
A5 ----- SCL (I2C bus clock)
A4 ----- SDA (I2C bus data)

I2C pinouts vary for other boards. Arduino Leonard uses D2/D3 for SDA and SCL or the separate pins to the left of D13. Arduino Mega uses D20/D21 for SDA and SCL. If you can’t find your I2C pins on other boards, ask your display supplier.

Installing the Arduino library

To install the library – simply open the Arduino IDE and select Manage Libraries… from the Tools menu. Enter “u8g2” in the search box, and after a moment it should appear in the results as shown in the image below. Click on the library then click “Install”:

install-library-u8g2

After a moment the library will be installed and you can close that box.

Now it’s time to check everything necessary is working. Open a new sketch in the IDE, then copy and paste the following sketch into the IDE:

// Display > https://pmdway.com/products/0-96-128-64-graphic-oled-displays-i2c-or-spi-various-colors

#include <Arduino.h>
#include <U8x8lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

  U8X8_SSD1306_128X64_NONAME_HW_I2C u8x8(/* reset=*/ U8X8_PIN_NONE);   

/*
  This example will probably not work with the SSD1606, because of the
  internal buffer swapping
*/

void setup(void)
{
  /* U8g2 Project: KS0108 Test Board */
  //pinMode(16, OUTPUT);
  //digitalWrite(16, 0);  

  /* U8g2 Project: Pax Instruments Shield: Enable Backlight */
  //pinMode(6, OUTPUT);
  //digitalWrite(6, 0); 

  u8x8.begin();
  //u8x8.setFlipMode(1);
}

void pre(void)
{
  u8x8.setFont(u8x8_font_amstrad_cpc_extended_f);    
  u8x8.clear();

  u8x8.inverse();
  u8x8.print(" U8x8 Library ");
  u8x8.setFont(u8x8_font_chroma48medium8_r);  
  u8x8.noInverse();
  u8x8.setCursor(0,1);
}

void draw_bar(uint8_t c, uint8_t is_inverse)
{ 
  uint8_t r;
  u8x8.setInverseFont(is_inverse);
  for( r = 0; r < u8x8.getRows(); r++ )
  {
    u8x8.setCursor(c, r);
    u8x8.print(" ");
  }
}

void draw_ascii_row(uint8_t r, int start)
{
  int a;
  uint8_t c;
  for( c = 0; c < u8x8.getCols(); c++ )
  {
    u8x8.setCursor(c,r);
    a = start + c;
    if ( a <= 255 )
      u8x8.write(a);
  }
}

void loop(void)
{
  int i;
  uint8_t c, r, d;
  pre();
  u8x8.print("github.com/");
  u8x8.setCursor(0,2);
  u8x8.print("olikraus/u8g2");
  delay(2000);
  u8x8.setCursor(0,3);
  u8x8.print("Tile size:");
  u8x8.print((int)u8x8.getCols());
  u8x8.print("x");
  u8x8.print((int)u8x8.getRows());
  
  delay(2000);
   
  pre();
  for( i = 19; i > 0; i-- )
  {
    u8x8.setCursor(3,2);
    u8x8.print(i);
    u8x8.print("  ");
    delay(150);
  }
  
  draw_bar(0, 1);
  for( c = 1; c < u8x8.getCols(); c++ )
  {
    draw_bar(c, 1);
    draw_bar(c-1, 0);
    delay(50);
  }
  draw_bar(u8x8.getCols()-1, 0);

  pre();
  u8x8.setFont(u8x8_font_amstrad_cpc_extended_f); 
  for( d = 0; d < 8; d ++ )
  {
    for( r = 1; r < u8x8.getRows(); r++ )
    {
      draw_ascii_row(r, (r-1+d)*u8x8.getCols() + 32);
    }
    delay(400);
  }

  draw_bar(u8x8.getCols()-1, 1);
  for( c = u8x8.getCols()-1; c > 0; c--)
  {
    draw_bar(c-1, 1);
    draw_bar(c, 0);
    delay(50);
  }
  draw_bar(0, 0);

  pre();
  u8x8.drawString(0, 2, "Small");
  u8x8.draw2x2String(0, 5, "Scale Up");
  delay(3000);

  pre();
  u8x8.drawString(0, 2, "Small");
  u8x8.setFont(u8x8_font_px437wyse700b_2x2_r);
  u8x8.drawString(0, 5, "2x2 Font");
  delay(3000);

  pre();
  u8x8.drawString(0, 1, "3x6 Font");
  u8x8.setFont(u8x8_font_inb33_3x6_n);
  for(i = 0; i < 100; i++ )
  {
    u8x8.setCursor(0, 2);
    u8x8.print(i);      // Arduino Print function
    delay(10);
  }
  for(i = 0; i < 100; i++ )
  {
    u8x8.drawString(0, 2, u8x8_u16toa(i, 5)); // U8g2 Build-In functions
    delay(10);    
  }

  pre();
  u8x8.drawString(0, 2, "Weather");
  u8x8.setFont(u8x8_font_open_iconic_weather_4x4);
  for(c = 0; c < 6; c++ )
  {
    u8x8.drawGlyph(0, 4, '@'+c);
    delay(300);
  }
  

  pre();
  u8x8.print("print \\n\n");
  delay(500);
  u8x8.println("println");
  delay(500);
  u8x8.println("done");
  delay(1500);

  pre();
  u8x8.fillDisplay();
  for( r = 0; r < u8x8.getRows(); r++ )
  {
    u8x8.clearLine(r);
    delay(100);
  }
  delay(1000);
}

Your display should go through the demonstration of various things as shown in the video below:

If the display did not work – you may need to manually set the I2C bus address. To do this, wire up your OLED then run this sketch (open the serial monitor for results). It’s an I2C scanner tool that will return the I2C bus display. 

Then use the following line in void setup():

u8x8.setI2CAddress(address)

Replace u8x8 with your display reference, and address with the I2C bus address (for example. 0x17).

Moving on…

By now you have an idea of what is possible with these great-value displays.

Now your display is connected and working, it’s time to delve deeper into the library and the various modes of operations. There are three, and they are described in the library documentation – click here to review them

Whenever you use one of the three modes mentioned above, you need to use one of the following constructor lines:

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE); // full buffer mode

U8X8_SSD1306_128X64_NONAME_HW_I2C u8x8(/* reset=*/ U8X8_PIN_NONE); // 8x8 character mode

U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE); // page buffer mode

Match the mode you wish to use with one of the constructors above. For example, in the demonstration sketch you ran earlier, we used the 8×8 character mode constructor in line 14.

Where to from here?

Now it’s time for you to explore the library reference guide which explains all the various functions available to create text and graphics on the display, as well as the fonts and so on. These can all be found on the right-hand side of the driver wiki page.

This post brought to you by pmdway.com – everything for makers and electronics enthusiasts, with free delivery worldwide.

To keep up to date with new posts at tronixstuff.com, please subscribe to the mailing list in the box on the right, or follow us on twitter @tronixstuff.