Yahoo!APIを使った雨雲レーダの表示

YahooのWebAPIを使って雨雲レーダの画像を表示してみました。
 

Yahoo!のAPI

Yahoo!のWebAPIを使うにはYahoo! デベロッパーネットワークでアプリケーションIDなるものを登録する必要がありました。

雨雲レーダ表示

こんなかんじでできました。
ただいま埼玉県は晴れています。

www.youtube.com

日本語表示

日本語表示に挑戦してみましょう。
 

フォントデータの作成

まずは日本語フォントのデータを作成します。
こちらのサイトを参考にして作りました。Processingなるツールを使って作るみたいです。
watako-lab.com

フォントデータのロード

作ったフォントデータをSDに格納してロードして使用します。
引数にファイルパスとファイルデバイスを指定します。

  M5.Lcd.loadFont( FileName, SD );

使い終わったらアンロードして終了です。

  M5.Lcd.unloadFont();

サンプルコード

#include <M5Stack.h>

void setup() {
  String FileName;
  
  M5.begin();

  // 初期化
  M5.Lcd.clear();
  // カーソル位置
  M5.Lcd.setCursor(0, 0);
  // 文字色
  M5.Lcd.setTextColor(WHITE);

  FileName = "font/ms_20"; // フォントデータ:ms_20.vlw
  // フォントロード
  M5.Lcd.loadFont( FileName, SD );
  M5.Lcd.printf("フォントサイズ20\n");
  M5.Lcd.printf("あいうえおかきくけこ\n");
  // フォントアンロード
  M5.Lcd.unloadFont();
}

void loop(){
  delay(1);
}

日本語フォント

日本語いいですね~♪

ビットマップ画像の表示

ビットマップ画像の表示をしてみましょう。
 

ビットマップ画像とは

圧縮処理がされていない画像です。そのため、JPEGやPNGにくらべてサイズは大きいです。
BMP画像を表示する関数がこちらです。
引数にx、y座標、高さ、幅、データを指定します。

  M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)image_data_m5_logo_BMP);

サンプルコード

#include <M5Stack.h>
 
extern const unsigned char image_data_m5_logo_BMP[];
 
void setup() {
  M5.begin();
}
 
 
void loop(){
  if(M5.BtnA.wasPressed()) {
    M5.Lcd.drawJpgFile(SD,"/img/m5_logo.jpg");
  }
  if(M5.BtnC.wasPressed()) {
    M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)image_data_m5_logo_BMP);
  }
  M5.update();

  delay(1);
}

JPEGとBMPの比較

• JPEG画像

JPEG画像

• BMP画像

BMP画像

JPEGのほうが綺麗です。
ただ、JPEGはSDファイルから読み込んでいるので、BMPより表示に時間が掛かります。
画質と表示の速さどちらを取るか悩みますね。。。

今年もよろしくお願いします。

2020年もM5stackをいじり倒して遊びたいと思います。

ブログの更新頻度ももうちょっと頑張りたいです。

音声再生 - MP3再生

今回は音声再生をしてみたいと思います。
色々とあさってると、MP3での再生のほうが簡単みたいですね。

ライブラリの追加

今回はライブラリの追加が必要です。
追加するライブラリは二つです。
ESP8266Audio：https://github.com/earlephilhower/ESP8266Audio
ESP8266Spiram：https://github.com/Gianbacchio/ESP8266_Spiram

MP3再生

今回はこちらのソースを参考にして、MP3を再生しました。
ESP8266Audio/PlayMP3FromSPIFFS.ino at master · earlephilhower/ESP8266Audio · GitHub

www.youtube.com
音割れがすごいですね。。。。

シリアルプロッタ

今回はArduino IDEのシリアルプロッタ機能を紹介します。
 

シリアルプロッタ

シリアル通信で送られてくる数値をグラフ表示します。
連続的な数値のデータを表示する際はすごい役に立つ機能ですね。

シリアルプロッタの機能は前回紹介したシリアルモニタの下にあります。
m5stack-build.hatenablog.com

1個のデータを表示

ランダムで値を表示させました。

サンプルコードです。

#include <M5Stack.h>

void setup()
{
    M5.begin();
}

void loop()
{
  unsigned int auiNum = 0;

  // ランダムの数字をプロット
  auiNum = random(0, 1000);
  Serial.printf(auiNum );
  delay(100);
}

2個のデータを表示

2個のデータを表示させるとグラフの色も変わってますね。

サンプルコードです。
カンマでデータを区切ることが必要です。

#include <M5Stack.h>

void setup()
{
    M5.begin();
}

void loop()
{
  unsigned int auiNum_1 = 0;
  unsigned int auiNum_2 = 0;

  // ランダムの数字をプロット
  auiNum_1 = random(0, 1000);
  Serial.print(auiNum_1);
  Serial.print(",");

  auiNum_2 = random(0, 500);
  Serial.println(auiNum_2);
  
  delay(100);
}

シリアルで受信した文字列の表示

シリアルモニタを使って受信したデータの表示をしてみましょう。
 

データ受信

まずはシリアルでデータを受信しているか確認するための関数がこちらです。
戻り値にデータのバイト数を返します。

  Serial.available();

受信したデータを取得するための関数がこちら。
引数に終了文字を設定すると、戻り値に終了文字までの文字列を返します。

Serial.readStringUntil('\n');

サンプルコード

#include <M5Stack.h>

void setup()
{
    M5.begin();
}

void loop()
{
  String aStr;
  
  if ( Serial.available() > 0 )
  {
    // 終了文字まで取得
    aStr = Serial.readStringUntil('\n');
    Serial.print("Input:");
    Serial.println(aStr);
  }
  delay(100);
}