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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65983/4011466f-781d-30fc-74c6-023c35341ba2.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` フォルダ内でターミナルのコマンド実行<br>
  `npm install`
- 同ターミナルで以下を実行して、（なにも反応が無いので、そのまま立ち上げたまま）<br>
  `node index.js`
- ブラウザから http://localhost:3001/screenshot.png にアクセスすると<br>
  画像の様なHello, World.画像が表示されます。
- 元のHTMLといえば<br>
  http://localhost:3001/view.html で確認できます。
- フォルダ内の `/web/view.html` を編集すると反映されます。

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

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

![8CC943CD-049F-401A-BF09-974EA9CCEABA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65983/72346856-da2d-57f2-56fc-c9a8e0c99321.jpeg)


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

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65983/dcc0d061-33d8-1bab-1633-98fd6f0b9735.png)

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

## M5Paper側に書き込むプログラム
 （Arduinoの書き込み方は既にご存じかと思いますので省略）

```c: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);` と宣言しないといけない。