silvia11931Luigi Francesco Cerfeda
Published © GPL3+

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,390
Flip&Click Board LED Control Using Zerynth App and Python

Things used in this project

Hardware components

MikroElektronika Flip & Click
×1
MikroElektronika WiFi 4 click
×1

Software apps and online services

Zerynth Studio
Zerynth Studio
Zerynth App
Zerynth App

Story

Read more

Schematics

Untitled file

Code

main.py

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

style.css

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

javascript.js

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

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

Flip&click LEDs control

Credits

silvia11931

silvia11931

10 projects • 8 followers
Luigi Francesco Cerfeda

Luigi Francesco Cerfeda

6 projects • 83 followers
Yet another Tony Stark wannabe

Comments