chrmlinux03 が 2024年01月26日15時29分46秒に編集

配線追加

本文の変更

# はじめにこんにちわっリナちゃん　X@chrmlinux03　です

``` このページは SPRESENSE2023コンテストで作った部品を紹介するものです最初に 0.はじめにをお読みいただければ幸いです ```

++このページは SPRESENSE2023コンテストで作った部品を紹介するものです最初に [開発まとめ](https://elchika.com/article/e96011d0-d280-49e2-a68c-dd3c183a204e/) をお読みいただければ幸いです++

インターネットを検索するとタッチパネルの記事は沢山ありますだけど何故か SPRESENSE + タッチパネルではヒットが出て来ませんそこで今後の持ってるけど使えなくってうずうずしている方々への感謝を込めて全部公開目指せタッチパネルマスター ٩(ˊᗜˋ*)و # 用意するもの | 部品名 | 販売先 | 価格 | 御提供品 | |-|-|-|-|

| インチタッチパネル付き液晶(ili9341) |どこでも|400～3,000円|〇|

| タッチパネル付き液晶(ili9341) |どこでも|400～3,000円|〇|

赤い基板の液晶なんで "ili9341 + Arduino" とかで検索すると大体出てくる 2.4インチ 2.8インチ ... とか色々あるけど

液晶制御用のICが ili9341 だと今回の作業で使える

液晶制御用のICが ili9341 だと今回の作業で使えるし

他のICでもちょこっと検索するとやり方が出てくる

他のICでもちょこっと検索するとやり方が出てくるのでこのページを応用して

# 液晶基板とタッチパネル赤い液晶基板には液晶とタッチパネル別のICが載っていてそれらは SPI (Serial Peripheral Interface) と言う信号線で繋がっていますざっくり言うと CS 以外のそれぞれの線を繋ぎたいデバイスの信号と制御する側の信号に合わせて接続してもしもデバイスが2個以上あるのであれば CS 以外信号線は共通で CS だけ別なGPIOに繋がれば良いって感じですかね？

``` 画像接続の概要 ```

# 配線

出典：http://www.lcdwiki.com/2.4inch_SPI_Module_ILI9341_SKU:MSP2402

|SPRESENSE側|液晶基板側| |-|-| |D13|SCK と T_CLK| |D12|SDO(MISO) と T_DO| |D11|SDI(MOSI) と T_DI |D10|CS |D9|DC |D8|RESET |D7|T_CS |VCC|5V か 3.3V |GND| GND

出典：https://www.analog.com/jp/analog-dialogue/articles/introduction-to-spi-interface.html

![キャプションを入力できます](https://camo.elchika.com/9e99e9dc2afb673bc44986789c25bdf4ee8bd1e5/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f66383264333131322d333034622d343061352d383133312d643231366437616539346262/) ![キャプションを入力できます](https://camo.elchika.com/1a1fca916db75387399a11a69159d10cf86686c9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f62643362383966622d363062632d343665642d383333302d326336663032653037316236/) ![キャプションを入力できます](https://camo.elchika.com/d4c677f8a275e4a0dbbf1d881401bebaf50c4e06/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f34653930613962652d316661622d346462622d393164392d376234373161303137343833/)

>出典 >http://www.lcdwiki.com/2.4inch_SPI_Module_ILI9341_SKU:MSP2402 >https://www.analog.com/jp/analog-dialogue/articles/introduction-to-spi-interface.html

# 液晶の制御色々制御方法はありますが今回は ESP32シリーズでお世話になっています lovyanGFX で制御を行います ``` c++:spre.Graphics.hpp #ifndef __GRAPHIC_HPP__ #define __GRAPHIC_HPP__ #define SPI4_SCLK (13) #define SPI4_MISO (12) #define SPI4_MOSI (11) #define SPI4_CS (10) #define SPI4_DC ( 9) #define SPI4_RST ( 8) #define SPI4_CS2 ( 7) #define IO_SW4 ( 7) #define IO_SW3 ( 6) #define IO_SW2 ( 5) #define IO_SW1 ( 4) #define ROT0 (0) #define ROT90 (1) #define ROT180 (2) #define ROT270 (3) #define MEGA (1000 * 1000) #define LGFX_AUTODETECT #define LGFX_USE_V1 #include <LovyanGFX.hpp> class LGFX : public lgfx::LGFX_Device { lgfx::Panel_ILI9341 _panel_instance; lgfx::Bus_SPI _bus_instance; public: LGFX(void) { { auto cfg = _bus_instance.config(); cfg.spi_mode = 0; cfg.spi_port = 4; cfg.freq_write = (20 * MEGA); cfg.freq_read = (16 * MEGA); cfg.pin_dc = SPI4_DC; _bus_instance.config(cfg); _panel_instance.setBus(&_bus_instance); } { auto cfg = _panel_instance.config(); cfg.pin_cs = SPI4_CS; cfg.pin_rst = SPI4_RST; cfg.pin_busy = -1; cfg.panel_width = 240; cfg.panel_height = 320; cfg.bus_shared = true; _panel_instance.config(cfg); } setPanel(&_panel_instance); } }; static LGFX lcd; static LGFX_Sprite spr; static bool useGraphics = false; static uint16_t _w, _h; int16_t setupGraphics(int16_t rot) { lcd.init(); lcd.setRotation(rot); spr.setColorDepth(16); spr.createSprite(lcd.width(), lcd.height()); _w = spr.width(); _h = spr.height(); useGraphics = true; return 0; } #endif ``` ## ポイントポイントは色々あるんですけど uint16_t setupGraphics(int16_t rot)　という関数で lcd ... 画像描画用インスタンス spr ... スプライト用インスタンス _w ... スプライトの幅 _h ... スプライトの高さを最初に確保するのが楽で良い♪ # タッチパネルの制御

lovyanGFX でも制御できるはずなんですが

lovyanGFX でもディージーチェーン(CS共通)でタッチパネルが制御できるはずなんですが

何か SPI の所で嵌ってしまいそうなので

@[twitter](https://twitter.com/chrmlinux03/status/1723960619446223100?s=20)

![キャプションを入力できます](https://camo.elchika.com/4152e825b521e982965c54fc2eae7591aa643924/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f37623662623738352d333464382d343161372d393633322d323332353930396536623132/) 何か SPI の所で嵌ってしまいそうなので💦

今回は赤い基板に載ってる制御IC XPT2046 に特化した内容でご説明他のICでもちょこっと検索するとやり方が出てくるから次の次元へ行きたい方は是非チャレンジを ```c++:tinyTouch.hpp #ifndef __TOUCH_HPP__ #define __TOUCH_HPP__ #include <XPT2046_Touchscreen.h> XPT2046_Touchscreen tch(SPI4_CS2); static uint16_t _tx, _ty, _tz; static uint16_t _tw, _th, _tr; static uint16_t _thw, _thh; static bool _swap = 0; static bool useTouch = false; #define HARDWARETOUCH_W (390) #define HARDWARETOUCH_H (3900) //int16_t isTouch(void) { int16_t isTouch(int *tx, int *ty, int *tz) { if (!tch.touched()) { return 0; } TS_Point p = tch.getPoint(); _tz = p.z; int txmin = 0; int txmax = _tw; if (_swap) { txmin = _tw; txmax = 0; } switch (_tr) { case 0: _tx = map(p.y, _thh, _thw, txmin, txmax); _ty = map(p.x, _thw, _thh, 0, _th); break; case 1: _tx = map(p.x, _thw, _thh, txmin, txmax); _ty = map(p.y, _thw, _thh, 0, _th); break; case 2: _tx = map(p.y, _thw, _thh, txmin, txmax); _ty = map(p.x, _thh, _thw, 0, _th); break; case 3: _tx = map(p.x, _thh, _thw, txmin, txmax); _ty = map(p.y, _thh, _thw, 0, _th); break; } *tx = _tx; *ty = _ty; *tz = _tz; return 1; } void setupTouch(int16_t w, int16_t h, int16_t r, bool swap) { _tw = w; _th = h; _tr = r; _thw = HARDWARETOUCH_W; _thh = HARDWARETOUCH_H; _swap = swap; tch.begin(); } #endif ``` ## ポイントこれも　ポイントは沢山あるんですけど液晶の方向(角度?)が変化しても

タッチパネルは絶対座標(左上原点)を返して来るから

タッチパネルは物理座標(左上原点)を返して来るから

それは lovyanGFX を初期化するときに液晶の方向は ROT0..ROT270 で教えて置いた方が良い

これも色々な方法があるけど　今のところはこれで💦

これも色々な方法があるけど　今のところはこれでOK💦

# ライブラリ等のダウンロード Arduio Ide で上記 2本のライブラリをカレントフォルダに入れたら色々入れて下さい～とかエラーが出るので ``` XPT2046_Touchscreen LovyanGFX ``` この2本はダウンロードしてインストールすれば良いかも

# なんとZ軸の筆圧が検知できる

``` 画像 Z軸の筆圧検知 ```

タッチパネルには色々種類があって抵抗被膜式

![キャプションを入力できます](https://camo.elchika.com/1f7f253404e919e89fa7d566ce8fdcfaf5ea7f14/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f61646138346566632d336132322d346661352d396638312d636537356439376465333431/)

静電容量式

![キャプションを入力できます](https://camo.elchika.com/172cc3f0fef70b6083bcfcc5dbd1fa9ebd076cd5/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f66663931626166612d643236642d343964652d613939642d613732656634316661323965/)

：

>引用 >https://connect.nissha.com/filmdevice/filmdevice_column/capacitive_touch_panel

とかある

``` 画像 Z軸の筆圧検知 ```

@[twitter](https://twitter.com/chrmlinux03/status/1729833253106843787?s=20)

抵抗被膜式って言うのは薄い透明な被膜が接点の上に張ってあってそのどこかを押すと接点がONになる

だからZ軸上でどれくらい押されたのかが検知できる

それをコントローラICが読み取って SPI で伝えるって感じですかね？

# ライブラリ作成した ## もちろん後日ライブラリ登録します上の2本が今回作ったやつです

今回のは病院の待合室で組んだよっ @[twitter](https://twitter.com/chrmlinux03/status/1729746161446084966?s=20)

# 応用例

このモジュール群は以下の2点で使ってます是非ご参照くださいませ٩(ˊᗜˋ*)و

このモジュール群は以下の製品で使われてますので是非ご参照くださいませ٩(ˊᗜˋ*)و

## SoundSerenity [[SoundSerenity]](https://elchika.com/) ## LoRaPager [[LoRaPager]](https://elchika.com/)

## SoundSerenity(環境音が8Trackで美しく流れる箱) 👉[SoundSerenity](https://elchika.com/article/d23c6bb2-2f8f-44c1-ade2-1e54982f03f5/) ![キャプションを入力できます](https://camo.elchika.com/b0d85787f23923aed1fce6c408625a14df3b0f64/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f30396263623639342d646539352d343934372d386264302d383963653330363835666536/) ## LoRaPager(LoRaを使った簡易メッセンジャーBox) 👉[LoRaPager](https://elchika.com/article/b6537199-99c0-40b8-b87f-151373bbe7c7/) ![キャプションを入力できます](https://camo.elchika.com/e1ebbf46dcae45206fca433699e678ec41fc332d/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f31666233626632382d396666612d346439332d383262612d663435373033656235643833/)

# 残務と今後の考察今回はたまたま ESP32 用に作ってあった基板を使ったので工数がかなり短縮出来ましたけどまぁ最初はブレッドボードでも良いかも最終的にはこれが完全に乗る基板を作りたいです ## ご参考

[[S2.BStemxxx]](https://elchika.com/) とかにも応用が出来ますよっ

👉[B-Stem4CM01Display にタッチパネルの改造を行うよ](https://elchika.com/article/9fc5216b-1dab-4c65-ad8b-43f5f7943a7e/) ![キャプションを入力できます](https://camo.elchika.com/b5cca9c48696400362dd8e60acbe7f79df41dd5d/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38373864346139632d633739622d343839652d383830322d6137626538616332663037302f33396364393830632d383532382d346336662d623836362d653633386633343836323161/)

# さいごになかなか厄介なタッチパネルですが組込用のスイッチとしてはまだまだ健在です（安いから)💦 ご清聴ありがとうございました

[[0.はじめに]](https://elchika.com/) に戻る