LED Matrix Animated Time,Date,Temp and Humidity

In this Tutorial we will learn how to use the LED Matrix MAX7219, Temperature and Humidity Sensor DHT11 and RTC DS1307 module to Display Current Temperature, Humidity, Time and Date.

Watch the Video!

• Arduino UNO (or any other Arduino)
• LED MATRIX. We are going to use the FC-16 module which has four casacaded 8×8 LED Matrix Displays and a built-in MAX7219 LED Driver for each display.
• Breadboard
• Jumper wires
• RTC DS1307 module
• DHT11 sensor
• Visuino program: Download Visuino

• Connect RTC DS1307 module pin[VCC] to Arduino pin[5V]
• Connect RTC DS1307 module pin[GND] to Arduino pin[GND]
• Connect RTC DS1307 module pin[SDA] to Arduino pin[SDA]
• Connect RTC DS1307 module pin[SCL] to Arduino pin[SCL]
• Connect DHT11 sensor pin[GND] to Arduino pin[GND]
• Connect DHT11 sensor pin[VCC] to Arduino pin[5V]
• Connect DHT11 sensor signal pin[S] to Arduino digital pin[4]
• Connect LED Matrix pin[VCC] to Arduino pin[5V]
• Connect LED Matrix pin[GND] to Arduino pin[GND]
• Connect LED Matrix pin[DIN] to Arduino digital pin[11]
• Connect LED Matrix pin[CS] to Arduino digital pin[10]
• Connect LED Matrix pin[CLK] to Arduino digital pin[13]

Note: Read also the part for Troubleshooting below

The Visuino: https://www.visuino.eu also needs to be installed. Download Free version or register for a Free Trial.

Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "Arduino UNO" as shown on Picture 2

• Add 2X "Compare Integer Value" component
• Add 2X "Digital (Boolean) Value" component
• Add "Delay" component
• Add "Digital Multi-Source Merger" component
• Add "Clock Generator" component
• Add 2X "Counter" component
• Add "Maxim LED Display Controller SPI MAX7219/MAX7221" component
• Add "Date/Time Value" component
• Add "Real Time Clock(RTC) DS1307" component
• Add "Decode(Split) Date/Time" component
• Add 4X "Formatted Text" component
• Add "DHT11" component
• Add "Text Mux(Multi channel Switch)" component
• Add "Integer Multi Source" component

• Select "Delay1" and in the properties window set "Interval (uS)" to 5000000
• Select "DigitalValue2" and in the properties window set "Value" to True
• Select "ClockGenerator1" and in the properties window set "Frequency" to 10 and Select "Enabled" and click on the Pin Icon and select "Boolean SinkPin"
• Select "Counter1" and in the properties window set Max>Roll Over to False and Max>Value to 5
• Select "Counter1" and in the properties window set Min>Value to -8
• Select "Counter1" and in the properties window set "Reversed" to True
• Select "CompareValue1" and in the properties window set "Value" to 5
• Select "Counter2" and in the properties window set Max>Value to 3
• Select "Counter2" and in the properties window set Min>Value to 0
• Select "IntegerMultiSource1" and in the properties window set to Output Pins to 3
• Double click on the "LedController1" and in the "Pixel Groups" window drag "2D Graphics" to the left side
• and in the properties window set "Mirror Horizontal" to True and "Reverse Horizontal" to True and set "Width" to 32
• also select "Elements" in the properties window and click on the 3 dots button

In the Elements window drag:

• "Text Field" to the left side and in the properties window set "Wrap" to False, and click on the "X" pin button and select "Integer Sink Pin" and click on the "Y" pin button and select "Integer Sink Pin"
• "Fill Screen" to the left side

Close the "Elements" Window

Close the "Pixel Groups" window

• Select "DateTimeValue1" and in the properties window set "Value" to your current date and time
• Select "TextMux1" and in the properties window set "Input Pins" to 4

• Select "FormattedText1" and in the properties window set "Text" to %0%1
• Double click on the "FormattedText1" and in the Elements Window

1. drag "Analog Element" to the left side and in the properties window set "Precision" to 1
2. drag "Text Element" to the left side and in the properties window set "Initial Value" to C

Close the Elements Window

• Select "FormattedText2" and in the properties window set "Text" to %0%1
• Double click on the "FormattedText2" and in the Elements Window

1. drag "Analog Element" to the left side and in the properties window set "Precision" to 0
2. drag "Text Element" to the left side and in the properties window set "Initial Value" to %

Close the Elements Window

• Select "FormattedText3" and in the properties window set "Text" to %0:%1

1. Double click on the "FormattedText3" and in the Elements Window
2. drag 2X "Text Element" to the left side

Close the Elements Window

• Select "FormattedText4" and in the properties window set "Text" to %0.%1

1. Double click on the "FormattedText4" and in the Elements Window
2. drag 2X "Text Element" to the left side

Close the Elements Window

• Connect "DateTimeValue1" pin Out to "RealTimeClock1" pin Set
• Connect "RealTimeClock1' pin Control I2C to Arduino pin I2C In
• Connect "RealTimeClock1' pin Out to "DecodeDateTime1" pin In
• Connect "DecodeDateTime1" pin "Month" to "FormattedText4 > "TextElement2" pin In
• Connect "DecodeDateTime1" pin "Day" to "FormattedText4 > "TextElement1" pin In
• Connect "DecodeDateTime1" pin "Hour" to "FormattedText3 > "TextElement1" pin In
• Connect "DecodeDateTime1" pin "Minute" to "FormattedText3 > "TextElement2" pin In
• Connect "HumidityThermometer1" pin Sensor to Arduino Board Digital pin [4]
• Connect "HumidityThermometer1" pin Temperature to "FormattedText1>AnalogElement1" pin In
• Connect "HumidityThermometer1" pin Humidity to "FormattedText2>AnalogElement1" pin In
• Connect "FormattedText1" pin Out to "TextMux1" Pin[0]
• Connect "FormattedText2" pin Out to "TextMux1" Pin[1]
• Connect "FormattedText3" pin Out to "TextMux1" Pin[2]
• Connect "FormattedText4" pin Out to "TextMux1" Pin[3]
• Connect "TextMux1" Pin Out to "LedController1 > Text Field" Pin In
• Connect "CompareValue2" Pin Out to "Delay1" Pin "Start" and "DigitalValue1" Pin Clock
• Connect "Delay1" Pin Out to "DigitalValue2" Pin Clock
• Connect "DigitalValue1" Pin Out to "DigitalMultiMerger1" Pin [0]
• Connect "DigitalValue2" Pin Out to "DigitalMultiMerger1" Pin [1]
• Connect "DigitalMultiMerger1" pin Out to "ClockGenerator1" Pin "Enabled"
• Connect "ClockGenerator1" pin Clock to "Counter1" Pin In
• Connect "Counter1" pin Out to "IntegerMultiSource1" pin In, and "CompareValue1" pin In and "CompareValue2" pin In
• Connect "CompareValue1" pin Out to "Counter2" Pin In
• Connect "Counter2" pin Out to "TextMux1" pin Select
• Connect "IntegerMultiSource1" pin [0] to "LedController1 > Text Field" Pin Y
• Connect "IntegerMultiSource1" pin [1] to "LedController1 > Fill Screen" Pin Clock
• Connect "IntegerMultiSource1" pin [2] to "LedController1 > Text Field" Pin Clock
• Connect "LedController1" Pin Out SPI to Arduino Board pin SPI In
• Connect "LedController1" Pin Chip Select to Arduino Board Digital pin [10]

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

If you power the Arduino UNO module, the LED Matrix will start to Display the temperature,humidity,time and date from bottom side to the top side.

Congratulations! You have completed your project with Visuino. Also attached is the Visuino project file, that I created for this Instructable, you can download it and open it in Visuino: https://www.visuino.eu

In my case When powering the Arduino the LED Matrix was blinking and the Text was not fully displayed. The reason for this was because MAX7219 chip is very sensitive to any voltage interference.

To solve that I added a 47uf electrolytic capacitor between the LED Matrix VCC(+) and GND(-), make sure you connect the capacitor right, + on (VCC) and - on the (GND)