2016/09/04

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!

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 的顏色。會加入這個功能的主要原因是很多讀者都留言要求這個功能!讓我們開始動手吧!


這是 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。如果你已經下載之前的版本,你應該可以以直接在手機上做更新。

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

2016/05/07

2016-05 優惠酷航訂票 $8,000元有找 (How to book Flyscoot LCC tickets at a lower fare)


這次四個人的機票總計付了  $30,140 元,平均一人 $7,535元,$8,000元有找!
在暑假期間,
能訂到這樣的價格,很滿意!我的下一個任務就是找住的地方了!

市面上有好多廉價航空,香草,樂桃,AirAsia....看到酷航是沒坐過的波音 787 ,就決定訂這家吧。

這是原先看到國泰世信用卡優惠如下:



心想這看來不錯,想要趕快訂票,不過兒子的護照沒在身邊,怕英文名字拼音打錯,要改的話就很麻煩了(聽說廉價改名字/日期 都是非常的貴,很多網友都建議重新買算了)。

沒想到等了一天之後,信用卡的優惠突然週三購票回程半價不能使用了,不知道是不是優惠名額用完了還是怎麼了...真是有點不甘心...

於是我用 Google search "Flyscoot Promo Code", 還真的讓我找到了2016 母親節的促銷代碼!
GOMUMGO 可以有 75折的折扣,不無小補! 我找到的是英文的網頁,不過網站右上角有個語言選項,把 English 下拉,改成繁體中文就行了!


改成繁體中文後,依右方點選單程/來回/多城市,接下來是出發地點和目的地,選定日期,人數,最後記得在搜尋的左側那裡輸入促銷代碼,再按下搜尋即可!


先是選擇航班;$3,048 價格標了紅色的日期就是你剛剛選的日期。如果想要換日期也可以在這裡點選其它的日期,價格就會依你選的自動更新。用了剛剛的促銷代碼,每張機票省下了 $850 元!決定後要在經濟艙底下那個圈圈點一下才算選定喔!




回程是 7/14 週四最便宜,只要$2,937, 剛好我們老大 7/15 要去夏令營,所以選這個航班也是OK! 右側的訂單詳情顯示了總計 $23,636 元,好像很便宜!不過後面還有一些其它費用啦!
先按繼續到下一頁。


接下來,它會問你要不要托運行李,餐點等等...如果你先在這裡選了 FlyBag 可以每個人都帶 20 公斤行李。不過行李我們在後面頁面再加入就好,這先選什麼都不要選,點下+ $0 再按繼續。

PS:如果這裡選了 FlyBag,那每個人都會算 20Kg 行李 $600元,不過我只打算帶一大一小的行李,不需要 4 個人都付費,所以先跳過這一頁。


接下來,你可一人加購 $900 PlusPerks 組合,可以累積里程,大空間及優先登機....
嗯..省下來吧!往下看...

要填寫每個人的英文姓名及生日。千萬要很注意的填,填錯要改就是非常的麻煩了!因為你好不容易省下來的錢及時間都會浪費啦~

網站的設計會讓你填完第一個姓名後,馬上顯示出第二人資料欄,且會把第一人資欄蓋住,所以一定要很注意的檢查個兩次名字及生日!按下 "乘客 2: 成人" 那個位置,該乘客資料就會顯示出來該你可以更正。



托運行李可以在這個畫面的右上角依每個乘客需求加購,先點下 "指定乘客加購" 。


像我們一家四人只要一個 30Kg, 一個 20Kg 的行李即可,加上每人也可以隨身行李 7Kg ,應該很夠用了。如果你是要出門血拼的人,若回程才在櫃枱要加購,那非常的貴哩!血拼團就出發前先買好行李加購吧。

接下來是餐點,酷航餐點不便宜,到日本只要兩個多小時,就到當地再吃吧...回程就上機前先飽餐一頓吧!
註:酷航有規定不能自帶食物上班機..



出門在外旅遊平安險是一定要買的,不過你可以跟認識的保險員買就好,不一定要跟酷航買。 

網站非常貼心,會提醒你一定要買旅遊保險喔! 要保險自理的話,點 "不需保險" 繼續吧!


挑選座位每人每趟要 $158 元,如果要省錢也是可以讓電腦幫你挑就好。不過全家人出門還是坐一起好。點下名字右側 選擇座位 的地方,底下會有相對機位可以挑選。

如果是劃一個 X 表示那個位置被別人挑選過了,而淺藍色的座位就是可以挑的。
點下選擇即可設定座位,每人每趟是  $158 元。


先選去程的位置再選回程的位置,把全家都劃在一起,兩個走道,一個中間,一個窗位。
加了行李,挑了座位,不知不覺的價格已來到 $28,300 元!


接下來是機上的 Wi-Fi 上網,優先登機及舒適睡眠組合....省下來吧!

如果你出發日期有可能改,或是旅客姓名可能會變更的話,接下來的靈活預訂就要花一人 $840元囉...我的出遊日期都已確認,名字也不會變更,那就省下來吧...

輸入付款資料,地址,email 及電話準備付款吧!


輸入信用卡,我發現中國信託信用卡不能用,換了國泰世華的才能使用,不知為何?


資料都輸入完才發現,每人要 $460 元手續費~ 四個人要 $1,840元,我不懂為什麼要收這麼多手續費...再加下去好像和一般航空公司也沒便宜多少了!  上網查過了其它人的購票經驗好像也是要收這麼多!

四個人的機票總計付了  $30,140 元,平均一人 $7,535元,這樣還是有比在一般航空公司購買便宜點!

再仔細看一下日期時間及費用...
底下的購買的條款的注意事項,也仔細看一下,按下紅色打勾的地方表示同意,再按下購買就成交啦!

OK, 網路顯示訂票成功了!

接下來會看到一些酷航的促銷廣告,有興趣就點進去看看吧。



在底下會顯示你訂票的詳細內容,仔細再看一次,有問題要快和客服聯絡。



這裡顯示出費用的明細,4個人去程只要 $10,192,回程只要 $8,692,好像很便宜,不過加上行李 $3,400,選位費 $1,254,費用與稅費 $4,752,再加上網路交易費 $1,840 共計 $30,140

這裡顯示出訂票過程每個人的選項:



提醒報到時間,不能飲食...
出發前一定要檢查,護照、簽證、確認時間、不能攜帶外食!



希望這篇有幫到第一次訂票的網友!

完!