ESP32の静電容量タッチでフリック入力を実現してみた

この記事ははJLCPCBの提供でお送りします。

JLCPCBとは

jlcpcb.com (↑こちらは日本語版のログインページで、お得なクーポンも配布されています。)

JLCPCBとは、プリント基板製造などで有名な香港の企業です。

日本からでもWebページでポチポチするだけでKiCADなどで作成した基板データの製造を依頼できます。

値段もかなりお手頃で、ホビー電子工作ユーザーの間では広く利用されています。

この記事の作例もJLCPCBに基板を発注して実現しました。

ESP32の静電容量タッチ機能とフリック入力への応用

ESP32には静電容量タッチ機能が搭載されており、ESP-WROOM-32には10個のピンを静電容量タッチセンサーとして利用できます。

よくある作例としては、10個のパッドを搭載し、静電容量タッチでテンキーなどを作っているものがあります。

ピンが10個しかないので、10個のパッドしか用意できない、というのは、ある意味その通りなのですが、もっとたくさんの入力を得るための工夫の余地はいろいろあります。

今回はこれらの静電容量タッチセンサーの2つのピンの組み合わせを1つのスイッチのように扱うことで5×5=25個のスイッチとして扱うような基板をデザインしてみました。

静電容量タッチ周りの設計

静電容量タッチの基板を作る際は、通常の回路の設計よりも気にすべきことが多いです。 ぱっとわかりやすいところとしては、タッチ検知に関する配線を変に迂回させたり、高周波の信号線と平行に並べない、などという制限があったりします。

github.com

まぁ、すべてのルールを守って設計するのは、なかなか大変なので、今回はそこまで厳密にルールに従わず、静電容量タッチまわりの配線をなるべく迂回させずに配置する、程度にしています。

基板全体の設計

静電容量タッチ以外の部分については、なるべくシンプルになるように余計な機能をつけず、既存のモジュールを並べるだけの構成にしました。

  • ESP32-DevKitC用ピンヘッダ
    • 定番の開発ボード
  • 128x64のI2C接続のOLEDモジュール用ピンヘッダ
  • 128x128のSPI接続のTFT液晶モジュール用ピンヘッダ
    • 上記のOLEDとどちらかを利用できる
  • SDカードモジュール用ピンヘッダ
  • スピーカー接続用ピンヘッダ
  • 外部静電容量タッチセンサー用ピンヘッダ

Amazonのリンクだと以下のような部品を想定しています。

静電容量タッチのフットプリントのデザイン

静電容量タッチのフットプリントのデザインは、以前の300円テトリスのスイッチ部分と同じような方式で用意しました。

KiCADの自動生成ツールの「Mutualcap Touch Button」というツールを使います。 このツールで作成するフットプリントはソルダーレジストがついた状態のものですが、今回はタッチ部分はソルダーレジストなしに編集しました。

静電容量タッチのほかのボードを見るとソルダーレジストありの物を多く見かけるので、それでもおそらく動作すると思うのですが、電極が露出していた方が、より感度が高くなるのでは?という雑な考えの元このように変更してみました。 (結局比べていないので、どちらが良かったのかはまだ不明です。)

基板の発注

今回もJLCPCBに発注しました。基板サイズが10cm×10cm以内だったので、非常に安くで作ることが出来ました。 5枚発注だと送料を抜くと$2でした。送料も$1程度なので、ワンコイン以内ですね。

組み立て

今回は、モジュールを組み合わせるだけなので、組み立ては簡単です。 念のためソケットを介して各モジュールを実装しました。

動作確認とファームウェア開発

まずはI2C OLEDの動作確認をします。といってもこれは素直にESP32のI2Cのポートに取り付けただけなのでu8g2ライブラリを使えば、かんたん・・

と思っていたのですが、手元のOLEDが不良品だったようで妙に動作確認に手間取りました、まぁこれは本質と関係ないので割愛します。

u8g2ライブラリは日本語フォントにも対応しており、今回の用途にはぴったりでした。

github.com

次に静電容量タッチの動作確認をしたところ、どうもT1のポートが反応していないことに気が付きました。 詳しく確認してみると、このT1はGPIO0に使われているピンで、BOOTという起動時の動作を設定するためのピンでもあることがわかりました。 そのためESP32 DevkitCのモジュールでは自動リセットの回路の一部としてこのピンが利用されていました。

おそらくこの影響でT1が意図しない状況になっており、うまくタッチセンサーとして機能しない状況になっているようでした。

T1についてはあきらめてしまおうかと思っていたのですが、色々試行錯誤していると、どうもパソコンとのシリアル接続がつながっている状態だと、問題なく静電容量タッチが動作することに気付きました。

これは自動リセットにかかわるDTR、RTSの信号が、うまい具合にシリアル通信の際に設定されることで、T1のポートが静電容量タッチセンサーとしてうまく機能する状態になるようでした。

(おそらくシリアル通信中はRTSが大半の期間LOWとなるため、IO0がハイインピーダンスになるのではないかと思います。)

https://dl.espressif.com/dl/schematics/esp32_devkitc_v4-sch.pdf

上記PDFより

まぁ、こんな具合でこの基板は何とか動作しましたが、シリアル通信をしていないときはT1ポートが使えないのは、かなり問題なので、ESP32DevKitCなど、自動リセット回路を搭載している回路構成ではT1ポートを静電容量タッチセンサーとして使うのはお勧めしません。

タッチセンサーの入力はアナログ値として取り出せます。この値は絶対値ではなく、パッドの位置や環境によって毎回異なるもののようなので、起動時の初期値を覚えておいて、その値からの変化を見ることで、タッチを検出するのが定番のようです。

ここまでで、25個のキーのどこに触れたかを検出できるようになり、その結果をOLEDに表示できるようになりました。

25キーのキーパッドが作りたいだけなら、ここで完成です。

フリック入力のロジックの実装

25個のキーパッドの入力が検出できるようになったので、次は本命のフリック入力のロジックを実装します。

様々な実現方法がありますが、今回は比較的単純な実装とします。 それでも、ちょっと複雑なので、まずはフリック入力の状態遷移について考えました。

まずは、スワイプではなくタップについて考えます。これは、あるキーの入力が検知され、その後一定期間経過後にどのキーの入力も検出されなくなる、と定義できそうです。

一定期間待つのは、タップ開始中や、タップしている最中に静電容量センサーの状態が不規則にON/OFFされる、いわゆるチャタリング的な現象が発生するからです。

次にスワイプについてです。これはタップのような現象が短い間隔で2度連続して発生することと定義できそうです。厳密には2つの入力の間にどのパッドにも指が触れない瞬間があるか、続けて2つのキーが検出されるかは場合によるので、初回タップのリリースが検出されない場合もありそうです。

などと考えると、結構ややこしいです。

状態遷移図はこのような問題を考えるときに良い道具となります。

まだまだ改善点はありますが、現時点でのソースコードを公開しておきます。

github.com

フリック入力のデモ

そんなこんなで、一応フリック入力のプログラムが完成しました。 スマートフォンのようにスムーズに、というわけにはいかないですが、一応フリック入力でひらがなを入力できました。

現時点では実用は難しそうですが、ソフトウェア的に改良できる点は多いので、ESP32で少ない部品点数で日本語を入力する手法として可能性があると感じました。

さらなる改良案

今回は、キーの検出を静電容量タッチセンサーの値を2値化して、処理しましたが、アナログ値のままで、最も大きな値のものを選択するなどの実装にすると、スワイプの途中に少し隣のキーをかすってしまうような場合もうまく処理ができるようになるのではと考えています。

また、今回は5x5のキーパッドの形状に配線しましたが、X軸,Y軸に5本の細長いパッドを配置し、各パッドの検出値の重みを考慮して、タッチされたX,Y座標を計算するような方式の方が、より応用例の多いタッチセンサーになるかなと感じました。この方式であれば、ノートパソコンに搭載されているトラックパッドのような操作にも対応できそうです。(というかトラックパッド自体がそのような仕組みなのだと思いますが・・)

www.dush.co.jp

上記サイトより

まとめ

以下のことがわかりました

  • ESP32を使うと10個の静電容量タッチが利用できる
    • うちT1については自動書き込み回路の影響で、利用は推奨できない
    • タッチセンサーは部品なしにスイッチを作ることが出来るため、コスト削減にもつながる
  • 10個の静電容量タッチは、組み合わせることで、より多くのタッチ入力センサーとして利用できる
  • 5x5のタッチパッドの構成において、フリック入力が実装可能であること
    • ただし、ソフトウェアをもう少し工夫しないと実用的とはいいがたい
  • 静電容量タッチのアナログ値を利用することで、より精度の高いタッチセンサーの製作が可能であること

簡単な基板でしたが、多くのことを学ぶことが出来ました。 静電容量タッチの仕組みがなんとなく理解できたので、今後のガジェット作成で活用していきたいです。

最後に、この基板が数枚余っていますので、もしほしい人がいたら連絡ください。 (可能なら、ボツ基板交換的なノリで、何か自作の面白い基板と交換してもらえると嬉しいです。 私が提供できるボツ基板はこちらにまとめています。)