Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

M5Paperでウェブサイトを表示する node.js 版

はじめに

※こちらの件、pngの読み込みの不安定さの問題が発生しており、まだ解決できておりませんので注意です。2回取得という力業な対策はあるにはありますが、安定を求めるなら、以前(↓)の記事をご参照ください。

以前、こういった記事を書きました。
https://qiita.com/RAWSEQ/items/9467c4194849cfa548b4

その後APIドキュメント等参考にふと試して気づいた事といえば・・
https://docs.m5stack.com/en/api/m5paper/epd_canvas

  • .pngファイル読めるじゃん!(時間かかるけど)という事はImageMagic変換必要なし。
  • 画像を回転する必要ないじゃん!(むしろM5Paperとしては横型がデフォまである)

結論:Node.js(Puppeteer)で十分!!

59DC5F2A-9A6D-407C-BDAE-3FCE8DE03A26.jpeg

となりました。という事で・・・

M5Paper-WebServiceなるものを用意しました!!
https://github.com/RAWSEQ/m5paper-webservice

Windows Mac Linux 対応しています(多分)

|【常時稼働しているPC,サーバー】
|(Webデザイン)             |
| ↓                        |
|(画像変換(screenshot.png))| ===> (WIFI) ===> M5Paper
-----------------------------

常時稼働のPCが必要です。
構造としてはPCにてNode.js内で元の Webデザインとなるhtml,css,js用のWebサービス を立ち上げ、
更に、(screenshot.png)にアクセスすると Webデザインを画像変換して提供する ようになっています。

何故M5Paperに処理を委ねないのかという疑問があると思いますが、主に以下の点において有利です

  • デザインが自由にできるから
  • M5Paperをシンクライアントとするので電池長持ちになる(数日どころでなく数カ月単位)

インストール・使い方

  • Node.js環境が無ければインストールします。(最新で問題ない)
  • Githubから git や zip でダウンロードして展開します。
  • 展開した /m5paper-webservice フォルダ内でターミナルのコマンド実行
    npm install
  • 同ターミナルで以下を実行して、(なにも反応が無いので、そのまま立ち上げたまま)
    node index.js
  • ブラウザから http://localhost:3001/screenshot.png にアクセスすると
    画像の様なHello, World.画像が表示されます。
  • 元のHTMLといえば
    http://localhost:3001/view.html で確認できます。
  • フォルダ内の /web/view.html を編集すると反映されます。

※ M5Paperから参照できるように、設定したポート3001はローカル(プライベート)ネットワークからアクセスできるようにポート開放する必要があります。

  • 更に指定によっては外部サイトも表示可能
    例) http://localhost:3001/screenshot.png?url=https://www.yahoo.co.jp/
    なので、[url]パラメータの部分をよろしく遊ばせたら、ファーストビュー閲覧限定のウェブブラウザもどきが完成するという・・(外部ページを閲覧する場合はネット環境(表示速度)によって失敗することがあります。こちらは調査中です)

8CC943CD-049F-401A-BF09-974EA9CCEABA.jpeg

(おまけ:http://localhost:3001/screenshot.png?url=http://localhost:3001/dash/index.html から例の日めくりも確認できます。フォントはフリーライセンスに切り替えた為、ひと狩り行きたくなる様な感じになってます)

screenshot.png

(RAWSEQ/m5paper-webservice)内の私が作った画像,HTML,CSS,JS類は再利用OK(MITライセンス)なのでデザインが得意でない方も自己の判断でご利用ください。

M5Paper側に書き込むプログラム

(Arduinoの書き込み方は既にご存じかと思いますので省略)

Arduino_sketch
#include <M5EPD.h>
#include <WiFi.h>

M5EPD_Canvas canvas(&M5.EPD);

# バッテリー残量表示関数
int Chk_battery()
{
  char buf[20];
  uint32_t vol = M5.getBatteryVoltage();
  if(vol < 3300)
    {
        vol = 3300;
    }
    else if(vol > 4350)
    {
        vol = 4350;
    }
    float battery = (float)(vol - 3300) / (float)(4350 - 3300);
    if(battery <= 0.01)
    {
        battery = 0.01;
    }
    if(battery > 1)
    {
        battery = 1;
    }
    //uint8_t px = battery * 25;
    sprintf(buf, "BATT%d%%", (int)(battery * 100));
    canvas.drawString(buf , 0, 0);

    return (int)(battery * 100);
}

# メインプログラム
void setup()
{
    M5.begin();
    # ↓こちらが画面の回転。引数を0 → 90とすると縦型になります
    M5.EPD.SetRotation(0); 
    M5.EPD.Clear(true);

    WiFi.begin("【WIFIのSSID】", "【WIFIのPassword】");

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    # キャンバスサイズ(横,縦)こちらも回転に応じて調整
    canvas.createCanvas(960, 540);
    canvas.setTextSize(3);
    canvas.drawPngUrl("http://【M5Paper-webserviceのIP】:3001/screenshot.png");
    Chk_battery();
    canvas.pushCanvas(0,0,UPDATE_MODE_GC16);
    # 10秒待つ。失敗する様であれば調整
    delay(10000);
    # 3時間おきに実行
    M5.shutdown(10800);

}

void loop()
{

}

M5Paperデバイス特性の注意:

  • USBにつながっている際はどんな事があろうとも常時電源ONの状態になります。
  • USBケーブルを抜いて再起動完了後、背面の白いボタンを1回押すと電源停止。(3時間後にまた起動) この状態で安定します。
  • 通常はサイドの黒いダイアルを3秒押し込むと再起動(起動周期の調整にも使えます)
  • 何かあったら、背面の白ボタン1回押す→サイドの黒いダイアルを3秒押し込みで何とかなると思います。

  • あと、M5.shutdown(10800); の記述は環境変数の設定の様なものなので、その後 M5.shutdown(); と宣言しても、電源停止しても永久に3時間後に再起動し続ける。完全停止したい場合は一度 M5.shutdown(0); と宣言しないといけない。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?