「LovyanGFX」タグアーカイブ

ロボットの目の考察

すき 1
1

ソニーが開発中のエンタテインメントロボットpoiq (ポイック) のまばたきが
まるでメカシャッターが組み込まれているかのように動きが素晴らしいです。

 

個人的にロボットの目は自発光ではない方が良いと考えておりましたが、
poiqの目の表現には大変驚かされました。

黒いスモークのカバーの直下に立体的な構造の目が配置され、内部で目の位置が動いたりまばたきして様々な表情を見せてくれています。

恐らくまばたきはディスプレイの画と調光のみで表現されいるのであろうと思い検証してみました。

 

検証実験

poiqの目の動作の謎に迫るべく、円形ディスプレイに目の画を表示して可変抵抗でまばたき動作やバックライト調光できるようにいたしました。

 

円形ディスプレイはGC9A01を使用しESP32でコントロールしています。

 

目の淵の立体構造は薄い すり鉢状の治具を3Dプリントしました。
円形ディスプレイの淵の白色の反射材としての機能も期待しております。

実験

円形ディスプレイ上にすり鉢立体治具を載せて、さらにハーフミラーフィルムを貼ったプラ板をかぶせて実験してみました。

 

ディスプレイに黒まぶたを表示するだけではバックライトの光が漏れるので、バックライトの調光も重要であることに気づきました。

以下はまばたきとバックライト輝度を連動させたものです。


かなりpoiqのまばたき動作に近づけました。

考察

poiqの目のまばたき表現がディスプレイの画と調光のみで表現されていると仮定し、簡易環境での検証を進めました。

ディスプレイの画とバックライトの調光と立体治具でなかなか良いまばたき表現が実現されましたので、
仮定は大きくハズしてはないと考えます。

ここではハーフミラーフィルムを使用しましたが、poiqでの黒スモークカバーを用いて目を閉じた際に真っ暗になり目の機構自体が見えなくなることも重要な要素であるとわかりました。

すり鉢状の立体機構も観る方向で目の見え方が変わり、表現の幅を広げています。
本実験では立体治具をディスプレイの反射材としても利用しましたが、poiqの場合はLEDを内蔵している可能性もあります。

上記に加えてpoiqでは目の表示がアニメーションで動き、目の機構自体もカバー内部でグングン動くので更に表現の幅が拡がっているのです。

 

ディスプレイ表示

今回の検証をするにあたってディスプレイにまばたき表示をする必要があったのですが、ちょっとてこずったのでここに記録します。

単純に目とまぶたの黒を重ねて表示しようとするとチカチカしてしまいます。

 

目とまぶたを重ねた画を作ってからディスプレイに表示したいのですが、
今まできちんとディスプレイ表示について学習してこなかったので今回(泣く泣く)勉強しました。

スプライト描画

ディスプレイで絵を重ねた際のチカチカ改善にはスプライト描画なるモノが必要であるという知識はありました。

以前 M5Stack Core2での表示を作りこんだ際に画像のチカチカを @TobozoTagadaさんに修正してもらったことがありました。

この修正時にコードを読み込んでスプライト描画を自分でも理解すればよかったのですが、おかげさまで動いたからいいやと放っておいたツケがまわってきた次第です。。

 

ディスプレイ表示には LovyanGFX を用いて以下の記事を参考に勉強しました。

 

スプライト描画によって無事にまばたき表示ができました。


目の画像はjpegをバイナリでコードに取り込んでsprite2に描画して、sprite1に描画した60×60の黒四角を拡大してsprite2に重ねて描画します。
黒四角の上下の位置は可変抵抗の値で可変にしました。
最終的にsprite2をLCDに表示します。

これによって絵を重ねた際のチラつきはなくなります。
保持できるスプライト描画のメモリには限度があるようでまぶたの黒四角サイズを240×240にすると動作しなかったので拡大表示を利用しました。

この辺のメモリサイズのことも勉強必要ですが、今回はこれ以上詰め込むと頭が爆発しますので今度にします。

 

ESP32 3.5″ TFT Touch(Capacitive) with Camera の基本動作

0
0

またまたまたMakerfabs 様より素晴らしい製品たちを提供していただきました。

色々いただきましたので随時ここで紹介させていただきますが
今回は ESP32 3.5″ TFT Touch(Capacitive) with Camera を紹介させていただきます。

 

 

ESP32 3.5″ TFT Touch(Capacitive) with Camera

3.5インチのタッチパネルディスプレイにOV2640カメラがついて、コントローラにESP32-WROVERが採用されています。

 

タッチパネルでボタンを構築してカメラで画像を撮ったり、タッチペンで描画したりできます。
ESP32を使用していますのでWiFi介しての動画ストリーミングも可能です。

 

基本動作確認

サンプルコード Camera_v2 を試してみました。
マイクロSDカードをスロットに挿入して使用します。

Arduino IDEでの書き込みの際のボードはESP32 Wrover Moduleを選択します。

 
描画には らびやん さんの LovyanGFXが使用されています。

カメラの画像がリアルタイムで表示され、”TAKE PHOTO”タップでSDカードに画像が保存されます。

参考

 

おわりに

タッチパネル + 小型カメラ + ESP32は非常に多くの応用がありそうです。
ESP32-WROVERの使用方法を学習して自作の監視カメラなど製作してみたいです。

ESP32 3.5″ TFT Touch(Capacitive) with Cameraの応用と他にいただいた製品の紹介も引き続き弊ブログサイトにて記載いたしますのでよろしくお願いいたします!

MakePython ESP32 Color LCD で ESP32 ScreenShotReceiver を楽しむ

0
0

以前、ESP32_ScreenShotReceiverを用いてMakePython ESP32 Color LCD に動画をWiFiを介して転送を楽しみました。

MakePython ESP32 Color LCD で 動画をWiFi受信 ー ScreenShotReceiver ー

この度、開発者のらびやんさんよりESP32_ScreenShotReceiverの更新がアナウンスされましたので
変更点の確認をするとともに動画転送を楽しみました。

 
 

ESP32_ScreenShotReceiver更新内容

以前はLCDのSPI設定をTFT_eSPIライブラリに依存していたとのことですが
らびやんさんのグラフィックライブラリ LovyanGFXで設定できるようになりました。

また前回は高速化のためにESP32の設定バイナリファイル改造など実施しましたが、TFT_eSPI依存からの開放によって無改造で高速表示(80MHz)が可能となったとのことです。

ESP32_ScreenShotReceiverの使用方法

前回同様にMakePython ESP32 Color LCD でESP32_ScreenShotReceiverを試してみます。

以下のArduinoコードをダウンロードしてMakePython ESP32 Color LCDに書き込みます。
 https://github.com/lovyan03/ESP32_ScreenShotReceiver/tree/master/ScreenShotReceiver

 
グラフィックライブラリLovyanGFXも必要となりますので導入しておきます。
  https://github.com/lovyan03/LovyanGFX/    (ver. 0.1.14)

LCDディスプレイSPI設定

LCDディスプレイの設定はLovyanGFXのコンフィグで設定いたします。

M5StackやM5StickC、TTGO T-Watchなどはコンフィグファイルが既に用意されておりArduino IDEのボードマネージャで指定することにより自動でSPI設定されます。
 https://github.com/lovyan03/LovyanGFX/tree/master/src/config

 

MakePython ESP32 Color LCD用のコンフィグファイルはないので用意する必要があります。
ちなみにArduino IDEでのボードはESP32 Dev Moduleを指定しています。

 

LGFX_Config_Custom.hppをコピーしてESP32_ScreenShotReceiverスケッチ(ScreenShotReceiver.ino)のあるフォルダ内に保存してMakePython ESP32 Color LCD向けに編集します。

ScreenShotReceiver.inoで#include “LGFX_Config_Custom.hpp”追加で設定終了です。

動作

SmartConfigアプリでのESP32のWiFi設定や
Windows用 送信アプリScreenShotSenderの使用方法は前回記事を参照ください。

 

PCのyoutube動画画面 600×600を240×240にしてQuality60%で転送いたしました。
40fps以上達成できています。はやい!!

送信速度調査

ScreenShotSenderで送信元の画像サイズとQualityを変えて送信速度[fps]がどのように変化するか確認してみました。

送信元の画像サイズはYouTubeの画像サイズも変えておりますので送信先の画はほとんど変わらないようにしております。

元画\Quality 1 % 20 % 40 % 60 % 80 % 100 %
300×300 55 fps 50 fps 45 fps 40 fps 30 fps 15 fps
600×600 55 fps 50 fps 45 fps 40 fps 30 fps 15 fps
1000×1000 55 fps 50 fps 45 fps 40 fps 30 fps 15 fps

送信元の画像サイズの影響は小さいようでした。
Quality = 1 %ですと画が荒いので 60 %以上にはしたほうがよさそうです。

MakePython ESP32 Color LCD で 動画をWiFi受信 ー ScreenShotReceiver ー

0
0

前回は Makerfabs 様よりいただいたMakePython ESP32 Color LCD
ディスプレイにLovyanGFXライブラリをもちいてアニメーションを表示してみました。

Makerfabs製品を提供いただきました

せっかくESP32が搭載されておりますので、今回はWiFiでの動画の受信を試してみました。

 

 

ScreenShotReceiver

ここではらびあんさんのScreenShotReceiverを使用してWiFiでの動画受信を試しました。

凄いですよね。これ。。。

ScreenShotReceiverとは

“PCの画面をJPEGにしてTCPで送信し、M5Stack/ESP32で受信して表示”するアプリケーションです。

以下でWindows用送信アプリと受信Arduinoサンプルコードがダウンロードできます。
 https://github.com/lovyan03/ESP32_ScreenShotReceiver

受信Arduinoサンプルコード (ScreenShotReceiver)

以下のESP32向けのArduinoコードをダウンロードしてMakePython ESP32 Color LCDに書き込みます。
 https://github.com/lovyan03/ESP32_ScreenShotReceiver/tree/master/ScreenShotReceiver

 
以下のライブラリも必要となりますので導入しておきます。

 
MakePython ESP32 Color LCDに搭載されたカラーLCD ST7789 (240 × 240)向けに設定します。
SPI設定にはTFT_eSPIが利用されていますので、TFT_eSPIライブラリのUser_Setup.h ファイルを編集します。

 

起動

書き込みが完了し起動すると”WiFi接続を試行し、接続できない場合はSmartConfigが起動します。”

 

 

SmartConfig

SmartConfigとはESP32をWiFiのアクセスポイントとして、スマホからWiFi設定を実行する機能です。
Android用スマホアプリは以下でインストールできます。

 
SmartConfigアプリでWiFi設定しESP32をWiFi接続します。

 

接続が完了するとディスプレイにIPアドレスが表示されます。

 

参考

Windows用 送信アプリ (ScreenShotSender)

送信アプリ ScreenShotSender.exe を起動します。
設定ウィンドウと送信範囲指定ウィンドウが立ち上がります。

 

 
“画像の幅・高さ・画質の各パラメータとJPEG化する範囲が設定できます
受信側のIPアドレスを入力して接続すると、Windowsの画面の一部がLCDに表示されます。”

 

動作

 

画質クオリティ60%でFSP 28ほどで送信できています。
凄い!これは非常に便利。

あとMakePython ESP32 Color LCD に搭載されているカラーLCD ST7789の画像がきれい!視野角も広いし。

 

速度改善

らびあんさんより速度改善方法を教えていただきました。

   

~\Arduino15\packages\esp32\hardware\esp32\1.0.4\tools\sdk\lib\libdriver.a
内のの5A 62 02 を B4 C4 04にバイナリエディタで変更でSPI 80MHzが可能になるとのことでした。

 
上記修正を施して、User_Setup.h ファイルで
 #define SPI_FREQUENCY 27000000 → #define SPI_FREQUENCY 80000000
に変更して動作させてみました。

FPS 40以上で送受信できるようになりました!!

おわりに

らびあんさんの ScreenShotReceiver を使用させていただき、
MakePython ESP32 Color LCD で 動画をWiFi受信を楽しむことができました。

凄くサクサク受信・表示できて驚きました!
これはまたまたいろいろ応用ができそうで楽しみです 😛 

追記

ESP32_ScreenShotReceiver 更新 (2020/6/30)

ScreenShotReceiver に更新があり、LCD SPI設定がTFT_eSPI依存であったのを
らびやんさんのグラフィックライブラリ LovyanGFXで設定できるようになりました。

詳細は以下の記事を参照ください。

MakePython ESP32 Color LCD で ESP32 ScreenShotReceiver を楽しむ

MakePython ESP32 Color LCD で LovyanGFXを堪能

0
0

Makerfabs 様よりいただいたMakePython ESP32 Color LCDの
ディスプレイにLovyanGFXライブラリをもちいてアニメーションを表示してみました。

Makerfabs製品を提供いただきました

 

 

MakePython ESP32 Color LCD

240×240サイズのカラーLCD (ST7789)が搭載されたESP32マイコンです。
はじめからマイコン向けのPython環境であるMicroPythonでコーディングできるようになっています。

しかし、私はPythonよりArduino IDEのほうが親しみが深いので
ここではArduinoでコーディングいたします。

一度Arduinoで書き込むとMicroPythonで書き込みできなくなってしまいます。

再度 MicroPythonを使用する場合には、以下の手法でMicro Pythonのファームを
MakePython ESP32 Color LCDにアップロードしてください。
 FlashUpload MicroPython Firmware to ESP32

Party Parrot

MakePython ESP32 Color LCDに表示する画像はParty Parrotにいたしました。

 参考:Party Parrot とは 〜イカれたオウムの歴史を紐解く〜

 

以下の動画にインスパイアされましたw カワイイ♪

 
Party ParrotのGIFは10枚の絵で構成されており、
MakePython ESP32 Color LCDに表示するために240×240の10枚のjpegにして
バイナリの配列にして書き込みました。

バイナリエディタには FavBinEdit というソフトを使用しました。
 

LovyanGFX

LovyanGFX は、@lovyan03さんによって開発された高機能・高速動作グラフィックライブラリです。

Wio Terminal にひきつづきまして、今回もありがたく使用させていただきました!

Arduino IDEのライブラリマネージャより簡単に導入できます。

LovyanGFX SPI設定

LovyanGFXのSPI LCD向けサンプルコードを MakePython ESP32 Color LCD の構成、ピン接続に従って修正します。

 
LCD ST7789周りの構成

Arduino コード

 

pic.hは10枚の画像の配列です。

 

動作

なかなか激しく動いておりますww

実はここまでのスピードで表示させるまでに色々ございましたので以下に記します。
 

表示高速化への道

当初は動きがカクカクでしたが、LovyanGFXライブラリの開発者の @lovyan03さんに手取り足取り教えていただき
かなりのスピードアップが実現できました!

初期状態

setColorDepth(24) 追加

SPIクロックを80MHZへ

panel.freq_write = 20000000 → 80000000
panel.freq_fill = 27000000 → 80000000
に変更

どんどん早くなります!

画像圧縮

jpeg画像を更に圧縮してファイルサイズを1/3ほどにしてみました。

以下のサイトで画像の画質を落としてサイズダウンしました。
 https://resizer.myct.jp/index.php

絵は汚くなってしまいますが、高速動作は実現できました。

表示速度

10枚の画像を表示するまでの時間をまとめました。

  表示速度 [msec / 10フレーム]
初期状態 930
setColorDepth(24) 追加 676
SPIクロックを80MHZへ 492
画像圧縮 443

最終的には倍以上のスピードになったことになります。

奥深すぎる。。。助けがなければ絶対実現できなかったです。

 lovyanさん本当にありがとうございます!!

おわりに

さて これで MakePython ESP32 Color LCD に所望の画像を表示できるようになりました。

せっかくESP32が載っているのですから、次回は無線で画像を送って表示させてみたいです。

果たしてできるのであろうか。。。
次回を待て!

追記

LovyanGFX v0.1.9 更新 (20/5/22)

LovyanGFXライブラリがアップデートされ、examplesにPartyParrotが追加もされました。


 

PartyParrotサンプルをMakePython ESP32 Color LCDにも導入してみました。

信じられないくらい早くなりましたwww
8bit 128×96のビットマップをsprite描画なるものを施して
拡大表示しているとのことです。

Jpegデコード表示にくらべてこんなに差があるんですね。
笑えるレベルで早い!!!

 

Wio Terminal でカメラ画像を表示2 ー LovyanGFX 編 ー

0
0

前回はAIカメラのUnitVの撮影画像をビットマップで Wio Terminalに送信して表示しました。

UnitV で画像シリアル転送の味見 ーエッジAI活用への道 12ー

メモリ不足のためビットアップでは160×120サイズでの表示にとどまりましたが、
今回LovyanGFXライブラリを使用させていただきJPEGでの画像取得・表示が可能となり、
全画面表示(320×240)できましたのでご報告します。

 

 

UnitV用 MaixPy IDEコード

UnitVでの撮影画像(QVGA: 320×240)をJPEGに圧縮(圧縮率 50%)してUART送信します。

転送ボーレートは1152000にしました。
35ピンから画像ビットマップデータを送信しています。

Wio Terminal接続

前回と同様に、UnitVをWio Terminalの裏面40ピンヘッダの5Vとシリアル受信ピン(Serial1)に接続しました。

 

 

LovyanGFX ライブラリ

LovyanGFX は、@lovyan03さんによって開発された高機能・高速動作グラフィックライブラリです。

JPEG表示機能 も兼ね備えており、今回ありがたく使用させていただきました。
 

Arduino IDEのライブラリマネージャより簡単に導入できます。

Wio Terminal Arduinoコード

裏面のシリアルピン(Serial1)でUnitVからのJPEG画像データを受信します。

LovyanGFXのdrawJpg()でJPEG画像をWio TerminalのLCDに表示しています。

 

参考

 

動作

 

JPEG送受信&表示でカメラ画像をWio TerminalのLCDディスプレイ前面に表示することができました!!