IOT Light

Webinterface enabled neopixel string

We have made a web interface in which you can control the different preprogrammed light patterns on the chip. The system is 100% embedded in the microcontroller. All you need to do is to upload the software. It will then create a wifi hotspot. When you connect to the hotspot, a webpage will appear with buttons and sliders. Further, you can configure it to connect to your normal wifi network and then access it through a web browser.

The purpose of ioGlow is to give a simple platform to learn to program with. We have taken care of all the complicated stuff. This way you only have to focus on programming fun colour patterns and making a nice enclosure.

Design originally developed as a part of http://fablab.ruc.dk

Technical description of the internal system

The code on the Wemos controller starts a SoftAP (Access Point), a webserver, websocket server and a DNS server. Any requests to the DNS server redirects to the webpage/ip which the web-server hosts. The web server transfers an HTML page to the browser. The page creates a websocket connect back to the websocket server. When the user presses a button on the HTML page, javascript thus makes a websocket call to the server that a specific button has been pressed. This is registered in a variable that defines which pattern to run at any given moment.

Step by step guide to getting IT up and running

Materials needed

  • 1m Neopixel string.

  • ESP32 based MCU

  • Micro USB cable.

1.

Solder the neopixels

You need to solder three wires from the ESP32 board to the Neopixel string. Connect 5v/VCC to v5/VCC, Di/DIN to IO17 on the board and G/GND to G/GND. Some Neopixels have two data pads DI BI. Solder both to IO17.

Make sure the direction on the neopixel string is correct.

Warning: This way of wiring limits your length of Neopixels to about 30 LEDS. The problem is that the serial chip will drop out if too much current is used for the LEDS.

How to solder neopixels:

  • Make sure the soldering iron is warm.

  • Add a tiny bit of solder on the pads on the strip.

  • Add solder on the wire.

  • Put the wire to the pad and heat with the soldering iron.

This sounds really simple, but in reality it is really really hard. It takes practice.




IMG_7548.MOV

2.

Setup the Arduino IDE for ESP32

It is neccesary for the Arduino board to be able to upload and program to ESP32 micro controllers.

A detailed instlalation guide of setting the Arduino ide can be found here - click the button below

3.

Verify that everything is setup properly

When you have gone through the different steps then your Board configuration your tools menu should look like this:

  • The correct Board

  • The upload speed can be set to 921600

  • The correct port

4.

Install the FastLED library

Open the sketch menu choose Manage Libraries and search for FastLED. Press install.

5.

Install the WebSocket library

Open the sketch menu -> "include Library" -> choose "Manage Libraries" and search for WebSockets. Press install on the Markus Sattler version.

6.

Download the code

Download the code here.

Use the version with the highest number with ESP32 in its name.

FOR WINDOWS USERS: It is important to unzip the whole file to a folder. Right click and press "extract to folder".

If you are in a classroom with multiple ioGlows then you can change the wifi name to something else so you can identify your Wemos:

String name = "ioGlow-";


When opened you should have a window that looks like this:

Notice the five tabs (ioGlow_v1, credentials, fastled, handleHTTP, tools). If they are not present, then your foldername is not consistent with the main file.

The files consist of a bunch of INO files. The ino files have to be in a folder named after the IOGLOW version. Thus if it is version one, then the folder should be named "ioGlowv1.ino". Please verify that this is the case before opening it in Arduino. To open in arduino double click on "ioGlowv1.ino".

7.

Compile to verify everything works

Press compile (the V icon in the top left corner) to verify that you have installed the code properly. If you installed everything correctly, you should get a "Done compiling" below the code.


8.

Upload the code

Plug in the USB cable connected to the Wemos board and configure the Arduino to upload to the correct port. For Windows, it will be the highest port number e.g. com6. For Mac, it will be named something like "/dev/cu....".

Now press upload on the button with a left-pointing-arrow icon on the top left corner of the window.

If everything succeeds, you will get a "Done upload" message below the code part of the window in the status bar.

9.

Open the web interface

Open wifi settings on your phone. Find the wifi name oiGlow-xxxxxx. An individual name is created for each Wemos board (to prevent overlapping wifi names in classroom environments). Pick the wifi and wait a few seconds. A portal should pop up with the interface. In this interface, you can also define which wifi it should connect to. If you want to get the interface which connected to your normal network you can go to the url http://oiGlow-xxxxxx.local. Remember to change the x's to the name of you specific devices wifi name.

Sometimes it does not play well with specific phones. Try different phones if you are having problems getting the page.

10.

How to find the name of your wifi and IP number

You can find the name of the wifi and the IP number by looking in the serial monitor. Presse the serial monitor icon top left the corner. In the new window set the baud rate to 115200. You might need to press reset on the board (a small button) for something to show up. There should show up text like on the right.

11.

Start programming patterns for the neopixels

Neopixels are versatile light strings where each diode can be controlled individually. Each one has Red, Green, and Blue and can be from 0 to 255 in brightness. Multiple libraries exists to use noepixels. We use Fastled in this case.

See below for a few ways to get started.

Modify the existing patterns

In the code each light pattern has its own method to define the light pattern. E.g. to make every pixel red the following code will do it:

void red() {

for (int i = 0; i < NUM_LEDS; i++)

{

leds[i] = CRGB(255, 0, 0);

yield();

}

}

The code runs through every pixel and sets the color to RGB 255,0,0. Which means the full brightness of the red channel and turning the green and blue off.

IMPORTANT: Setting all channels to FULL white e.g. CRGB(255, 255, 255) might fry the Wemos board because it draws too much current.

For advanced color patterns: Take a look at the Reference

https://github.com/FastLED/FastLED/wiki/Pixel-reference

Getting the values from the sliders in the webinterface

The webinterface has 3 generic sliders that you can use to allow the user to control things like color, speed etc. in real-time.

The three sliders can be accessed through sliderValues[0], sliderValues[1], and sliderValues[2]. The values of the sliders goes from 0 to 255.

Adding your own pattern

Let's say that we want a Disco pattern. In the setup method we would need to add a line that would add the disco pattern to the possible list of patterns:

addLightPattern(disco, "Disco");

Further, we would need to add a method that the controller can call when the disco pattern has been selected in the webinterface:

void disco()

{


}

Let's say that your disco is the most simple pattern possible. We simply want one diode to be red. Then this command (inserted between the two curly brackets would do it):

leds[0] = CRGB(255, 0, 0);

If we want the three first leds to be red. We can copy the line and change the index number:

leds[0] = CRGB(255, 0, 0);

leds[1] = CRGB(255, 0, 0);

leds[2] = CRGB(255, 0, 0);

As you might already realize this strategy quickly becomes redundant, thus, we use the for loop to run through them all:

for (int i = 0; i < NUM_LEDS; i++)

{

leds[i] = CRGB(255, 0, 0);

yield();

}

For now, we have only made a red pattern. A simple way to make blinky disco is to add some randomness to the mix:

for (int i = 0; i < NUM_LEDS; i++)

{

leds[i] = CHSV(random(0,255), 125, 125);

yield();

}

Notice how we also changed the color mapping to HSV instead of RGB. In the HSV color mode, the first parameter is the color, the second the saturation, the third the brightness.