3:14 = Pi Time!

Pi Time-A Fabric RGB Arduino Clock!

Jess
10 min readApr 9, 2017

This clock started it’s life as a quilted Pi design, from Pale Gray Labs. I wanted to incorporate lights into it because it’s so gorgeous, but I also wanted it to be useful. I decided to turn it into a clock that hangs on my wall! I started out with several smart RGB LEDs, also known as neopixels. Neopixels are individually addressable. Originally I had hoped to use sewable neopixels, but those are expensive, and sewing them would take much longer than soldering. The neopixels are hot glued onto the back of the clock.

The pi symbol flashes every other second, the hours and minutes are on a separate strand of neopixels!

I had played around with the FastLED library on my Arduino Uno, so I knew wanted to include some fun rainbows into it too. When the clock is at 3:14, an example code called ‘Color Palette’ plays a lovely rainbow show for the whole minute. At 3:15, the clock goes back to normal. In order to read the clock you have to think in terms of roygbiv. The rainbow starts at the beginning of pi in the center, so the hours will be either red, yellow, or orange, depending on how many digits are needed to tell the time. For example, when it is 5:09, the 5 is red, and the 9 is yellow. When it’s 5:10, the 5 is orange, the first minute (1) is teal, and the second (0) is violet.

The time is 2:37!

When I first started this project, I suspected I would need an RTC module to keep the time accurately. I found a time library for Arduino, tested it out, and decided to try using it first. Turns out it works great! After keeping the clock on for 24 hours, it’s still keeping time perfectly!

Arduino Uno knockoff, doing a great job keeping time!
Super simple schematic of clock!

I wanted to show off a time lapse, without actually having to film the clock for a long time, so my husband adjusted the code. It took a few tries but he got it!

This took a long time to complete, one of the downsides of the clock is that it doesn’t move easily. The hot glue holds the RGB PCBs down just fine, but the 474 solder joints are so dainty and small, they are easily snapped off if the clock is bent too much!

Created by Christopher & Jessica Hogan 2017

// Authors: Christopher & Jessica Hogan
// Copyright: 2017
/* The MIT License (MIT) Copyright (c) 2013 FastLED Permission is hereby granted, free of charge, to any person obtaining a copy ofthis software and associated documentation files (the "Software"), to deal inthe Software without restriction, including without limitation the rights touse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies ofthe Software, and to permit persons to whom the Software is furnished to do so,subject to the following conditions: The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESSFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS ORCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHERIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR INCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */#include <Time.h>
#include <TimeLib.h>
#include <FastLED.h>
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h>
#endif
#define PI_PIN 8
#define NUM_PI_PIXELS 13
#define CLOCK_PIN 10
#define NUM_CLOCK_PIXELS 66
#define LED_PIN 10
#define NUM_LEDS 66
#define BRIGHTNESS 64
#define LED_TYPE WS2811
#define COLOR_ORDER GRB
CRGB leds[NUM_LEDS];
#define UPDATES_PER_SECOND 100
// 3.14159…. but in reverse because the neopixels are wired in the
// opposite way, and they only work in one direction. The array could
// be specified in the regular order if the neopixels had been soldered
// in the reverse direction.
int piDigits[] = {
0, 3, 2, 9, 5, 4, 4, 9, 4, 7, 9, 0, 2, 8, 5,
0, 1, 5, 7, 3, 9, 9, 3, 9, 6, 1, 7, 9, 1, 4,
8, 8, 2, 0, 5, 9, 7, 2, 3, 8, 3, 3, 4, 6, 2,
6, 4, 8, 3, 2, 3, 9, 7, 9, 8, 5, 3, 5, 6, 2,
9, 5, 1, 4, 1, 3
};
// This is how we clear the digits that aren’t being lit.
// Whenever a digit is lit, the corresponding index into piDigits
// is stored in the array according to the scheme hh:mm for indices
// 0,1,2,3. So, if the time were 2:36, litPixels would have the
// value [-1, 59, 1, 24]. The hour is indexed starting at the end
// of piDigits, and the minute is indexed starting at the beginning.
// A -1 indicates that nothing in that position needs cleared. For
// the example, the first hour digit is not used, so -1. The next
// hour digit is 2, and the first instance of 2 from the end of the
// piDigits array is at index 59. The minutes start at the beginning
// of the array. The first instance of 3 is at index 1, and the first
// instance of 6 is at index 24.
int litPixels[4] = { -1, -1, -1, -1};
// The pixels that comprise the pi symbol
Adafruit_NeoPixel piPixels = Adafruit_NeoPixel(NUM_PI_PIXELS, PI_PIN, NEO_GRB + NEO_KHZ800);
// The pixels that comprise all the numbers
Adafruit_NeoPixel clockPixels = Adafruit_NeoPixel(NUM_CLOCK_PIXELS, CLOCK_PIN, NEO_GRB + NEO_KHZ800);
// We need to keep track of the previous minute, second, and
// hour so we know when they have changed. Initialize them
// all to -1 so the clock starts working right away.
int previousSecond = -1;
int previousMinute = -1;
int previousHour = -1;
// This variable keeps track of even seconds becuase we blink
// the pi symbol every other (even) second.
bool even = true;
extern CRGBPalette16 myRedWhiteBluePalette;
extern const TProgmemPalette16 myRedWhiteBluePalette_p PROGMEM;
CRGBPalette16 currentPalette;
TBlendType currentBlending;
void setup() {
delay( 3000 ); // power-up safety delay
// Serial.begin(9600);
int hour = 6;
int minute = 23;
int second = 0;
int day = 9;
int month = 3;
int year = 2017;
setTime(hour, minute, second, day, month, year);
piPixels.begin();
clockPixels.begin();
FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
FastLED.setBrightness( BRIGHTNESS );

currentPalette = RainbowColors_p;
currentBlending = LINEARBLEND;
}
void loop() {
/////////////
// Pi code //
/////////////
int currentSecond = second();
if (previousSecond != currentSecond) {
even = !even;
if (even) {
int r = random(0, 256);
int g = random(0, 256);
int b = random(0, 256);
for (int i = 0; i < NUM_PI_PIXELS; i++) {
piPixels.setPixelColor(i, piPixels.Color(r, g, b));
piPixels.show();
}
}
else {
for (int i = 0; i < NUM_PI_PIXELS; i++) {
piPixels.setPixelColor(i, 0);
piPixels.show();
}
}
previousSecond = currentSecond;
}
//////////////////
// Clock Digits //
//////////////////
int currentHour = hourFormat12();
int currentMinute = minute();
if(currentHour == 3 && currentMinute == 14) {
// Run crazy pi colors for 1 minute
piTime();
return;
}
// Handle hour
if (currentHour != previousHour) {
if (currentHour >= 1 && currentHour <= 9) {
// 1 digit -> Orange
int hourPixelOnes = -1;
for (int i = NUM_CLOCK_PIXELS; i > 0; i — ) {
if (piDigits[i] == currentHour) {
hourPixelOnes = i;
break;
}
}
clearLitHour();
clockPixels.setPixelColor(hourPixelOnes, clockPixels.Color(225, 34, 4));
litPixels[0] = -1;
litPixels[1] = hourPixelOnes;
clockPixels.show();
}
else { // 2 digits
// Red Yellow
int tensHourPixel = 64;
int onesHourPixel;
if(currentHour == 10) {
onesHourPixel = 33;
} else if(currentHour == 11) {
onesHourPixel = 62;
} else { // 12
onesHourPixel = 59;
}
clearLitHour();// Red
clockPixels.setPixelColor(tensHourPixel, clockPixels.Color(255, 0, 0 ));
// Yellow
clockPixels.setPixelColor(onesHourPixel, clockPixels.Color(190, 190, 0 ));
// Remember which pixel we lit so we can turn it off later
litPixels[0] = tensHourPixel;
litPixels[1] = onesHourPixel;

clockPixels.show();
}
previousHour = currentHour;
}
// Handle minute
if (currentMinute != previousMinute) {
if (currentMinute == 0) {
// Exactly on the hour, so light no minutes
clearLitMinute();
litPixels[2] = -1;
litPixels[3] = -1;
clockPixels.show();
}
else if (currentMinute >= 1 && currentMinute <= 9) {
// 1 digit -> Yellow
int pixelToLight = -1;
for (int i = 0; i < NUM_CLOCK_PIXELS; i++) {
if (piDigits[i] == currentMinute) {
pixelToLight = i;
break;
}
}
clearLitMinute();
litPixels[2] = -1;
if (currentHour > 9) {
// Green
clockPixels.setPixelColor(pixelToLight, clockPixels.Color(0, 150, 0 ));
}
else {
// Yellow
clockPixels.setPixelColor(pixelToLight, clockPixels.Color(190, 190, 0 ));
}
// Remember which pixel we lit so we can turn it off later
litPixels[3] = pixelToLight;
clockPixels.show();
}
else { // Minute is 2 digits
int tensMinutePixel = -1;
int onesMinutePixel = -1;
String minuteString = String(currentMinute);
const char tensChar = minuteString[0];
const char onesChar = minuteString[1];
tensMinutePixel = -1;
onesMinutePixel = -1;
onesMinutePixel = findIndexOf(onesChar);if (tensChar == onesChar) {
for (int i = onesMinutePixel + 1; i < NUM_CLOCK_PIXELS; i++) {
if (piDigits[i] == tensChar — ‘0’) {
tensMinutePixel = i;
break;
}
}
}
else {
tensMinutePixel = findIndexOf(tensChar);
}
clearLitMinute();

if (currentHour < 10) {
// turquoise
clockPixels.setPixelColor(tensMinutePixel, clockPixels.Color(0, 174, 255 ));
// purple
clockPixels.setPixelColor(onesMinutePixel, clockPixels.Color(135, 0, 255 ));
}
else {
// Green
clockPixels.setPixelColor(tensMinutePixel, clockPixels.Color(0, 255, 0 ));
// Blue
clockPixels.setPixelColor(onesMinutePixel, clockPixels.Color(0, 0, 255 ));
}
// Remember which pixel we lit so we can turn it off later
litPixels[2] = tensMinutePixel;
litPixels[3] = onesMinutePixel;
clockPixels.show();
}
previousMinute = currentMinute;
}
}
int findIndexOf(char digit) {
for (int i = 0; i < NUM_CLOCK_PIXELS; i++) {
if (piDigits[i] == digit — ‘0’) {
return i;
}
}
return -1;
}
int findReverseIndexOf(char digit) {
for (int i = NUM_CLOCK_PIXELS — 1; i >= 0; i — ) {
if (piDigits[i] == digit — ‘0’) {
return i;
}
}
return -1;
}
void clearLitMinute() {
if (litPixels[2] != -1) {
clockPixels.setPixelColor(litPixels[2], 0);
}
if (litPixels[3] != -1) {
clockPixels.setPixelColor(litPixels[3], 0);
}
}
void clearLitHour() {
if (litPixels[0] != -1) {
clockPixels.setPixelColor(litPixels[0], 0);
}
if (litPixels[1] != -1) {
clockPixels.setPixelColor(litPixels[1], 0);
}
}
void piTime() {
int keepRunning = 5;
while(keepRunning > 0) {
ChangePalettePeriodically();

static uint8_t startIndex = 0;
startIndex = startIndex + 1; /* motion speed */

FillLEDsFromPaletteColors( startIndex);

FastLED.show();
FastLED.delay(1000 / UPDATES_PER_SECOND);
keepRunning — ;
}
}
void FillLEDsFromPaletteColors( uint8_t colorIndex)
{
uint8_t brightness = 255;

for( int i = 0; i < NUM_LEDS; i++) {
leds[i] = ColorFromPalette( currentPalette, colorIndex, brightness, currentBlending);
colorIndex += 3;
}
}
// There are several different palettes of colors demonstrated here.
//
// FastLED provides several ‘preset’ palettes: RainbowColors_p, RainbowStripeColors_p,
// OceanColors_p, CloudColors_p, LavaColors_p, ForestColors_p, and PartyColors_p.
//
// Additionally, you can manually define your own color palettes, or you can write
// code that creates color palettes on the fly. All are shown here.
void ChangePalettePeriodically()
{
uint8_t secondHand = (millis() / 1000) % 60;
static uint8_t lastSecond = 99;

if( lastSecond != secondHand) {
lastSecond = secondHand;
if( secondHand == 0) { currentPalette = RainbowColors_p; currentBlending = LINEARBLEND; }
if( secondHand == 10) { currentPalette = RainbowStripeColors_p; currentBlending = NOBLEND; }
if( secondHand == 15) { currentPalette = RainbowStripeColors_p; currentBlending = LINEARBLEND; }
if( secondHand == 20) { SetupPurpleAndGreenPalette(); currentBlending = LINEARBLEND; }
if( secondHand == 25) { SetupTotallyRandomPalette(); currentBlending = LINEARBLEND; }
if( secondHand == 30) { SetupBlackAndWhiteStripedPalette(); currentBlending = NOBLEND; }
if( secondHand == 35) { SetupBlackAndWhiteStripedPalette(); currentBlending = LINEARBLEND; }
if( secondHand == 40) { currentPalette = CloudColors_p; currentBlending = LINEARBLEND; }
if( secondHand == 45) { currentPalette = PartyColors_p; currentBlending = LINEARBLEND; }
if( secondHand == 50) { currentPalette = myRedWhiteBluePalette_p; currentBlending = NOBLEND; }
if( secondHand == 55) { currentPalette = myRedWhiteBluePalette_p; currentBlending = LINEARBLEND; }
}
}
// This function fills the palette with totally random colors.
void SetupTotallyRandomPalette()
{
for( int i = 0; i < 16; i++) {
currentPalette[i] = CHSV( random8(), 255, random8());
}
}
// This function sets up a palette of black and white stripes,
// using code. Since the palette is effectively an array of
// sixteen CRGB colors, the various fill_* functions can be used
// to set them up.
void SetupBlackAndWhiteStripedPalette()
{
// ‘black out’ all 16 palette entries…
fill_solid( currentPalette, 16, CRGB::Black);
// and set every fourth one to white.
currentPalette[0] = CRGB::White;
currentPalette[4] = CRGB::White;
currentPalette[8] = CRGB::White;
currentPalette[12] = CRGB::White;

}
// This function sets up a palette of purple and green stripes.
void SetupPurpleAndGreenPalette()
{
CRGB purple = CHSV( HUE_PURPLE, 255, 255);
CRGB green = CHSV( HUE_GREEN, 255, 255);
CRGB black = CRGB::Black;

currentPalette = CRGBPalette16(
green, green, black, black,
purple, purple, black, black,
green, green, black, black,
purple, purple, black, black );
}
// This example shows how to set up a static color palette
// which is stored in PROGMEM (flash), which is almost always more
// plentiful than RAM. A static PROGMEM palette like this
// takes up 64 bytes of flash.
const TProgmemPalette16 myRedWhiteBluePalette_p PROGMEM =
{
CRGB::Red,
CRGB::Gray, // ‘white’ is too bright compared to red and blue
CRGB::Blue,
CRGB::Black,

CRGB::Red,
CRGB::Gray,
CRGB::Blue,
CRGB::Black,

CRGB::Red,
CRGB::Red,
CRGB::Gray,
CRGB::Gray,
CRGB::Blue,
CRGB::Blue,
CRGB::Black,
CRGB::Black
};
Back of clock, all wired up and telling time!

--

--

Jess
Jess

Written by Jess

I like making things. A lot.

No responses yet