ESP32をJavascriptでLチカする：LCDとRTCデバイスを制御する

前回の投稿「ESP32をJavascriptでLチカする」に引き続き、ESP32でJavascriptを動かします。
今回は、M5StickCについているLCDとRTCを制御してデジタル時計を作ります。

ソースコードもろもろは、前回同様以下に上げてあります。
随時、修正、拡張しています。

poruruba/QuickJS_ESP32

#LCDを制御する

LCDの制御に、LovyanさんのLovyanGFXを使っています。
そのI/FをJavascriptから叩けるようにしています。

public/main.js

import * as lcd from "lcd";

今回デジタル時計で使っているAPIはざっと以下の通りです。

• lcd.width()
• lcd.height()
• lcd.setTextColor()
• lcd.setTextSize()
• lcd.setTextDatum()
• lcd.textWidth()
• lcd.setCursor()
• lcd.print()

見た目で想像できるものばかりかと思いますが、詳細は以下を参照してください。

さらに、以下のAPIを追加しています。

• lcd.downloadImage(url)
  　urlで示されるサーバの場所から、HTTP Getで画像ファイルをダウンロードし内部に保持します。

• lcd.drawImage(x, y)
  　LCDの(x、y)座標に、保持した画像を表示します。

M5StickCのLCDは160x80のサイズですので、あらかじめリサイズしたJPEG画像をサーバに配置しておきます。

#現在時刻を取得する

RTCから時刻を取得します。
WiFi接続時に、NTPと時刻合わせしてあります。

public/main.js

import * as rtc from "rtc";

• rtc.getDate()
  　現在の日付(Year、Month、Date、WeekDayを取得します。

• rtc.getTime()
  　現在の時間(Hours、 Minutes、Seconds)を取得します。

#デジタル時計を作る

ソースコードを示します。

public/main.js

import * as lcd from "lcd";
import * as rtc from "rtc";

var width, height;
var last_update = -1;
var last_minutes = -1;

async function setup() {
  var ipaddress = esp32.getIpAddress();
  console.log("ipaddress=" + ((ipaddress >> 24) & 0xff) + "." + ((ipaddress >> 16) & 0xff) + "." + ((ipaddress >> 8) & 0xff) + "." + (ipaddress & 0xff));

  lcd.downloadImage('http://【WebサーバのURL】/sky_160x80.jpg');

  width = lcd.width();
  height = lcd.height();

  lcd.setTextColor(0x0000ff);
  lcd.setTextSize(3.5);
  lcd.setTextDatum(lcd.middle_left);
}

function to2d(val) {
  return ('00' + val).slice(-2);
}

async function loop() {
  var now = millis();
  if (last_update < 0 || now - last_update >= 10000) {
    last_update = now;

    var time = rtc.getTime();
    if (last_minutes < 0 || time.Minutes != last_minutes) {
      last_minutes = time.Minutes;

      lcd.drawImage(0, 0);

      var str = to2d(time.Hours) + ':' + to2d(time.Minutes);
      console.log(str);

      lcd.setCursor((width - lcd.textWidth(str)) / 2, height / 2);
      lcd.print(str);
    }
  }
}

#終わりに

だいぶ楽に作れました。
また、再書き込みが不要なので修正も早いです。

以上