2015/02/15

Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)

 Android control color RGB LED using HC-05 Bluetooth with Arduino(Part II)

You probably have seen my first part of Arduino hardware setup tutorial. If you haven't please visit here: My previous Arduino (Part I tutorial).

After few weeks of struggling with MIT App Inventor 2, I finally completed my second generation of Color LED Controller V2.0 App.


Basically, 2nd generation of Android APP shows a color RGB wheel on the display and you might pick any color on the display to wirelessly change the RGB color accordingly. With glide/drag capability built in the App, you may glide your finger through the color wheel to see RGB LED changes color gradually.

For the Arduino part, all the code stays the same. Yes, I haven't modified a single line of code in the Arduino.

Please watch the video below to see how it works! :)




Here are the App coding screenshot for your reference:

************************************************************
0) Sorry blog readers....here are the two missing global variable blocks.... :-)
*************************************************************

1) App Inventor 2 screen initialisation code.












2) Android to HC-05 Bluetooth connection code.

3) The button to turn on/off LED



4) Code for touch on the color wheel to change LED color


 5) Code for Glide/Drag finger across the color wheel to see the color change accordingly

6) Here is the code for RGB color code split and then send to Arduino to change RGB LED color through Bluetooth.


How RGB Color Code was Processed:==*==*==*====*====*====*====*====*====*====*====*====*====*====*==
In App Inventor, the color code string after [Split Color] will be something like "(255 255 255 255)". What I need in Arduino is only R, G B, so I have to remove last 255.

*** The last 255 is a string in color code and it will be 255 all the time***

For easier string processing, I replace " "(space) with a "." (dot).
Then, I send each color code string to Arduino as "255.255.255)"

In side Arduino, I could split R, G, and B easily with the "."(dot) and use ending ")"(parenthesis) to check if the color code is complete or not.
==*==*==*====*====*====*====*====*====*====*====*====*====*====*==


After you put all these codes into MIT App Inventor 2, you should able to build the code on your PC/Mac to generate an Android .APK to place on your Android phone to test it out with Arduino.

Please do not ask me to post the original code here for you to download. If I do so, no one would download my App from Android Play Store! ;)

If you don't want to create this App yourself, please Download this App here!

Happy coding!!

Stonez


--------------------------------------------------------------------------------------------------------------------

Part II - Android HC-05 藍芽連線控制彩色 RGB LED


你們可能已經讀過我上一次的Arduino硬體設定和下載了第一代APP。如果還沒看過,可參閱我上一個教學 Android 藍芽連線控制彩色 LED

經過幾個禮拜的努力,我終於完成我第二代的 LED 遙控 APP 了。

基本上第二代的設計是一個可以任君挑選顏色RGB調色盤。你可以點選你想要的顏色或是用手指滑過螢幕上的任一個顏色,應用程式會透過藍芽把顏色代碼送變 Arduino 來改變 RGB LED 燈泡的顏色。

Arduino 程式碼的部分是維持跟之前一樣,一行程式碼都不用更改就能使用了。

請先看一下底下影片的示範:






MIT App Inventor 的程式代碼如下:


1) App Inventor 2 Screen1 初始化設定:













2) Android 連結到 Arduino + HC-05 藍芽模組程式碼:

3) 這組程式碼是用來開關 RGB LED



4) 這組程式碼是用來回應點選的顏色並改變 LED 顏色


 5) 這組程式碼是用來控制滑過螢幕並即時改變其顏色

6) 這組程式碼是用來把顏色編碼成 RGB 代號並且把這組編碼顏色代號以藍芽送到Arduino該LED依照代碼變色。



只要按照以上程式碼輸入MIT App Inventor 2後,你就應該可以做成一個APK檔案。
Sorry, 我不會把原始檔整會貼在這裡,所以請你動手做做看吧!!

如果不想動手做,那請從 Play Store 下載吧

Stonez

111 comments:

  1. excellent contribution friend uses a lot of information but the images are not loading properly, greetings and hope you can solve the problem thanks

    ReplyDelete
  2. Hi LUIS,
    Are all the images showed up properly for you?

    Stonez

    ReplyDelete
  3. thank you very much for your help, I would like to know as well as I do to define the colorpicked and previouscolor that are global variables, if I can help I would greatly appreciate it.

    ReplyDelete
    Replies
    1. Benjamin Vallet & Luis Carlos, it looks like there are some codes missing... let me check it out and get back to you!

      Delete
    2. Sorry for the delay, please set these variables as below:

      initialize global: ColorPicked to “7”
      initialize global PreviousColor to “p”

      Delete
    3. I've added the missing global variables back to the blog.
      Check them out!

      Delete
  4. hello, can you say how do you define global variables color picked and previous color?
    thanks for the answer.

    ReplyDelete
    Replies
    1. Benjamin Vallet & Luis Carlos, it looks like there are some codes missing... let me check it out and get back to you!

      Delete
    2. Sorry for the delay, please set these variables as below:

      initialize global: ColorPicked to “7”
      initialize global PreviousColor to “p”

      Delete
  5. hello cordial greeting, thanks for answering to our questions but I have one more, have realized the whole part of the programming in the appinventor but to the moment to prove the part of the code RGB it me appears 255 that it should not appear also appears between parentheses and not separated by points, not that I am doing bad

    ReplyDelete
  6. Well, in App Inventor, the color code string after [Split Color] will be something like "(255 255 255 255)". What I need in Arduino is only R, G B, so I have to remove last 255.

    *** The last 255 is a string in color code and it will be 255 all the time***

    For easier string processing, I replace " "(space) with a "." (dot).
    Then, I send each color code string to Arduino as "255.255.255)"

    In side Arduino coding, I split R, G, and B easily with the "."(dot) and use ending ")"(parenthesis) to check if the color code is complete or not.

    I hope this helps!

    ReplyDelete
    Replies
    1. great thanks for your help, really it served me very much to be able to develop the project. your help was very valuable

      Delete
  7. Thank u very very much for sharing this project.
    Ive been doing this all by myself... but i had so many problems when programming the arduino. I couldnt find a way to read this list "split color" and i was doing it using the command Serial.parseInt() but it only reads separate the data by commas. Is there any possibility that i could do this program without using the library u used?
    And then again! THANKS. Sry for my english.

    ReplyDelete
    Replies
    1. I am not sure about this, but if Serial.parseInt() only read separate data by commas, then you should just replace "."(dot) with a "," (comma).

      Look at AI2 blocks step (6), about in the middle part, there's command blocks

      ***My code was***
      Replace all text
      Segment " " (space)
      Replacement "." (dot)

      ***Your code should be***
      Replace all text
      Segment " " (space)
      Replacement "," (comma)

      Then, it should work!

      Delete
  8. hi. i need you help please.
    i have a proble,. when i want to replace " "(space) with a "." (dot).
    Then i get this: example: 255 255 255 i get .2.5.5..2.5.5..2.5.5
    example 2: 150 40 10 i get .1.5.0..4.0..1.0
    it's like the numbers were separated.
    help me please

    ReplyDelete
    Replies
    1. First, count how long is the string you are spliting. You r example string "255 255 255" does not have any space between "255". I really do not understand why it becomes "2.5.5".

      Save your code and send it to me and let me take a look.

      Stonez

      Delete
    2. Hi Stonez are you still active ?? i am getting this same error can you help me please ??

      Delete
  9. i found the way.. first i replaced space " " with "." then 2.5.5. .2.5.5. .2.5.5 next i replaced ". ." with "," then 2.5.5,2.5.5,2.5.5 next i replaced again "." with space" "
    then 255,255,255

    ;) thanks for you time

    ReplyDelete
    Replies
    1. Glad that works for your!!

      Delete
    2. This comment has been removed by the author.

      Delete
  10. hello

    a taste to greet it again had not written again because for questions of work I had to leave the project, but now when I have more time great I have recaptured it.

    I have had several problems at the time of obtaining the code rgb to send it to the arduino, have tried to modify the blocks of appinventor and have come across with a big problem. already to the moment to give me the code rgb he does not place me separated by dot or for commas the replaced one gives of the following form 255 255 255 " " with one "." and nevertheless a form does not even give them.

    I would like to have your mail to send to you a few images so that he observes her and be able to help me

    ReplyDelete
    Replies
    1. Hi Luis, leave your email here. I will try to reply your questions.

      Stonez

      Delete
    2. luiscarlosmunoz19@gmail.com

      Delete
  11. amigo podemia me ajudar com o aplicativo?

    ReplyDelete
  12. I really appreciate your article. I am an industrial designer, and I just started trying to learn app development and arduino programing. Unfortunately, when I tried to recreate your code in App Inventor, I ran into a few problems. You call for a global variable called "ColorPicked" but I don't see where you initialize it. I also am not sure what element "Status" is tied to. I tried creating a notification called "Status", but it does not allow me to set it to text like you can. Is there any way you could export and upload the AIA file? Also, I can't find your arduino code. I looked under both part 1 and part 2. Thanks.

    P.S. If I hear back from you, and if you don't mind, I'd like to pick your brain on the best way to implement additional functionality (i.e. incorporating a slider and servo control, creating programmed color shows that run on a timer, etc.)

    ReplyDelete
    Replies
    1. Arduino code is in Tutorial Part I.

      In App Inventor2:
      initialize global: ColorPicked to “7”
      initialize global PreviousColor to “p”

      Delete
    2. I've added the missing global variable back to this post.
      Check them out.

      Delete
  13. I saw your last part of the post saying you will not upload your AIA file. I would be happy to email you a copy of my AIA file, if you want to see what I am doing wrong.

    Thanks.

    ReplyDelete
  14. Hi Stonez,
    Works great, but i don't know how to make a own app in Appinventor. It would be very helpful if you could point me in a direction where i can find more info about connecting to BTdevices.

    ReplyDelete
    Replies
    1. Ok looked at the screen shots how to make the connection code and it works fine now...
      Keep up the good work.

      Delete
    2. Hi Andries,
      Glad that worked for you!

      Delete


  15. great info i got it half working now will be done soon,
    i made a very simple color picker without xy and without bluetooth for beginners to learn

    https://www.youtube.com/watch?v=x98nZ2w_2qY&feature=youtu.be

    mail me for aia code pleiadianrecords2@gmail.com

    ReplyDelete
  16. Anonymous1:04 PM

    give me .aia file of that application er.alpesh.mangukia@gmail.com

    ReplyDelete
    Replies
    1. Sorry, you will have to make the .aia file yourself...

      Delete
  17. Anonymous1:06 PM

    what is global colour picked and how add..in mit app

    ReplyDelete
    Replies
    1. you must define them...
      look up in the comment

      Delete
    2. Hi All,
      I've added the missing global variables back to the blog.
      Check them out! :)

      Delete
  18. Hello
    This Project seems amazing!
    Can You please send me The .aia file here ?
    And where Can i find The circle Image where i click for change The color
    emipeponino@hotmail.it

    ReplyDelete
    Replies
    1. No. You will have to make the .aia file yourself. This is part of learning... As for the circle image, I just found it using Google Search with Keywords "circle hue image"

      Delete
  19. Would be nice if you could get this to work using wifi and the ESP8266.

    ReplyDelete
    Replies
    1. I know...I am current studying ESP8266 module. See if I could make it work!

      Delete
  20. Hi Stonez
    thanks for this code and your hard work.
    i have been trying to build the code up myself but cannot seem to get the code split part right i have copied your example exactly but my splits always look like this
    .2.5.5..0..1.0.0. .. or .0..2.5.4..1.0.5.. please help..
    regards
    Dan

    ReplyDelete
    Replies
    1. Dan, this is really weird...Please ensure you use exactly the code without modification, no extra space and common or dot.

      Delete
  21. also a clue is that my code splits look correctl when i have press the disconnect button
    example (255 0 155 255) and (11 254 1 255)

    ReplyDelete
    Replies
    1. RGB = "0.0.0)" ; //Send OFF string to turn light off

      In the Arduino code, "0.0.0)"; is the instruction to turn light off.
      Please make sure you are sending exactly the code from AppInventor.

      Delete
  22. Hi Stonez,
    Is it possible to connect the system by using W2812S LED tri color? Will it work the same in the arduino IDE and the Android app as well? My email is kfkh1811@gmail.com, thanks

    ReplyDelete
    Replies
    1. Hi KJ,
      I think you can, but the whole strip of LED would be the same color only.

      W2812S has so many LED and you got to have FASTLED library inside Arduino compiled. Also, on the AppInventor APP, different command has to be created to give WS2812S LED strip different styles of colors and lighting effects.

      See the lighting effects below.
      http://stonez56.blogspot.tw/2015/06/test-arduino-and-w2812b-led-strip.html

      Delete
  23. Dear Mr. Stonez,
    please where is arduino code for this App.

    ReplyDelete
    Replies
    1. It's in the Tutorial part I. Grab it here:
      http://stonez56.blogspot.tw/2014/09/arduino-android-led.html

      Delete
  24. 請問 調色盤是怎麼做的

    ReplyDelete
    Replies
    1. 調色盤是在Google上找來的

      Delete
  25. to call "send BT message" hwat i have to do?

    ReplyDelete
    Replies
    1. Not sure exact what you would like to do, but in this App, just get RGB color respectively and call the Send BT Command block.

      Delete
  26. Hello, When i turn on the Arduino there is no led on. Thats ok! I click on/off still ok, it turns on and off as it should. When i click the Colorpicker it also picks colors only when i click red i get green and when i click green i get red.
    Also when i clicked the color picker the RGB does not turn off. It just gos from white light to the last color it was in.

    ReplyDelete
    Replies
    1. I believe your issue can be fixed by reading tutorial part 1.

      Here is the quote:
      "
      Common Anode connect to 5V.
      Note: if you bought common anode LED, then this pin must connect to VCC 5V. If you bought common cathode LED, then this pin must connect to GND"

      Let me know if your issues is solved or not.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hello, The app works but i just got one weird thing. It is reversed... So when i press green it becomes purple. When i Press purple it becomes green, When i press red it will be blue, When i press blue it becomes red. when i press yellow it becomes dark blue, when i press dark blue it becomes yellow. So everything is mirrored.
      Any clue why?

      Delete
    4. When i change RGB = ""; to RGB = " "; it almost works right.
      }else{
      Light_RGB_LED();
      RGB_Previous = RGB;
      }
      RGB = "";
      RGB_Completed = false;
      }
      }

      Delete
    5. I use the KY-016 RGB Led module by the way.

      Delete
  27. Please, what is the x,y xcurrent, ycurrent initialize global ?

    ReplyDelete
    Replies
    1. CurrentX and CurrentY are automatically received in the Dragged event blocks.
      X and Y are received in the TouchDown event blocks.

      Delete
  28. Hi Stonez.

    Hope you're doing fine.
    I have a problem with my app. Hope you could help me out.

    My Arduino code apparently can't find the ")" when I drag down the finger through the color wheel. So the bluetooth is recieveing something like "200,244,60,100,25,236..." with no end. (I used a comma instead the dot) Do u have any idea why this is happening?

    Thanks a lot.

    ReplyDelete
    Replies
    1. Look at the place where AI2 process the string. Longest string should have 4 numbers with and ending ")". The string in your code definitely too long, "200,244,60,100,25,236...".

      Delete
  29. hi,
    you have any app tutorial for IOS devices?

    ReplyDelete
    Replies
    1. I wish I can come up and iOS version for this, but I don't know how to program this for iOS.

      Delete
  30. Dear Sir,
    what is SendBTCommand ??? How can i add it in my apps,,please help me

    ReplyDelete
    Replies
    1. No, "SendBTCommand" is a procedure I made myself.

      You need to add "BluetoothClient" from the left menu into the App.
      After doing this, you will find "BluetoothClien1" to send text.

      Look at the "SendBTCommand" for details of how to implement it.

      Delete
    2. Sir i could not get SendBTCommand in the bluetoothclient1 list what I should i have to do please sir I
      need your help

      Delete
    3. I get it from the procedure list, if any on having complexity on SendBTCommand see procedure and give the the "SendBTCommand" or what ever you want the you will get it.

      Delete
  31. 我可以請教您問題嗎?
    在我按下Canvas的時候我的X,Y,RGB不見了只留下數值,
    而且只有X,Y會做數值變化RGB只會呈現(255 255 255 255)或是(255 255 255 0)的狀態
    還有請問Status的功用是?

    ReplyDelete
    Replies
    1. 1. 如果你只是按到空白的地方,它的數值就會是 (255 255 255 255).
      2. Status 只是顯示 BT 有沒有連線成功而已,沒有其它用途。

      Delete
  32. 抱歉我是初學者,我完整的照您的程式碼編寫可是還是出現幾個問題需要您的幫助
    1.canvas的圖片無法顯示
    2.textbox的內容只剩純數字沒有原本的x.y.rgb
    3.global定義p和7的原因是甚麼呢

    ReplyDelete
  33. 1. 先加入一張 Canvas, 再加入一個 color wheel imageSprit 放到Canvas上。
    2. 應是程式有誤
    3. 只是先給一個定義值,細節我要回去看code

    ReplyDelete
    Replies
    1. 我可以請您幫我看我的程式碼嗎?我照您的程式打仍然有錯誤。

      Delete
    2. 如果無法完成,請到 Google Playstore 下載我的 App 使用。

      Delete
  34. Hi,

    Great job. Thanks for your sharing.

    Your app is very close to my purpose. I need to control a led strip (WS2811) via HC-05 bluetooth module. But beside ability of change color, I need to add a button to make a random effection on the led strip.

    Can you add this button or share your code to me: duongtronghue@gmail.com; Thanks in advance.

    Regards,
    Hue

    ReplyDelete
    Replies
    1. Hi Saytinh,
      For WS2811, I have a tutorial with demo code in that page.
      http://stonez56.blogspot.tw/2015/06/test-arduino-and-w2812b-led-strip.html
      Basically, I use FASTLED library to light up the LED stripe.

      Sorry, I'm too busy to do this. You should be able to add a button to that APP to do that job.

      Delete
    2. It is ok.
      Is it possible to give me MIT code so that I can add the button by myself. Very appreciated if you could do that. Thanks

      Delete
    3. Sorry, as I said in the beginning, please download my free APP from Google Play Store.

      Delete
  35. Anonymous7:38 PM

    hi stonez

    this is nc project. iwant to make the aia file, but i'm really rookie in this thing. if u dont mind, could u give me the designer screenshot? atleast the component screenshot please? thx before.

    ReplyDelete
    Replies
    1. Sorry, as I said in the beginning, please download my free APP from Google Play Store.

      Delete
  36. Yes, I downloaded many times. First time, it does not meet my requirement and I had to remove the app and looking for another apps but got nothing. Finally, I just downloaded your app again.

    ReplyDelete
    Replies
    1. I'm glad that it worked out for you! :)

      Delete
    2. Not really. But if you can share your code. It's would be ideal.

      Delete
  37. Hi! stonez
    Thanks for your sharing. But i don't know how to make a app in Appinventor2.
    I want to look at the 'Designer' part of the app.
    Help me!!!!

    ReplyDelete
  38. Can you Please send me a modified mobile application with output string as L_1_3_ValueofRed\nL_2_3_ValueofBlue\nL_3_3_ValueofGreen\n

    ReplyDelete
  39. Hy Stonez, i got a problem. When i use your program, The text is .255.255.255. How can i fix it?

    ReplyDelete
    Replies
    1. Sorry, it's hard to help with the information you provided here.

      Delete
  40. Hello Stonez! When I attempt to run the application on a Samsung S4, it hangs after 30 or so seconds. Is there a copy of version one that I can try? Thanks!

    ReplyDelete
    Replies
    1. Hi Nate, quite few people have ran into this issue. Let me post the older version .apk on this blog over the weekend, so whomever need this can give the older version a try.

      Stonez

      Delete
  41. Hello Stonez! You can give an APC file
    You can email sanik15@mail.ru

    ReplyDelete
    Replies
    1. What's APC file? All Arduino code were provided on this Tutorial.

      Delete
  42. Hello, I tried following your guide but my led's never get powered up. I isolated a diagnostics of the bt comm's first and all was ok. I isolated the glowing of the leds with a fader program and all is ok. With your program, the LED's don't light up.
    Can you help?

    ReplyDelete
    Replies
    1. Sorry, it's hard to help with the few descriptions you provided.
      Do you mean my App won't light up LED at all?

      Delete
  43. Hello Stonez,

    I have some question, I've installed your app and uploaded your code to my arduino. Now I want to use a rgb led strip that connects to 12V and to red, green and blue. How do I make it work? It should simply work r I have to do some circuitry with transistors?

    Thanks.

    ReplyDelete
    Replies
    1. Sorry, I haven't try this APP with LED strip yet, but I think it won't be too hard. Let me find a time to test this out.

      Delete
  44. Hi Stonez,
    please share .aia file for this app.
    my mail id: kjp.pee@gmail.com

    ReplyDelete
  45. Thanks for sharing your project, i am student i just trying to do your project again, i did not understand about the displaying info of X,Y & RGB is that you choose label

    ReplyDelete
    Replies
    1. X, Y = the position you currently touch.
      R,G,B=Shows you the R.G.B color composition to mixed to color you see.

      Delete
  46. hi Stonez;

    ColorCode how do I add ??help me

    ReplyDelete
    Replies
    1. Sorry, I can't understand your question.

      Delete
  47. bro, can i have the one with slider? please can you email me here ismaelstampede@gmail.com. i want also the blocks for the slider i can't finish it please bro thanks

    ReplyDelete
  48. i want to have the slider blocks on MIT App

    ReplyDelete
  49. what is SendBTComand?

    ReplyDelete
    Replies
    1. "SendBTCommand" (Send BlueTooth Command) is a procedure I made myself in AppInventer.

      You need to add "BluetoothClient" from the left menu into the App.
      After doing this, you will find "BluetoothClien1" to send text.

      Look at the "SendBTCommand" for details of how to implement it.

      Delete
  50. can you send me code of this project for arduino uno with 500 to 2000 rgb led for my entire room i love to do this but i have zero knowledge about itplz help me out

    ReplyDelete
    Replies
    1. Hi,

      I think the proper solution for you might be W2812S LED strips.

      See the lighting effects below.
      http://stonez56.blogspot.tw/2015/06/test-arduino-and-w2812b-led-strip.html

      Delete
  51. Hello, After the app sends the RGB color it sends it again as all 0's

    ReplyDelete
  52. Hi

    How about when I drag my finger to change color, it does not change it, but until the finger is resolved, take the last RGB value, check the data that the Bluetooth sends and they are correct, I would help . thanks ..

    ReplyDelete
  53. what is the SendBTcommand for? what block will i use? canvas, bluetooth?

    ReplyDelete
    Replies
    1. SendBTCommand is used to send Bluetooth commands to Arduino from your smartphone. It's a procedure, so you need to create a procedure from AI2 first.

      see this document to know how to do it:
      http://ai2.appinventor.mit.edu/reference/blocks/procedures.html

      Delete