携帯ドットマトリクス表示器「ドッター」

ドッターは、8x16ドットのLEDマトリクスをマイコンで制御するデバイスです。 ドット絵のアニメーションやスクロール時計の表示ができます。 表示データの作製には、マイコン特有のプログラミングやデータ書き込みといった作業は必要ありません。 制御用マイコンにはドットマトリクス作製用のWebアプリケーションを内蔵しており、スマホやタブレットのWebブラウザを使って表示用のデータを作成できます。

テーマの一つが、外部サービスに依存せずに、表示データを作成するシステム構成を実現することです。 外部のサービスに依存せず、WebサーバとWebアプリケーションを内蔵することで、将来的にサービス閉鎖といった影響で、デバイスが文鎮化する可能性を下げることができます。

WebアプリケーションはUIミドルウエアにRiot.jsを使用し、Javascriptで作製しました。node.js上でwebpackを使用して開発しています。 これは一般的なwebサービスの開発で使用されるツール群ですが、その成果物はM5Atom,StampS3内蔵のESP32上のRTOSとWebサーバでも動作させることができました。

Dotter is a device that controls an 8x16 dot LED matrix with a microcontroller. It can display pixel art animations and scrolling clocks. Creating display data does not require microcontroller-specific programming or data writing. The control microcontroller has a built-in web application for creating dot matrices, so you can create display data using a web browser on your smartphone or tablet.

One of the themes is to create a system configuration that creates display data without relying on external services. By incorporating a web server and web application without relying on external services, it is possible to reduce the possibility of the device becoming a bricked device due to the closure of a service in the future.

The web application was created in Javascript using Riot.js as the UI middleware. It was developed using webpack on node.js. These are tools used in general web service development, but the results were able to run on the RTOS and web server on the ESP32 built into the M5Atom and StampS3.

1. 本体

• M5StampS3 or M5Atom Lite/Matorix/S3/S3 Lite
• HT16K33A
• 8x8 LED Matorix x2
• GROVE I2C

2. Webインターフェース

• Javascript
• Riot.js
• webpack