今回は TouchShield Slide に用意されている API を見ていきたいと思います。リファレンスは http://www.liquidware.com/wikipages/name/TouchShield に掲載されています。大きく分けて、タッチ・パネルからの入力、OLED への表示に分れます。表示は、図形、画像、文字の描画に分かれます。以下では、それぞれについて概略を紹介していきます。紹介しきれない関数や詳細についてはリファレンスを参照してください。

■タッチ・パネルからの入力
 タッチ・パネルからの入力をする方法の一つは、前回紹介したサンプル(Examples → Touch EllipseAtTouch)のように gettouch() 関数を使います。gettouch() 関数を呼び出すと、タッチ・パネルに触られている場合には座標を更新します。座標は mouseX, mouseY 変数に入ります。gettouch() 関数には戻り値がなく、タッチが検出されたかどうかはわかりません。

/**
 * EllipseAtTouch
 * Example by Mike Gionfriddo
 *
 * This example draws an ellipe at
 * the point of touch on the TouchShield
 */
void setup() {
    background(0,0,0); //this paints the whole background black
    stroke(0,0,255);   //the outline of the next shape I draw will be blue
    fill(0,0,255);     //the inside fill of the next shape I draw will be blue
}

void loop() {
    gettouch(); //find out where a finger is touching
    ellipse(mouseX, mouseY, 3, 3); // draw an ellipse(x, y, width, height)
}

 touch_getCursor() 関数は、タッチを検出したときに 1 、そうでないときに 0 を返す関数です。引数に座標を表す変数(構造体)のポインタを渡します。こちらの関数を使うことが実際には多くなるのではと思います。

POINT point;

void setup(){
  fill(255);
}

void loop(){
  if(touch_getCursor(&point)) {
    ellipse(point.x, point.y, 20,20); //draws an ellipse at the touch
  }
}

■OLED に図形を描く
 描画については色を決める関数があります。背景の色を決める background() 関数、図形の線の色を決める stroke() 関数、図形の塗りの色を決める fill() 関数です。いずれも、R, G, B の値もしくは、明るさを引数にとります。

background(0);         // 背景色を明るさ0のグレイ :黒にする
background(0, 0, 0);   // 背景色を R=0, G=0, B=0  :黒にする
background(0, 0, 255); // 背景色を R=0, G=0, B=255:青にする

stroke(255,255,255);   // 線の色を R=255, G=255, B=255:白にする
fill(255,0,0);         // 塗りの色を R=255, G=0, B=0:赤にする

 図形としては、点を描く point() 関数、直線を描く line() 関数、三角形を描く triangle() 関数、長方形を描く rect() 関数、四角形を描く quad() 関数、楕円を描く ellipse() 関数などがあります。たとえば、

point(x, y);                      // (x, y) に点を描く
line(x1, y1, x2, y2);             // (x1, y1) から (x2, y2) へ線分を描く
triangle(x1, y1, x2, y2, x3, y3); // (x1, y1, (x2, y2), (x3, y3) を頂点とする三角形を描く
rect(x, y, width, height);        // (x, y) を左上の頂点とし、幅 width, 高さ height の四角形を描く
quad(x1, y1, x2, y2, x3, y3, x4, y4); // (x1, y1) から (x4, y4) を頂点とする四角形を描く
ellipse(x, y, width, height);     // (x, y) を中心とし、幅 width, 高さ height の楕円を描く

と使います。ランダムに図形を描くスケッチを作ってみました(TS_RANDOM-110104a.zip)。



■画像を表示する
 TouchSheild Slideで画像を表示するには、あらかじめフラッシュ・メモリに画像をアップロードしておく必要があります。まず 24ビット・フルカラーの BMP ファイルを用意します。画像の幅が 256 ドット以上だと、うまく扱えないようなので注意してください。
 たとえば、以下のスケッチを TouchShield Slide にアップロードします。
/**
 *
 * LiquidPic
 * Example by Chris Ladden
 *
 * This example demonstrates how to store 24-bit color
 * bitmaps onto the TouchShield's flash.
 *
 *  1.) Upload this sketch to the TouchShield
 *  2.) Open the Tools->Image Uploader window
 *  3.) Click Transfer in the Image Uploader window
 */

PImage liquidPic;                  //An image
PImage pic2;
PImage pic3;

void setup() {
  background(0);
  setBrightness(0);
  open(FlashTransfer);             //Make the TouchShield listen for images

  background(0);
  liquidPic = loadImage("liquid.bmp");  //read a bitmap from onboard flash
  pic2 = loadImage("DSC_0977s.bm");
  pic3 = loadImage("apple.bmp");
}

void loop() {
  background(0);
  image(liquidPic, 0, 0);               //draw bitmap
  image(liquidPic, 60, 60);            // draw bitmap
  delay(3000);
  background(0);
  image(pic2, 32, 34);
  delay(3000);
  background(255);
  image(pic3,41, 0);
  delay(3000);
}
 スケッチの書き込みが終わると、setup 関数内の open(FlashTransfer) が働き、

FlashFileSystemComm( )
Waiting for images

とOLEDに表示されます。そこで Antipasto Arduino IDE の Tools → ImageUploader を使ってファイルをアップロードします。ウィンドウが表示されるので、アップロードするファイルをドラッグアンドドロップし、Transfer ボタンを押します。転送中はカラフルな文字が OLED に表示されます。

fig2-1.png
fig2-2.JPG スケッチを見ると loadImage() 関数にファイル名(頭の12文字が有効なので、DSC_0977s.bmp は DSC_0977s.bmとスケッチ中で書いている)を渡し、戻り値を PImage 型の変数 liquidPic, pic2, pic3 に代入しているのがわかります。これらの変数と、左上の座標を image() 関数に渡すと、画像が表示されます。

image(liquidPic, 0, 0);   // liquidPic を (0, 0) に表示
image(liquidPic, 60, 60); // liquidPic を (60, 60) に表示

 一度、フラッシュ・メモリにファイルを書き込めば、open(FlashTransfer) の行は不要なので、コメントアウトしてしまいます。そのようにすると、さきほどのスケッチで次の動画のように表示されます。



 次回は、文字を表示したり、グラフを表示する API を紹介します。
(光永 法明)



トラックバック(0)

このブログ記事を参照しているブログ一覧: TouchShield Slide の API (1/2) <2>

このブログ記事に対するトラックバックURL: http://www.eleki-jack.com/mt/mt-tb.cgi/5082







newハイパー・マイコンmbedでインターネット電子工作


マイコンと電子工作 No.6


マイコンと電子工作 No.4


マイコンと電子工作No.1
サポート・ページはこちら