無線ブログ集
| メイン | 簡易ヘッドライン |
jl7gmnのblog
(2024/7/3 7:06:06)
ESP32DevKitCでのカラーグラフィックSメータその３
(2023/7/30 2:56:08)
前のSメータはラインの描画コマンドによる線でのSメータの針でした。太くしようとしても、画面の端ではうまく均一に太さが表示されないため、１本のラインのSメータとしていました。ESPのサンプルのSメータでも同じで、太くする処理がされていましたが、TFT上の位置によって太さが変わるのはいただけません。ということで、針をグラフィック画像で作成し対応してみることにしました。針の太さの事が気にならないSメータの検討を開始しました。今回このSメータで使用するのは、スプライト処理ですが、最初の描画ラインでも一部<TFT_eSPI.h>および、<SPI.h>ライブラリを使ったスプライト処理でした。がネットで調べてゆくと、最近のスプライト処理は＜LovyanGFX.h＞ライブラリを使うのが主流のようです。処理スピードも改善されている云々とありましたので、このライブラリをSメータのスプライト処理でためしに使ってみることにしました。
最初にやることはArduino IDE 2.1.1（最新にしました。）にライブラリをインストールです。この処理は他のWebページにお任せして、要点は、自分のTFT液晶の型番に合わせたTFT用のライブラリを設定し作成する必要があります。私のTFTは1.8inch（128x160ピクセル）で型はST7735Sです。
このやり方もこの元のライブラリファイル内にファイル名作成についてとかも記載あります。私は設定したファイルのファイル名を "LGFX_ESP32_ST7735.hpp"として用意しました。作成したら動作確認として、サンプルプログラムが動作し、TFTに表示されるかを確認しておきます。問題なければLovyanGFX.hpp と一緒に今後TFTのST7735S専用ライブラリとして利用してゆけます。
おまけ：なお、LovyanGFXサンプルスケッチでは次の定義はコメント化または、削除する必要があリました。
最初にスケッチ上にライブラリとしてインストールした＜LovyanGFX.hpp＞ライブラリをインクルードします。
最初にやることはArduino IDE 2.1.1（最新にしました。）にライブラリをインストールです。この処理は他のWebページにお任せして、要点は、自分のTFT液晶の型番に合わせたTFT用のライブラリを設定し作成する必要があります。私のTFTは1.8inch（128x160ピクセル）で型はST7735Sです。
このやり方もこの元のライブラリファイル内にファイル名作成についてとかも記載あります。私は設定したファイルのファイル名を "LGFX_ESP32_ST7735.hpp"として用意しました。作成したら動作確認として、サンプルプログラムが動作し、TFTに表示されるかを確認しておきます。問題なければLovyanGFX.hpp と一緒に今後TFTのST7735S専用ライブラリとして利用してゆけます。
おまけ：なお、LovyanGFXサンプルスケッチでは次の定義はコメント化または、削除する必要があリました。
//#define LGFX_AUTODETECT
最初にスケッチ上にライブラリとしてインストールした＜LovyanGFX.hpp＞ライブラリをインクルードします。
#include
<LovyanGFX.hpp>
次に設定してファイル名を付けて保存したTFT設定用のライブラリをインクルードします。
次に設定してファイル名を付けて保存したTFT設定用のライブラリをインクルードします。
#include "LGFX_ESP32_ST7735S.hpp"
TFT設定用のライブラリをインクルードします。上記を行いスケッチをしてゆきます。ネットには詳しくスプライトの使用方法があるので、練習してみるのもよいかと思います。自分のTFT用のライブラリをインクルードするのを忘れないことです。 "LGFX_ESP32_ST7735S.hpp"
作成のスケッチよりも使う画像のサイズをキチンと確認しておく必要があります。また、自分のTFT液晶のサイズもそうです。あとは手順通りにスケッチしてゆくのですが、初めてなので、何度も躓きましたが。何とか2日ぐらいで作成することができました。とにかく実際に試すことも含めいろいろとやってみることです。久々に新しいライブラリのコマンドで悩み、時々、”なんでうごかないの！” そして最後に落ち着くのは、基本に忠実にです。暗中模索はいけません。時間の浪費になるだけです。仕様通りにスケッチすることですべて解決します。特に動作しているサンプルスケッチをみて同じコマンドが使われてないかを含め、確認できる動作サンプルを見つけることも完成への近道かと思います。
【スケッチの概要】
Sメータの画像をLCDに取り込みスプライト処理の針の中心位置を needle.setPivotで決め、画面の回転表示をlcd.setRotation(1)と設定し最初にSメータ画像を（０，０）のポジションに取り込みます。
次にはスプライトのバッファ確保のneedle.setBuffer((void*)hari,2,100,16); とし セットアップ終了し
次のvoid loop()につなげます。
Sメータへの直流電圧をESP32DevKitCのポート32にから取り込みしA/D変換しその値をmap関数で角度へ変換します。ここでSメータの指針のセットを行います。入力には半固定を用いて、電圧値を調整します。4095は最大時なので、入力電圧値で要調整します。最後にmap角度範囲にて微調整します。
// mapping to degree value
針を表示しますが、針の画像の位置関係よりlcd.setRotation(0);でSメータ画像にうまく位置が合うようにします。あとはスプライト処理での針をTFTへ表示させます。表示の際には元の針の画像データのサイズを拡大して表示しています。signalLevel,
2.0,2.85
で2.0は針の幅を2倍にしています。簡単に針の太さを変えることができます。2.85は針のサイズを中心位置から拡大（長さ）倍率値です。これも調整して設定しています。
表示は2つあげましたが、最初は画像のエッヂ処理なしです。あとはアンチエイリアス処理付きのコマンドでの表示です。アンチエイリアス処理ではエッジをきれいに処理し表示させることができる処理のようです。動作スピードと相談して設定が必要のようです。
■通常処理の場合
Sメータの元画像を縮小縮小で作成したため、荒くなってしまいました。あとできれいになるように工夫してSメータ画像データを用意したいと思います。
今回は＜LovyanGFX.hpp＞ライブラリを使った スプライト処理での画像データによるSメータ作成でした。
Twitterへも投稿したところ、ニュースで言っていた通りロゴⅩに変わっていました。
つづく？
TFT設定用のライブラリをインクルードします。上記を行いスケッチをしてゆきます。ネットには詳しくスプライトの使用方法があるので、練習してみるのもよいかと思います。自分のTFT用のライブラリをインクルードするのを忘れないことです。 "LGFX_ESP32_ST7735S.hpp"
作成のスケッチよりも使う画像のサイズをキチンと確認しておく必要があります。また、自分のTFT液晶のサイズもそうです。あとは手順通りにスケッチしてゆくのですが、初めてなので、何度も躓きましたが。何とか2日ぐらいで作成することができました。とにかく実際に試すことも含めいろいろとやってみることです。久々に新しいライブラリのコマンドで悩み、時々、”なんでうごかないの！” そして最後に落ち着くのは、基本に忠実にです。暗中模索はいけません。時間の浪費になるだけです。仕様通りにスケッチすることですべて解決します。特に動作しているサンプルスケッチをみて同じコマンドが使われてないかを含め、確認できる動作サンプルを見つけることも完成への近道かと思います。
【スケッチの概要】
Sメータの画像をLCDに取り込みスプライト処理の針の中心位置を needle.setPivotで決め、画面の回転表示をlcd.setRotation(1)と設定し最初にSメータ画像を（０，０）のポジションに取り込みます。
次にはスプライトのバッファ確保のneedle.setBuffer((void*)hari,2,100,16); とし セットアップ終了し
次のvoid loop()につなげます。
Sメータへの直流電圧をESP32DevKitCのポート32にから取り込みしA/D変換しその値をmap関数で角度へ変換します。ここでSメータの指針のセットを行います。入力には半固定を用いて、電圧値を調整します。4095は最大時なので、入力電圧値で要調整します。最後にmap角度範囲にて微調整します。
long d = 0 ;
//**************************************************
for ( int i= 0 ;i<avtimes;i++ ){
d += analogRead ( 32 ) ;
}
signalLevel = d/avtimes;
signalLevel = map ( signalLevel, 0 , 4095 , - 64 , 80 ) ;
//**************************************************
表示は2つあげましたが、最初は画像のエッヂ処理なしです。あとはアンチエイリアス処理付きのコマンドでの表示です。アンチエイリアス処理ではエッジをきれいに処理し表示させることができる処理のようです。動作スピードと相談して設定が必要のようです。
■通常処理の場合
needle . pushRotateZoom (
&lcd, ( imgWidth/ 1.55
) , ( imgHeight/ 1
) ,
signalLevel, 2 , 2.85 ) ;
signalLevel, 2 , 2.85 ) ;
■ アンチエイリアス処理の場合（処理が少し重くなるそうです。）
needle .
pushRotateZoomWithAA ( &lcd, ( imgWidth/ 1.55 ) , (
imgHeight/ 1 ) ,
signalLevel, 2.0 , 2.85 ) ;
signalLevel, 2.0 , 2.85 ) ;
今回は＜LovyanGFX.hpp＞ライブラリを使った スプライト処理での画像データによるSメータ作成でした。
Twitterへも投稿したところ、ニュースで言っていた通りロゴⅩに変わっていました。
つづく？
execution time : 0.020 sec