Color Clock

Views: 8234 Difficulty: 4 Status: Pipeline

A wearable real-time clock with vibrant color display.

Using the enchanting TFT LCD Screen from adafruit and the DS1307 chip for keeping the time we demonstrate a wearable wristwatch with full spectrum 16-bit color. Displays the time and date in analog, digital and animated formats. Using our color library we color code the time so that each minute is a journey through the rainbow! The watch contains a Piezo buzzer so it can be used as an alarm or as a stop watch. The on-board potentiometer lets you change the time should you find yourself in a new time zone, for example. There is a great tutorial at adafruit on how to use the DS1307 chip to keep track of time. Our circuit is based on that one but use surface mount components and hooks up directly to the SDA and SCL pins on the SMD Atmega328 IC. If you want to turn this watch into a bonafide alarm clock, check out our alarming tutorial!

Little Watch

Won't melt in the palm off your hand...

Triple Time Video

Watch the rainbow clock in triple speed!

Arduino Code

This code will draw the current time according to the DS1307 chip. At the the top and bottom of the LCD screen the code displays the time and date digitally, and in the center shows a rainbow colored analog clock. This code relies on several libraries: RTCLib adafruit fork, the ST7735 LCD Screen library (thanks again adafruit!). We also use our color library and the SPI and Wire libs.
/* LucidTronix color compass 
 * Rainbow colored rtc clock
 * For instructions, details and schematic, See:
 * Uses the RTClib.h library from adafruit
#include <ST7735.h>
#include <Wire.h>
#include "RTClib.h"
#include <SPI.h>
#include <color.h>

#define cs 10   // for MEGAs you probably want this to be pin 53
#define dc 9
#define rst 8  // you can also connect this to the Arduino reset

ST7735 tft = ST7735(cs, dc, rst);

// Reference the I2C LibraUry
#include <Wire.h>

int btnPin0 = 0;
int btnPin1 = 1;
int btnPin2 = 2;

int mode = 0;
int num_modes = 4;
int cur_sec = 0;
int cur_min = 0;
int millisecond_six = 0;
unsigned int last_sec = 0;

unsigned int last_press = 0;


DateTime cur_time, alarm_time;

char* stringy = "nothinghere";
void setup(){


  tft.initR();               // initialize a ST7735R chip
  tft.drawString(4, 4, "Starting up...", CYAN,1);
  Wire.begin(); // Start the I2C interface.
  tft.drawString(4, 64,"Hello?!", GREEN);

  if (! RTC.isrunning()) {
    tft.drawString(14, 94,"RTC is NOT running!",RED);
    // following line sets the RTC to the date & time this sketch was compiled
    RTC.adjust(DateTime(__DATE__, __TIME__));

void loop(){
  cur_time =;
  display_time_digital(2, 4,1);

void display_time_digital(int ax, int ay, int text_size){
  print_integer(ax,ay, cur_time.hour(), text_size);
  tft.drawString(ax+(text_size*10), ay,":",MAGENTA, text_size); 
  print_integer(ax+(text_size*15),ay, cur_time.minute(), text_size);
  tft.drawString(ax+(text_size*25), ay,":",RED,text_size); 
  print_integer(ax+(text_size*30),ay, cur_time.second(), text_size);  
  if (cur_sec != cur_time.second() ){
   last_sec = millis();
   cur_sec = cur_time.second();
   tft.fillRect(ax+(text_size*30), ay-2, text_size*12, text_size*10,WHITE);  
void display_date(int ax, int ay,int text_size){
  print_integer(ax,ay, cur_time.month(), text_size);
  tft.drawString(ax+(text_size*10), ay,"/",GREEN,text_size); 
  print_integer(ax+(text_size*15),ay,, text_size);
  tft.drawString(ax+(text_size*25), ay,"/",YELLOW,text_size); 
  print_integer(ax+(text_size*30),ay, cur_time.year(), text_size);
void color_clock(int ax, int ay){
  int hour_angle = cur_time.hour()*30;
  int minute_angle = cur_time.minute()*6;
  int second_angle = cur_time.second()*6;
  if (cur_min != cur_time.minute() ){
    cur_min = cur_time.minute();
    tft.drawString(58, 8,"12",BLACK,2); 

  if (cur_sec != cur_time.second() ){
   last_sec = millis();
   cur_sec = cur_time.second();
  millisecond_six = constrain(((millis()-last_sec) / 167),0,6);
  int second_angle_hi_res = (cur_sec*6) + millisecond_six;
  draw_orbiter(ax,ay,hour_angle, 20,3);
  draw_ray(ax,ay,hour_angle, 20);
  draw_orbiter(ax,ay,minute_angle, 25,2); 
  draw_ray(ax,ay,minute_angle, 25);
  draw_orbiter(ax,ay,second_angle_hi_res, 48,5); 
void draw_ray(int ax, int ay, int angle, int radius ){
  float ray_x = sin(((float)angle*PI)/180.0f)*(float)radius;
  float ray_y = -cos(((float)angle*PI)/180.0f)*(float)radius;
  int c = get_color_from_angle(angle);
  tft.drawLine(ax,ay,ax+ray_x, ay+ray_y, c);
void draw_orbiter(int ax, int ay, int angle, int radius, int a_size){
  float ray_x = sin(((float)angle*PI)/180.0f)*(float)radius;
  float ray_y = -cos(((float)angle*PI)/180.0f)*(float)radius;
  int c = get_color_from_angle(angle);
  tft.fillCircle(ax+ray_x, ay+ray_y, a_size, c);
int get_color_from_angle(int angle){
  Color cur_color=Color(0,0,0);
  return cur_color.get_color_16bit(); 
void print_integer(int ax, int ay, int to_print, int text_size){
  char aBuf[6];
  String output = String(to_print);
  tft.drawString(ax, ay,aBuf,BLUE,text_size); 
void check_buttons(){
 if ( digitalRead(btnPin0) == HIGH)   tft.fillScreen(WHITE);
 //else if ( digitalRead(btnPin1) == HIGH)   tft.fillScreen(BLACK);
 else if ( digitalRead(btnPin2) == HIGH)   tft.fillScreen(RED);


Title Description # Cost Link Picture
Wearable Wayfinder An Arduino on steroids! Full color LCD screen, accelerometer, compass, and real time clock loaded onto a wearable gadget! 1 $69.95 Link 3screens2
Rainbow flower necklace using the TLC5940....
Wearable digital compass displays the direction in green LEDs....
Servo motor, JPEG camera, and Arduino Leonardo combine to make a panoramic camera....
Print bitmaps, cellular automata, drawings and text.....
Here is another arduino library to handle Hue, Saturation, and Brightness as well as Red, Green, and ...
This PCB controls a camera and an SD card so you can make automatic time lapse videos. ...
The heartduino is a heart-shaped arduino clone complete with onboard sensors and a 70 pixel LED matri...
Two proximity sensors help this bot avoid cliffs....