loading

I got an ikea lamp in my condo, it works well, turns on, turns off... that all it does. It's kindy boring, isn't it? I was thinking, what if I hack it? Then RGB LEDs come to my head and ideas started to flow.

At work, I knew about Protocoder and App Inventor, both great ways to develop a phone app without much effort.

If you are bored, as I do of your high tech on/off lamp, or just want to know how to control Arduino with your smartphone or tablet, this is your instructable!

In a few steps we're going to learn how to create beautiful User Interfaces, bluetooth communications with Protocoder and App Inventor, also, how to read data recieved over bluetooth in Arduino and how to play with leds.

App Inventor it's much more slow than Protocoder, so i'm going to use Protocoder. If you want to check App Inventor code, please check my github repository for this project.

I'm assuming that you know something about Arduino and something about coding, so i'm not going to explain every detail in the code, just going trough. If you feel that you're missing something you can ask below for more info, or check out arduino reference.

Please be sure to check out my github repository for this project, it maybe has new stuff not included on this code.

Let get started!

Step 1: Electrical Diagram

Ok! Let get started by putting all electronic bits together.

That is what you need:

  1. Arduino board with built in bluetooth (or Arduino and a bluetooth module)
  2. Some RGB LEDs (i'm using common cathode Leds with built in current limiting resistors)
  3. Resistors if your RGB LEDs doesn't have it.
  4. Some Wire.

You can connect the leds to any pin with PWM capabilities in your board. I'm using 6 to red, 5 to green and 3 to blue.

Don't forget to use Resistors to limit current, otherwise your led it's going to get hurt!

Step 2: Arduino Code

Ok, so we're just here, at the very beginning of our project. We're going to start with Arduino Code.

The board that I'm using is a BQ ZUM BT-328, which has a built in bluetooth, so makes pretty easy to work with it. It can handle up to 3A at 5V, so there is no need for a power shield to manage all the current.

First of all, download the code and upload into your board. If you are using the same board as I do, you're done! If not, you should check out how to connect a bluetooth module to your Arduino board and how to read data received over the module.

I'm using comon cathode RGB LEDs with current limiting resistors, if your LEDS doesn't have it, please connect in series a suitable resistor.

Please, open the code and read it with me.

At first, we initialize the variables of the code (pin numbers for each color, and delayTime, which it used to make the led fade smoother.)

Don't increase too much delayTime, it could make the fade function runs too slow. I recommend to leave it to 10 milliseconds or reduce it down to 5 milliseconds.

After that, in setup function we start the Serial port at 19200 bauds/s,with "Serial.begin(19200);", the speed of the bluetooth module in my board. If your bluetooth module works at different speed, please change it.

Then we set pins to output with pinMode(name_of_the_pin_variable,OUTPUT);

After that, in loop function, we start with a while, that makes the program run on it until the bytes available on Serial port are "over".

From Protocoder or App Inventor we're sending a string with the RGB color parsed like: red,green,blue\n. So, Arduino is expecting to receive incoming data over bluetooth and it parse and store in variables. i.e:

red = Serial.parseInt();

When Arduino reads \n, it means that the message is fully received. So, it start to modify the values on the led. First, we constrain data to fit in the suitable PWM Arduino range and then we call fade function, a custom made function that make the led fade from the color that they have to the color that we want to have.

Fade got three arguments: pin number, new value and aktvalue. It compares both values and modify with PWM signals the color of the led. If you modify global variable delayLed, that is were it works.

That's all about Arduino code, let's check out electrical connections!

Step 3: Protocoder: Installing App and Importing Hack-A-Lamp Project

Protocoder is a great tool made by Victor Díaz and it's a great tool for app prototyping. It's possible to do great stuff within hours and it works pretty well and fast!

First of all, you must know that protocoder is like a "frontend" to android app developing. The code is written in Javascript and behind that, protocoder handles all android confusing stuff.

It got a full ide, with examples and your projects stored on your phone. You just need to donwload the app from Protocoder site and install it on your phone. Then start the app and check out the IP address shown at screen bottom. Grab that IP and go to your favorite browser and start hacking!

You can download the file projects_Hack-A-Lamp.proto on your smartphone or tablet and, with the help of a file explorer, open it with protocoder.

Let's digg on Protocoder code!

Step 4: Protocoder Code

Let's digg in Protocoder code.

This is going to handle user interface, bluetooth communications, parse color data from sliders to integers and showing color before sending it to Arduino.

First we modify toolbar and screen settings with:

ui.toolbar.title("Hack-A-Lamp ");
ui.toolbar.bgColor(55, 155, 155, 255);
ui.toolbar.show(true);
//ui.screenMode("fullscreen");
ui.screenOrientation("portrait");</p><p>var speed=25;
var btClient;
var sendString= "10,0,0,0",string="0,0,0", hexString="000";
var btStatus = false;
var margin = 10;
var w = ui.screenWidth - 2*margin;
var h = 150;


h is going to be used as height for buttons. If you can't see the text inside buttons, try to fix it modifying this value.

Then we handle how to connect and disconnect with a bluetooth device. Note that any bluetooth module MUST be linked with Android bluetooth menu before trying to connect here, otherwise you're not going to see it in this app.

var btnConnect = ui.addButton("Connect to bluetooth", margin,0,w, h).onClick(function() {
    //if you want to use the Bluetooth Address, use:
    //network.bluetooth.connectSerial(macAddess, function(status) {});
    btClient = network.bluetooth.connectSerial(function(status) {
        console.log("connected " + status);
         if (status === true){
            btStatus = true;
             ui.toast("Connected!");
             btnConnect.setAlpha(0);
             btnDisconnect.setAlpha(255);
         }
     });
 });
var btnDisconnect = ui.addButton("Disconnect",margin,h, w, h).onClick(function() {
     if (btStatus === true ) {
         btClient.disconnect();
         btStatus = false;
         ui.toast("Disconnected!");
         btnConnect.setAlpha(255);
         btnDisconnect.setAlpha(0);
    }else{
         ui.toast("Not Connected");
     }
 });

As you can see here, we've created buttons and inside of it we handle all communications.

The parameters that we need to create a button are, from left to right in the function: Text shown, x position, y position, width and height.

With btnConnect we connect to bluetooth, and just with this function we show a list view showing all previously paired devices. Then we print bluetooth status on protocoder web ide and, if the status equals true (is connected) then set btStatus, which we use as a flag, to true, then we show an Android Toast saying it's connected and modify alpha transparency of both buttons, turning connect button to full transparency, and disconnect to full opaque.

Then with btnDisconnect we disconect to bluetooth, an also we reverse all the changes that we have done after click on btnConnect.

After that, we're going to create cards and slider for each color (RGB). Every code is mostly identical, so i'm going to explain it for just one of them.

First we create a variable with the name of the color, that it's going to store the value readed from slider with:

var red = 0;

After that, we create the card that, in this case, it's like a little mark that will show the name of the color. To create them we use:

var cardRed = ui.addCard("Red", margin, 2*h, ui.screenWidth - margin , 100);
Then we're going to create the slider:
var sliderRed = ui.addSlider(margin, 3*h, w, 20, 0, 255).onChange(function(val) {
     red = Math.floor(val);</p><p>     string = red +","+ green +","+ blue;
     colourDec.setText(string);
     hexString = red.toString(16) + green.toString(16) + blue.toString(16);
     hexString = hexString.toUpperCase();
     colourHex.setText(hexString);
     console.log(string);
 });

The parameters that we need to create a slider are, from left to right in the function: x position, y position, width, height, starting value of the slider and final value of the slider.

After created them, we handle all needed to make our project work:

First, we just want to use integers, so we parse the value readed from the slider from float to int.

After that, we concatenate all colors to fit the format that Arduino is expecting to recieve, storing all values readed from colors into a string in the way: red,green,blue

After that, we set the value of colourDec, a variable that show the color that we're going to send in a decimal "way".

Then we make the same for hexString, a variable that show the color that we're going to send in a hexadecimal "way", and put it in upper case, a common way to show hexadecimal numbers.

Then we just print string, which is the variable that we're going to send to Arduino.

To make the program show info about what color we're going to send, we draw a canvas and we show the color that we're going to send. To accomplish that, we use this code:

var canvas = ui.addCanvas(margin, 8*h, w, h);
canvas.loopDraw(35, function() {
     canvas.fill(red,green,blue,10);
     canvas.rect(0, 0, ui.screenWidth, 500);
 });
After that, we print decimal and hexadecimal values of the color with:
var colourDecLabel = ui.addText("Dec = ", margin, 9*h, 2*w, h);
 var colourDec = ui.addText(h, 9*h, 2*w, h);
 var colorHexLabel = ui.addText("Hex = ", margin, 9.5*h, 2*w, h);
 var colourHex = ui.addText(h, 9.5*h, 2*w, h);

This code is pretty self explanatory, so, i'm going through.

At least, we reach to the send function, that handle communications with Arduino. Here is where we transfer data to Arduino through bluetooth.

var btnSend = ui.addButton("Send", margin, 10*h, w, h).onClick(function() {
    if (btStatus === true){
         ui.jump(btnSend);
         console.log("String = "+string);
         btClient.send(string +\n");
         ui.toast("Sended!");
     }else{
         ui.toast("¡Not connected!");
     }
 });

In this code we create a button, just like we did before, and check what value has btStatus stored (Just to remember, if it's connected is going to be true, otherwise is going to be false). In case that btStatus equals true, we perform a little trick to make the button being animated with ui.jump(); function.

Then we show string data in the console, just for debugging proposal, send the string and a line jump (\n) trought bluetooth, so, we are sending: red,green,blue\n which is what Arduino is expecting to recieve.

Then we show an Android toast saying the data is sended.

In case btStatus flag variable equals false (not connected) we're going to send a toast warning about this situation.

That's all on Protocoder side!

Step 5: That's All Folks!

We're done!

Hope you guys like it.

You can check our website for more tutorials like this, but it's in Spanish.

If you want google translate do the work, please click on this link.

<p>Thanks! Helped with a project.</p>
I'm glad that this help you :)
Nice. voted.
thanks! I'm glad you liked it :)

About This Instructable

3,152views

40favorites

License:

More by DrMaker:Hack-A-Lamp or how to control Arduino with your smartphone 
Add instructable to: