AtomS3の使い方、端子配列、開発環境、サンプルプログラムで詳しく紹介

#include <M5AtomS3.h>
// ピン番号設定
#define INPUT_PIN0 1   //入力ピン
#define INPUT_PIN1 2
#define OUTPUT_PIN0 39 //出力ピン
//変数宣言
bool state = false;    // 本体ボタン状態格納用

// 液晶画面変更処理関数
void lcdChange()  {
  if (state == true) {
    M5.Lcd.fillCircle(64, 64, 53, M5.Lcd.color565(0, 128, 255)); // 塗り潰し円（青）
    M5.Lcd.setTextColor(M5.Lcd.color565(30, 30, 30));   // 文字色指定
    M5.Lcd.setCursor(45, 54);                           // 表示開始位置左上角（X,Y）
    M5.Lcd.print("ON");                                 // ON表示
    digitalWrite(OUTPUT_PIN0, HIGH);                    // 出力HIGH
  } else {
    M5.Lcd.fillCircle(64, 64, 54, BLACK);                        // 塗り潰し円（黒）
    M5.Lcd.fillCircle(64, 64, 51, M5.Lcd.color565(150, 30, 30)); // 塗り潰し円（赤）
    M5.Lcd.setTextColor(M5.Lcd.color565(150, 150, 150));   // 文字色指定
    M5.Lcd.setCursor(39, 54);                           // 表示開始位置左上角（X,Y）
    M5.Lcd.print("OFF");                                // OFF表示
    digitalWrite(OUTPUT_PIN0, LOW);                     // 出力LOW
  }
}
// 初期設定 **************************************************
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  AtomS3.begin(cfg);
  Serial.begin(9600); // シリアル通信初期設定
  delay(1000);        // シリアル接続待ち
  Serial.println("AtomS3 test start!"); // シリアル出力

  // 入出力設定
  pinMode(INPUT_PIN0, INPUT_PULLUP); // ONボタン入力
  pinMode(INPUT_PIN1, INPUT_PULLUP); // OFFボタン入力
  pinMode(OUTPUT_PIN0, OUTPUT);      // 外部LED出力
  digitalWrite(OUTPUT_PIN0, LOW);    // 出力初期化

  // 液晶表示（起動画面）
  M5.Lcd.fillScreen(0);  // 表示クリア
  M5.Lcd.setRotation(2); // 画面向き設定（USB位置基準 0：上/ 1：左/ 2：下/ 3：右）
  M5.Lcd.setTextFont(4); // フォント
  M5.Lcd.fillCircle(64, 64, 60, DARKGREY); // 塗り潰し円（灰）
  lcdChange();           // 液晶画面表示変更
}
// メイン ****************************************************
void loop() {
  AtomS3.update(); // ボタン状態更新
  // 本体スイッチ処理
  if (M5.BtnA.wasPressed()) { // ボタンが押されていれば
    state = !state;           // ON/OFF状態反転
    Serial.println("ON");
    lcdChange();              // 液晶画面表示変更
  } 
  // 外部スイッチ処理
  if (digitalRead(INPUT_PIN0) == LOW && state == false) {
    state = true;             // ON/OFF状態をtrueへ
    lcdChange();              // 液晶画面表示変更
  }
  if (digitalRead(INPUT_PIN1) == LOW && state == true) {
    state = false;            // ON/OFF状態をfalseへ
    lcdChange();              // 液晶画面表示変更
  }
  delay(100);   // 遅延時間
}

#include <M5AtomS3.h>
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
// サーバー設定、ポート80で接続
WebServer server(80);
// ピン番号設定
#define OUTPUT_PIN0 39  //出力ピン
#define ADC_PIN0 1      //アナログ入力ピン

//Wi-Fi SSID パスワード設定（お使いの環境に合わせて設定してください）
const char* ssid     = "SSIDを記入";     // SSID（Wi-Fi接続先）
const char* password = "パスワードを記入"; // パスワード
//変数宣言
bool state = false; // 本体ボタン状態格納用
float adc;          // アナログ変換値（0～4095）格納用
float volt;         // アナログ電圧（0～3.3V）格納用

// 関数 *********************************************************
// wifi接続実行 -----------------------
void wifiConnect() {
  // Wi-Fi接続開始
  WiFi.begin(ssid, password);
  // Wi-Fi接続開始画面表示
  M5.Lcd.fillScreen(0);         // 表示クリア
  M5.Lcd.setTextFont(4);        // フォント
  M5.Lcd.setTextColor(WHITE);   // 文字色
  M5.Lcd.setCursor(10, 10);     // 表示開始位置左上角（X,Y）
  M5.Lcd.println("WiFi\n      Search!");
  delay(1000);                  // 表示確認時間
  // WiFi.status()で接続状態（接続完了でWL_CONNECTを返す）を確認。
  M5.Lcd.setTextFont(2);        // フォント
  M5.Lcd.setCursor(5, 50);      // 表示開始位置左上角（X,Y）
  int time_out = 0;             // Wi-Fi接続タイムアウトカウントリセット
  while (WiFi.status() != WL_CONNECTED) { // Wi-Fi接続完了していなければ繰り返し
    delay(500);                 // 接続待ち
    M5.Lcd.print(".");          // 接続待ちの間「.」を表示
    time_out++;                 // Wi-Fi接続タイムアウトカウント+1
    if (time_out == 20) {       // カウントが20なら
      break;                    // ループを抜ける
    }
  }
  // WiFi接続結果表示
  M5.Lcd.fillScreen(0);                 // 表示クリア
  M5.Lcd.setCursor(2, 18);              // 表示開始位置左上角（X,Y）
  if(WiFi.status() == WL_CONNECTED) {   // WiFi接続成功なら
    M5.Lcd.setTextColor(M5.Lcd.color565(255, 165, 0));  // 文字色変更
    M5.Lcd.print("URL= ");
    M5.Lcd.println(WiFi.localIP());     // IPアドレス表示
    M5.Lcd.print("            :80/atom ");
  } else {                              // WiFi接続が失敗なら
    M5.Lcd.setTextColor(M5.Lcd.color565(255, 50, 0));  // 文字色
    M5.Lcd.print("WiFi Failed!");
  }
}
// ON/OFF状態処理 -------------------------------------
void onOffChange() {
  M5.Lcd.setTextFont(4);                    // フォント
  M5.Lcd.fillRect(0, 52, 128, 28, M5.Lcd.color565(20, 20, 20));  // 塗りつぶし四角（グレー）
  M5.Lcd.drawFastVLine(64, 52, 29, WHITE);  // 指定座標から平行線（x, y, l, 色）
  if (state == true) {                      // stateがtrueなら
    M5.Lcd.fillRect(0, 53, 63, 27, M5.Lcd.color565(0, 200, 70));  // 塗りつぶし四角（グリーン）
    M5.Lcd.setTextColor(M5.Lcd.color565(255, 255, 255));          // 文字色変更
    M5.Lcd.setCursor(13, 55);               // 表示開始位置左上角（X,Y）
    M5.Lcd.printf("ON");
    M5.Lcd.setTextColor(M5.Lcd.color565(60, 60, 60));             // 文字色変更
    M5.Lcd.setCursor(74, 55);               // 表示開始位置左上角（X,Y）
    M5.Lcd.printf("OFF");
    digitalWrite(OUTPUT_PIN0, HIGH);        // 出力ON
  } else {                                  // stateがtrueでなければ
    M5.Lcd.setTextColor(M5.Lcd.color565(60, 60, 60));             // 文字色変更
    M5.Lcd.setCursor(13, 55);               // 表示開始位置左上角（X,Y）
    M5.Lcd.printf("ON");
    M5.Lcd.fillRect(65, 53, 62, 27, M5.Lcd.color565(255, 128, 0)); // 塗りつぶし四角（オレンジ）
    M5.Lcd.setTextColor(M5.Lcd.color565(255, 255, 255));          // 文字色変更
    M5.Lcd.setCursor(74, 55);               // 表示開始位置左上角（X,Y）
    M5.Lcd.printf("OFF");
    digitalWrite(OUTPUT_PIN0, LOW);         // 出力OFF
  }
}
// サーバールートアクセス時処理 ----------------------------------
void handleRoot() {
  server.send(200, "text/html", "AtomS3 Test!"); // レスポンス200を返し、html形式でデータ送信
  Serial.println("AtomS3 root access!");         // シリアル出力
}
// サーバー指定URL（IPアドレス:80/atom）アクセス時処理 ----------------
void urlAccess() {
  state = !state;   // ON/OFF状態反転
  onOffChange();    // ON/OFF状態処理関数呼び出し
  server.send(200, "text/html", "ON/OFF Change!");  // レスポンス200を返し、html形式でデータ送信
  Serial.println("AtomS3 URL access! ON/OFF Change!"); // シリアル出力
}
// サーバー設定 -------------------------------------
void serverSetting() {
  server.on("/", handleRoot);     // ルートアクセス時の応答関数を設定
  server.on("/atom", urlAccess);  // ボタンAオン受信処理
  server.begin();                 // Webサーバー開始
}

// 初期設定 **************************************************
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  AtomS3.begin(cfg);

  Serial.begin(9600);  // シリアル通信初期設定
  delay(1000);            // シリアル接続待ち
  Serial.println("AtomS3 test start!");  // シリアル出力

  // 液晶表示（起動画面）
  M5.Lcd.fillScreen(0);       // 表示クリア
  M5.Lcd.setRotation(2);      // 画面向き設定（USB位置基準 0：上/ 1：左/ 2：下/ 3：右）
  M5.Lcd.setTextFont(4);      // フォント
  M5.Lcd.setTextColor(WHITE); // 文字色
  M5.Lcd.setCursor(5, 10);    // 表示開始位置左上角（X,Y）
  M5.Lcd.println("AtomS3\n            TEST");
  delay(2000);                // 初期表示時間

  // ネットワーク接続処理
  wifiConnect();    // Wi-Fi接続実行関数呼び出し
  serverSetting();  // サーバー設定

  // 液晶画面シリアルモニタ表示領域
  M5.Lcd.fillRect(0, 0, 128, 17, WHITE);  // 塗りつぶし四角
  M5.Lcd.setTextFont(2);                  // フォント
  M5.Lcd.setCursor(10, 1);                // 表示開始位置左上角（X,Y）
  M5.Lcd.setTextColor(DARKGREY);          // 文字色
  M5.Lcd.print("SERIAL MONITOR");         // シリアルモニタ項目表示

  M5.Lcd.drawFastHLine(0, 51, 128, WHITE);  // 指定座標から平行線（x, y, l, 色）
  M5.Lcd.drawFastHLine(0, 81, 128, WHITE);  // 指定座標から平行線（x, y, l, 色）
  onOffChange();  // ON/OFF状態処理関数呼び出し

  // 出力設定
  pinMode(OUTPUT_PIN0, OUTPUT);   // 外部出力
  digitalWrite(OUTPUT_PIN0, LOW); // 出力初期化
  // アナログ入力設定
  pinMode(ADC_PIN0, ANALOG); //アナログ入力
}

// メイン *********************************************************---
void loop() {
  server.handleClient();  // クライアントからのサーバーアクセス処理
  M5.update();            // ボタン状態更新
  // 液晶画面上のシリアルモニタ受信、表示処理
  if (Serial.available()) {              // USBシリアルデータ受信で
    String str = "";                     // 受信文字列格納用
    while(Serial.available()) {          // 受信データがある間実行
      str = str + (char)Serial.read();   // 1文字づつ文字列に結合
    }
    M5.Lcd.fillRect(0, 0, 128, 17, WHITE);  // 塗り潰し四角
    M5.Lcd.setTextFont(2);                  // フォント
    M5.Lcd.setTextColor(BLACK);             // 文字色、背景
    M5.Lcd.setCursor(10, 1);                // 座標指定(x, y) 
    M5.Lcd.print(str);                      // 受信データ液晶表示
  }
  // 本体スイッチ処理
  if (M5.BtnA.wasPressed()) { // ボタンが押されていれば
    state = !state;           // ON/OFF状態反転
    onOffChange();            // ON/OFF状態処理関数呼び出し
  } 
  // アナログ入力処理
  adc = 4095 - analogRead(ADC_PIN0);  // アナログ変換値（0～4095）取得
  volt = (3.3 / 4095) * adc;          // アナログ電圧（0～3.3V）換算
  M5.Lcd.setTextFont(4);              // フォント
  M5.Lcd.setTextColor(M5.Lcd.color565(0, 128, 255), BLACK);     // 文字色変更
  M5.Lcd.setCursor(10, 84);           // 表示開始位置左上角（X,Y）
  M5.Lcd.printf("AD = %04d\n   V  = %4.2fv\n", (int)adc, volt); // AD= A/D変換データ　V= 電圧換算値

  delay(100); // 遅延時間
}

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AtomS3 REMOTE-Switch</title>
    <style>
      body{font-family: sans-serif; background-color: #213447; max-width: 480px; margin: 0 auto; align-items: center;}
      h1 {color:#ffffff; text-align: center; font-size: 28px; margin: 10px auto;}
      div {display: flex; flex-direction: row; justify-content: center;}
      .btn {height: 70px; width: 100px; color: rgb(44, 43, 43); background-color: #dddde9; font-size: 18px; font-weight: bold; border-radius: 7%; margin: 0 10px; -webkit-appearance: none;}
      .btn_on {background-color: rgb(0, 255, 208);}
    </style>
  </head>
  <body>
    <h1>AtomS3 CONTROLLER</h1>
    <div>
      <input type="text" id="ipAddress" value="IPアドレスを入力" onclick="selectAll()">
    </div>
    <br>
    <div>
      <button class="btn" id="btn">ON/OFF</button>
    </div>
  </body>

  <script type="text/javascript">
    let btn;  // ボタン要素取得用
    // ボタンON処理
    const btnOn = () => {
      btn.classList.add('btn_on');    // ボタン色変更
      getBtnOn();                     // ボタンON処理（fetch）呼び出し
    }
    // ボタンOFF処理
    const btnOff = () => {
      btn.classList.remove('btn_on'); // ボタン色を戻す
    }
    // ボタンイベント設定
    btn = document.getElementById('btn');
    btn.addEventListener('touchstart', (e) => {
      e.preventDefault();
      btnOn();
    });
    btn.addEventListener('mousedown', () => {
      btnOn();
    });
    btn.addEventListener('touchend', () => {
      btnOff();
    });
    btn.addEventListener('mouseup', () => {
      btnOff();
    });
    // fetchでURLへアクセス
    async function getBtnOn() {
      let ip = document.getElementById("ipAddress").value;  // IPアドレス取得
      await fetch("http://" + ip + ":80/atom")
        .then((response) => {
          if (response.ok) {
            return response.text();
          } else { throw new Error(); }
        })
        .then((text) => { console.log(text) })
        .catch((error) => console.log(error));
    }
    // テキストボックス内容クリックで全選択
    function selectAll() {
      document.getElementById("ipAddress").select();
    }
  </script>
</html>