Android App Control RGB LED w/ color Sliders


If you haven't seen my previous Arduino + Bluetooth + RGB LED tutorials, please check them out from here, before you start this one.

Tutorial 1 Make the Arduino + Bluetooth + RGB LED
Tutorial 2 Make this App (older version)
Tutorial 3 Make a nigh lamp
In this tutorial, I will add RGB slider bar under the bottom of the App using App Inventor 2 (AI2) from MIT to allow users to adjust the particular LED brightness. This feature was requested by quite few of visitors. Hope you will enjoy this one!

For whatever reasons you do not want to do this yourself, please download this App from Google Play Store directly. It's FREE!


Screenshot of RGB LED Controller:





Here is screenshot of the component layout in App Inventor 2 for your reference.


First, let's initialize few variables in AI2.


Screen1.Initialize block is to reset App components status and set ColorPicked at x1, y1. The ColorPicked variable is used to store x1, y1 coordinates which are exact positions where users finger tip location on the display.


















This part is considered as Bluetooth initialization to get nearby Bluetooth client list into the App.

After users select Arduino Bluetooth clients (Arduino + HC-05 + RGB module), this App set "Status.Text" to BT Connected and let user know the App has connected to Arduino successfully.


The block below turns the LED On/Off.

The block below will disconnect Bluetooth connection and reset component status.

This block sends Bluetooth command to Arduino after received color-code as well as save R, G, B color code value into a local Color_List2 (List is called Array in other programming languages)



The following three big blocks process the R, G, B sliders respectively.
Each time a slider's position changed, the App reflects the R/G/B value changed and save the value into Color_Code_to_BT variable and sends the new color code through SendBTCommend2 block to achange RGB LED color.


This block works the same as the one above except it only handle Green color value.


This block works the same as the one above except it only handle Blue color value.

When user's finger is touch or slide across the display, this SendBTCommend block will send R, G, B value accordingly to Arduino.

This SendBTCommend2 block is used to send RGB value to Arduino when R, G, or B value updated through R, G, B color sliders. The reason why I created this SendBTCommand2 to send R,G,B value was because there were different parameters needed to be processed before send BT command to Android phone.

The block blow is used to update RGB color to Arduion when user's finger touch on any part of the screen or in this case we only focus on the color wheel.


The block blow is used to update RGB color to Arduion when user's finger slide through the screen of the screen or in this case we only focus on the color wheel. This block is also where this App process rapid change of the LED colors!


Here is a video demonstration of this App:


You probably want to test this APP first before making it, correct? Please download the RGB LED Controller V3.0 with R/G/B Color slider from App Store. For people who already downloaded this App, you should be able to upgrade to this version directly from Google Play Store.  

Thank you!

END
--------------------------------------------------------------------
如果你尚未閱讀過我前幾篇介紹如何製作Android + Arudino + BT + RGB LED的文章,建議先參考前幾篇(下列的連結),再回來看這一篇。

Tutorial 1 製作 Arduino + Bluetooth + RGB LED
Tutorial 2 自制 APP (本篇為新版APP,加入了 R.G.B 顏色拉桿)
Tutorial 3 製作夜燈

如果你不想自己動手做這個 APP, 請你到 Google Play Store 免費直接下載!


在本篇教學裡,我們將修改前一版的 V2.0 APP,使用 App Inventor 2  (AI2) 加入 R.G.B 三個顏色拉桿,讓使用者可以自行調整每個顏色的強度,進一步改變 LED 的顏色。會加入這個功能的主要原因是很多讀者都留言要求這個功能!讓我們開始動手吧!

V3.0 APP 的畫面如下:




這是 AI2 App 元件的畫面參考圖,你也可以依自己的需求作調整位置/大小等等⋯⋯



首先先在AI2中設定幾個變數如下:

下面的區塊是 AI2  的螢幕啟動設定,除了設定一些參數之外,也把 ColorPicked 設在 x1, y1 的位置。 ColorPicked 這個變數是用來儲存螢幕上,使用者正用手指點下的 x, y 位標。


















BTList.BeforePicking 是設定 Android 手機上所偵測到的藍芽裝置清單。


BTList.AfterPicking 區塊主要作用為,一但使用者由手機選取了藍芽裝置(以這個APP例子來說,我們就是 HC-05 的 Android  上的藍芽裝置)。這個區塊也會把 Status.Text  設成 "BT Connected", 讓使用者知道,手機已成功連上 Arduino HC-05 藍芽模組。

LedTurnOn 這個區塊主要功能是直接開/關 RGB LED。

Disconnect.Click 這個區塊是用來中止藍芽的連線,同時也在 App 上顯示 "No BT Connected"。

以下三個區塊 R.PositionChanged, R.PositionChanged 和 R.PositionChanged 主要是用來處理本次新增的 R, G, B 顏色拉桿。例如 R 拉桿位置改變時,這個區塊就會把 新的 R 顏色值和原來的 G, B 顏色值整合存入到 Color_Code_to_BT 變數,透過 SendBTCommend2 區塊送到 Arduino。

這個區塊負責 R.PositionChanged 其運作方式和上面一樣。

這個區塊負責 G.PositionChanged 其運作方式和上面一樣。

這個區塊負責 B.PositionChanged 其運作方式和上面一樣。

當使用者用手指點取調色盤上的某一個點或是用手指滑過調色盤時,這個 SendBTCommend 區塊是用來傳送 R, G, B 顏色參數到 Arduino。


由於透過拉桿改變顏色的方法和直接在螢幕點選時參數不同,所以我建立了這個 SendBTCommand2 的區塊來專門㲃理。這個 SendBTCommend2 區塊是用來傳送 RGB 的參數到手機。

Canvas1.TouchDown 區塊主要是處理手指點在調色盤的每一個位置的顏色,快速即時的把當時的顏色回報到 Arduino。

Canvas1.Dragged 區塊主要是處理手指滑過調色盤的每一個點,快速即時的把當時的顏色回報到 Arduino。


請看我手機錄下的 RGB LED Controller APP V3.0 執行過程:



看完後是不是很想動手試試這個 APP?請由 Google Play Store下載 RGB LED Controller V3.0 with R/G/B Color slider  APP。如果你已經下載之前的版本,你應該可以以直接在手機上做更新。

全篇完!
--------------------------------------------------------------------

Comments

  1. 有下載2.0版,可是並無上述的三色拉桿圖示??

    ReplyDelete
  2. 有辦法增加閃爍功能嗎?

    ReplyDelete
    Replies
    1. 是要增加一個按鈕嗎?
      只要在迴圈裡加入亮/暗的指令,不會很難喔!

      Delete
  3. Have you published this within app inventor? if so, can you provide a link. if you have not published it in app inventor can you and send me a link. I'm having issues creating the app myself

    ReplyDelete
  4. Here is the link to the RGB Color LED Controller
    App: https://play.google.com/store/apps/details?id=appinventor.ai_yuanryan_chen.BT_LED&hl=zh-TW

    ReplyDelete
    Replies
    1. I was able to download and use your app from the Play Store perfectly but when I try to recreate it using your screenshots I get different results. I was hoping you could publish the app within App Inventor 2 and send the link so I can have an exact copy within app inventor of what you currently created. Thanks

      Delete
  5. Hello, I have download your app from play store, but I need the Arduino Code, please, can you send me it to my email?, davidcarputer@gmail.com
    Thanks!!!

    ReplyDelete
  6. Hi David,
    Check this post for Arduino code.
    http://stonez56.blogspot.tw/2014/09/arduino-android-led.html

    ReplyDelete
  7. Thank you very much, as I mentioned, I downloaded your application from the play store, and with the code you indicated it works perfectly, so once again, thank you. Now I am trying to create my own application, to add it to another that I already have made (always for my own use, not to expose it), following the instructions that you expose from the blocks and I am not able to make it work, because I constantly get an error.

    "Bad arguments to split-color The operation split-color cannot accept the arguments :, [255.158.0)]"

    Could you help me one more time? Thanks in advance.

    ReplyDelete
  8. If you prefer, this os my email.
    davidcarputer@gmail.com

    or

    david150902@hotmail.com

    ReplyDelete

Post a Comment

Popular posts from this blog

Arduino - DFPlayer Mini MP3 Module

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

Arduino #27 AsyncWifimanager ElegantOTA ESP32 (WiFi Password Mgnt. + WiFi Firmware Update)