Category Archives: AppInventor – 圖形化Android

[App Inventor教學] 上傳照片到微軟認知服務Computer Vision API,使用 Makeblock CamVision

本範例可將所拍攝的照片上傳到微軟認知服務Computer Vision API,經辨識之後可取得以下資料:

  • 照片說明(text)
  • 前景主色(text)
  • 背景主色(text)
  • 相片標籤(list)

使用 Makeblock 所開發的 CamVision extension 檔,另外也有控制其 mBot 機器人平台的 extension,我們也在測試中喔

注意:

  1. 經實測只能使用在 MIT 所提供之測試伺服器,正式伺服器匯入時會有問題
  2. 點選 Prepare 按鍵時,會把相機開起來(這時並沒有跳到拍攝預覽畫面,但的確已經開啟),因此其他會用到相機的程式,例如條碼掃描程式(下載 apk 用) 會無法使用。請先關閉本程式再使用其他相機程式。

 aia 與 apk 下載請點我(App Inventor中文學習網)

使用的照片:

img20160917130103

辨識結果如下圖:

  • 照片說明(a cat laying on a bed)
  • 前景主色(灰色)
  • 背景主色(灰色)
  • 相片標籤(indoor, cat, wall, laying)
screenshot_2016-09-17-13-47-41-29

Continue reading

160820 手機App開發實作:App Inventor 結合open data@T客邦

8/20 咱們到T客邦開課的內容是 App Inventor + opendata,想要一窺究竟的朋友,歡迎報名喔!

需要設計手機App不知道該如何入門?想開發手機 App 來控制硬體?本次實作課為你而開。講師利用App Inventor圖像式程式設計軟體,課程中帶領你學習基礎程式邏輯,親手開發出App,並實際串連Open Data結合手機發送簡訊、email、推播至社群網站。

報名請按我(早鳥價 2,300 元,含午餐)

Continue reading

[App Inventor] 行政院環保署即時空污指標查詢 PM2.5

本範例由本年度實習生鄭秉恩設計並編寫,說明如何取得行政院環保署所提供的即時的空氣品質汙染指標資料,格式為 JSON。

http://opendata.epa.gov.tw/ws/Data/REWXQA/?$orderby=SiteName&$skip=0&$top=1000&format=json

您可使用 http://www.jsoneditoronline.org/ 這樣的網站幫助您更快理解 json 架構,它會把 raw data 排版完成

 aia 原始碼下載請點我

001

一共有 75 個站點可供查詢。您還可以結合 Sharing 元件,將空氣品質的狀況寄發 email 或是發佈到 Facebook 喔。或者用藍牙傳給 Arduino 或樂高機器人也是有趣的專題呢

 

操作方式如下

  1. 點選 [取得縣市清單]按鈕,會呼叫Web元件去爬一次上述網址取得最新資料。程式初始畫面如下

0022.  點選 [選取縣市] 清單選取器,會開啟縣市清單讓您點選想要檢視的觀測站。請注意這是原始資料中的   而不是 County

003

3. 點選您想要的縣市就會顯示當地的空氣品質

 

 

 


004

Continue reading

[App Inventor] APP有聲書,使用工研院文字轉語音服務

這是一個使用 App Inventor 搭配工研院的文字轉語音服務有聲電子書,為CAVEDU今年度的實習生歐新暘設計

功能說明: 電子書整合聲音、動畫、圖片的特性呈現了多媒體的便利性,已成為時代的潮流,尤其在兒童讀物市場上不可或缺,本教學示範如何以Canvas和Player元件來達成有聲書的功能。

程式碼下載請點我

元件說明:

元件說明元件

元件類別 名稱 用途
Label title     顯示頁數
Label     content 顯示故事內文
Canvas Canvas1 顯示圖片
ImageSprite ImageSprite1 用來做動畫,提示使用者翻頁以閱讀
CheckBox    Boysound換成男聲音檔
CheckBox Girlsound 換成女聲音檔
CheckBox Tsound換成台語音檔
PlayerPlayer1播放聲音檔
ClockClock1計時功能

 

素材名稱:

1.png、2.png、3.png、4.png

boy1.wav、boy2.wav、boy3.wav、boy4.wav

girl1.wav、girl2.wav、girl3.wav、girl4.wav

Taiwanese1.wav、Taiwanese2.wav、Taiwanese3.wav、Taiwanese4.wav

 

程式碼:

1.宣告變數

程式碼1

       宣告time,控制手指的動畫。

       宣告voice_type,儲存現在聲音種類。

       宣告page,儲存現在頁數。

       宣告text,儲存故事內文。
2.初始化頁面

2

Screen1.Initialize方塊 :

進到Screen1螢幕初始化時,便執行do區塊內的動作,

可運用在一些前置性的操作上。

 (1)call tellstory 是本範例建的副程式,之後會說明。

 (2)設定ImageSprite1的圖片為hitfinger.png這個檔案。

 (3)設定ImageSprite1的X座標。

 (4)設定ImageSprite1的Y座標。

 

【參考】ImageSprite圖片精靈  、 Canvas畫布副程式

3

Clock1.Timer方塊:

當計時器停止作動時呼叫本事件。

本範例設定TimerInterval為100(毫秒),也就是0.1秒觸發一次Timer事件。

 (1)運用變數time來設定動畫,當此事件被呼叫一次,變數time值+1。

 (2)ImageSprite1.Heading 設定ImageSprite1的運動方向,

      向右為0°,向上為90°,向左為180°,向下為270°。

      ImageSprite1.Picture 設定ImageSprite1的圖片。

      ImageSprite1.Speed 設定ImageSprite1的運動速度。

 (3)當變數time = 26時,設定圖片為hitfinger.png,最後再設定變數time為0。

      會發現time變數值永遠處於0~26的狀態,運用這些狀態設置動畫。

 

【說明】finger.png:finger        hitfinger.png:hitfinger

想一下為什麼finger.png的手指圖案是上下顛倒的呢?

提示這跟heading有關。

因為heading是直接旋轉物件,而不是翻轉,所以換一張垂直翻轉的圖方向剛好。

8

3.講故事功能

4_N

tellstory方塊:

tellstory 是本範例建的副程式,功用包含顯示頁數、故事內文,與設定聲音、圖片。

 (1)設定當頁面是第一頁時,才會顯示聲音按鈕與ImageSprite1(手指)。

 (2)顯示所在頁數,length of list 會抓取 list的清單數目,這邊沒把程式寫死。

 (3)根據頁數設定圖片影像。

      圖片素材名稱要照順序命名才能這樣寫。

 (4)根據頁數,在先前建的text清單抓取內文。

 (5)根據按鈕勾選狀態與所在頁數,設定Player播放的聲音檔。

 

4.翻頁功能

6

Canvas1.Flung方塊:

當使用者手指滑過畫布時執行此事件。

 (1)當使用者手指往右滑(xvel > 0),代表往左翻頁,當page = 1時,無法往左翻頁。

    【註】xvel代表水平速度分量。

 (2)相反的就是往右翻頁,這邊用length of list沒把程式寫死,不用因不同頁數的故事

      而修改程式碼。

 (3)當使用者有碰觸畫布時,呼叫tellstory。

 

5.按鈕功能

7

Boysound.Changed方塊:

當Boysound按鈕的值變時,換句話說就是按鈕被按時就觸發此事件。

 (1)只有當Boysound按鈕是勾選的狀態,才執行下面的程式。

 (2)有三組按鈕 Boysound、Girlsound、Tsound,由於App inventor 2並沒有

    radio button的功能,所以要自己寫,這邊是讓當其中一個按鈕被按時,讓其他按

     鈕變成沒按的狀態,並控制Enabled的狀態,其他兩個按鈕也是照這個邏輯。

 

素材說明:

音檔部分使用工研院文字轉語音服務

圖檔使用Pixabay CC0圖片。

160625 Arduino 101 / App Inventor 工作坊@Maker Faire Singapore (Intel Taiwan贊助)

今年是CAVEDU第一次參加新加坡 Maker Faire,認識很多新朋友也看到不同國家在 maker 這方面的差異以及文化的衝擊,也深刻感受到新加坡政府對於創新、教育真的是彈性高速度快。不敢說決策上樣樣都對,但是如果能修正得快一點的話,相信會有一番積極作為的氣象

與台灣的狀況相同,新加坡的小朋友玩過 Scratch 的比例相當多,但聽過 App Inventor 的就明顯少很多。我們很自不量力地申請了 workshop,希望能和更多國外朋友分享如何使用 App Inventor 來控制開發板做到各種簡易互動。(事實上是發現自己的英語口語退步好多啊…)

感謝 Intel Taiwan 支援本次活動用的所有 Arduino  101 開發板

IMG_5392 - 複製

活動內容首先介紹 App Inventor 的開發環境、簡易範例。由於 workshop 只有 1.5 小時,因此 Arduino 101 的程式是事先上傳好。學員做完手機程式之後就可以直接連線。透過 app 畫面上的按鈕來控制 LED 亮滅(老梗但是經典範例),也示範如何把按鈕改成 Google 語音辨識。

我們已經寫好教學了,想要進一步認識的朋友請點我本日投影片放在文章最後

IMG_5381

IMG_5374




[App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 5 – 讀取DHT22 溫溼度模組資料

App Inventor BLE 元件教學文第五發!本專題要告訴您如何讀取DHT22 溫溼度模組資料的狀態。BLE 與樂高EV3機器人控制元件已經正式發布,請多多使用吧!實際app執行畫面如下圖,先來看執行畫面吧:

[youtube=”https://youtu.be/rs5_5-LH2JA”]

Arduino 101 是 Arduino.cc (注意不是 .org) 與 Intel 合作的最新開發板,在美國以外的區域稱為 Genuino 101

延伸閱讀:

[Make雜誌國際中文版]Arduino 101 介紹

Arduino.cc 論壇的 callbackLED 教學(手機端並非使用 App Inventor )

Arduino 101 購買連結

Arduino 101 開箱文

Arduino 101 BLE 第一課 LED閃爍

Arduino 101 BLE 第二課 LED呼吸燈(PWM)

Arduino 101 BLE 第三課 讀取類比腳位A0

Arduino 101 BLE 第四課 控制機器手臂

Continue reading

App Inventor 新元件發布

發布了,MIT終於在 nb149 release中把我們做的 Lego EV3機器人元件列為正式元件。為了這件事,我三月還去了一趟 MIT,成為了所謂的 Master Trainer

這次發布的內容有三項重點:

  1. Extension:允許使用者自行開發 .aix 擴充檔來加裝功能,但目前僅限於非可視元件(non visible component)。如何使用 .aix 請點我
  2. BLE (Bluetooth Low Energy) 元件:MIT 會使用 Arduino 101 與 Grove Arduino Sensor Kit 做為物聯網基礎教學套件包。目前我們已經寫好的教學文:
    1. [App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 1 – LED 閃爍

    2. [App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 2 – LED PWM呼吸燈

    3. [App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 3 – 讀取Arduino 101類比腳位狀態

    4. [App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 4 – 機器手臂

  3. 樂高EV3機器人元件,這就不用多說啦。當年也是看到 App Inventor 可以這麼輕鬆就控制NXT,才一頭栽進去的。很高興MIT能採用我們所開發的元件呢
    1. 樂高EV3機器人元件說明 
    2. 樂高EV3機器人按鈕控制

以上的 2. 3. 項都會是CAVEDU 在未來與 MIT 的重點合作項目。這次算是非常重大的更新,期待大家一起來玩 App Inventor 喔!

未命名

[App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 3 – 讀取Arduino 101類比腳位狀態

App Inventor BLE 元件搭配 Arduino 101 的教學文來了,本系列專文是介紹如何使用 App Inventor 的 BLE (Bluetooth Low Energy) 元件搭配 Arduino 101 開發板的各種互動專題。請用 http://ble-test.appinventor.mit.edu 這個測試用伺服器來測試,實際app執行畫面如下圖,先來看執行畫面吧:

[youtube=”https://youtu.be/uuapPq8GZYQ”]

Arduino 101 是 Arduino.cc (注意不是 .org) 與 Intel 合作的最新開發板,在美國以外的區域稱為 Genuino 101

延伸閱讀:

[Make雜誌國際中文版]Arduino 101 介紹

Arduino.cc 論壇的 callbackLED 教學(手機端並非使用 App Inventor )

Arduino 101 購買連結

Arduino 101 開箱文

Arduino 101 BLE 第一課 LED閃爍

Arduino 101 BLE 第二課 LED呼吸燈(PWM)

Arduino 101 BLE 第四課 控制機器手臂

 

Continue reading

取得 Mediatek Cloud Sandbox 的資料點 (JSON)

本篇教學要告訴您如何使用AppInventor 的web元件取得 Mediatek Cloud Sandbox 上指定 test device 下 data channel 的最新一筆資料點( data point)。 .aia 原始檔請點我下載
 
首先,您的MCS test device 上必須要有個什麼資料,並且把這個 test device 設為 public,否則將無法取得資料。
這是我的 test device 設為public 之後的畫面,其中 DCT60FBv 就是 deviceID。連結:http://mcs.mediatek.com/public/devices/DCT60FBv
以我的 test device 來說,有這些 data channel:
  • Controller : LED_CONTROL (控制D13 LED亮滅)
  • Display
    • LED (檢視 D13 腳位狀態)
    • Longitude(經度)
    • Latitude(緯度)
    • GPS (嵌入式 Google Map)
 
但在 public device 上只能看到這樣的畫面,也就是只有顯示器型態的 data channel,換言之,您無法透過 public 的 test device 來控制您的開發板。

根據 MCS 的 API 說明,取得最新一筆資料點的語法如下,會直接回傳 JSON 的資料格式,如此一來就可以用 App Inventor 的 Web Component 搭配 JsonTextDecode  方法幫我們轉成陣列,這樣就方便多啦!

以下語法是取得 DCT60FBv 這個 tst device 下的 longitude 這個 data channel 下的最新一筆資料點,由下圖可看到就是 121.2214

http://api.mediatek.com/mcs/v2/devices/DCT60FBv/datachannels/longitude/datapoints

 

如果用 jsoneditoronline.org 這類型的 JSON 檢視網站來看的話,您會對MCS 資料點的格式更清楚喔

App Inventor 的樂高EV3機器人元件 – 說明文件上線

MIT App Inventor 即將發布樂高EV3機器人的相關元件,我們的文件也準備好了,想要試玩 App Inventor 控制樂高EV3機器人的朋友,請留言和我們索取 server 位址喔!

另一方面,我們也是 MIT App Inventor 在物聯網與機器人領域的教育合作夥伴,有興趣一同開發新內容的朋友,還請與我們聯絡

Continue reading

[App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 4 – 機器手臂

本篇文章示範如何使用 App Inventor 之 BLE (Bluetooth Low Energy) 元件控制 Arduino 101 機器手臂 (架構比照 mearm,為四個自由度之桌上型機器手臂)。請注意,BLE元件尚未正式發布,請用 http://ble-test.apinventor.mit.edu 這個測試用伺服器來測試。

13161730_1434718456554194_3789265564649173881_o

相關文章請點我

[Make雜誌國際中文版]Arduino 101 介紹

Arduino.cc 論壇的 callbackLED 教學(手機端並非使用 App Inventor )

Arduino 101 購買連結

Arduino 101 開箱文

Arduino 101 BLE 第二課 LED呼吸燈(PWM)

Arduino 101 BLE 第三課 讀取類比腳位狀態

Arduino 101 BLE 第四課 控制機器手臂

Continue reading

[App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 2 – LED PWM呼吸燈

App Inventor BLE 元件搭配 Arduino 101 第二篇文章來囉!本系列專文是介紹如何使用 App Inventor 的 BLE (Bluetooth Low Energy) 元件搭配 Arduino 101 開發板的各種互動專題。請用 http://ble-test.appinventor.mit.edu 這個測試用伺服器來測試,實際app執行畫面如下圖,先來看執行畫面吧:

[youtube=”https://www.youtube.com/watch?v=ihMyDoxapBQ”]

 

Arduino 101 是 Arduino.cc (注意不是 .org) 與 Intel 合作的最新開發板,在美國以外的區域稱為 Genuino 101

延伸閱讀:

[Make雜誌國際中文版]Arduino 101 介紹

Arduino.cc 論壇的 callbackLED 教學(手機端並非使用 App Inventor )

Arduino 101 購買連結

Arduino 101 開箱文

Arduino 101 BLE 第一課 LED閃爍

Arduino 101 BLE 第三課 讀取類比腳位狀態

Arduino 101 BLE 第四課 控制機器手臂

Continue reading

[App Inventor 與EV3機器人] 按鈕控制 – CAVEDU自行開發之 App Inventor EV3元件

本系列文章教你如何使用 App Inventor 來直接控制樂高EV3機器人,也是為了與 MIT App Inventor 的機器人教案來暖身。本期專題是常見的按鈕控制,點選畫面上的各個按鈕就可以控制機器人前進後退與左右轉彎,還能搭配滑桿( slider) 來即時控制馬達轉速。使用我們所開發的元件的話,樂高EV3機器人端不用編寫程式就可以回應來自手機的指令。有接觸過App Inventor的師長朋友們,歡迎下載原始碼加入更多有趣的功能。

EV3元件是由CAVEDU Jerry Lin 領軍開發,於2016年納入 MIT App Inventor 正式元件

基礎雙輪機器人

請將機器人組成如下圖的雙輪機器人,或任何類似的配置皆可。本範例的機器人不需使用任何感測器,只要用兩個馬達製作出雙輪機器人即可。本範例中是將馬達接在EV3主機的輸入端B與C。請確認EV3主機的藍牙已啟動,接著將EV3主機與Android手機進行藍牙配對,完成之後就可以把機器人放到一邊了。啟動藍牙之後,你可以從EV3主機的螢幕左上角看到藍牙的符號。

 

A-9-1

Continue reading

[志工徵求] App Inventor 機器人/物聯網 英文教學文件

徵求志工一起來寫 App Inventor 結合機器人與物聯網之英文教學文件,有意願者,請將您的簡歷寄到 service@appinventor.tw

參考文件 (寫出來的文件基本上要長這樣):

基礎要求:

1. App Inventor 一年以上開發經驗 (必須)

2. 接觸過樂高EV3機器人或 Arduino (非必須)

3. 對於交付任務有信心如期完成者

工作內容:App Inventor 結合 Lego EV3/ Arduino 之機器人與物聯網應用之英文教學文件。細項如下:

  1. 產出相關專題,產出結果皆為 App Inventor (Android手機端) 透過 Wi-Fi / Bluetooth 結合 Lego EV3 機器人套件與 Arduino 101 之各種應用。(MIT App Inventor 已選定 Arduino 101 作為該團隊之物聯網套件主板)
  2. 編寫英文文件,包含程式註解、App Inventor 程式截圖與 Arduino 程式碼管理

報酬:$0

CAVEDU 並沒有從 MIT App Inventor 拿到贊助,我們純粹是覺得好東西要與好朋友分享。台灣有堅強的電子硬體產業,不趁這時候超英趕美上月球就太可惜了

好處:

  1. 得知 MIT Media Labs 第一手消息
  2. 您(或您的團隊) 會列入 App Inventor Contributor list
  3. 英文會有非常大的進步 (阿吉老師親自督軍)
  4. 可能有出版國際叢書的機會

IMG_1960

[App Inventor 物聯網應用-藍牙4.0 BLE] Lesson 1 – LED 閃爍

話說從 MIT 回來之後一樣沒閒著,今天要介紹的是還沒正式公布的秘辛 – App Inventor 的 BLE (Bluetooth Low Energy) 元件。請用 http://ble-test.apinventor.mit.edu 這個測試用伺服器來測試,當然您得先買一片 Arduino 101才行

MIT App Inventor 之後會使用 Arduino 101 作為物聯網教學套件核心開發板,套件包還在規劃中,大家有沒有想要套件包裡面放那些東西呢?說不定可以美夢成真喔

2016-01-26-14.50.47-1024x768

 

 

Arduino 101 是 Arduino.cc (注意不是 .org) 與 Intel 合作的最新開發板,在美國以外的區域稱為 Genuino 101

延伸閱讀:

[Make雜誌國際中文版]Arduino 101 介紹

Arduino.cc 論壇的 callbackLED 教學(手機端並非使用 App Inventor )

Arduino 101 購買連結

Arduino 101 開箱文

Arduino 101 BLE 第二課 LED呼吸燈(PWM)

Arduino 101 BLE 第三課 讀取類比腳位狀態

Arduino 101 BLE 第四課 控制機器手臂

Continue reading