Zipwhip New User Sign Up Flag

 

 

At Zipwhip we like to keep it fun and nerdy. So, we decided to do something a bit whimsical every time we get a new sign up on our site. We purchased some hardware, put in a weekend of work, and now we have a flag hanging on the wall in the office that automatically goes up every time we get a new sign up on our site!

The flag is attached to a servo motor and an Arduino over ethernet . Each time we get the sign up event inside our cloud infrastructure, we send an HTTP command to the embedded web server running on the Arduino. The Arduino then sends the appropriate commands to the servo and UP POPS THE FLAG!

It’s a ton of fun to see something visual happen each time we get a new user.

The one concern is that we may have to build in a queue to the software that sends the signal to the Arduino. This is because we get quite a few sign ups. So much so, that we will get a lag between when the flag actually moves, and the exact time the sign up occurred. If the queues fill up too much or the lag gets too long, we will likely just reduce the size of our flag and make a wall of flags all moving independently.

Want to make your own? Below is a screenshot of (a.) the code inside the Arduino IDE (b.) the board diagram and (c.) the Arduino code to make it happen.

Here’s our bill of materials:

• 1 Yard of Orange Fabric. 100% Cotton. Joanne Fabrics. $2.
• 1 Bottle of Liquid Stitch. Joanne Fabrics. $6.
• 1 Wooden Dowel. Joanne Fabrics. $2.
• 1 Avery Light Fabric Inkjet Transfer Pack. Staples. $20.
• 1 Arduino. SparkFun.com. $29.
• 1 Arduino Ethernet Shield. SparkFun.com. $40.
• 1 Savox 400 oz-in SC-1256TG High Torque Titanium Gear Standard Digital Coreless Servo. http://www.savoxusa.com $80.
• 1 Power Adapter. 6V DC 2 Amp. Lynxmotion.com.
• 1 40’ Ethernet cable. Newegg.com. $2.
• 1 Ikea Akurum Harlig White Door as Mount. Ikea. $5.
• 8 Wood Screws. #10 size for servo. #2 size for Arduino. $5.

This is a screenshot of how you use the Arduino IDE to write your code. The free IDE is available at http://www.arduino.cc.

This is a Fritzing diagram of the Arduino main board and the Arduino Ethernet Shield combined with the servo wiring. The hardest part of getting this schematic to work is getting enough power to the servo without sending it through the Arduino control pins.

And finally here is the full code to run your own flag. We painstakingly perfected the code so you know it’s ready to go for your own use.

________________________________________________________________________________________________________

/*

Web Server

A simple web server that shows the value of the analog input pins.
using an Arduino Wiznet Ethernet shield.

Circuit:
* Ethernet shield attached to pins 10, 11, 12, 13
* Analog inputs attached to pins A0 through A5 (optional)

*/

// Sweep
// by BARRAGAN <http://barraganstudio.com&gt;
// This example code is in the public domain.

// Zipwhip Sign Up Flag Codebase
// This code lets the Arduino operate a webserver. Whenever any
// request comes in to the server, it raises the flag. It’s quite
// simple. If too many requests are going to come in, the server is
// single-threaded so other requests have to wait. The sending process
// may want to instituate it’s own queuing system to solve for this.

#include <SPI.h>
#include <Ethernet.h>
#include <Servo.h>

Servo myservo; // create servo object to control a servo
// a maximum of eight servo objects can be created

int pos = 0; // variable to store the servo position
int startPos = 154;

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0xDA, 0xAD, 0xBA, 0xEA, 0xFE, 0xED };
IPAddress ip(192,168,1, 252);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
EthernetClient client;

void setup()
{

//Serial.begin(9600); // open the serial port at 9600 bps:

// start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();

// servo code
myservo.attach(3); // attaches the servo on pin 9 to the servo object
myservo.write(startPos);

// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:
pinMode(13, OUTPUT);
}

void loop()
{
// listen for incoming clients
client = server.available();

if (client) {
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
//Serial.print(c);

// if you’ve gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == ‘\n’ && currentLineIsBlank) {
// send a standard http response header
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println();

// output that we are raising the flag
client.println(“Zipwhip Sign Up Flag Going Up<br />Degrees we will rotate to:<br />”);
raiseFlag();
client.println(“Done<br />”);
//delay(100);
//client.stop();

//raiseFlag();

break;
}
if (c == ‘\n’) {
// you’re starting a new line
currentLineIsBlank = true;
}
else if (c != ‘\r’) {
// you’ve gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}

void raiseFlag() {

digitalWrite(13, HIGH); // set the LED on

myservo.attach(3); // attaches the servo on pin 9 to the servo object

// servo code
//myservo.attach(3); // attaches the servo on pin 9 to the servo object
//delay(100);
/* -10 (not possible on Sarvox Servo)
* 0
* 30
* 60
* 90 180
* 160
*/

// flag is all the way down. move it up. (may move to only 45 degrees down)
for(pos = startPos; pos>=30; pos-=1) // goes from 180 degrees to 0 degrees
{
client.print(pos);
client.print(” “);
//client.flush();
myservo.write(pos); // tell servo to go to position in variable ‘pos’
//delayMicroseconds(300);
delay(20); // waits 15ms for the servo to reach the position
}
client.println(“Done going forward.<br />”);

// Let’s pause by doing same positioning, but keep writing the same number
for(int ctr = 0; ctr < 60; ctr++)
{
myservo.write(pos);
delay(15);
}

// move flag all the way pointing down again
for(pos = 30; pos <= startPos; pos += 1) // goes from 0 degrees to 180 degrees
{ // in steps of 1 degree
client.print(pos);
client.print(” “);
//client.flush();
myservo.write(pos); // tell servo to go to position in variable ‘pos’
//delayMicroseconds(300);
delay(20); // waits 15ms for the servo to reach the position
}
client.println(“Done going backward.<br />”);
//myservo.detach();
delay(50);

myservo.detach(); // attaches the servo on pin 9 to the servo object

digitalWrite(13, LOW); // set the LED off

}