0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

M5Paper Color を VS Code + PlatformIO + M5Unified で扱ったお試しのちょっとしたメモ

0
Last updated at Posted at 2026-08-06

以下でポストしていた内容に関するちょっとしたメモとなる記事です。

使っているデバイスは、以下のスイッチサイエンスさんのストアから入手した「M5Paper Color」です。

●M5Paper Color ESP32-S3搭載 電子ペーパー開発キット — スイッチサイエンス
 https://www.switch-science.com/products/11199

試した内容

試した環境

この内容を試した環境は、過去にも試して複数の記事を書いている「VS Code + PlatformIO + M5Unified の組み合わせ」です。

iniファイル・cppファイルの内容

今回、細かな手順などは省略します。

以下では、iniファイル・cppファイルの内容を掲載します。

platformio.ini の内容

今回用いた platformio.ini の内容は、以下の公式ページに掲載されているものをそのまま用いました。

●PaperColor
 https://docs.m5stack.com/en/core/PaperColor

2026-08-07_00-21-47.jpg

以下に、コピペ可能なものを掲載します。

[env:m5stack-papercolor]
platform = espressif32 @ 6.12.0
board = esp32s3box
framework = arduino
board_build.partitions = default_16MB.csv
board_upload.flash_size = 16MB
board_upload.maximum_size = 16777216
board_build.arduino.memory_type = qio_opi
monitor_speed = 115200
build_flags =
    -DESP32S3
    -DBOARD_HAS_PSRAM
    -DCORE_DEBUG_LEVEL=5
    -DARDUINO_USB_CDC_ON_BOOT=1
    -DARDUINO_USB_MODE=1
    
lib_deps =
    M5Unified = https://github.com/m5stack/M5Unified
    M5GFX = https://github.com/m5stack/M5GFX
    M5PM1 = https://github.com/m5stack/M5PM1 

main.cpp の内容

main.cpp として実装した内容は、以下のとおりです。

#include <M5Unified.h>

M5Canvas Canvas(&M5.Display);

static void drawBoldText(
    M5Canvas& canvas,
    const String& text,
    int32_t x,
    int32_t y,
    uint16_t color)
{
    canvas.setTextColor(color);

    canvas.drawString(text, x,     y);
    canvas.drawString(text, x + 1, y);
    canvas.drawString(text, x,     y + 1);
    canvas.drawString(text, x + 1, y + 1);
}

static void haltWithError(const char* message)
{
    Serial.println();
    Serial.print("[ERROR] ");
    Serial.println(message);

    while (true)
    {
        M5.update();
        delay(1000);
    }
}

static void drawPaperColorSample()
{
    const int32_t screenWidth  = M5.Display.width();
    const int32_t screenHeight = M5.Display.height();

    Serial.printf(
        "Display size: %ld x %ld\n",
        static_cast<long>(screenWidth),
        static_cast<long>(screenHeight)
    );

    if (screenWidth <= 0 || screenHeight <= 0)
    {
        haltWithError("PaperColor display was not detected.");
    }

    Canvas.setColorDepth(16);

    if (Canvas.createSprite(screenWidth, screenHeight) == nullptr)
    {
        haltWithError("Failed to allocate the full-screen canvas.");
    }

    Canvas.setTextWrap(false);
    Canvas.fillSprite(WHITE);

    // 上から、黄・赤・緑・青・黒・白の6本の帯を描画
    const uint16_t bandColors[] = {
        YELLOW,
        RED,
        GREEN,
        BLUE,
        BLACK,
        WHITE
    };

    constexpr int32_t bandCount = sizeof(bandColors) / sizeof(bandColors[0]);
    const int32_t bandHeight    = screenHeight / bandCount;

    for (int32_t i = 0; i < bandCount; ++i)
    {
        const int32_t y = i * bandHeight;

        const int32_t height =
            (i == bandCount - 1)
                ? screenHeight - y
                : bandHeight;

        Canvas.fillRect(
            0,
            y,
            screenWidth,
            height,
            bandColors[i]
        );
    }

    const int32_t whiteBandY      = (bandCount - 1) * bandHeight;
    const int32_t whiteBandHeight = screenHeight - whiteBandY;

    Canvas.setTextFont(4);
    Canvas.setTextSize(2);
    Canvas.setTextDatum(middle_left);
    Canvas.setTextColor(BLACK);

    const String textPaper = "PAPER";
    const String textColor = "COLOR";

    const int32_t gapWidth =
        Canvas.textWidth("   ");

    const int32_t totalTextWidth =
        Canvas.textWidth(textPaper)
        + gapWidth
        + Canvas.textWidth(textColor);

    const int32_t startX =
        (screenWidth - totalTextWidth) / 2;

    const int32_t textY =
        whiteBandY + (whiteBandHeight / 2);

    drawBoldText(
        Canvas,
        textPaper,
        startX,
        textY,
        BLACK
    );

    int32_t x =
        startX
        + Canvas.textWidth(textPaper)
        + gapWidth;

    const uint16_t colorTextColors[] = {
        RED,     // C
        YELLOW,  // O
        GREEN,   // L
        YELLOW,  // O
        BLUE     // R
    };

    for (size_t i = 0; i < textColor.length(); ++i)
    {
        const String character =
            textColor.substring(i, i + 1);

        drawBoldText(
            Canvas,
            character,
            x,
            textY,
            colorTextColors[i]
        );

        x += Canvas.textWidth(character);
    }

    Serial.println("Starting PaperColor refresh...");

    Canvas.pushSprite(0, 0);

    Serial.println("PaperColor refresh completed.");
}

void setup()
{
    Serial.begin(115200);
    delay(500);

    Serial.println();
    Serial.println("M5Paper Color sample starting...");

    auto config = M5.config();

    config.clear_display = false;

    M5.begin(config);

    M5.Display.setEpdMode(epd_mode_t::epd_quality);

    drawPaperColorSample();
}

void loop()
{
    M5.update();
    delay(100);
}

あとは、上記をビルドしてデバイスへ書き込めば、冒頭に示した表示が行われます。

その他

ダウンロードモード用の操作について

以下は、ダウンロードモードに関する公式ページの説明のメモです。

●PaperColor
 https://docs.m5stack.com/ja/core/PaperColor

2026-08-07_00-25-19.jpg

デバイスの電源ON/OFF の操作について

以下は、電源ON/OFF に関する公式ページの説明のメモです。

2026-08-07_00-27-34.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?