Posted on Leave a comment

ສ້າງ Embedded GUI ງາມໆໃຫ້ TFT LCD ດ້ວຍ littlevgl

ສະບາຍດີ maker ທຸກຄົນມື້ນີ້ຈະພາທຸກຄົນສ້າງ Embedded GUI ໂດຍໃຊ້ littlevgl ເຊິ່ງສະແດງຜົນເທິງຈໍ TFT LCD ແລະ ໃຊ້ driver library TFT_eSPI ໂຕດຽວກັບບົດຄວາມ ມາລອງໃຊ້ງານຈໍ TFT ຮ່ວມກັບ ESP32 ແລະ sensor ສຳພັດໜ້າຈໍ XPT2046 ສະນັ້ນໃຜທີ່ຍັງບໍ່ໄດ້ອ່ານກັບໄປອ່ານກ່ອນຈຶ່ງກັບມາອ່ານບົດຄວາມນີ້.

littlevgl ຄືຫຍັງ?

littlevgl ເປັນ open-source library ທີ່ໃຊ້ສ້າງ Embedded GUI ທີ່ມີ element ສຳລັບ GUI ຄົບຖວນ ອອກແບບມາເພື່ອ  low memory device ໂດຍສະເພາະເຊັ່ນ: Arduino, ESP32, esp8266, … etc ພັດທະນາໂດຍໃຊ້ພາສາ c++ ສະນັ້ນສາມາດໃຊ້ກັບ Arduino platform ໄດ້ແນ່ນອນ.

littlevgl support devices ດັ່ງນີ້:

  • 16, 32 or 64 bit microcontroller ຫຼື processor
  • > 16 MHz clock speed
  • Flash/ROM: > 64 kB ແນະນຳ > 180 kB
  • RAM:Static RAM usage: ~8..16 kB
  • Stack: > 2kB (> 4 kB ແນະນຳ)
  • Dynamic data (heap): > 4 KB ແນະນຳ). ສາມາດກຳນົດຜ່ານ LV_MEM_SIZE ໃນ  lv_conf.h.
  • Display buffer: > “Horizontal resolution” pixels (> 10 × “Horizontal resolution”  ແນະນຳ)
  • C99 compiler ຫຼື ໃໝ່ກວ່ານັ້ນ

ມາລອງໃຊ້ງານກັນເບິ່ງ

ຈາກບົດຄວາມກ່ອນເຮົາໄດ້ຮູ້ວິທີການໃຊ້ງານ ແລະ connect ກັບ ESP32 TGO ກັນໄປແລ້ວ. ການທີ່ຈະໃຊ້ງານ littlevgl ນັ້ນກ່ອນອື່ນກໍ່ໃຫ້ໄປ download library littlevgl for arduino ມາກ່ອນ ແລະ ຕິດຕັ້ງໃຫ້ຮຽບຮ້ອຍໂດຍໄປທີ່ sketch > included library > Add .Zip library… ເລືອກເອົາ zip file ທີ່ download ນັ້ນມາເລີຍ

ຫຼັງຈາກຕິດຕັ້ງຮຽບຮ້ອຍແລ້ວໃຫ້ໄປທີ່ ບ່ອນເກັບ library ຂອງ arduino ຖ້າເປັນ windows ກໍ່ຈະຢູ່ທີ່ Documents\Arduino\libraries\lv_arduino-master ໃຫ້ເປີດ file lv_config.h ດ້ວຍ editor ທີ່ມັກເພື່ອ config library ໃຫ້ສາມາດໃຊ້ກັບຈໍ TFT LCD ຂອງເຮົາໄດ້.

config

ການ config ນັ້ນບໍ່ຢາກເລີຍສ່ວນສຳຄັນແມ່ນ config ໃຫ້ເຂົ້າກັບຈໍທີ່ເຮົາໃຊ້ຢູ່ ຕົວຢ່າງເຊັ່ນເຈົ້າຂອງບົດຄວາມໃຊ້ TFT LCD 240×320 ສະນັ້ນຈຶ່ງກຳນົດໃຫ້ horizontal and vertical ເປັນ 240 ແລະ 320 ຕາມລຳດັບ. ຖ້າຈໍຕ່າງຈາກນີ້ກໍ່ໃຫ້ກຳນົດຄ່າຕ່າງ ທີ່ສຳຄັນແມ່ນຕອ້ງອ່ານເບິ່ງ comment ທີ່ເຂົາເຈົ້າໄດ້ບອກໄວ້ວ່າສ່ວນໃດກຳນົດຫຍັງ ພຽງເທົ່ານີ່ເຮົາກໍ່ພ້ອມທີ່ຈະໃຊ້ງານແລ້ວ. ແລະ ຢ່າລືມວ່າຕ້ອງ config library TFT_eSPI ນຳເພາະ library littlevgl ນີ້ໃຊ້ TFT_eSPI ເປັນ driver ສຳລັບຈໍ TFT LCD

Hello world

ເຮົາມາສະແດງຂໍ້ຄວາມ Hello World ໂດຍໃຊ້ littlevgl ກັນເບິ່ງ! ເຊິ່ງມັນກໍ່ງ່າຍຫຼາຍໄປທີ່ examples>lv_arduino>ESP32_TFT_eSPI

ຫຼັງຈາກນັ້ນກໍ່ເລືອກ board ແລະ port ທີ່ຈະ upload ໃຫ້ຖືກຕ້ອງແລ້ວກໍ່ກົດ upload ລົງໄປເລີຍ!!!!.

ຖ້າອອກມາແບບນີ້ກໍ່ຖືວ່າເຮົາສາມາດໃຊ້ງານ littlevgl ໄດ້ແລ້ວ!.

ສ່ວນສຳຄັນຂອງ code ທີ່ຈະໃຊ້ງານ littlevgl ໄດ້ນັ້ນແມ່ນມີຢູ່ 4 ສ່ວນໃຫຍ່ໆຄື:

  • ເອີ້ນໃຊ້ function lv_init() ຢູ່ setup
  • ສ້າງ display buffer
  • register function ເຊິ່ງຈະເຮັດວຽກໂດຍການ copy array pixel ໄປທີ່ຈໍ LCD ສຳລັບ Arduino platform ແມ່ນຈະໃຊ້ TFT_eSPI ເປັນ driver ດັ່ງນັ້ນຈຶ່ງຕ້ອງໃຊ້ function ຂອງ library ໃນການຕິດຕໍ່ສືສານກັບຈໍ ແລະ implement function ໄດ້ແບບນີ້
  • register function ໃນການອ່ານຄ່າ input device ເຊັ່ນ touch pad
  • ເອີ້ນໃຊ້ function lv_tick_inc(x) ທຸກໆ x milliseconds  ຢູ່ພາຍໃນ timer ຫຼື Task ເທົ່ານັ້ນ ເຊິ່ງ ESP32 Arduino platform ນັ້ນມີ library ຊື່ວ່າ Ticker ໃນການເອີນ function ຂຶ້ນມາຕາມເວລາທີ່ກຳນົດໄວ້
  • ເອີ້ນໃຊ້ lv_task_handler() ຢູ່ loop function

ລອງເພີ່ມ Button ແລະ handle click event

ເມື່ອເຮົາຮູ້ວິທີການໃຊ້ແບບເບື້ອຕົ້ນແລ້ວຕໍ່ມາລອງເພີ່ມ Button element ແລະ handle click event ໂດຍໃຫ້ print ຂໍ້ຄວາມອອກທາງ serial monitor ເມື່ອທີການກົດປຸ່ມ

ເພີ່ມ Button Element ແລະ callback function ທີ່ຈະຖືກເອີ້ນເມື່ອເກີດມີ event click

ຜົນທີ່ໄດ້ກໍ່ຈະແບບນີ້!

ເມື່ອ click ທີ່ button ກໍ່ຈະມີຂໍ້ຄວາມຢູ່ Serial monitor

ນີ້ແມ່ນ code ແບບເຕົມໆ

ມາຮອດນີ້ກໍ່ຂໍ້ຈົບບົດຄວາມໄວ້ເທົ່ານີ້ກ່ອນ ເຊິ່ງຜູ້ອ່ານສາມາດນຳໄປສຶກສາເພີ່ມໄດ້ທີ່ Littlevgl Documents ວິທີການໃຊ້ element ຕ່າງໆເຊັ່ນ: Chart, Label, Button, Tab, Keyboard, … etc ກໍ່ຢູ່ໃນນັ້ນເລີຍ. ເຊິ່ງການໃຊ້ງານກໍ່ງ່າຍສົມຄວນ. ໄວ້ພົບກັນບົດຄວາມໜ້າ!!!.

Posted on Leave a comment

ມາລອງໃຊ້ງານຈໍ TFT ຮ່ວມກັບ ESP32 ແລະ sensor ສຳພັດໜ້າຈໍ XPT2046

ສະບາຍດີ ຊາວ maker ແລະ ບໍ່ແມ່ນ maker ຫຼື ຜູ້ສົນໃຈທົ່ວໄປ ບົດຄວາມນີ້ຈະພາມາລອງໃຊ້ງານຈໍ TFT ທີ່ເປັນຈໍແບບ RGB ເວົ້າງ່າຍໆກໍ່ເປັນຈໍສາມາດສະແດງສີສັນໄດ້ນັ້ນເອງ ເຊິ່ງເຮົາຈະໃຊ້ຮ່ວມກັບ board ESP32 ແລະ sensor ສຳພັດໜ້າຈໍ ທີ່ເຮັດໃຫ້ເຮົາສາມາດພັດທະນາ embed UI ໄວ້ຕັ້ງຄ່າ ຫຼື ສະແດງຂໍ້ມູນຂອງ sensor ຕ່າງໆ ວ່າແລ້ວກໍ່ມາເລີ່ມກັນເລີຍ

ຕຽມອຸປະກອນ

ກ່ອນອື່ນມາຮູ້ຈັກກັບອຸປະກອນທີ່ເຮົາຈະໃຊ້ກັນກ່ອນ

  • ESP32
  • 2.8 TFT SPI 240 x 320 v1.2
  • Jumper wiring
  • Breadboard

ESP32

ສຳລັບ board esp32 ຈະໃຊ້ຂອງ esp32 TTGO ເຊິ່ງຜູ້ເຂົ້າມາອ່ານສາມາດໃຊ້ລຸ້ນອື່ນນອກຈາກນີ້ກໍ່ໄດ້

Image result for esp32 ttgo t8 v1.7 pinout
ESP32 TTGO T8 v1.7

2.8 TFT SPI 240 x 320 v1.2

ເປັນ module LCD ຕົວໜຶ່ງ ໃຊ້ chip IC ILI9341 ໃນການຄວບຄຸມການສະແດງຜົນ ທີ່ສາມາດ render ສີ R-G-B(ແດງ, ຂຽວ, ຟ້າ) ໄດ້. ເຊື່ອມຕໍ່ຜ່ານ SPI protocol ແລະ ເຮັດວຽກໂດຍໃຊ້ power supply 5V DC ບັນດາຂາ IO ໃຊ້ຄວາມດັນໄຟຟ້າ 3.3V. ສະນັ້ນການທີ່ຈະໃຊ້ງານກັບ board ຕົວອື່ນເຊັ່ນ Arduino ຈຳເປັນຕ້ອງຕໍ່ໃຊ້ກັບ ຄວາມຕ້ານທານ(R) ເສຍກ່ອນຈຶ່ງຕໍ່ກັບຂາຂອງຈໍ LCD(ບໍ່ສາມາດຕໍ່ກົງໄດ້). ແຕ່ສຳລັບ ESP32 ແລ້ວ IO ເປັນ 3.3v ຢູ່ແລ້ວຈຶ່ງຕໍ່ກົງໄດ້ເລີຍ. ນອກຈາກນີ້ແລ້ວ LCD ລຸ້ນນີ້ຍັງມີ sensor ສຳພັດໜ້າຈໍ XPT2046 ແລະ SD card ມາພ້ອມໃນໂຕເລີຍ!.

Image result for TFT SPI 240 x 320 v1.2
Image result for TFT SPI 240 x 320 v1.2

Connect TFT LCD ແລະ ESP32

ຕິດຕັ້ງ library

ຫຼັງຈາກ ເຊື່ອມຕໍ່ ESP32 ກັບ TFT LCD ແລ້ວກໍ່ເຖິງຂັ້ນຕອນຂອງການ coding ເຊິ່ງຈະ code ຜ່ານ Arduino IDE ແລະ ໃຊ້ library TFT_eSPI ທີ່ support board ຫຼາຍເຈົ້າ ແລະ chip TFT ຫຼາຍໂຕ ນອກນັ້ນການ config ໃຊ້ງານກໍ່ງ່າຍ ເອົາເປັນວ່າໃຊ້ໂຕນີ້ໂຕດຽວແມ່ນຈົບ! ການຕິດຕັ້ງກໍ່ແສນງ່າຍເປີດ Arduino IDE ຂຶ້ນມາແລ້ວໄປທີ່ Sketch > include library > manage libraries. ແລ້ວຄົ້ນຫາ “TFT_eSPI” ກໍ່ຈະເຫັນຂຶ້ນມາກົດຕິດຕັ້ງໄປໄດ້ເລີຍ.

config User_Setup.h

ກ່ອນຈະໃຊ້ງານ library ຂອງ TFT_eSPI ຈຳເປັນຕ້ອງໄດ້ config file User_Setup.h ເສຍກ່ອນເຊິ່ງ file config ດັ່ງກ່າວແມ່ນຢູ່ folder TFT_eSPI library ທີ່ເຮົາໄດ້ຕິດຕັ້ງ(ສຳລັບ windows ແມ່ນຈະຢູ່ Documents\Arduino\libraries\TFT_eSPI) ໃນການ config ນັ້ນເຮົາຈະຕ້ອງໄດ້ກຳນົດວ່າ ເຮົາໃຊ້ chip IC TFT ເບີໃດ, board ຫຍັງ, ກຳນົດຂາ SPI ໃນການເຊື່ອມຕໍ່ ແລະ ການ Touch screen. ແຕ່ຖ້າໃຜຄ້ານອ່ານ comment ຢູ່ໃນ file config ກໍ່ສາມາດເລືອກເອົາ file config ທີ່ເຂົາຕຽມໄວ້ໃຫ້ຈຳນວນໜຶ່ງແລ້ວຢູ່ folder User_Setup ເລືອກເອົາໃຫ້ຖືກກັບ Chip IC ລະ ບອດທີ່ເຮົາໃຊ້ງານ. ສຳລັບບົດຄວາມນີ້ຈະກຳນົດ config ແບບນີ້

Upload code

ຫຼັງຈາກທີ່ config ຮຽບຮ້ອຍແລ້ວກໍ່ໃຫ້ໄປທີ່ File > Example>TFT_eSPI>320×240>TFT_Print_Test ກ່ອນອື່ນໃຫ້ກຳນົດ board ຢູ່ Tools ເປັນ ESP32 Dev Module ພ້ອມທັງເລືອກ port ແລ້ວກໍ່ກົດ upload ໄປໄດ້ເລີຍຖ້າບໍ່ມີຫຍັງຜິດພາດກໍ່ຈະເຫັນການສະແດງຜົນຢູ່ຈໍ LCD ຖ້າຍັງບໍ່ມີຫຍັງເກີດຂຶ້ນໃຫ້ກັບໄປເບິ່ງ file config ຄືນວ່າກຳນົດ pin ການເຊື່ອມຕໍ່ລະຫວ່າງ ESP32 ແລະ LCD ຖືກແລ້ວບໍ່.

ລອງສະແດງ Meter

Touch screen

ເມື່ອທົດສອບການສະແດງຜົນຢູ່ຈໍໄດ້ແລ້ວຕໍ່ມາເປັນການໃຊ້ Touch screen sensor ທີ່ມີມານຳຈໍ TFT ເຊິ່ງການໃຊ້ການນັ້ນເຮົາຈຳເປັນຕອ້ງ calibrate ຈໍເສຍກ່ອນ. ໂດຍໄປທີ່ example >TFT_eSPI>Generic>Touch_calibrate ພ້ອມທັງ config SPI_TOUCH_FREQUENCY ໃຫ້ຕຳລົງ ສຳລັບການ calibrate ເທົ່ານັ້ນ.

ຫຼັ້ງຈາກນັ້ນກໍ່ upload ແລະ ເປີດ Serial monitor ຂຶ້ນມາ. ຢູ່ໜ້າຈໍຈະເຫັນລູກສອນຢູ່ແຈຂອງ LCD ໃຫ້ຈຳໄປຕາມລູກສອນນັ້ນ ແລະເມື່ອສຳເລັດກໍ່ຈະໄດ້ຄ່າ calibrate print ອອກມາຢູ່ Serial Monitor ໃຫ້ copy ຄ່ານັ້ນໄວ້ໃຊ້ໃນພາຍຫຼັງ

ຫຼັງຈາກນັ້ນໃຫ້ກຳນົດຄ່າ SPI_TOUCH_FREQUENCY ໃຫ້ເປັນຄ່າເກົ່າ( 2500000 ) ພ້ອມທັງແກ້ໄຂ code ໂດຍການ comment function touch_calibrate ຢູ່ setup ແລ້ວເພີ່ມ code ທີ່ເຮົາ copy ມາຈາກ Serial monitor ນັ້ນລົງໄປແທນ.

ແລ້ວກໍ່ upload ລົງ board ອີກຄັ້ງ ຈະສັ່ງເກດເຫັນວ່າເມື່ອເຮົາສຳພັດກໍ່ຈະມີຈຸດເກີດຂຶ້ນນັ້ນສະແດງວ່າເຮົາສາມາດໃຊ້ງານ Touch screen ໄດ້ແລ້ວ. ຂໍ້ຄວນສັ່ງເກດອີກຢ່າງໜຶ່ງແມ່ນການ calibrate ຈະຕ້ອງເຮັດທຸກຄັ້ງທີ່ໃຊ້ Rotation ຕ່າງກັນ.

ບົດຄວາມນີ້ກໍ່ຈົບພຽງເທົ່ານີ້. ບົດຄວາມໜ້າຈະເວົ້າເລື່ອງການໃຊ້ littlevgl ໃນການສ້າງ UI.