jQuery PluginのCOLOR PICKERで選択した色をPerl経由でArduinoに送り
LEDの色を変化させる。
[AIR2.0 ajax] NativeProcessで perl を呼び出す メモをベースにします。
1. JQUERY PLUGINを落としてきて配置
COLOR PICKER - JQUERY PLUGINからダウンロードして配置します。
今回は以下のように配置しました。

2. COLOR PICKERをHTMLに表示する

でCOLOR PICKERを読み込みます。
javascriptで以下のように記述します。
$(function(){ $('#colorpickerHolder').ColorPicker({flat: true, color: '#000000', onChange: function (hsb, hex, rgb) { writeData(hex); } }); });
bodyの中に
を記載します。

3. ArduinoにFF0000などの文字列を送るとBlinkMの色が変わるプログラムを送信します
#include "Wire.h" #include "BlinkM_funcs.h"<<<<>>>> #define BLINKM_ARDUINO_POWERED 1 byte blinkm_addr = 0x00; char serInStr[30]; void setup() { if( BLINKM_ARDUINO_POWERED ) { BlinkM_beginWithPower(); } else { BlinkM_begin(); } Serial.begin(19200); // stop seq BlinkM_stopScript( blinkm_addr ); // set default color BlinkM_setRGB( blinkm_addr, 0xff,0xff,0xff); // white // fade time BlinkM_setFadeSpeed( blinkm_addr, 255); // change color BlinkM_fadeToRGB( blinkm_addr, 0x00,0x00,0x00); //black } void loop() { int num; if( readSerialString() ) { //Serial.println(serInStr); char* str = serInStr; num = atoi(str); byte a = toHex( str[0],str[1] ); byte b = toHex( str[2],str[3] ); byte c = toHex( str[4],str[5] ); BlinkM_fadeToRGB( blinkm_addr, a,b,c); } } #include <ctype.h> uint8_t toHex(char hi, char lo) { uint8_t b; hi = toupper(hi); if( isxdigit(hi) ) { if( hi > '9' ) hi -= 7; // software offset for A-F hi -= 0x30; // subtract ASCII offset b = hi<<4; lo = toupper(lo); if( isxdigit(lo) ) { if( lo > '9' ) lo -= 7; // software offset for A-F lo -= 0x30; // subtract ASCII offset b = b + lo; return b; } // else error } // else error return 0; } uint8_t readSerialString() { if(!Serial.available()) { return 0; } delay(10); int i = 0; while (Serial.available()) { serInStr[i] = Serial.read(); i++; } serInStr[i] = 0; return i; }4. AIRのプログラムをAjaxスタイルで書きます

jQueryColorPickerで色を選択したらNativeProcess経由でAnyEventで
標準入力に色コードをFF0000を送り、 Device::SerialPortでArduinoに
色データを送信します。
index.htmlは
<html> <head> <title>jQuery Plugin Color Picker - Perl - Arduino - BlinkM</title> <link rel="stylesheet" type="text/css" href="css/colorpicker.css" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/colorpicker.js"></script> <script type="text/javascript" src="AIRIntrospector.js"></script> <script type="text/javascript" src="AIRAliases.js"></script> <script type="text/javascript"> var process; var selected_hex; function init(){ // Introspectorを起動しない// air.Introspector.canInit = function () { return false }; air.Introspector.Console.log("Hello!"); if (air.NativeProcess.isSupported){ // windowをクローズする時に呼ばれるイベント window.nativeWindow.addEventListener(air.Event.CLOSING, closingHandler); launchEchoTest(); }else{ var textReceived = document.getElementById("textReceived"); textReceived.value = "NativeProcess not supported."; } } // windowをクローズする時に呼ばれるイベント function closingHandler(event){ process.closeInput(); window.nativeWindow.close(); } function launchEchoTest(){ var nativeProcessStartupInfo = new air.NativeProcessStartupInfo(); nativeProcessStartupInfo.executable = new air.File(air.File.applicationDirectory.nativePath + "/perl/serial.pl"); process = new air.NativeProcess(); process.addEventListener(air.ProgressEvent.STANDARD_OUTPUT_DATA, onOutputData); process.addEventListener(air.ProgressEvent.STANDARD_INPUT_PROGRESS, inputProgressListener); process.start(nativeProcessStartupInfo); } function writeData(selected_hex){ process.standardInput.writeUTFBytes(selected_hex + "\n"); } function inputProgressListener(event){ //process.closeInput(); } function onOutputData(event){ var bytes = process.standardOutput; $('#messages').prepend( bytes.readUTFBytes(bytes.bytesAvailable) ); } $(function(){ init(); $('#colorpickerHolder').ColorPicker({flat: true, color: '#000000', onChange: function (hsb, hex, rgb) { writeData(hex); } }); }); </script> <style> #colorpickerHolder { top: 0px; left: 0px; width: 380px; } #messages { position:absolute; top: 0px; right: 0px; height: 170px; width: 100px; overflow: auto; } body { margin: 0 0; } </style> </head> <body> <div id="messages"></div> <div id="colorpickerHolder"></div> </body> </html>NativeProcessで起動されるPerlのスクリプトは以下のようになります。
Serial.pl
#!/usr/bin/perl use strict; use Device::SerialPort; use AnyEvent; # Arduino my $p = Device::SerialPort->new("/dev/tty.usbserial-A8004JhW"); $p->databits(8); $p->baudrate(19200); $p->parity("none"); $p->stopbits(1); sleep(3); # For Arduino bootup wait. use utf8; binmode STDIN, ":utf8"; binmode STDOUT, ":utf8"; $| = 1; my $cv = AnyEvent->condvar; my $w; $w = AnyEvent->io( fh => \*STDIN, poll => 'r', cb => sub { chomp(my $input = <STDIN>); $cv->send if(!$input); $p->write($input . "\n"); print "DONE:" . $input . "\n"; }, ); $cv->recv;5. AIR2のパッケージを作成する
$adt -package -storetype pkcs12 -keystore myCert.p12 -target native NativeProcessTest.dmg application.xml index.html AIRAliases.js icons perl/serial.pl css js imagesAIRのアプリをインストールし実行すると
ColorPickerを選ぶとLEDの色が変化しているのが確認できます。


コメント