Processing 入門 Lesson 24 【温湿度センサ】

こんにちは、管理人のomoroyaです。

ProcessingのLesson、久しぶりに更新。

なかなか、先に進みませんが気長に行きます。

 

Lesson 19からは「Arduino」　→　「Processing」への情報の流れを学習中。

センサから得られたデータを処理するためには、この流れを理解する必要があります。

もうしばらく、色々なセンサで遊んでいきます。

 

Lesson 24で使用する電子部品は【温湿度センサ】です。

本LessonではArduino入門編で遊んだ「温湿度センサ」を思い出しながら学習です。
※使用する電子部品はDHT11搭載のモジュール

本Lessonも情報の流れは、「Arduino」　→　「Processing」。

 

Arduinoで取得したデータをProcessingで処理する学習。

前回同様、理解しやすいように使用する電子部品は少なくします。

「温湿度センサ」のみを使った回路で学習していきましょう。

本Lessonで使用する「温湿度センサ　DHT11」は以下が同等品となります。
※prime対応品（出荷元：Amazon）

 

※測定範囲、精度の高い

もあります。

 

Processing学習の最終目標は、「6軸モーションセンサ」との連携です。

 

Lesson 14以降を学習することでLesson 01 ～ Lesson 06【Arduino連携変 そのX】で遊んだスケッチも理解できるようになるはず。

本日も楽しんでいきましょう。

 

Processingを始めようと考えている方。

ネット情報のみでも十分に学習可能です。

手元に参考書がほしいと考えている場合は下記の2冊程度で十分と考えます。

 

はじめに

Lesson 14からはArduinoと一緒に学習していきます。

Arduinoの詳細な解説は「Arduino入門編」にて確認してください。

 

本Lessonでは温湿度センサ(DHT11)で得られた温度、湿度をProcessingに表現させます。

温湿度センサの情報をArduinoからパソコンへ送信。

Processingで処理して画像で表現するということになります。

「温湿度センサって何？」という場合は、下記を読んでおくと理解しやすいはずです。

 

Lesson 24 目標

本Lessonの目標は以下の2点です。

 

本Lessonの学習に必要な物

本Lessonに必要となる電子部品を列挙します。

• USB接続用のPC（IDE統合環境がインストールされたPC）
  →管理人が勝手に比較したBTOメーカーを紹介しています。
• UNO R3(以下UNO)、おすすめUNO互換品（ELEGOO）
• PCとUNOを接続するUSBケーブル
• ブレッドボード安価（大）、ブレッドボード安価（中）
  ※おすすめブレッドボード（大）、おすすめブレッドボード（中）
• 温湿度センサ（DHT11）
• M-M Jumper wire（UNOと部品をつなぐための配線）

 

 

Jumper wireはできれば、「オス-メス オス-オス メス –メス」の３種類を揃えておくことをお勧めします。

 

短めのメスーオスが使いやすい場合も。

 

抵抗、LEDなどを個別でセット品を購入しても、そんなに使わない！

という方は、「電子工作基本部品セット」が使い勝手が良い。

 

実践 回路作成

最初に回路図を確認してください。

次に、回路図に合わせて部品を接続します。

最後にスケッチ（コード）を描きましょう。

温湿度センサの温度、湿度をPC上で表現していきます。

 

Arduinoのピン配置を確認したい方は番外編02を参照してください。

 

回路図

「温湿度センサ」のみの回路となります。

Arduino 入門 Lesson 11 【温湿度センサ編】と同じ回路です。

利用するピンも同じ8番ピン。

 

回路図がこちら。

 

こちらがブレッドボード図。

 

回路図は「fritzing」を利用しています。

「fritzing」の使い方は下記を参照してください。

 

接続

下図に示すように、用意した部品を使用して接続しましょう。

部品は温湿度センサ(DHT11)のみのため簡単に接続できます。

 

使用するポートは、digital IOの「8」電源の「5V」「GND」です。

穴に挿入しづらいときは、ラジオペンチなどを使用してください。

 

Serial入出力のためのクラス 復習

Lesson 14にて解説しましたが、覚えるという意味で再度軽く解説。

 

Serialクラスの機能を使うためには、「serialパッケージをimport」する。

 

次に、Serialオブジェクトの生成処理。

生成するためには、Serialクラスのコンストラクタ使用。

 

 

Serialクラスの主なメソッドを紹介。

Serialクラス	内容
available()	読めるデータのバイト数を返す。 戻り値が0より大きい場合、データを利用できる。
serial.list()	使用可能なシリアルポートのリストを返す。
read()	次の1バイトの読み込み。 0～255の値を返す。 読めるバイトがないと-1を返す。 データが使用可能かどうかを確認するために最初にavailable()で確認することを推奨します。
write()	バイト、文字、整数、バイト[]、文字列をシリアルポートに書き込みます。

 

詳しく知りたい方は、公式のホームページで確認！

 

実践 スケッチ作成

ProcessingとArduinoを連携するためには、お互いにデータのやり取りをする必要があります。

本Lessonのデータのやり取りは、「Arduino」　→　「Processing」。

Lesson 18までとは逆方向、Lesson 19以降とは同じ方向になります。

 

流れとしては以下となります。

1. 温湿度センサ（DHT11）で温度、湿度の値を取得
2. 取得した値をパソコン側へ伝える（送信）
3. 受け取った温度、湿度をProcessingウィンドウでグラフィックを描画。

といった動作！

 

Arduino側は、「温度」「湿度」を数値としてパソコンへ送信。

• 読み取った温度、湿度をSerial.write()関数で送信

 

Processing側のスケッチは送られてきたデータをグラフィックで描画。

• 送られてきたデータをread()関数で読み込み
• 温度、湿度をグラフィックで描画する

 

Arduino用　サンプルスケッチ

サンプルスケッチ（コード）を下記に示します。

 

digitalピンの8番を使います。

基本はLesson 11と同じです。

温度、湿度の値取得には「DHT.ｈ」を利用します。

必要に応じて、準備してください。（方法は下記２つ）

※Lesson 01にライブラリについて詳細が記載されています。

//Lesson 24 Processing制御用のArduino用スケッチ
//Processingによる温湿度センサ DHT11　グラフィック描画
//https://omoroya.com/

#include "DHT.h" //ライブラリインクルード

#define DHT_Pin 8      //DHT11のDATAピンを定義
#define DHT_Type DHT11 //センサの型番定義　DHT11,DHT22など

DHT dht(DHT_Pin, DHT_Type); //センサ初期化

/* 計測値設定 */
int humidity = 0; //湿度
int tempC    = 0; //摂氏温度

void setup() {
  Serial.begin(9600);  //シリアル通信のデータ転送レートを9600bpsで指定。bpsはビット/秒。
  dht.begin();         //温湿度センサー開始
}

void loop() {
  delay(2000); //2秒待つ　データの読み出し周期1秒以上必要。

  humidity = dht.readHumidity();    //湿度の読み出し
  tempC    = dht.readTemperature(); //温度の読み出し 摂氏

  /* 読み取れたかどうかのチェック */
  if (isnan(humidity) || isnan(tempC)) {
    Serial.write(99);              //読み取れなかったら99送信
    return;
  }

  /* データの送信処理 */
  Serial.write('s');      //開始を知らせる文字列の送信
  Serial.write(tempC);    //温度の値を送信
  Serial.write(humidity); //湿度の値を送信
}

 

このスケッチはProcessingがなくても動作を確認することができます。

Aruduinoのシリアルモニタを立ち上げてみてください。

「温湿度センサ（DHT11）」を動かす度にシリアルモニタに「何かが」が表示されるはずです。

ただし、シリアルモニタから送信するデータはASCIIコードであることに注意。

 

Processing用　サンプルスケッチ

サンプルスケッチ（コード）を下記に示します。

このスケッチは受け取った温度、湿度を棒グラフ（ゲージ）として表示しています。

//Lesson 24 Processing用スケッチ
//Processingによるによる温室度センサ　グラフィック描画
//https://omoroya.com/

import processing.serial.*; //Arduinoと通信するためのライブラリの読み込み
Serial myPort;              //シリアル通信を行うための変数を定義
PFont  myFont;              //画面に表示するフォントの指定

int c;
int tempC = 0, humidity = 0;
int x = 200, y = 60;
int val1 = 100;
int val2 = 1000/50;
int val3 = 1000/100;

void serialEvent(Serial p){
  if(myPort.available() > 2){     //データが3以上おくられてきたかの判断
    c = myPort.read();            //スタートデータの読み込み
    if(c == 's'){
      tempC    = myPort.read();   //温度データの読み取り
      humidity = myPort.read();   //湿度デーtの読み取り
    }
  }
}

void setup(){
  size(1400,300);                      //ウィンドウサイズ
  background(0,0,0);                   //背景の色
  
  println("Available serial ports:");
  printArray(Serial.list());           //使用できるCOMポートの取得
  //printArray(PFont.list());          //使用できるFontの表示、わからないときに使用
  
  myPort = new Serial(this, Serial.list()[0], 9600); //通信するポートと速度の設定、Arduinoと合わせる必要あり
  myPort.clear();                                    //受信データをクリア
  myFont = createFont("Meiryo UI Bold", 80);         //Font指定、サイズ80pt
  textFont(myFont);
}

void draw(){
  background(0,0,0);          //画面の再描画
  
  //ゲージの下地描画
  fill(100,0,0);              //色指定
  rect(x, y,     1000, 65);   //ゲージの下地描画
  rect(x, y+120, 1000, 65);   //ゲージの下地描画
  
  textSize(40);               //テキストサイズ
  fill(255,0,0);              //色指定
  text("温度", x-100, 110);   //湿度の表示
  fill(0,0,255);              //色指定
  text("湿度", x-100, 230);   //湿度の表示
  
  //横軸表示
  textSize(20);               //テキストサイズ
  textAlign(CENTER);          //中央揃え
  
  fill(255,255,0);               //色指定
  text( 0,   x,        150);     //0
  text( 5,   x+val1,   150);     //5
  text(10,   x+val1*2, 150);     //10
  text(15,   x+val1*3, 150);     //15
  text(20,   x+val1*4, 150);     //20
  text(25,   x+val1*5, 150);     //25
  text(30,   x+val1*6, 150);     //30
  text(35,   x+val1*7, 150);     //35
  text(40,   x+val1*8, 150);     //40
  text(45,   x+val1*9, 150);     //45
  text(50,   x+val1*10, 150);    //50
  text("℃", x+val1*10+40, 150); //温度
  
  fill(0,255,255);               //色指定
  text( 0,   x,        270);     //0
  text(10,   x+val1,   270);     //10
  text(20,   x+val1*2, 270);     //20
  text(30,   x+val1*3, 270);     //30
  text(40,   x+val1*4, 270);     //40
  text(50,   x+val1*5, 270);     //50
  text(60,   x+val1*6, 270);     //60
  text(70,   x+val1*7, 270);     //70
  text(80,   x+val1*8, 270);     //80
  text(90,   x+val1*9, 270);     //90
  text(100,  x+val1*10, 270);    //100
  text("%",  x+val1*10+40, 270); //湿度
  
  //温度ゲージ表示
  fill(255,255,0);               //色指定
  rect(x, y, tempC*val2, 65);    //横棒描画
  
  //温度表示
  fill(255,0,0);                 //色指定
  textSize(60);                  //テキストサイズ
  textAlign(RIGHT);              //右揃え
  text(tempC, 350, 115);         //温度の表示
  textSize(30);                  //テキストサイズ
  textAlign(LEFT);               //左揃え
  text("℃", 355, 115);          //℃表示
  
  
  //湿度ゲージ表示
  fill(0,255,255);                   //色指定
  rect(x, y+120, humidity*val3, 65); //横棒描画
  
  //湿度表示
  fill(0,0,255);                     //色指定
  textSize(60);                      //テキストサイズ
  textAlign(RIGHT);                  //右揃え
  text(humidity, 350, 235);          //湿度の表示
  textSize(30);                      //テキストサイズ
  textAlign(LEFT);                   //左揃え
  text("%", 355, 235);               //%表示

}

 

 

動作確認

では、さっそく動作を確認していきます。

1. Arduinoへスケッチ書き込み
2. Processingスケッチ実行
3. 温湿度センサで温度、湿度の値を取得
4. 取得した温度、湿度にあわせて、数値とゲージが動く
   

 

Processingのウィンドウ画面に「2本のゲージ」があわわれすます。

複数データを処理する場合の学習にもってこいのセンサです。

温湿度センサに息を吹きかけるなどして、温度、湿度を変えてみてください。

 

下記に動作させているときの描画画像をのせておきます。

 

本Lessonでも、データ方向「Arduino」　→　「Processing」を理解するために簡単な電子部品で遊んでみました。

次回も、「Arduino」　→　「Processing」の理解を深めていきます。

 

まとめ

Processing 入門 Lesson 24【温湿度センサ】はここまで。

本Lessonでは以下の2つについて目標としました。

 

ディスプレイモジュールと組み合わせて、グラフィカルな温湿度センサを作ってみるのはいかがでしょうか？

その場合、「Arduino UNO」使用だと大きいし、もったいないので「Arduino Nano」などを使用するとよいと思います。

 

Processingに慣れると、色々と面白いことがビジュアルで表現できます。

 

次回Lesson 25以降も引き続きArduino→Processingについて学習していきます。

Lessson 25は【カラーセンサです。

Processing 入門 Lesson 25 【カラーセンサ】

Lesson 25で使用する電子部品は【カラーセンサ】です。「カラーセンサ」色を識別できるセンサ。Processingとの相性が良いセンサ。取得した数値をProcessingで色表示。本Lessson、自分が思っている色とRGB値を比較する…

omoroya.com

 

Processingを始めようと考えている方。

ネット情報のみでも十分に学習可能です。

手元に参考書がほしいと考えている場合は下記の2冊程度で十分と考えます。

 

 

Arduino入門編、番外編、お役立ち情報などなどサイトマップで記事一覧をぜひご確認ください。

Amazonでお得に購入するならAmazon Mastercard、Amazonギフト券がおすすめです。

時期により異なりますが、様々なキャンペーンを実施しています。

＼Amazonギフト券／
Amazonギフトカード　キャンペーン

＼Amazon Mastercard お申込み／
Amazon Mastercard 申し込み 

 

いずれの場合もプライム会員である方がお得！！

＼Amazon Prime 30日間の無料会員を試す／
無料会員登録