Flip&Click Board LED Control Using Zerynth App and Python

A simple tutorial to introduce you to the IoT world with Zerynth. Learn how to control Flip&Click board LEDs through your own smartphone.

BeginnerFull instructions provided1 hour1,797

Flip&Click Board LED Control Using Zerynth App and Python

Things used in this project

Hardware components

MIKROE Flip & Click

MIKROE WiFi 4 click

Software apps and online services

Zerynth Studio

Story

If you are new to the IoT world, this is a very simple and complete step-by-step example from which you can take inspiration. What we will do is simple: we are going to program a Flip&Click in Python and control the four LEDs of the board via WiFi. At the end of this tutorial you will be able to turn the LEDs on and off whenever you want with your smartphone.

All of this will be possible in a very simple way, thanks to the tools that Zerynth offers (that will be mentioned in step 1).

Step 1: Required Materials

The project requires a few elements:

Zerynth Studio: a cross-platform Python development environment with 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).

Step 2: Assembling

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

If you have problems connecting to the Internet, you may need to configure the baud rate of 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. Remember to install drivers, which are required for Windows and Mac platforms!

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!

With the interface on your phone you can play with the switches by turning on/off the LEDs of your Flip&Click board. Moreover, you can customize the interface at your leisure, just by revising the file named "style.css", which is inside the "template" folder. It's also possible to run the HTML/JavaScript interface directly from your browser: just go to the ADM panel on the left and, on the list of connected devices, click the eye icon next to the name of your device!

1 / 3 • two different "styles" of the template of the app

What's next?

We have seen that the device can be controlled remotely both on a desktop computer or on a mobile app (thanks to the Zerynth ADM). Now you could proceed by adding a new component to your IoT background simply by exploiting another Flip&Click slot. If you are curious, see here!

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 an IoT Thermometer

Code

import streams
# 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

streams.serial()

# set the pins as output
LED = {"LED A":D39, "LED B":D40, "LED C":D41, "LED D":D42}

for pin in LED.values():
    pinMode(pin, OUTPUT)


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

try:
   # Wifi 4 Click on slot A(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(pin,status):
    
    if status == "ON":
        digitalWrite(LED[pin],HIGH)
    elif status == "OFF":
        digitalWrite(LED[pin],LOW)


# link "set_led" to the function set_led
zapp.on("set_led", set_led)

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

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

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

h1 {
    color: #333;
    font-size: 50px;
} 

 #settings-panel {
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        position: relative;
        width: 100%;
        max-width: 400px;
}

.settings-section {
        background: #e8e8e8;
        height: 45px;
        border: 1px solid #aaa;
        border-bottom-width: 0px;
}

.settings-section-top {
        border-bottom-width: 0px;
        -moz-border-radius-topleft: 10px;
        -webkit-border-top-left-radius: 10px;
        border-top-left-radius: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-top-right-radius: 10px;
        border-top-right-radius: 10px;            
}

.sections-section-bottom{
        border-bottom-width: 1px;
        -moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-left-radius: 10px;
        border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -webkit-border-bottom-right-radius: 10px;
        border-bottom-right-radius: 10px;            
}

.sections-top-shadow {
        height: 1px;
        position: absolute;
        top: 21px;
        left: 21px;
        height: 30px;
        border-top: 1px solid #e4e4e4;
        -moz-border-radius-topleft: 10px;
        -webkit-border-top-left-radius: 10px;
        border-top-left-radius: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-top-right-radius: 10px;
        border-top-right-radius: 10px;  
}

.settings-label {
        font-weight: bold;
        font-family: 'Oswald',Sans-Serif;
        font-size: 16px;
        margin-left: 20px;
        margin-top: 13px;
        float: left;
        letter-spacing: 2px;
        color: #0c0c0c;
}

.settings-melody {
        color: #385487;
        font-family: Sans-Serif;
        font-size: 14px;
        display: inline-block;
        margin-top: 7px;
}

.settings-setter {
        float: right;
        margin-right: 14px;
        margin-top: 8px;
}

#theme {
        margin-left: 20px;
        margin-bottom: 20px;
}

$(document).ready(function () {
        var label = {
                'button1': 'LED A',
                'button2': 'LED B',
                'button3': 'LED C',
                'button4': 'LED D',
            };
        $('#button1').jqxSwitchButton({ height: 27, width: 81,  checked: false });
        $('#button2').jqxSwitchButton({ height: 27, width: 81,  checked: false });
        $('#button3').jqxSwitchButton({ height: 27, width: 81,  checked: false });
        $('#button4').jqxSwitchButton({ height: 27, width: 81,  checked: false });

        $('.jqx-switchbutton').on('unchecked', function (event) {
            var led = label[event.target.id];
            Z.call("set_led",[led,"ON"]);
        });
        $('.jqx-switchbutton').on('checked', function (event) {
            var led = label[event.target.id];
            Z.call("set_led",[led,"OFF"]);
        });
  
    

      // 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)
            $("#text1").after("TESTO: ", evt.payload.data);     // Append new element
            $("#text1").after("<br>");
        }
      })
});

<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>
        <!-- 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>
         <!-- CSS -->
	    <link rel="stylesheet" href="style.css" >
	    <!-- JS -->
	    <script src="javascript.js"></script>
    </head>
    <body>
        <div style="text-align:center">
            <p id="status" style="background:#e8e8e8;font-weight:bold"></p>
            <h1>LED CONTROL</h1>
            <br>
            <br>
        </div>
        
        <div id="settings-panel">
            <div class="sections-top-shadow"></div>
    
            <div class="settings-section-top settings-section">
                <div class="settings-label">LED A</div>
                <div class="settings-setter">
                    <div id="button1"></div>
                </div>
            </div>
            <div class="settings-section">
                <div class="settings-label">LED B</div>
                <div class="settings-setter">
                    <div id="button2"></div>
                </div>
            </div>
            <div class="settings-section">
                <div class="settings-label">LED C</div>
                <div class="settings-setter">
                    <div id="button3"></div>
                </div>
            </div>
            <div class="sections-section-bottom settings-section">
                <div class="settings-label">LED D</div>
                <div class="settings-setter">
                    <div id="button4"></div>
                </div>
            </div>
        </div>

   </body>
</html>