[jQuery Plugin AIR2.0 Ajax] COLOR PICKERを使いArduino経由でBlinkMの色を変更してみる

  • 投稿日:
  • by yoshimax
  • カテゴリ:
AIR2.0のNativeProcessを使って
jQuery PluginのCOLOR PICKERで選択した色をPerl経由でArduinoに送り
LEDの色を変化させる。

[AIR2.0 ajax] NativeProcessで perl を呼び出す メモをベースにします。

1. JQUERY PLUGINを落としてきて配置
COLOR PICKER - JQUERY PLUGINからダウンロードして配置します。
今回は以下のように配置しました。
picker1

2. COLOR PICKERをHTMLに表示する
picker3
でCOLOR PICKERを読み込みます。

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

bodyの中に

を記載します。

picker2

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スタイルで書きます
air2
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の色が変化しているのが確認できます。
AIR2.0 NativeProcess AnyEvent USB Serial Arduino BlinkM
AIR2.0 Arduino BlinkM