2020-01-24

ソフトキーボード　その4

M5stack

ソフトキーボードを作ってみました。
今回は日本語の大文字入力を実装しました。

日本語入力

www.youtube.com

2020-01-17

SDからiniファイルの読込み

M5stack サンプルコード

今回はSDカードにiniファイルを作ってWifiのSSIDとパスワードを管理するようにしました。
起動時のsetup()でiniファイルのSSIDとパスワードを読込む処理を作りました。

読込むiniファイル

SDの中にsetフォルダを作ってconfig.iniファイルを格納します。
中身はこちらです。

###########################
#    Config.ini
###########################

#SSID
YOUR_SSID　←　変更箇所

#SSID_PASS
YOUR_PASS　←　変更箇所

iniファイルの読込み処理

こちらがコードです。

#include <M5Stack.h>
#include <WiFi.h>
#include <string>

void setup() {
  String config_ini;
  String ssid;
  String password;
  /* 初期化 */
  M5.begin();
  /* SD初期化 */
  SD.begin();

  /* 文字サイズを変更 */
  M5.Lcd.setTextSize(1);
  
  /* ファイルオープン */
  File datFile = SD.open("/set/config.ini");
  if( datFile )
  {
    M5.Lcd.println("File open successful");
    /* サイズ分ループ */
    while(datFile.available())
    {
      config_ini = config_ini + datFile.readString();
    }
    /* ファイルクローズ */   
    datFile.close();
  } 
  else
  {
    M5.Lcd.println("File open error hello.txt");
  }
  /* SSID取得 */
  config_ini = config_ini.substring(config_ini.indexOf("#SSID\r\n") + 7);
  ssid = config_ini.substring(0, config_ini.indexOf("\r\n"));
  /* パスワード取得 */
  config_ini = config_ini.substring(config_ini.indexOf("#SSID_PASS\r\n") + 12);
  password = config_ini.substring(0, config_ini.indexOf("\r\n"));

  /* connect to WiFi */
  M5.Lcd.print("Connecting to YOUR_SSID ");
  /* wifi初期化 */
  WiFi.begin(ssid.c_str(), password.c_str());
  while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      M5.Lcd.print(".");
  }
  M5.Lcd.println(" CONNECTED");

  /* disconnect WiFi as it's no longer needed */
  WiFi.disconnect(true);
  WiFi.mode(WIFI_OFF);
}

void loop() {

}

これでSSIDやパスワードが変わってもiniファイルを書き換えるだけで済みますね。
あとは毎回コードに書いたSSIDとパスワードを書き換えずにブログに載せれます（笑）

2020-01-11

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

M5stack

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

Yahoo!のAPI
雨雲レーダ表示

Yahoo!のAPI

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

雨雲レーダ表示

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

www.youtube.com

2020-01-08

日本語表示

M5stack サンプルコード

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

フォントデータの作成
フォントデータのロード
サンプルコード

フォントデータの作成

まずは日本語フォントのデータを作成します。
こちらのサイトを参考にして作りました。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);
}

f:id:yamanonono:20200108000340j:plain — 日本語フォント

日本語いいですね~♪

2020-01-05

ビットマップ画像の表示

M5stack サンプルコード

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

ビットマップ画像とは
サンプルコード
JPEGとBMPの比較

ビットマップ画像とは

圧縮処理がされていない画像です。そのため、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);
}