ST7735に液晶知識０からの画像表示　書き忘れｗ

「液晶知識0からの画像表示」とうたっているのに最終的なLovyanGFXでの画像表示プログラム書き忘れていました＾＾；
すんません＾＾；

まず、今までのブログを参考にSPIFFSにtest.jpgというjpegファイルをアップロードしてください。
ただ、jpegにも2種類あってプログレッシブとベースラインと有るそうなのですが、対応しているのはベースラインという種類の方です。こちらを参考にしてください。

とりあえず画像表示まで説明しますね。

①画像はwindowsのアクセサリーのペイントで大きさを加工します。他のソフトでも構いません。

まずは要らない部分などを調整して画像の加工をします。

②左上のサイズの変更をクリックして、ピクセルを選択後今回は横幅60にしました。

③あとはトリミングで要らない部分を削除して最終的に50ｘ56の大きさになりました。

#include <SPIFFS.h>
#include <LovyanGFX.hpp>
struct LGFX_Config
{
  static constexpr spi_host_device_t spi_host = VSPI_HOST;
  static constexpr int dma_channel = 1;
  static constexpr int spi_sclk = 18;
  static constexpr int spi_mosi = 23;
  static constexpr int spi_miso = -1;
  static constexpr int spi_dlen = 8;
};


static lgfx::LGFX_SPI<LGFX_Config> lcd;
static lgfx::Panel_ST7735S panel;


//=====================setup==========================================
void setup()
{
  panel.freq_write = 20000000;
  panel.freq_fill  = 27000000;
  panel.freq_read  = 16000000;
  
  panel.spi_mode = 0;
  panel.spi_mode_read = 0;

  panel.len_dummy_read_pixel = 8;

  panel.spi_read = true;
  panel.spi_3wire = false;

  panel.spi_cs = 14;
  panel.spi_dc = 27;
  panel.gpio_rst = 33;
  
  panel.gpio_bl  = 32;
  panel.pwm_ch_bl = 7;
  panel.backlight_level = true;
  
  panel.invert = true;
  panel.reverse_invert = true;
  panel.rgb_order = false;

  panel.memory_width  = 128;
  panel.memory_height = 160;
  panel.panel_width  = 80;
  panel.panel_height = 160;
  panel.offset_x =24;
  panel.offset_y = 0;

  panel.rotation = 0;
  panel.offset_rotation = 0;

  lcd.setPanel(&panel);
  
  SPIFFS.begin();
  
  lcd.init();
  
  lcd.setRotation(2);
  lcd.setColorDepth(24); 
  lcd.fillScreen(0);

//------------------------------------------------------

lcd.drawJpgFile(SPIFFS,"/test.jpg", 0, 0); 
}
//============================================================
void loop(void){
}

#include <SPIFFS.h>

#include <LovyanGFX.hpp>

struct LGFX_Config

{

static constexpr spi_host_device_t spi_host = VSPI_HOST;

static constexpr int dma_channel = 1;

static constexpr int spi_sclk = 18;

static constexpr int spi_mosi = 23;

static constexpr int spi_miso = -1;

static constexpr int spi_dlen = 8;

};

static lgfx::LGFX_SPI<LGFX_Config> lcd;

static lgfx::Panel_ST7735S panel;

//=====================setup==========================================

void setup()

{

panel.freq_write = 20000000;

panel.freq_fill = 27000000;

panel.freq_read = 16000000;

panel.spi_mode = 0;

panel.spi_mode_read = 0;

panel.len_dummy_read_pixel = 8;

panel.spi_read = true;

panel.spi_3wire = false;

panel.spi_cs = 14;

panel.spi_dc = 27;

panel.gpio_rst = 33;

panel.gpio_bl = 32;

panel.pwm_ch_bl = 7;

panel.backlight_level = true;

panel.invert = true;

panel.reverse_invert = true;

panel.rgb_order = false;

panel.memory_width = 128;

panel.memory_height = 160;

panel.panel_width = 80;

panel.panel_height = 160;

panel.offset_x =24;

panel.offset_y = 0;

panel.rotation = 0;

panel.offset_rotation = 0;

lcd.setPanel(&panel);

SPIFFS.begin();

lcd.init();

lcd.setRotation(2);

lcd.setColorDepth(24);

lcd.fillScreen(0);

//------------------------------------------------------

lcd.drawJpgFile(SPIFFS,"/test.jpg", 0, 0);

}

//============================================================

void loop(void){

}

ちなみに

lcd.drawJpgFile(SPIFFS,”/test.jpg”, 0, 0);が画像表示の関数で、

最後の0,0がｘ、ｙ座標を表します。この位置に画像の左上が来るように描画されますので、ここで画像位置の修正を行ってください。

こちらのサイトにはＳＤカードのファイルの描画方法とかも有りますので、ぜひ参考にしてください。

あと、このLovyanGFXではスプライトという物を扱えるのですが、その辺も先ほどのサイトのこちらや以前紹介したこちらのサイトにうまく説明されています。このスプライト私ではうまく説明できないのですが、これ分かると凄く色々な事が出来るようになります。画像をグリングリン回したり、スクロールさせたり思うままですｗ

とりあえずこれで「液晶知識0からの画像表示」はいったん終了ですね＾＾
次はVividさんのセールスに負けたｗ！「ちょっとついでに勉強　M5stack編」をしばし行いますｗ

10 comments

てつの より:

2020年11月10日 8:48 PM

いやあ～ふしぎなもんで見慣れてくるとなんとなくやってることが分かってくるような
気がしてます。僕にはできませんけどね！！
定義付けはわかるにしても、JPEGの拡張子だけで中身は別の場所に残ってるんでしょうかね？
まあほんとにいつ見ても凄いことばかりで尊敬します！！
VIvid より:

2020年11月10日 10:01 PM

こんばんは
このDrawJpeg関数は、たった１行で表示できるんですね！　これは勉強する価値があります。
コクピットも、サブディスプレイまで表示出来て、もう最高～！
6jiroさんの記事が本当に助かっています。（多謝）
M5の方も、期待しています。（当方、物が中国から輸送中で、まだ来ませんが）(笑)
いまちょっと、ESP32のアプリを製作しています。（内緒ですが！）
完成したらブログでご紹介しますね！
6jiro より:

2020年11月10日 10:33 PM

てつのさん　こんばんは！
そうなんですよ～！
なんかやっていることが難しい気がして理解しようする気がなくなると全く頭に入りませんが、慣れてくると何となくやろうとしてくることが理解できてくるんですよね～。
わたしもＣ言語の勉強の時は始めは全く分かりませんでしたが、慣れてそういうもんだと思うと途端に頭に入り始めました＾＾
こんなの私も出来ませんよｗｗただ、提示されているライブラリーを使っただけですので、そういう使い方するんだと慣れれば使えるようになります＾＾
jpegっファイルはESP32のフラッシュメモリーの中に入って、そこからＳＤカードみたいな感じで読みだされて表示されます＾＾
6jiro より:

2020年11月10日 10:40 PM

Vividさん　こんばんは！
jpeg表示はこの関数1行だけですｗ
ちなみにＳＤカードからの読み出し関数は lcd.drawJpgFile(SD,”/test.jpg”, 0, 0);だけですｗ
pngファイルの場合はlcd.drawPngFile、bmpファイルの時はlcd.drawBmpFileとなります。
ムチャクチャ簡単ですよね～！
LovyanGFX最高ですｗ
M5stackの方も今記事書いていますが、プログラムの説明よりも、あのコマドリの画像の作り方の説明の方が大変でｗ
おっ!なんかアプリ作られているんですね!楽しみにしています＾＾
なおより:

2020年11月10日 11:54 PM

こんばんは
ライブラリもすごいですが、いろんな情報を取捨選択して理解しさらに使える状態までさっくり（実は裏でいろいろある？）もってくる6jiroさんのパワーにいつもながら感服しきりです。
解説もとてもわかりやすくて、記事書くのに時間かかってるだろうな～と。やはり八つ子説（近頃はもっと多いんでしたっけww）が有力(^^;
M5stackって名前しか聞いたことなかったですが、ESP32を核としていろいろペリフェラルがついてる感じかな。面白いもんがいっぱいありますね♪
gyo より:

2020年11月12日 12:16 AM

こいつを模型に組み込む日がいつ来るかわかりませんが、非常に助かります。
大型ガレキに少し大きな投資をする予定でして(分冊物通巻の半分以下の額ですが)
それに組み込んでみようかと思ってます^^
パイロットpapa より:

2020年11月12日 7:36 AM

ふむふむ、内容は全く理解できませんが、すげーことになってますね～！
確かに表示させる画像自体の準備とかも大変ですね。
6jiro より:

2020年11月12日 5:07 PM

なおさん　こんにちは！
このライブラリーホントマジで神なんですよ！
もうこのライブラリーの使用しか考えられないｗｗ
確かに今回のこの液晶の使用に当たってはムチャ調べました＾＾；
あの何も進歩の無い地獄の1週間がウソの様ですｗ
この記事はそうでもないのですが、次のM5stackの記事結構かかりました～＾＾；
最後まで読む人はいないかもと思いながら書きましたｗｗ
6jiro より:

2020年11月12日 5:10 PM

gyoさん　こんにちは！
gyoさんの目指すもの的には次の記事のなんちゃって動画が有っているかもですよ＾＾
ええっ!パートワーク物の半分くらいという事は相当な金額ですね！
かなり大物の様で仕込みがいが有りそうですね。
画像表示で何かありましたら連絡してくださいね～Vividさんに聞いてみますｗｗｗ
6jiro より:

2020年11月12日 5:13 PM

パイロットpapaさん　こんにちは！
なんかね知らない間にずいぶん歩んで来たものですｗ
何となく簡単なことなら出来るようになりました＾＾
慣れって怖いですね～。
そうなんですよ～表示用の画像の用意ってかなり大変です＾＾；

ST7735に液晶知識０からの画像表示　書き忘れｗ

関連すると思われる記事：

10 comments

Leave a Reply

2024年11月
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30