Rainbow Clock Time and Weather

Welcome to my Instructable for this Rainbow themed Display, it's hard to show in the videos and photos how good the animations and messages stand out both in daylight and in the evening.

I wanted a project to include the WS2812b LED fully addressable 16 x 16 Matrix and for some reason over the years I have ended up with four of these, I did buy a job lot of Arduino based components some time ago and these must have been included.

Each individual LED is addressable so we can do some amazing things within the code.

My project is Rainbow themed, and within this project code I will be using both the Adafruit GFX and Neo Matrix Libraries as well as The FastLED Library, which was a challenge in itself.

This project has NTP Time and an Openweather API so we can scroll both the Time and Weather and I've added the ability to add messages as well to both the start of the display and at the end.

Because this project is Rainbow themed, the display starts out with a Plasma Rainbow Animation and fades in and out, then I've added some Rainbow colored sparkles, then these diminish slightly to allow firstly the message" The Time on the Rainbow Clock is" to run through the sparkles, then the NTP Time, which is Hours/Minutes/Seconds next is the Weather, Temperature and outlook and finally a message at the end, then back to the Plasma Animation, followed by the same but in all colors of the rainbow until it scrolls back to the start and repeats the loop endlessly.

I have designed and 3D printed some Grids and surrounds and these have a timber surround, although not water proof, this display is big enough to fit in a small yard and the brightness of the LED's can be adjusted within the code to suit the occasion.

I have completed many Arduino based projects over the years and I'm not the best with coding by any means, but I can manipulate codes to use them to create a bespoke code if that makes sense.

The Arduino Code for this Rainbow Time and Weather scrolling display is fully commented and I hope it goes some way to explain how each component of the actual LED display works as this can sometimes be frustrating when compiling C++ code

I will spend more time explaining the code, as the surround is pretty straight forward, as you see in the video, the result is mesmerizing in the daytime different again at dusk or night.

16 x 16 WS2812b LED Matrix x 4no

Wemos D1 Microcontroller

5v 10 amp Power Supply

3D Printer

1.75 ABS or PLA Filament

Fusion 360 for Grid and Surround design.

Arduino Ide

Soldering Iron and Solder

Heat Shrink Cable sheath.

Cable/Wire to extend the cables on the displays.

Stencil Sheets

Terminal connectors

Suitable timber for the framework

wood screws (I used 30mm)

When using a Microcontroller like the Wemos D1 the set up is a bit different than using say a Uno or Nano, there are plenty of useful guides to setting up the Wemos, the procedure needs to be followed for it to work correctly, I found a Instructable by InnovativeTom which explains the procedure, this is the Link https://www.instructables.com/Wemos-ESP8266-Getting-Started-Guide-Wemos-101/ or this explanation from the internet is very good at explaining the procedure. https://www.projectguideline.com/using-arduino-ide-for-doing-esp8266-wemos-d1-mini-wifi-projects/

The WEMOS D1 mini is based on a 32-bit ESP8266

Once the Wemos is set up then we can move onto the code.

With this particular code, I needed to install several libraries for it to compile correctly and for it to function how I wanted, once again there are some great Arduino books and tutorials out there, that's how I started off, and with time it starts to make more sense.

Once we have the libraries installed we need to Define some things, one is the pin number, this Pin will carry the signal from the Microcontroller to the matrix display and in this case it's D2 we define Matrix width and height, I using 4 x matrix so the width is set to 64 if i was using 1 x matrix it would be set to 16, the height is set to 16.

We then create #define NUM_LEDS MATRIX_WIDTH * MATRIX_HEIGHT

CRGB leds[NUM_LEDS];

The next part of the code is where we input our WiFi credentials SSID and Password, these fit in between the "----" Brackets.

I have used Openweather site for the forecast for my part of the world, within Openweather you create a free account and then create an API you then copy the code and input it between the brackets, to find your city id there is a search box in open weather, input your town or city, press return and there will be a list, select your town/city and look to the URL the last 6 digits are the ones you need, input these in between the brackets where it says city ID.

I have used Google time for this NTP Time, use the off-set to set the time difference for your area.

In the next section we adjust the brightness of the LED's 0 to 255

Next we have the Array of the colours of the Rainbow, these can be changed to any colour you like there are various sites which match colours to codes. https://www.color-hex.com/color-palette/16853 is one of them.

Next we can add our personal messages String personalMessage = As you can see, the messages I have written are "The Time and Weather on the Rainbow clock is" and "Have a Nice Day, Whatever the Weather :))" the messages are written in between the brackets "-------"

We then have some variables to store the weather data.

void setup() every Arduino Sketch has a Set up and Loop the set up is where actions only happens once, as you can see in the code Serial begin

WiFi.begin ssid and password are set, wifi is connected.

time client begins

matrix begin

brightness is set

weather data the function is set fetch the weather data

In the loop section

The time client is updated.

I have set a start and finish time for the led display, currently it starts at 7am and shuts off at 23.00

Combine the time weather and personal messages.

Display text String displayText = personalMessage + " " + formattedTime + " " + "Temp: " + temperature + "C, " + weatherDescription + " " + personalMessage1

The plasma animation

Show static rainbow halo using plasma effect with fade-in and fade-out

 // Update the color index to change the text color in the next loop

  colorIndex = (colorIndex + 1) % numColors;

 } else {

  // Dim the display during non-display hours

  matrix.setBrightness(0);

  matrix.show();

 Then a delay of 1 second before looping again.

So there you have it, this is basically how the code works, you can have any messages you want within the code, string personal message and string personal message1 there could be a personal message2 and so on, this would be added to this section of the code.

String displayText = personalMessage + " " + formattedTime + " " + "Temp: " + temperature + "C, " + weatherDescription + " " + personalMessage1;

I've attached the Arduino Code, the code will work with 1/2/ or 3 led matrix, change the matrix width to 16/32/48 respectively.

In the next section we can see how the matrix displays are powered up.

To make the case for the led display I initially designed and 3D printed some grids for matrix's and an outer sleeve for each matrix, the 2 outer sleeves are different to the 2 centre sleeves as i wanted a slimmer gap between the displays for effect.

I use what I had to hand for the wooden framework, I think these were lengths from a clothes drier, they were painted white originally, I made the framework so the sleeves would drop inside the frame, I used 4 screws to hold the frame together and sanded the edges, I glued the sleeves in and let the glue dry.

I painted the framework with paint I had to which was green kitchen cupboard paint and purple acrylic, at least they are colours of the Rainbow spectrum, this was left to dry.

To assemble:

I cut some stencil sheets into the sizes I wanted, these would act as the diffuser's for the display, then the 3D printed grid was orientated to fit over the LED's these only fit one way as the LED resistors are off-set, then the displays were aligned in the sleeves, as this is not a permanent display I didn't want to secure the LED displays with something permanent so I used lollipop sticks, the sticks were glued together at a slight angle and then pushed into position to hold everything in place, this worked very well.

I've attached both the Grid and sleeve for the LED Matrix should anyone wish to use these, remember the grid has cut outs and only fits one way when it's placed on top of the led matrix it helps to stop washout.

With these displays being in a horizontal format, the wiring was pretty straight forward, to use the display with all led's full on you will need at least a 5v 10amp power supply, for this display, I have set the led brightness to 50% as I only have a 5v 2amp power supply.

Initially a micro usb cable is used to input the code once the Wemos has been set up.

When the code has been inputted we can then power the LED's and the Wemos D1 from the power supply.

I'm in the UK and for cable jointing, we use terminal block,there are alternatives like the Wego style connectors or solder joints for something more permanent, if you look at the back of the LED Matrix there are 2 plugs one female one male, plus a positive and negative cable central to the display to power the displays, I terminated 2 led panels + &- into one side of the teminal block and did the same with next 2 panels, I then cut some lengths of cable and terminated one side, the other side before terminating I cut another 2 cables + & -, these would go to the power supply, the + & - to the Wemos would also be terminated here, so we will have 3 positive cables and 3 negative cables terminated in this terminal block, the signal from the wemos connects to the signal in on the cable attached to the led matrix.

This display is not a permanent feature for me so I tidied the cabling up with a few cable ties and left the Wemos loose.

If you look at the photos of the back of the display it shows quite clearly the wiring arrangement.

It's always fun playing with the LED Matrix displays and especially scrolling messages, to add the time and weather is also a bonus, the time will change automatically for daylight saving hours etc.

Using the Wemos D1 adds the ability to use WiFi and add things like NTP Time and Open Weather + News API if you wanted that.

I started this project by having a basic idea of what I wanted code wise and added to gradually along the way, it's always best to add snippets to the code and then see if it compiles, then de-bug if necessary at each stage.

I hope you enjoyed the Rainbow clock Instructable and thanks for looking.