IoT connected flag!

We spend a lot of time working with startups and companies producing internet connected products. We tend to focus on the design of these, however we have become more and more intrigued about the backend of these devices. So over the last week we have been playing around with creating our own IoT toy in the office.

We used the particle.io photon dev board which is based around arduino and links straight to their own cloud service. This means anyone can make super simple connected products within a matter of minutes. And can then span things out into more complex systems with a bit more work.

So we built a simple API call that triggers when you press an HTML button on our site. This runs a command on the photon that causes a servo to move back and fourth. To make it look a bit cooler we added a flag and chucked everything in a little cardboard box. Check out the video to see what happens. And press the button below once to give us a wave!



The best thing with the photon is that it links in with with IFTTT so our little flag no waves every time someone follows @morramadesign on twitter. So say hi to us by hitting the above button and then following us!


Check out the code below if you want to make your own particle project!

HTML button code

<style type="text/css">
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
    background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
    background-color:#f6f6f6;
}
.myButton:active {
    position:relative;
    top:1px;
}


</style>

<html>
<body>
<center>
<button type="button" class="myButton" onclick="functionCall('led', 'Flag')">WAVE FLAG!</button>

<script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>

<script>
var accessToken = "YOUR ACCESS TOKEN";
var deviceID = "YOUR DEVICE TOKEN";
spark.on('login', function(response) {   
    console.log(response);   
    });

var callback = function(err, data) {
    if (err) {
      console.log('An error occurred while getting core attrs:', err);
    }
    else {
    console.log('Core attr retrieved successfully:', data);
    }
};
function functionCall(functionName, functionArgument){
spark.callFunction(deviceID, functionName, functionArgument, callback);  
}
spark.login({ accessToken: accessToken });
</script>
</center>
</body>
</html>

Firmware code

int beep = D4;
Servo myservo;

void setup()
{
   pinMode(beep, OUTPUT);
   Spark.function("led",ledControl);
   myservo.attach(A5);
}

void loop()
{
}

int ledControl(String command) {
        if (command=="Flag") {
        for (int x=0; x<100; x=x+1){
            digitalWrite(beep, HIGH);
            delay(1);
            digitalWrite(beep, LOW);
            delay(1);
        }
        for (int x=0; x<2; x=x+1){
            myservo.write(125);
            delay(1000);
            myservo.write(15);
            delay(1000);
        }
    }
}