Introduction: Electric Imp WiFi Progress Display

By

We randomly fell in to an ice cream reward system at home. Bringing good grades home means we get to go out for ice cream. Not sure that this is a politically correct reward system, but it is an event we all look forward to. Naturally, I'm a beneficiary of my children's grades - after all, someone needs to drive the car! Ulterior motives aside, it became difficult to track who had done what and what the criteria for a reward was, meaning that we erred on the side of caution and were spending a lot of time at the ice cream store. To fix this "problem", I came up with a reward system that allows them to log their grades through a Smartphone Web App. The app communicates with an Electric Imp that turns on a sequence of LEDs to show progress toward the reward. When the image is complete (all elements illuminated), the Agent on the Imp Cloud Server communicates with an SMS Service sending the "Goal Met" text message to all family members. At this point, we have justification to drive to the ice cream store in celebration and the cycle restarts.


Using an electric imp in the project gives you instant WiFi control of the LED array. The initial design of the Reward system was for a square LED matrix, but after many iterations, I ended up with a mechanically irregular matrix controlled in regular LED grid fashion. For the main images above, each element of the display is a LED which is addressed in a 4x4 grid matrix. This allows for interchangeable mechanical patterns more suited to the specific goal or reward on offer. An island palm tree for vacation savings, a piggy bank for a financial goal etc.

While this example is for academic results, the software and imp code can easily be modified to display progress toward any goal.

This instructable will walk through the complete design and demonstrate 2 different ways of creating the LED panel, an easy way to create a "metallic" panel as well as electronics, firmware and software. You will notice at times a flower being used in the photography, and at others a dragonfly. The principles are the same for both and development happened in parallel until I hit burnout during the final firmware development. The firmware development for the dragonfly is complete since this ended up being my favorite visual.




Step 1: Tools and Supplies

The LED panel for the project can be made using crafting techniques, or by using CNC Routing. I did in fact use both methods. Overall I preferred the CNC Router method for the precision with which the panel can be made.   However, not everyone has access to CNC machines, so I'll show both LED panel fabrication methods. 

All my past Imp projects have used the SD card format Imp plus development board. The team at electric imp recently released a solder-down module (IMP-002)that gives access to more I/O pins.  The extra I/O pins ( total of 12) made it possible to drive a 4x4 grid array and still have pins to spare. The PCB I used for the reward system is a custom PCB co-developed with a friend as a plug-in board for our garage door controller kit. It has become my "go-to" generic imp board for projects.


Electrical components
You could also use the standard Imp001 SD module with development board but you will need external devices to expand the I/O to drive the LED grid. Either way, you will need an Electric Imp for this design.

Our design is a derivative of an Electric Imp reference design (http://electricimp.com/docs/hardware/resources/reference-designs/amber/). The board we designed is intended as a plugin module for a garage door controller kit we developed. The module was designed as a general IMP002 board which includes everything needed to get an electric imp design running (Electric Imp, phototransistors, voltage regulator, status LEDs etc). 
  • NPN Transistors - 8 x any general purpose NPN transistor will work. I used old ZTX692 transistors since I have a bag full of them from way back. I suggest you use something more commonly available like a 2N3904 (http://www.radioshack.com/product/index.jsp?productId=2062609) available from Radioshack.
  • Resistors - 8 x 1KOhm, 1/4W or 1/8W,  1% or 5% or 10% tolerance resistors (tolerance really does not matter here). These resistors limit the current into the base of the 8 NPN transistors.  http://www.radioshack.com/product/index.jsp?productId=2062343
  • Resistors - 4 x 150Ohm, 1/4 or 1/8W, 1% or 5% or 10% tolerance. These resistors limit the current through the LEDs. Initially I used 150Ohm resistors. Later I switched to 100Ohm to increase the LED brightness because the transistors I used have 0.6V Collector-Emitter volt drop which in total means you have 1.2V less to drive an LED. So, some pictures will show 150Ohm and some 100Ohm. Your choice will depend on the Collector Emitter voltage drop of the row and column transistors, the volt drop across the LED and the manufacturers spec for operating current through your LED.
  • 20 or 24 Pin DIP sockets - I used these instead of connectors simply because I had these in my project box. You can use anything here - you do not have to use what I used.
  • 5mm LEDs - Depending on the picture you want to illuminate, select appropriately colored high brightness LEDs. I found the RGB LEDs most useful because you can select the color at wiring time giving you a lot of flexibility. The flower design required 13 LEDs and the dragonfly design required 11. The number of LEDs basically determine the number of levels before a reward is due. The electyric imp firmware expects a 4x4 matrix allowing for a maximum of 16 LEDs, but you can extend this if needed to 6x6 with the available Electric IMP pins allowing for 36 LED designs. The blue LEDs have the following Specs: High Visibility
Diffused Blue Lens - 5mm diameter
Operating Current: 18mA
Peek Current: 30mA
Forward Voltage: 3.0V
Power Dissipation: 105mW
Wavelength: 463nM
Viewing Angle: 50deg
Luminous Intensity: 1100mcd
http://www.ebay.com/itm/181114104984?ssPageName=STRK:MEWNX:IT&_trksid=p3984.m1439.l2649
 
The RGB LEDs I used have the following Spec
Illumination Color: Red, Green, and/or Blue
Lens Style: Diffused
LED Size: 5mm
Lens Shape: Round
Wavelength/Color Temperature: 620-630nm
Luminous Intensity: 4000 - 8000 mcd
Forward Voltage: R~2.4V, G~3.4V, B~3.4V
Forward Current: ~20mA
http://www.ebay.com/itm/181204465776?ssPageName=STRK:MEWNX:IT&_trksid=p3984.m1439.l2649
Electrical Tools and Supplies
  • Sidecutters for trimming components leads, cutting wire to length etc
  • Wire strippers
  • 26 Gauge multi-stranded hookup wire. Multiple colors are useful.
  • Long nose pliers - for holding components that will get hot when soldered and for bending wire leads
  • Multimeter - for testing continuity and measuring voltages.
  • Solder and Soldering Iron
Crafting Supplies
  • Foam board for creating the picture inserts - only needed if you do not follow the CNC Router method
  • Poster board for creating stencils that are used to frost glass from the picture frames
  • 8x7 Picture frames. I bough the deepest ones I could find from AC Moore. You may be able to find these on-line. I visited the brick-and-mortar store. 
  • Xacto knife
  • Frosting Paint - I used Rust-oleum Frosted Glass Spray 
  • 5mm drill bit for making holes in the craft board for the LEDs

CNC Supplies
If you choose to make your patterns using CNC,
  • 1/2" Plywood or MDF. 
  • Aluminum Flashing. I use the flashing to create "metalized" panels. By adhering the Flashing to plywood you create the look of metallic panels. 
  • Spray-on contact adhesive to adhere the aluminum flashing to the plywood panel. I used Locktite 300.
  • 1/8" and 1/4" high speed single flute router bits

Step 2: Building the Electronics

This is a difficult thing to describe step by step, but I'll give it a go! If anything is unclear, PM me and I'll elaborate where needed.

Start by cutting one of the 20 Pin DIP sockets in half and solder it to the circuit board. Then connect 8 of the pins to 8 x 1K resistors. These resistors connect to the base pin of the NPN transistors. The Electric Imp output current is about 4mA so the transistor is used to amplify that to roughly 30mA to get good intensity from the LEDs. The transistor also allows us to use the 5V input supply instead of the 3.3V Imp supply. This is needed as the forward voltage requirement for the LED is worst case 3.2V and the expected voltage drop across the transistors will be in the order of 0.4V (using 2N3904 transistors). 

Then add 2 transistors - one column transistor and one row transistor. Add the 150 Ohm resistor and connect it to the output socket. The output socket is arranged so that you have rows on one side, and columns on the other.  When the first 2 transistors are soldered in place, it makes sense to test the first row/column combination just to make sure your basic circuit works before you solder the remaining transistors and resistors in place.  I wrote a small test program on the Imp that enables Row 1 and Column 1 and checked to see that an LED connected across row 1 column 1 illuminated.

Then build up the remainder of the circuit as per the circuit diagram.

Step 3: Designing the LED Panel

I chose the flower and dragonfly designs because they are naturally segmented. The idea is to have an led illuminate each segment so starting with simple concepts that support this makes things easier. You can use any drawing program to create the image. Ultimately, you need a line drawing that you can use as a template for cutting the pattern out of craft foam, or as input into a CAM program for cutting out on a CNC machine.

I created the two designs using a Alibre Design, a 3D CAD program as this was the practical way for me to do it. You can most likely find line art on the web that you can copy. I have provided my designs as reference as PDF as well as the associated  DXF files which are inputs for CAM software to create the toolpath for a CNC router. You can also load the DXF files into other drawing packages to modify them. 


Attachments

Step 4: Making the LED Panel - Crafting Method

Print out the PDF pattern and tape it to the craft board. Using an Xacto knife, carefully cut the pattern out of the craft board. My results were less than stellar. You will need to cut the pattern out twice and laminate the two together to create the neccessary thickness. You may be able to find 1/2" thick foam board which will mean you only need to cut once, but trying to keep your cuts straight and vertical through 1/2" could prove to be very difficult. Finaly cut a backing piece that will hold the LEDs. Use a drill bit or punch to make the 5mm holes for holding the LED. You want the LED fit to be reasonably tight as this will make wiring up a lot easier later. 

Step 5: Making the LED Panel - CNC Method


After throwing out my miserable attempt at making a good looking LED panel from the craft board, I headed to the CNC to give me the clean cut pattern I wanted. 

Create the artwork
The first step is to create the artwork. I used Alibre CAD to create both the flower and the dragonfly pictures. Once the 3D model is complete, a 2D drawing of the model is automatically generated by the CAD program. This 2 D drawing is then exported as a DXF file. THe DXF file is then imported into a trial version of CamBam and converted to g-code. The G-code is interpreted by Mach-3 machine controller software which drives the router to cut the pockets we designed into the blank panel.

Make the blank "metallic" LED panel
Start by first cutting a 1/2" plywood panel to roughly 10"x10". The panel needs to be a bit bigger than your final cutout dimensions as you need space to clamp the panel to the CNC router bed. To create a brushed metallic look, the aluminum flashing is laminated to the one side of the 1/2" plywood panel. First make sure that the plywood panel surface is clean and smooth. A light sanding may be needed but make sure to remove all dust using a tack cloth. Make sure the side of the aluminum panel that will stick to the wood is absolutely clean as well. If there are any pieces of dirt or wood splinters between the two parts when you glue them together, the defect will be clearly visible.
Spray adhesive onto the plywood and on to the inner curve of the aluminum flashing. Wait about a minute for the spray glue to "tack" and then carefully place the flashing onto the pluywood panel. Start at one end and slowly move toward the other end. You want to avoid "bubbles" in the final surface. Then trim off any excess flashing using tin snips. Apply moderate hand pressure all around the panel to make sure it is properly adhered all over. 

Machine the Panel
Leave the panel to setup for 1/2 hour or so before machining. Load the blank into the CNC Router, clamp it down and load the g-code into Mach-3. The program takes about 20 minutes to run on the flower, and about 16 minutes on the dragonfly. 




Step 6: Wiring the Panel

Insert the LEDs in the 5mm holes so that the pins are directed outward from the panel. I made the mistake of only using 2 wire colors - orange for rows and green for columns. This makes fault finding more difficult so I suggest you use colors similar to those shown in the Wring Diagram. 

Where LEDs are close enough, you can bend and solder the leads together without using additional wire. 

Step 7: Diffusing the LED

To diffuse the light from the LEDs, the glass panel from the picture frame is frosted. I chose to only frost the areas above the LED pockets so that the metallic panel was highly visible. This requires making a stencil. I used poster board for the stencil and an Xacto knife to cut it out. This is a tedious process but worth it. 
Once you have the stencil, used the Frosted Glass spray paint to spray the openings. Keep the can about 10 inches from the glass so that you get a nice frosted layer. If you are too close, the paint will not "frost" properly. After a little drying time, add a second light layer. I found 2 light layers to be sufficient but you can add more if you need to. After the panel is dry ( the Rust-oleum paint I used was very dry after 1/2 hour), remove the stencil. You should have a beautiful frosted glass panel.

To improve the reflectivity of the LED within the cavity, I used some white paint to coat the cavity. I can't tell if this improved the light output, but does make the panel look better when the LED is off. I used standard Acrylic Trim paint for this. Any paint that will work on wood will do fine.
 

Step 8: Faux Stained Glass

This step was added very late in the cycle. I was wandering through a craft store and came across the Gallery Glass Faux stained glass products. I thought it would be a good fit for this project. There are 3 components that make this work
  • A reusable Leaded Blank
  • Simulated Liquid Leading
  • Gallery Glass Paint and spoon applicator
The process is quite simple
  1. Place the template for the design underneath the gallery glass leading blank and secure with tape to prevent it from moving
  2. "Trace" the outlines of the design with the liquid leaded glass and wait 8 hours for it to set
  3. Fill in the outlines with the paint making sure to avoid bubbles. If you do get bubbles a tooth pick can be used to pop them. Then wait 8 hours for the paint to set.
  4. Carefully peel the picture elements from the leading sheet and place them on the LED frame front glass panel.
I like the look of the faux stained glass best but I think the LEDs will need to be brighter. Maybe add a second LED to each cavity? A project for the future.



Step 9: Firmware - Driving the LEDs

The LEDs are arranged in matrix fashion. In order to illuminate a particular LED, the row and column lines are turned on together. The LED at the intersection of the row and column will light up. The scanning routine in the Imp firmware essentially does the following:
  1. Drive Row 0 Pin high
  2. If the bitmap pattern has a bit set for a particular column, turn drive the column pin high. Wait a short while and set the column pin low.
  3. Move on to the next column until all columns have been managed.
  4. Drive Row 0 low and drive row 1 high and repeat the process for the column pins defined for that row.
The LEDs appear to be continuously lit due to persistence of vision. There is a very comprehensive article on the principles of LED arrays here: http://www.avagotech.com/docs/AV02-3697EN

The pattern that defines which LED needs to be illuminated in each row is arranged in row and column fashion. An array of 4 bytes defines the state of the grid at a particular point in time. Referring to the Dragonfly matrix, we can turn body components on and off by defining a zero or one for each row and column position. For example, to turn on the head, we need to drive Row 0 High and Column 1 High. This is a tedious process. The following array entries show the typical sequence needed to animate the display

Row 0, Row 1, Row 2
[0x00,   0x00,    0x00],  Animation Sequence Step 0  (No column bits are set - everything off)
[0x00,   0x00,    0x04],  Animation Sequence Step 1  (Row 2 column Column 2 is set on - this turns on the tail tip) 
[0x00,   0x00,    0x06],  Animation Sequence Step 2  (Row 2 Column 2 and 3 are on - this turns on the tail tip and abdomen)
[0x00,   0x02,    0x06]   Animation Sequence Step 3  (Row 2 Column 2 and 3 and Row 1 Column 1 are on - tail tip, abdomen and thorax are on)

There is a 250ms delay between sequence steps. You can change this in the code for faster or slower. The animation is used for "celebrating" the final reward level being met. When you see the dragonfly flashing - it's time for ice cream!

Under normal operation, the LEDs illuminate in sequence as each entry is made from the remote smartphone. If an A is received, the current reward level is incremented which turns on the next body element. The display is not animated in this case and will appear static, illuminating only the LEDs corresponding to the reward level.
 
A diagnostic mode is also provided so that you can check your panel wiring. By clicking each body part of the dragonfly, you can toggle the illumination of an LED.


Step 10: Firmware - Electric Imp Agent and Device


Apologies for the following re-use of text from my previous electric imp instructable - the requirements are the same. Just saving you from navigating another link!

In order to get your imp to work, it needs to connect to your wireless network. Electric Imp provides a tool that does the configuration optically. The process is called BlinkUp and is detailed here https://electricimp.com/docs/gettingstarted/1-blinkup/

Once the BlinkUp is complete, your imp will appear on your IDE under New Devices. If you have not used an Electric Imp before, I suggest you first try the Hello World example on the Electric Imp site to get the hang of the Imp. There is also a great guide to the imp on instructables written by @beardedinventor: https://www.instructables.com/id/Getting-Started-with-Electric-Imp/

The firmware for the imp is attached to this step as RewardSystemDeviceCode.nut
The code for the agent is attached as RewardSystemAgentCode.nut

Firmware and Agent code interaction
Your Agent has a URL specific to it. When an HTTP message is sent to this URL, your Agent code running in the Imp Cloud checks the validity of the request by comparing the incoming API Key (any key you make up - more bits make it harder to guess) with the API Key stored in memory of the Agent (API Key idea from http://forums.electricimp.com/discussion/comment/8281#Comment_8281). If the Key's match, the message is checked to determine if the request is in the API for this system.

Events that get passed from the Agent to the Device Imp firmware, are passed over the electric imp secure communication channel between the Imp and the server based Agent. The Imp "receives" this event through the agent.on functions defined in the device firmware
  • agent.on("addGoalStep", function( value ) {});
  • agent.on("buttonPressed", function( value ) {});

The API for this app:
{request: buttonPressed} - used for diagnostics and to rest goal levels
{request:persistValues} - stores values for SendHub communication defined by the client App
{request:addGoalStep} - increment the current level towards the goal depending on the value of the input. In out case we manage the steps according to the following weighting (where super A is 100%):

if( value == "superA" )
    goalLevel += 2;
  else if( value == "A" )
    goalLevel += 1;
  else if( value == "B" )
    goalLevel += 0.5;
  else if( value == "C" )
    goalLevel += 0.25;
  else if ( value == "restartGoal" )



Attachments

Step 11: Client HTML App

The client app is a Jquery mobile HTML/CSS/Javascript app with 3 pages. The opening page displays the buttons for logging your result into the system. The value of the button click is passed to the Imp. The Imp increments the attained level and illuminates LEDs to display the progress toward the goal. When the final goal level is reached, the Imp displays an animation sequence until it is reset by pressing the Restart Goal button on the client application. This button is protected with a PIN so that the level is not accidentally reset.

Communicating with the Electric Imp is done by sending a message to the URL of the Agent which is specific to your particular Imp. To simplify configuration, the App has a settings page where you can enter all of your configuration data such as your Imp specific URL and your SendHub particulars. SendHub is used to send text messages.

You will need to create an account on SendHub if you want text messages. They have a free account good for 500 messages a month. https://www.sendhub.com/

To make the HTML page appear as a native App on your iPhone, you need to load it from a web site, and then add it to your home screen. The process is described in my previous instructable here: https://www.instructables.com/id/Electric-Imp-Garage-Door-Opener/step10/Configuring-IIS-Express-And-Loading-The-App-onto-y/

The iPhone files are attached to this step. The academic Cap icon is courtesy of http://www.flaticon.com/free-icon/graduation-hat_422




Attachments

Step 12: Final Thoughts

Following though these steps you should end up with a working system. Naturally you may want to manage rewards differently to the way I did things. The firmware and client code is provided for that purpose. If you need help, feel free to PM me. If you want a CNC machined LED panel, I can provide you one at reasonable cost.

If you build one, let me know!