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'...

 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.

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

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…. 🙂

Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)
*************************************************************
1) App Inventor 2 screen initialisation code.
Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)
2) Android to HC-05 Bluetooth connection code.
Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)

3) The button to turn on/off LED

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

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

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

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

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

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

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

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 了。
Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)
基本上第二代的設計是一個可以任君挑選顏色ＲＧＢ調色盤。你可以點選你想要的顏色或是用手指滑過螢幕上的任一個顏色，應用程式會透過藍芽把顏色代碼送變 Arduino 來改變 RGB LED 燈泡的顏色。
Arduino 程式碼的部分是維持跟之前一樣，一行程式碼都不用更改就能使用了。

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

MIT App Inventor 的程式代碼如下:

1) App Inventor 2 Screen1 初始化設定：
Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)
2) Android 連結到 Arduino + HC-05 藍芽模組程式碼：
Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)

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

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

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

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

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

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

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

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

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

Stonez

46 則留言

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

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

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

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

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

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

  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!

  7. 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!

  8. 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

  13. 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"

  15. Arduino code is in Tutorial Part I.

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

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

  18. 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.

  21. 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.

  22. CurrentX and CurrentY are automatically received in the Dragged event blocks.
    X and Y are received in the TouchDown event blocks.

  23. 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.

  28. 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…".

  29. 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.

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

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

  37. 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

  41. 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.

  44. "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.

發佈留言

相關文章