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 ກໍ່ຢູ່ໃນນັ້ນເລີຍ. ເຊິ່ງການໃຊ້ງານກໍ່ງ່າຍສົມຄວນ. ໄວ້ພົບກັນບົດຄວາມໜ້າ!!!.