jl7gmnのblog

yahooブログから移行してきました。アマチュア無線を中心としたブログです。

ESP32 DevKitC

ESP32DevKitCでのカラーグラフィックSメータその6

Sメータの画像表示で使用したLovyanGFXライブラリでの画像データを直接TFT液晶に書き込み表示するやり方とスプライト画面に書き込んでから表示する方法をまとめてみました。

■オフラインスプライトcanvasに書き込む方法

//#define LGFX_AUTODETECT //no need this one
#include <LovyanGFX.hpp>
#include "LGFX_ESP32_ST7735S.hpp" // add needing
#include "smeter.h"
#include "needle.h"

static LGFX lcd;
static LGFX_Sprite canvas(&lcd); // off screen draw buffer
static LGFX_Sprite smeter(&canvas);// myBitmap (128x160)
static LGFX_Sprite needle(&canvas);// hari     (5x100)

const uint16_t imgWidth = 128;
const uint16_t imgHeight = 160;

uint16_t signalLevel;  //角度に変換するのA/D値(0から4095)
uint16_t avtimes = 16 ;   //16 analoginput avaraging times

#define SW_TX  32                // A/D port 32   original sketch D0

void setup() {
  pinMode(SW_TX,INPUT);          

  lcd.init();
  lcd.setColorDepth(16);
  lcd.setSwapBytes(true);

  smeter.setColorDepth(16);
  needle.setColorDepth(16);

  canvas.fillScreen(TFT_WHITE); 
  canvas.setPivot(lcd.width() >>1,lcd.height() >>1);
  canvas.setColorDepth(16);
  canvas.setSwapBytes(true);
  canvas.setRotation(1);
  canvas.setBuffer((void*)myBitmap,128,160,16);
  canvas.createSprite(lcd.width(),lcd.height());
  canvas.pushImage(0,0,128,168,myBitmap);
  canvas.pushSprite(0,0);

  needle.createSprite(5,100);
  needle.setPivot((imgWidth/2),(imgHeight/3));
  needle.setBuffer((void*)hari,5,100,16);
  
}
void loop() {
 
    long d = 0 ;
  //*********************************************************
  // averaging settingtimes avtimes now setting 16
    for(int i=0;i<avtimes;i++){
      d += analogRead(32);
    }
    signalLevel = d/avtimes;

   Serial.println(signalLevel);
   //********************************************************

   //********************************************************
   // mapping to degree value
    signalLevel = map(signalLevel, 0, 4095, -64 , 80);
   //********************************************************
    
   //****************************************************************************************
 //エイリアス処理なし
   //needle.pushRotateZoom(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,1.0,2.8);
   //エイリアス処理あり
    needle.pushRotateZoomWithAA(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,1.0,2.8);
   // needleスプライト表示 
    needle.pushSprite(imgWidth/1.55,imgHeight/1); 
   //****************************************************************************************
    delay(200); //needle 表示時間調整用
   //スプライト書き込みしたcanvasを表示
   canvas.pushSprite(0,0);
   delay(1);

}

■直接lcdに画像データを書き込む方法
//#define LGFX_AUTODETECT //no need this one
#include <LovyanGFX.hpp>
#include "LGFX_ESP32_ST7735S.hpp" // add needing
#include "smeter.h"
#include "needle.h"

static LGFX lcd;
static LGFX_Sprite smeter(&lcd);// myBitmap (113x160) (128x160)
static LGFX_Sprite needle(&lcd);// hari     (5x100)

const uint16_t imgWidth = 128;
const uint16_t imgHeight = 160;

uint16_t signalLevel;  //角度に変換するのA/D値(0から4095)
uint16_t avtimes = 16 ;   //16 analoginput avaraging times

#define SW_TX  32                // A/D port 32   original sketch D0

void setup() {
  pinMode(SW_TX,INPUT);          

  lcd.init();
  lcd.setColorDepth(16);
  lcd.setSwapBytes(true);

  smeter.setColorDepth(16);
  needle.setColorDepth(16);
   
  lcd.setRotation(1); //角度設定1
  lcd.pushImage(0,0,128,160,myBitmap); //指針表示
  lcd.setRotation(0);   //角度設定0に戻す 指針の位置設定に合わせる
  lcd.pushImage((imgWidth/1.6),(imgHeight/7),5,100,hari);
   
  needle.createSprite(5,100);
  needle.setPivot((imgWidth/2),(imgHeight/3));
  needle.setBuffer((void*)hari,5,100,16);
  
}
void loop() {

    long d = 0 ;
  //**************************************************
  // averaging 100times
    for(int i=0;i<avtimes;i++){
      d += analogRead(32);
    }
    signalLevel = d/avtimes;
  Serial.println(signalLevel);
  
  //*********************************************************
  // mapping to degree value
    signalLevel = map(signalLevel, 0, 4095, -64 , 80);
  //*********************************************************
 
  //******************************************************************************************************
  //エイリアス処理なし
  //needle.pushRotateZoom(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,1.0,2.8);
  //エイリアス処理あり
    needle.pushRotateZoomWithAA(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,1.0,2.8);
    
    needle.pushSprite(imgWidth/1.55,imgHeight/1); //指針スプライト表示
  //******************************************************************************************************
    delay(200);//needle 表示時間調整用

    lcd.setRotation(1); //角度設定1
    lcd.pushImage(0,0,128,160,myBitmap); // Sメータ画像表示
    lcd.setRotation(0); //角度設定0に戻す。指針の位置表示に合わせる

   delay(1);
}

直接lcdに書き込む方法とオフラインバッファ画面に書き込んでから表示するのと同じ動作ですが、指針表示時間調整のディレータイムの値設定にもよると思いますが、若干ですが、lcd直接書き込みのほうがチラつきが少ないように思えます。これは、実際に動作させてみて、良いほうを使うのが常道のようです。必ずしも、オフラインで画像書き込みしたのを表示するスプライト処理がチラつきがないとは言えないこともあるようです。(書き込みの画像データ量も関係あるかと思います。)

いずれにしても、スプライト処理は画像のみならず、文字でも同様に処理できますので、覚えておいてよい表示方法かと思います。

つづく?

ESP32DevKitCでのカラーグラフィックSメータその5

気が向いたので、Sメータのパネルを最初から作り直してみました。
画像編集用のアプリは例のごとく、Inkscape とWindows10のペイントアプリ、そして、画像変換アプリの LCD-Image-Converterです。

Inkscapeはレイヤー処理で重ねる順番も自由に設定できるので、パネルの赤塗処理はとても簡単にきれいに作成できます。他、文字はコピーで、単に文字を書き換えて作成が簡単です。前のSメータパネルで一番気になっていたのは文字盤の目盛りと針の重なった時の一致していないことでした。今回はほぼ指針と重なるようにできましたので、すっきりしました。

■Inkscapeで作成したSメータパネル
できるだけ大きなページサイズで作成しておきます。サイズ変更はペイントアプリが便利です。
幅:1000px 、 高さ:680px
エクスポートで名前を適当に決めて、jpegで保存します。

inkscape-smeter


■ペイントアプリで編集します。
最初にサイズを目的の128x160pcになるように横の160pcは固定で縦の128pcになるように下側のページ位置を下げたり上げたりして変換値を確認し丁度128x160のサイズになったら変換します。
ESPのスケッチでは画像を左に90度回転しての取り込み仕様なので、ペイントで左回転90度で下記の画像にしてjpegで保管です。


paint-smeter-size-rotate

■ESP32DevKitC用の取り込みデータ用に変換するLCD-Image-Conveterで変換します。

LCD-image-converter-main

OptionでPreviewしデータを確認します。右側のデータをすべてを選択し、コピーしてESP32DevKitCのSメータスケッチのSメータ用データ取り込みファイルにコピー貼り付けします。
LCD-image-converter

■ESP32DevKitCのSメータスケッチをコンパイルしてTFT液晶に表示されることを確認します。出来上がったのが下記の画像です。
Homebrew1

Homebrew2


前のSメータパネルより、インジケータ指針とSメータパネルの目盛りのバランスはよくなったと思います。目盛りとインジケータ指針の重なりもうまく一致してバランスの悪かった違和感がなくなり見やすくなったと思います。粗削りの要素多く、まだいろいろと問題があるかと思いますが、最初から作成したのは今回が初めてなので、次の作成時はもっと、よくできるかと! ただ、デザインやスケッチのセンスが、かなり影響がでるので、私の場合は、もしかしたらこの程度が限界かもしれません。Hi !


ついでに動画も取りました。カメラを手で持ってるので、フォーカスとブレがありますが、まずまず動作は確認できると思います。



既存の画像を利用してうまく加工できればいいのですが、やはり、納得のいくものは、自分で作成するのが一番です。
LovyanGFXライブラリではSPIライブラリ(従来のスプライト処理)を継承し、たくさんのコマンドが用意されています。その中のコマンドでで指針の元画像を拡大、伸長できる調整パラメータがあるので、あとからでも指針のバランス調整が自由にできます。

通常表示
needle.pushRotateZoom(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,2.3,2.8);
OR
アンチエイリアス付き回転と拡大縮小
needle.pushRotateZoomWithAA(&lcd,(imgWidth/1.55),(imgHeight/1),signalLevel,2.3,2.8);

目盛り版としての画像データは作り直しでないとできませんが!
LCD-image-Converterは各種のTFT液晶のサイズも対応しているので、もう一回りサイズの大きなTFT液晶を用意すれば、既存の受信機のSメータをデジタル式に入れ替えできますね。指針のカラーや、目盛り装飾などアイデア次第で、自由に目盛り版も作成できるので、楽しく自作できるデジタル式Sメータとしてアマチュア無線家の醍醐味の一つにもなると思います。Hi !

つづく?

ESP32DevKitCでのカラーグラフィックSメータその4

カラーグラフィック画像を使ったSメータをLovyanGFXライブラリのスプライト機能を使い作成しましたが、元のSメータ画像の目盛りの赤色が青色で表示されてしまっていました。この青色となってしまう原因を探ってみました。
青色の目盛りカラー写真を撮るのを忘れたので、先の動画で青色の情報確認です。



元の画像ではSで9から上は赤色で塗られています。この画像の変換データが現状のSメータの画像表示では青色で表示されてしまっています。

signal.bmp_Image

Lang-ship

上記リンクのなかのLovyanGFXとは?には、AdafruitGFXやTFT_eSPIと一定の互換性をもちつつカリカリにチューニングされているグラフィックライブラリです。とあります。

この色数に関してのLovyanGFXライブラリの使用上の注意ということで説明しているサイトです。
これに基づいて、実際に確認もしてみたいと思います。

やはり、ライブラリのインクルード状態だけでスプライトを使う上での初期設定がされていないための問題であることが、なんとなく原因であろうことがわかってきました。
基本デフォルトで16ビットの色数らしいのですが、設定したTFT、と各スプライト事に宣言をしていなかったのが色が正常ではなかった原因ではないかと思います。この確認のため、スケッチ上に色数の初期設定を追加してみることにしました。緑色文字が追加した色数の初期設定箇所です。

void setup() {
  pinMode(SW_TX,INPUT);          

  lcd.init();
  lcd.setColorDepth(16);
  lcd.setSwapBytes(true);
  smeter.setColorDepth(16);
  needle.setColorDepth(16);
(以下省略)

実際にコンパイルして動作させてみると、目盛り上の赤色部が正常な色で表示されました。

color16setting

LovyanGFXライブラリではTFTの色数の初期設定は必ず行う必要があるということです。合わせて、使用したスプライトも色数の初期設定をしておくと違った色で表示されてしまうことがなくなります。
ちなみに、今回使用したLovyanGFXライブラリは、先のJF3HZB uebo氏の新しいバージョンのVFOsys2_00では240x320のサイズにも他の種類のTFTの各ダイアル項目の任意設定用ファイル上でもインクルードして使用しているようです。前のVFOsysよりも、LovyanGFXライブラリやオリジナルのフォントなどを使うことでさらに動作スピードの向上となっていると思われます。

つづく?

続きを読む

ESP32DevKitCでのカラーグラフィックSメータその3

前のSメータはラインの描画コマンドによる線でのSメータの針でした。太くしようとしても、画面の端ではうまく均一に太さが表示されないため、1本のラインの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サンプルスケッチでは次の定義はコメント化または、削除する必要があリました。
//#define LGFX_AUTODETECT


最初にスケッチ上にライブラリとしてインストールした<LovyanGFX.hpp>ライブラリをインクルードします。

#include <LovyanGFX.hpp>

次に設定してファイル名を付けて保存したTFT設定用のライブラリをインクルードします。

#include "LGFX_ESP32_ST7735S.hpp"

TFT設定用のライブラリをインクルードします。上記を行いスケッチをしてゆきます。ネットには詳しくスプライトの使用方法があるので、練習してみるのもよいかと思います。自分のTFT用のライブラリをインクルードするのを忘れないことです。"LGFX_ESP32_ST7735S.hpp"

作成のスケッチよりも使う画像のサイズをキチンと確認しておく必要があります。また、自分のTFT液晶のサイズもそうです。あとは手順通りにスケッチしてゆくのですが、初めてなので、何度も躓きましたが。何とか2日ぐらいで作成することができました。とにかく実際に試すことも含めいろいろとやってみることです。久々に新しいライブラリのコマンドで悩み、時々、”なんでうごかないの!” そして最後に落ち着くのは、基本に忠実にです。暗中模索はいけません。時間の浪費になるだけです。仕様通りにスケッチすることですべて解決します。特に動作しているサンプルスケッチをみて同じコマンドが使われてないかを含め、確認できる動作サンプルを見つけることも完成への近道かと思います。
【スケッチの概要】
Sメータの画像をLCDに取り込みスプライト処理の針の中心位置を needle.setPivotで決め、画面の回転表示をlcd.setRotation(1)と設定し最初にSメータ画像を(0,0)のポジションに取り込みます。
次にはスプライトのバッファ確保の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;
   // mapping to degree value
  signalLevel = map(signalLevel, 0, 4095, -64 , 80);
  //**************************************************
 
針を表示しますが、針の画像の位置関係よりlcd.setRotation(0);でSメータ画像にうまく位置が合うようにします。あとはスプライト処理での針をTFTへ表示させます。表示の際には元の針の画像データのサイズを拡大して表示しています。signalLevel, 2.0,2.85 で2.0は針の幅を2倍にしています。簡単に針の太さを変えることができます。2.85は針のサイズを中心位置から拡大(長さ)倍率値です。これも調整して設定しています。

表示は2つあげましたが、最初は画像のエッヂ処理なしです。あとはアンチエイリアス処理付きのコマンドでの表示です。アンチエイリアス処理ではエッジをきれいに処理し表示させることができる処理のようです。動作スピードと相談して設定が必要のようです。

■通常処理の場合

needle.pushRotateZoom(&lcd,(imgWidth/1.55),(imgHeight/1),
signalLevel,2,2.85);

アンチエイリアス処理の場合(処理が少し重くなるそうです。)
needle.pushRotateZoomWithAA(&lcd,(imgWidth/1.55),(imgHeight/1),
signalLevel,2.0,2.85);

Sメータの元画像を縮小縮小で作成したため、荒くなってしまいました。あとできれいになるように工夫してSメータ画像データを用意したいと思います。



今回は<LovyanGFX.hpp>ライブラリを使ったスプライト処理での画像データによるSメータ作成でした。

Twitterへも投稿したところ、ニュースで言っていた通りロゴⅩに変わっていました。



つづく?



ESP32DevKitCでのカラーグラフィックSメータその2

カラーSメータの動作をファンクションSGを使い疑似シミュレーションしてみました。サイン波と波形整形した信号を2つ用意して、実際の信号の代わりにESP32のA/D入力ポートに入れての動作確認です。

【サイン波】一定のスピードで上がり下がりするSメータの画像動作確認です。


【サイン波整形信号】サイン波でのアタックリリースを調整して、口笛を吹いた時のようなSSB信号の動作のような信号になっていると思います。動画は少しマクロ設定での焦点調整が入り少しピンボケもありますが、指針動作時の画像のチラつきもないことが確認できました。


つづく?
アクセスカウンター
  • 今日:
  • 昨日:
  • 累計:

QRコード
QRコード
  • ライブドアブログ