M5Stack

【M5Stack】本体に実装されているLEDの使い方を分かりやすく解説!【LED Bar】

m5stack-leds.jpg

<この記事について>

  • 「M5Stackの本体LEDを使う方法がよく分からない…」と悩んでいる人のために書きました。
  • この記事を読むことで、M5Stackの本体LEDを光らせる方法が分かります。
  • 結論としては、「ライブラリをインストール」→「プログラムを書いて実行」という手順でM5Stackの本体LEDを光らせることができます。

こんにちは!こんばんは!

ちゃとらです(・ω・)/

今回はM5Stack本体のLED制御についてですが、機種によってはLEDが搭載されていていない物もあります…。要注意!

M5StackのLEDはライトとして使えることはもちろん、何かのエフェクトやインパクトなどのサブ要素としても使用可能です。

ちゃとら

M5Stackの本体LEDを制御する方法について分かりやすく解説していきます!

今回扱うM5Stack

M5Stackの種類M5Stack FIRE(V2.6)
値段49.90ドル(税別)
(販売価格は7700円程 投稿日現在)
生産国中国
サイズ5.4 x 5.4 x 3.05 cm

M5Stack FIREを使っていきます。値段はだいたい7700円程です。

多くのM5StackにLEDが搭載されていますが、M5Stackの派生品であるM5StickCやM5PaperなどはLEDの制御方法が違ったりそもそもLEDが搭載されていない物もあります。

LEDについて

M5Stack FIREの本体LEDの位置・番号やLEDを制御するための関数について解説していきます。

LEDの位置・番号

M5Stack FIREにはLEDが10個搭載されていて番号は0から連番になっています。

LEDの位置と番号その1
↑M5Stack FIREの右側のLED
LEDの位置と番号その2
↑M5Stack FIREの左側のLED

M5Stack FIREと異なる機種のM5Stackでは、M5Stack FIREとLEDの数と番号が同じ物もあれば違う物もあるので注意です。

LEDを制御する関数

後述しますが「Adafruit_NeoPixel」というライブラリを使ってLEDを制御するので、これから紹介する関数は「Adafruit_NeoPixel」ライブラリ専用の関数です。

LED制御関数説明
setPixelColor(2, 255, 0, 0)番号0~2のLEDの色を赤に設定。
fill(0xFFFF)全てのLEDの色を0xFFFF(白)に設定。
clear()全てのLEDの色を無色に設定(色の設定を解除)。
show()全てのLEDを光らせる。色が設定されていないLEDは光らない。
setBrightness(100)LEDの明るさを100に設定。0(最小)~255(最大)の間で設定可能。
rainbow()全てのLEDを使って配色を虹色に設定。引数を渡すことで色を変えることも可能。

色の設定は、RGBそれぞれの数値か32ビットの数値どちらかを引数として渡すことで可能です。

他にも様々な関数がありますが、ここで全て紹介できないので気になる人は以下のリンクを参考にしてください。

使い方

以下の手順でM5Stackの本体LEDを光らせます。

  1. 「Adafruit_NeoPixel」ライブラリをインストールする
  2. プログラムを書いて実行する

ライブラリをインストールしてプログラムを記述するだけなのでかなり簡単です。

ここでは、M5Stackのセットアップ(Arduino IDE)は完了していること前提で解説していきます。

ちゃとら

M5Stackのセットアップ(Arduino IDE)がまだ完了していない人は以下の記事を参考にしてください!

m5stack-setup-arduino.png
【M5Stack】M5Stackのセットアップ(Arduino)を分かりやすく解説!【Arduino IDE】この記事では、M5Stackのセットアップ(Arduino IDE)について解説しています。手順としては、「USBドライバをインストール」→「ボードマネージャをインストール」→「ライブラリをインストール」→「プログラムを書いて実行」となっています。...

ライブラリをインストール

まずは、ライブラリをインストールをします。

今回は「Adafruit_NeoPixel.h」を使用するので、「Adafruit_NeoPixel」というライブラリをインストールします。

Arduino IDEを開き「ツール」→「ライブラリを管理…」を選択し、ライブラリマネージャで「Adafruit NeoPixel」と検索しライブラリをインストールしましょう。

枠内の右下に出てくる「インストール」ボタンをクリックすればインストールできます。

ライブラリのインストール
ライブラリの詳細リンク

https://github.com/adafruit/Adafruit_NeoPixel

プログラムを書いて実行

それでは、以下のプログラムをM5Stackに書き込んで本体LEDを光らせてみましょう!

#include <M5Stack.h>
#include <Adafruit_NeoPixel.h>

// M5Stack FIREのLEDの数
#define M5STACK_FIRE_NEO_NUM_LEDS 10
// M5Stack FIREのDatePin
#define M5STACK_FIRE_NEO_DATA_PIN 15

// LEDを制御するためのオブジェクトを生成
Adafruit_NeoPixel pixels = Adafruit_NeoPixel(M5STACK_FIRE_NEO_NUM_LEDS, M5STACK_FIRE_NEO_DATA_PIN, NEO_GRB + NEO_KHZ800);

void setup() 
{
  M5.begin();
  pixels.begin();  // NeoPixelの初期化

  M5.Lcd.setTextSize(3);
  M5.Lcd.setCursor(0, 30);
  M5.Lcd.printf("Press any button");
  M5.Lcd.setCursor(0, 120);
  M5.Lcd.printf("LED lights up!");
}

// 各ボタンを押すとLEDの色が設定され点灯する
// Aボタン長押しでLEDの色の設定が解除され消灯する
void loop() 
{
  M5.update();

  if(M5.BtnA.wasPressed())
  {
    pixels.clear();             // 全てのLEDの色の設定を解除
    pixels.setBrightness(255);  // LEDの明るさを255(最大)に設定
    pixels.fill(0xFFFF);        // 全てのLEDの色のを0xFFFF(白)に設定
  }
  if(M5.BtnB.wasPressed())
  {
    
    pixels.clear();
    pixels.setBrightness(100);  // LEDの明るさを100に設定
    // 0~4のLEDは赤、5~9のLEDは青に色を設定
    for(int i = 0; i < 10; i++)
    {
      if(i < 5) pixels.setPixelColor(i, 255, 0, 0);
      else      pixels.setPixelColor(i, 0, 0, 255);
    }
  }
  if(M5.BtnC.wasPressed())
  {
    pixels.clear();
    pixels.setBrightness(255);  // LEDの明るさを255(最大)に設定
    pixels.rainbow();           // 全てのLEDを使って配色を虹色に設定
  }
  if(M5.BtnA.pressedFor(1000))
  {
    pixels.clear();
  }
  
  pixels.show();  // 全てのLEDを光らせる
}

10行目で引数を設定してLEDを制御するためのオブジェクトを生成しています。LEDの数,DataPinの番号,ピクセルタイプを引数として渡していますが、ここは使うM5Stackによって若干違いがあります。

押すボタンによってLEDの光らせ方を変えています。ボタンについては以下の記事を参考にしてください。

m5stack-button.png
【M5Stack】本体に実装されているボタンの使い方を分かりやすく解説!この記事では、M5Stackのボタンを使う方法について解説しています。特に何かを設定する必要ありませんが、プログラムにupdate()とボタンを制御する関数を記述することが必須となります。...

プログラムを作成できたら、シリアルポートとボードの設定を忘れずに行いましょう。

「ツール」→「シリアルポート」でM5Stackが接続されているポート番号を選び、
「ツール」→「ボード」→「ESP32 Arduino」で「M5Stack-Core-ESP32」を選びましょう。

それぞれ設定ができたら、M5Stackにプログラムを書き込みます。

M5StackのLED点灯その1
M5StackのLED点灯その2
M5StackのLED点灯その3
M5StackのLED点灯その4

こんな感じでLEDが点灯します。なんか芸術的ィ…。

配色をいい感じに整えたり虹色にするとエモくなりますね!

スケッチ例にサンプルコードはありますが、LEDが点灯し続けてしまい他のプログラムを実行してもLEDが消えないんですよね…

スケッチ例のプログラムを実行するときは注意です。もしLEDが消えなくなってしまったらclear()とshow()を入れたプログラムを実行しましょう。

ちゃとら

時間差で光らせたり、一部のLEDを光らせることも可能です。

まとめ

M5Stackの本体LEDについて

  1. LEDはM5Stackの左右にいくつか搭載されているが、機種によってLEDの数や番号が若干異なる物もある。
  2. 「ライブラリをインストール」→「プログラムを作成して実行」というかなり簡単な手順でLEDを光らせることができる。
ちゃとら

一工夫入れたいときの処理としてはぴったりかも!

今回はここまでです。

ちゃとら(・ω・)/