silvia11931Luigi Francesco Cerfeda
Published © GPL3+

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 hour997
8x8 LED Matrix: Show Numbers Using Zerynth App and Python

Things used in this project

Hardware components

MikroE Flip & Click
×1
MikroE WiFi 4 click
×1
MikroE 8x8 G click
×1

Software apps and online services

Zerynth Studio
Zerynth Studio
Zerynth App
Zerynth App

Story

Read more

Schematics

schematics

Code

main.py

Python
# 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)
        

style.css

CSS
@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;
}

javascript.js

JavaScript
$(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)
                }
  })

});

fonts.py

Python
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],
    ]    
    ]

index.html

HTML
<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>    

8x8 LED Matrix

Credits

silvia11931

silvia11931

10 projects • 8 followers
Luigi Francesco Cerfeda

Luigi Francesco Cerfeda

6 projects • 83 followers
Yet another Tony Stark wannabe

Comments