AIR2.0のNativeProcessを使って
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 images
AIRのアプリをインストールし実行すると
ColorPickerを選ぶとLEDの色が変化しているのが確認できます。
