Processing3(WinPC)とMicro:bitの文字データ送受信

概要
外部仕様
基本的な接続
ProcessingとMicropython
- Processing
  - フロー
  - コード
- MicropythonとMicro:bit
  - フロー
  - コード
動作結果

概要

WinPCとMico:bitが、シリアル通信(UART)を介して制御します。WinPCは、processing3で開発したアプリケーションからMicro:bitを制御します。

f:id:bear_9973:20210209172601p:plain:w400 — 概要図

外部仕様

Micro:bitのAボタンを押すと、B画面が表示されます。
Bボタンを押すと、A画面が表示されます。
A/B ボタン
A/B画面の各画像をマウスでクリックすると、Micro:bitのLEDディスプレイにクリックした画像と同じものが表示されます。
A Display

B Display

基本的な接続

UART-USB変換を使用して、以下のようにMicro:bitとWin PCとを接続します。

f:id:bear_9973:20210209171157p:plain:w350 — 基本的な接続

※購入するときは、乾電池ボックス、USBケーブルが付いているか確認することをおすすめします。

ProcessingとMicropython

ソフトウェアは、以下の順に説明します。

Processing
MicropythonとMicro:bit

Processing

以下の順に説明します。

フロー
コード

フロー

2つの四角形を画面に表示し、右の四角形は、Micro:bitから受信したとき、色が変わります。左の四角形は、マウスを画面にクリックしたとき、色が変わりMicro:bitにコマンドを送信します。フローを以下に示します。

UARTポートを設定
1秒ごとに表示されるフレーム数を30に設定(シリアル通信の送受信は約33.3msに実施)
フレーム(Processingのアプリ画面)を更新する毎に、シリアル通信の受信とマウスのクリックを確認
Micro:bitからシリアル通信の受信があった場合、コマンドに応じてA画面またはB画面を表示
マウスのクリックがあった場合、クリックされた画面をコマンドでMicro:bitに送信

コード

コードを以下に示します。

import processing.serial.*;
Serial serial;
int r; // 画面の表示状態　0:A display 1: B display

void setup(){
  size(400,400); //画面サイズ
  frameRate(30); //1秒ごとに30回表示
  
  textSize(60);       // テキストサイズの指定
  textAlign(CENTER);  // 文字配置
  serial = new Serial(this, "COM8", 9600); // シリアル通信の設定
  
  r = 0; // 画面の表示状態の初期化
}

void draw(){
  background(100); // 背景色の設定
  int idata;       // シリアル通信の受信データ数

  // シリアル通信制御部
  idata = serial.available();
  // println("rec:",idata);
  if (idata >= 1)
  {
    r = serial.read();
    // println("recdata:",r);
  }

  // 画面制御部
  if (r == 0){
     a_display();
  }else{
     b_display();
  }
}

void mousePressed()
{
  // マウスクリックした場合、マウスカーソルを検出
  int mouseposdata;
  if( 0 <= mouseX && mouseX < 200 && 0 <= mouseY && mouseY < 200){ // 左上
     mouseposdata = 1;
  }else if( 0 <= mouseX && mouseX < 200 && 200 <= mouseY && mouseY < 400){ // 左下
     mouseposdata = 2;
  }else if( 200 <= mouseX && mouseX < 400 && 0 <= mouseY && mouseY < 200){ // 右上
     mouseposdata = 3;
  }else if( 200 <= mouseX && mouseX < 400 && 200 <= mouseY && mouseY < 400){ // 右下
     mouseposdata = 4;
  }else{
     mouseposdata = 0; 
  }
  ctrl_write_serial(mouseposdata); // シリアル送信部へ
}

void ctrl_write_serial(int posdata){
  int i_senddata;
  
  i_senddata = r * 5 + posdata; // 送信データ生成
  serial.write(str(i_senddata));
  println("senddata:",i_senddata);

}

// A displayの表示
void a_display(){
  fill(135,206,250); // lightskyblue
  rect(0,0,200,200); // 左上
  fill(0);
  text("(^_^)", 100, 100); //HAPPY
   
  fill(135,206,235); // skyblue
  rect(0,200,200,200); // 左下
  fill(0);
  text("(>_<)", 100, 300); //SAD
 
  fill(127,255,212); // aquamarine
  rect(200,0,200,200); // 右上
  fill(0);
  text("('O')", 300, 100); //SURPRISED
 
  fill(64,224,208); // turqoise
  rect(200,200,200,200); // 右下
  fill(0);
  text("(-.-)", 300, 300); //SURPRISED
}

// B displayの表示
void b_display(){
  fill(240,255,255); // azure
  rect(0,0,200,200); // 左上
  fill(0);
  text("↑", 100, 100); // ARROW_N
  
  fill(240,255,240); // honeydew
  rect(0,200,200,200); // 左下
  fill(0);
  text("↓", 100, 300); // ARROW_S
  
  fill(240,248,255); // aliceblue
  rect(200,0,200,200); // 右上
  fill(0);
  text("→", 300, 100); // ARROW_E

  fill(224,255,255); // lightcyan
  rect(200,200,200,200); // 右下
  fill(0);
  text("←", 300, 300); // ARROW_W
}

MicropythonとMicro:bit