Control Adafruit NeoPixels using Python and JQWidgets

Low power wireless standards combined with low cost and ultra-miniature LEDs made smart lighting solutions a catalyst for the Internet of Things and home automation.

In this tutorial, we’ll see how to control an Adafruit NeoPixel ring via mobile using Python and JQWidgets. In particular, we’ll see how to use Zerynth Studio to program the microcontroller-based board in Python and how to use Zerynth App to run the JQWidget-based GUI.

Why using Zerynth App to remote control Neopixels

In case you missed the tutorial on how to make beautiful IoT Dashboards using Zerynth, Zerynth App is a mobile application that allows fast prototyping of graphical interfaces for your IoT projects. Through the Zerynth App, you can run beautiful responsive Graphical User Interfaces using HTML, CSS and JavaScript. No need for Android or iOS code!

In particular, Zerynth App enables a bidirectional communication channel between Zerynth-powered devices and your mobile. We’ve already seen how to send data from a Zerynth-powered device and use the Zerynth App as the remote display. You can consider this tutorial as the other side of the same coin: we’ll see how to control your device via the Zerynth App, used as a remote controller.

Let’s start!

Required Material

First of all, you need a board. You can select one of the 32-bit microcontroller devices supported by Zerynth. We’ve chosen the Particle Photon, a very popular Wi-Fi enabled development board for creating IoT projects.

You also need an Adafruit Neopixel ring (or a strip) and a breadboard.

Last but not least, you need:

• Zerynth Studio, our powerful IDE for embedded programming in Python that enables the IoT. You can download it here.

• Zerynth App. You can download it here.

Assembling

Just put the USB-powered Particle Photon on the breadboard and connect it to the Neopixel ring as follows:

• Neopixel +5V to Vin pin of the Particle Photon

• Neopixel GND to GND pin of the Particle Photon

• Neopixel “Data In” pin to a digital pin of the Particle Photon

If you want to use more Neopixels or if you want to power the system in a different way, take care of the info you can find here: Basic Connections, Best Practices, Powering NeoPixels.

Programming

Once you have installed Zerynth Studio and created a Zerynth user, you have to register and virtualize the board. Take a look at the Zerynth official documentation for the Particle Photon for a quick getting started.

Now you can start to program your board in Python!

Create a new project and edit the main.py file as follows:

# Neopixel via Zerynth App
 
from wireless import wifi
# change the following line to use a different wifi driver
from broadcom.bcm43362 import bcm43362 as wifi_driver
 
from zerynthapp import zerynthapp
 
from adafruit.neopixel import ledstrips as neo
 
import streams
 
streams.serial()
 
num_leds = 16                     # adjust this to match the number of LEDs on your strip
led_pin = A5                      # this should match the data pin of the LED strip
 
leds = neo.LedStrip(led_pin, num_leds) # create a new Neopixel strip composed of  LEDs and connected to pin led_pin
 
leds.clear()
r = 72
g = 108
b = 108
leds.setall(r, g, b) 
 
sleep(1000)
print("STARTING...")
 
try:
    # Device UID and TOKEN can be created in the ADM panel
    zapp = zerynthapp.ZerynthApp("DEVICE UID", "DEVICE TOKEN")
    # connect to the wifi network (Set your SSID and password below)
    wifi_driver.auto_init()
    
 
    for i in range(0,5):
        try:
            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)
 
    # Start the Zerynth app instance! 
    # Remember to create a template (index.html), 
    # upload it to the Zerynth ADM and associate it with the connected device
    zapp.run()
    
    def set_color(rr, gg, bb):
        global r, g, b
        r = rr
        g = gg
        b = bb
        leds.setall(r, g, b) # set the color of LEDs
    
    # link "set_color" to the function set_color
    zapp.on("set_color", set_color)
    
    
    while True:
        leds.on()       # refresh the LEDs color
        print('r = %i, g = %i, b = %i' % (r, g, b))
        print("..")
        sleep(50)   
 
except Exception as e:
    print(e)

Of course, you have to edit the SSID name and the PASSWORD of the wifi network you want to connect the board.

In addition, you have to create a “connected device” and link the “zerynthapp” instance to it. Then you have to create and link a template to the project. Take a look at the “Create and set up a connected device” and “Create , upload and set the Template” steps of this tutorial for more details.

The index.html file should look like this:

<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>
    </head>        
    <body>
        <div style="text-align:center">
            <p id="status" style="background:#ddd;font-weight:bold"></p>
            <h1>Color Picker</h1>
        </div>
        <div id="colorPicker" style="position: relative; margin: auto;"></div>
        <script>
            
             $(document).ready(function() {
                 
                 
                $("#colorPicker").jqxColorPicker({
                    width: 300,
                    height: 300,
                   colorMode: 'saturation'
                });
                
                $('#colorPicker').bind('colorchange', function (event)
                { 
                var color = $("#colorPicker").jqxColorPicker('getColor');
                    var hex = color.hex;
                    var rgb = color.r + "," + color.g + "," + color.b;
                    Z.call('set_color', [color.r, color.g, color.b]); 
                });
                
                // 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){
                        //display received event; 
                    }
                  })
            });
         
        </script>
        
    </body>
</html>

At this point, you can uplink the script to your device.

Finally, as you can read in this very brief tutorial, you just have to open the Zerynth App, log-in and select the specific device to see your GUI.

A unique feature of the Zerynth Stack is the integration of Web 2.0 technologies with connected devices. By linking a device to a template (that can be as simple as a single static web page or as complex as a responsive website), the device can be monitored and controlled remotely both on the Zerynth App or on a desktop computer clicking the eye icon to the right of the device name, as you can see here.

Enabling Firmware Over-the-Air (FOTA) updates for smart lighting systems

Once you’ve built your smart lighting system, you wouldn’t want to disassemble everything to upgrade the firmware.

To meet this specification, Zerynth has included the “Firmware Over-the-Air” feature within the Zerynth Studio PRO version, that also includes features like:

• Selectable RTOS

• Power Saving

• Hardware-driven Secured Firmware burned on the device at industrial volumes

• …and much more

DISCOVER ZERYNTH STUDIO PRO

Via Zerynth Academy