arduino

[arduino] 透過網頁寫js控制arduino

web arduino

在國外有人搞出了一個東西,其實已經好幾年了。

就是透過網頁來控制arduino 這樣只要會寫網頁javascript就可以控制arduino了

這個東西就叫做Breakout

官方網站在 http://breakoutjs.com/getting-started/

BREAKOUT 運作 arduino web

先講原理在講細節

基本上就是你找一台電腦 安裝了breakout的軟體後,再把breakout他們幫妳寫好的arduino程式碼燒進去arduino就可以了(當然你的電腦ip port等的還是要設定好在燒進去)

然後你就可以透過你的瀏覽器或是手機平板去連你的breakout伺服器。

breakout伺服器會幫你把指令轉送去給ardiuno

這樣就可以達到控制的方式了。

之後你就可以寫一個像是

var arduino = new IOBoard(“192.168.1.133”, 5566);

這樣的javascript去控制你的版子IO了

程式軟體在GITHUB 上都有 https://github.com/davidou123/Breakout

ARDUINO的程式碼你把上面GITHUB軟體抓下來後在AdvancedFirmata資料夾內有

Breakout 的軟體有支援WINDOWS( X86 X64 )Mac Linux 均可

詳細的操作方法 官方網站有簡單的安裝教學及圖文說明。

包含怎控制arduino 也有手冊跟api可以用

 

 

 

 

快速安裝 Quick Start

你可以在 Getting Started guide 這邊找到詳細的手冊

第一步是上傳 AdvancedFirmata 到你的 Arduino板 (或 Arduino-compatible) 並連接你要的感測器或元件

  1. 在下載或是複製好 Breakout 後, 進入 Breakout/firmware/AdvancedFirmata/ 並且在你的Arduino IDE軟體上打開 AdvancedFirmata.ino (需要 version 1.0 或更高的版本,建議 version 1.5.4 或更高).
  2. Compile AdvancedFirmata 上傳至你的版子上
  3. 在你的板上接好你的按鈕, led 和 可變電阻器 像第三頁一樣 Breakout/examples/schematics.pdf.

下一步驟是去啟動 Breakout Server :

  1. 請確定你的板子接好了,並且把 AdvancedFirmata 燒錄進來了.
  2. 你可以在你的(mac, win or linux)找到 Breakout Server ,解壓縮並且打開軟體 Mac OS X 使用者第一次可能需要 temporarily disable Gatekeeper 去啟動你的APP. Note: Linux users may need to run sudo apt-get install librxtx-java or manually install the librxtxSerial.so driver before launching the BreakoutServer.jar application.
  3. 選好你的serial port .
  4. 如果你的防火牆是開的,請確定你的port 8887 可以通過(或找一個可以過的PORT).
  5. 按下 Connect 按鈕. 你應該會看到 “Server running on: [your server name]: 8887/” 這個訊息在”Connected to IOBoard on: [serial port name]”之後.
  6. 用瀏覽器打開 http://localhost:8887/examples/index.html 建議 Chrome (v14 or greater), Firefox (v11 or greater), or Safari (v5 or greater) 並且可以玩看範例.備註: 如果你在第四步驟有變更PORT的話,你可能需要更新一下你IO板(ARDUINO)上的PORT號.

Note OS X Mavericks users: You will need to disable the Mavericks App Nap feature for Breakout Server. Right-click on the Breakout Server icon then select Get Info. Check the Prevent App Nap box under the General section in the info panel.

如果你的智慧手機或是平板有支援websockets的話,你也可以使用 (Safari, Chrome for Android, Firefox Mobile). Instead of localhost:8887/examples/ 輸入你有跑Breakout Server電腦的ip或是名稱 (192.168.2.1:8887/examples/ or yourhostname.local:8887/examples/u). 當你的電腦在跑Breakout Server 軟體時 請確定你的行動裝置已經連上了某些WIFI網路.

想要更多使用 Breakout Server的資訊(包含多重CLIENT連線,變更webserver root 資料夾,啟用自動執行模式,或者透過手機使用Breakout) 請參閱 Using Breakout Server.

As an alternative to the Breakout Server application, a node.js-based server is also included. See theUsing the node.js server for details.

需求 Requirements

Breakout 只支援 for Arduino 1.0 或更高的版本 Download Arduino.

你需要一個下列的 I/O 板:

  • 一個 Arduino version Diecimila or newer (Uno, Fio, Mega, Pro, LilyPad, Leonardo, Due, 等等).
  • Teensy 2.0, Teensy 3.0, Teensy++ 1.0 or 2.0
  • 各種的 Arduino 相似板 –山寨板– 應該也可以執行.
  • 可以從 Test Environment 找到所有測試過的 I/O boards.

*In order to use Breakout with an Arduino Leonardo, Arduino Due or Teensy 3.0 board, you need to install Arduino 1.5.4 or higher.

作業系統 OS:

  • Mac OS X 10.6 or higher
  • Windows 8, 7 or XP (執行 Breakout Server需要Java JRE 1.6 或更高的版本)
  • Has been tested successfuly on Ubuntu 11.10 running in 64-bit mode on an x86-64 processor
  • 大部分古老的 OS X 和 Windows 也可以 但是沒測試過
  • May work on other Linux distributions but has not been tested

瀏覽器 Desktop Browsers:

  • Chrome version 14 或更高
  • Firefox version 11 或更高
  • Safari version 5 或更高
  • Opera 12 或更高

手機瀏覽器 Mobile Browsers (browser must support websockets):

  • Safari mobile
  • Firefox mobile version 7 或更高
  • Chrome for Android (for Android 4.0 或更高)
  • 請參閱 Test Environment 有完整測試過的手機與平板列表
One comment

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

(若看不到驗證碼,請重新整理網頁。)