8x8 LED Matrix: Show Numbers Using Zerynth App and Python

This demo allows you to type a number on your smartphone and make it appear on an 8x8 LED Matrix using the Zerynth App.

BeginnerFull instructions provided1 hour1,501

8x8 LED Matrix: Show Numbers Using Zerynth App and Python

Things used in this project

Hardware components

MIKROE Flip & Click

MIKROE WiFi 4 click

MIKROE 8x8 G click

Software apps and online services

Zerynth Studio

Story

In this tutorial, we are going to learn how to use the 8x8 G click, in order to turn on a particular configuration of matrix LEDs that needs to print numbers from 0 to 9. We will be able to choose the number to print through the numeric pad of a graphic interface on our own smartphone. The smartphone communicates with the board via WiFi (in this example we will use the WiFi 4 click).

Step 1: Required Material

The project requires few elements:

Zerynth Studio: a multi-platform and browser-based Python development environment with cloud sync and board management features. No matter which OS you use, Zerynth runs! Just download Zerynth and install it (http://www.zerynth.com/zerynth-studio/).

Zerynth App: the Zerynth mobile interface for smart objects and IoT systems. Any mobile will become the objects display and remote controller. Download: http://www.zerynth.com/zerynth-app/

Flip&Click by Mikroelektronika (available here: https://www.mikroe.com/flip-n-click-sam3x ): two-sided development board expandable with up to four click boards (out of hundreds available). It's similar to Arduino Due and it can also run Python (for more info see here).

WiFi 4 click by Mikroelektronika (available here: https://www.mikroe.com/wifi-4-click ): a complete standalone WiFi module with a single-chip (for more info see here).

8x8 G click by Mikroelektronika (available here: https://www.mikroe.com/8x8-g-click ): a 64 LED matrix display Click board, composed of SMD LEDs organized in 8 rows by 8 columns (for more info see here).

Step 2: Assembling

It's really simple, just place the LED matrix on slot A and the WiFi 4 click on slot B of Flip and Click board ( make sure to align the pins correctly).

If you have problems connecting to the Internet you may need to configure your WiFi 4 click, for this purpose you could clone and uplink the Zerynth's example "find and set baud" and then try again with this example ( if you don't know how to clone and uplink Zerynth's example see here).

Step 3: Programming

Now that everything is set, connect the Flip&Click with the micro-USB cable to the computer and launch Zerynth.

It could be useful to watch this short video.

Create a Zerynth account and login.

Select the Flip&Click SAM3X as device from the dropdown menu.

Download the repository and create a new project copying the files of the repository.

Go to the ADM panel on the left and create a new device with UID and token device. Remember also to create and set the template by clicking on the plus button near "Template:" and choosing the template inside the "template" folder of the repository. More info here: https://www.zerynth.com/blog/getting-started-with-the-zerynth-app-how-to-build-an-iot-thermometer/

Make sure to set your Wi-Fi credentials, your UID and token device inside the "main.py" file.

Compile and uplink. Make sure it says "Uplink done!"

Download Zerynth App on your smartphone and login with your Zerynth account.

Run the Zerynth App and enjoy!

Now use the interface on your phone to type in the numbers you want to appear on the LED Matrix. You can analyze the source code (posted below) and, if you want, you can modify the file "style.css" in order to customize your application. Furthermore, if you don't have your own smartphone on hand, it is possible to run the HTML/JavaScript interface from your browser: you just need to go to the ADM panel on the left and, on the list of connected devices, click on the eye icon next to the name of your device!

Remember to install Zerynth Studio and the Zerynth App because you will be needing all of them to finish this one or other similar projects:

Using Python to control servo motors for IoT projects

Control NeoPixels using Python and JQWidgets

How to build and IoT Thermometer

Code

# import the wifi interface
from wireless import wifi
# the wifi module needs a networking driver to be loaded
# in order to control the board hardware.
# THIS EXAMPLE IS SET TO WORK WITH SPWF01SA WIFI DRIVER
from stm.spwf01sa import spwf01sa as wifi_driver
# Import the Zerynth APP library
from zerynthapp import zerynthapp

# import MAX7219 library to handle 8x8 led matrix
from maxim.max7219 import max7219
# import fonts file where matrix numbers are defined
import fonts

import streams
# Create a serial console
streams.serial()

# Setup Led Matrix (8x8 Click on slot A of a Flip n Click device)
display = max7219.MAX7219(SPI0, D17)

# counter variable
num = 0

# Function to shutdown the display attached
display.shutdown(False)

# Sets the intensity of the LEDs output (values 0 to 15)
intensity = 9
display.set_intensity(intensity)

sleep(1000)
print("STARTING...")

try:
   # Wifi 4 Click on slot B (specify which serial port will be used and which RST pin)
    wifi_driver.init(SERIAL2,D24, baud=9600) 
except Exception as e:
    print(e)
    
for i in range(0,5):
    try:
        # connect to the wifi network (Set your SSID and password below)
        wifi.link("SSID",wifi.WIFI_WPA2,"PASSWORD")
        break
    except Exception as e:
        print("Can't link",e)
else:
    print("Impossible to link!")
    while True:
        sleep(1000)

try:
    # Device UID and TOKEN can be created in the ADM panel
    zapp = zerynthapp.ZerynthApp("DEVICE UID", "DEVICE TOKEN", log=True)
except Exception as e:
    print(e)

# Start the Zerynth app instance!
# Remember to create a template with the files under the "template" folder you just cloned
# upload it to the ADM and associate it with the connected device
zapp.run()


def set_led(num):
    print("Display Number:", num)
    # print the maxi number on led matrix
    for row in range(8):
        for col in range(8):
            if fonts.numbers[num][row][col]:
                display.set_led(row, col, 1)  # Allows the control of a single LED(row (values 0 to 7), column (values 0 to 7),1 for Led ON and 0 for Led OFF)
            else:
                display.set_led(row, col, 0)
    
# link "set_led" to the function set_led
zapp.on("set_led", set_led)    



while True:
    print("......")
    sleep(2000)

@import "https://fonts.googleapis.com/css?family=Oswald";

html, body {
  background: linear-gradient(to left, #468c8c, #3fafaf);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
}

h1 {
  color: #fff;
  font-size: 5vw;
  letter-spacing: 6px;
}

.pad {
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

.box {
  width: 100px;
  height: 100px;
  margin: 2px 0;
  box-shadow: 0 8px 6px -6px black;
  background-color: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color:white;
}
.box:hover {
  background-color: #5e5e5e;
  cursor: pointer;
}
.box:active {
  background-color: #2b2b2b;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  transition: all .2s;
}

.active {
  background-color: #2b2b2b;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  transition: all .2s;
}

.pad-1, .pad-2, .pad-3 {
  border: 2px solid #2ecc71;
}

.pad-4, .pad-5, .pad-6 {
  border: 2px solid #E5446D;
}

.pad-7,.pad-8, .pad-9 {
  border: 2px solid #d4802e;
}

.pad-0 {
   border: 2px solid #daba45;
   margin-left: 100px;
}

$(document).ready(function() {

  $('.pad-0').mousedown(function() {
      Z.call('set_led', [0]);
  });

  $('.pad-1').mousedown(function() {
      Z.call('set_led', [1]);
  });

  $('.pad-2').mousedown(function() {
      Z.call('set_led', [2]);
  });

  $('.pad-3').mousedown(function() {
      Z.call('set_led', [3]);
  });

  $('.pad-4').mousedown(function() {
      Z.call('set_led', [4]);
  });

  $('.pad-5').mousedown(function() {
      Z.call('set_led', [5]);
  });

  $('.pad-6').mousedown(function() {
      Z.call('set_led', [6]);
  });
  
  $('.pad-7').mousedown(function() {
      Z.call('set_led', [7]);
  });

  $('.pad-8').mousedown(function() {
      Z.call('set_led', [8]);
  });

  $('.pad-9').mousedown(function() {
      Z.call('set_led', [9]);
  });
  
  // initialize the Z object
  Z.init({
                on_connected:  function(){$("#status").html("CONNECTED")},
                on_error:  function(){$("#status").html("ERROR")},
                on_disconnected:  function(){$("#status").html("DISCONNECTED"); return true},
                on_online:  function(evt){$("#status").html("ONLINE");},
                on_offline:  function(evt){$("#status").html("OFFLINE");},
                on_event:  function(evt){
                    console.log(evt.payload.data)
                }
  })

});

numbers = [
    [
    [0,0,1,1,1,1,0,0],#0
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0],
    ],
    [
    [0,0,0,1,1,0,0,0],#1
    [0,0,1,1,1,0,0,0],
    [0,1,1,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,1,1,1,1,1,1,0]
    ],    
    [
    [0,0,1,1,1,1,0,0],#2
    [0,1,1,0,0,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,1,1,0,0,0,0],
    [0,1,1,0,0,0,0,0],
    [0,1,1,1,1,1,1,0]
    ],
    [
    [0,0,1,1,1,1,0,0],#3
    [0,1,1,0,0,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,0,0,1,1,1,0,0],
    [0,0,0,0,0,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0]
    ],
    [
    [0,0,0,0,0,1,1,0],#4
    [0,0,0,0,1,1,1,0],
    [0,0,0,1,1,1,1,0],
    [0,0,1,1,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,1,1,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,0,0,0,0,1,1,0]
    ],
    [
    [0,1,1,1,1,1,1,0],#5
    [0,1,1,0,0,0,0,0],
    [0,1,1,0,0,0,0,0],
    [0,1,1,1,1,1,0,0],
    [0,0,0,0,0,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0]
    ],    
    [
    [0,0,1,1,1,1,0,0],#6
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,0,0,0],
    [0,1,1,1,1,1,0,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0]
    ],
    [
    [0,1,1,1,1,1,1,0],#7
    [0,1,1,0,0,1,1,0],
    [0,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0],
    [0,0,0,1,1,0,0,0]
    ],
    [
    [0,0,1,1,1,1,0,0],#8
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0],
    ],
    [
    [0,0,1,1,1,1,0,0],#9
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,1,0],
    [0,0,0,0,0,1,1,0],
    [0,1,1,0,0,1,1,0],
    [0,0,1,1,1,1,0,0],
    ]    
    ]

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Zerynth</title>
        <!-- LOAD JQUERY AND BOOTSTRAP -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- CSS -->
	    <link rel="stylesheet" href="style.css" >
	    <!-- JS -->
	    <script src="javascript.js"></script>
        <!-- LOAD THE ZERYNTH ADM JS LIBRARY -->
        <script src="https://api.zerynth.com/zadm/latest/z.js"></script>
        <!-- LOAD jqwidget.js -->
        <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
        <script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    </head>        
    <body>
        <div style="text-align:center">
            <p id="status" style="background:#ddd;font-weight:bold"></p>
            <h1>NUM PAD</h1>
        </div>
        
        <div class="pad">
          <div class="box pad-1">1</div>
          <div class="box pad-2">2</div>
          <div class="box pad-3">3</div>
          
          <div class="box pad-4">4</div>
          <div class="box pad-5">5</div>
          <div class="box pad-6">6</div>
          
          <div class="box pad-7">7</div>
          <div class="box pad-8">8</div>
          <div class="box pad-9">9</div>
          
          <div class="box pad-0">0</div>
        </div>
    </body>
</html>