ホーム >> 無線ブログ集 >> ESP32DevKitCでのカラーグラフィックSメータその6

無線ブログ集

  メイン  |  簡易ヘッドライン  

link jl7gmnのblog jl7gmnのblog (2024/7/3 7:06:06)

feed ESP32DevKitCでのカラーグラフィックSメータその6 (2023/8/6 13:35:39)
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直接書き込みのほうがチラつきが少ないように思えます。これは、実際に動作させてみて、良いほうを使うのが常道のようです。必ずしも、オフラインで画像書き込みしたのを表示するスプライト処理がチラつきがないとは言えないこともあるようです。(書き込みの画像データ量も関係あるかと思います。)

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

つづく?

execution time : 0.021 sec
サイト内検索

メインメニュー

ログイン
ユーザ名:

パスワード:



パスワード紛失


オンライン状況
103 人のユーザが現在オンラインです。 (46 人のユーザが 無線ブログ集 を参照しています。)

登録ユーザ: 0
ゲスト: 103

もっと...