Getting started with TouchGFX || STM32F750

https://controllerstech.com/getting-started-with-touchgfx-stm32f750/

Getting started with TouchGFX || STM32F750

TouchGFX เป็น GUI designing software โดย ST ที่ทรงพลังและใช้งานง่าย. โดยเฉพาะอย่างยิ่งหากคุณใช้ a STM32 controller, มันสะดวกมากในการใช้ the TouchGFX สำหรับการออกแบบ the GUI.

ชุดการสอนนี้จะครอบคลุมส่วนประกอบต่างๆ ใน ​​TouchGFX และเราจะใช้มันกับ MCU ของเราอย่างไร

บทช่วยสอนโดยเฉพาำนี้จะเป็นพื้นฐานอย่างมากและวันนี้เราจะมาดูวิธีใช้ปุ่มบนจอแสดงผลเพื่อควบคุม LED บน MCU

เราจะสร้าง the project จาก the TouchGFX และแก้ไขมันในภายหลังใน the IDE.

                                                                       TouchGFX Setup

Create a new Project in TouchGFX



1.  คลิกที่ the create tab เพื่อสร้าง the project
2.  ต้นหา the controller board
3.  จากผลลัพธ์ที่แสดง ให้เลือกบอร์ดของคุณ
4.  ตั้งชื่อให้กับ the project
5.  คลิก create เพื่อสร้าง the project

Add the background Image

สิ่งแรกที่เราจะทำคือ, เพิ่ม the background image ไปยัง project ของเรา. ตรวจสอบให้แน่ใจว่า the image อยู่ใน the PNG format และมีความละเอียดเดียวกันกับที่ the display รองรับ.




•  ที่นี่เราจะวางเมาส์บน the Image tab และเลือก the Image จากตัวเลือก. เมื่อเราทำเช่นนั้น an image icon จะถูกเพิ่มใน the
    display.

•  คลิกที่ the image icon เพื่อแก้ไขคุณสมบัติของ image นี้.

•  ใน the properties, ภายใต้ the image section, คลิกที่ no image.

•  ตอนนี้คลิกที่ the ‘+’ button เพื่อเลือก the image.

•  เมื่อ the image ปรากฎใน the image Picker, คลิกที่ the image.

•  The image จะถูกเพิ่มไปยัง the display โดยอัตโนมัติ.

คุณสามารถดูด้านล่างว่า the image จะเป็นอย่างไร

Add the Toggle Button

ตอนนี้เราได้เพิ่ม the background image ไปยัง display ของเราแล้ว, องค์ประกอบถัดไปที่เราเพิ่มคือ the toggle button. button นี้จะถูกใช้เพื่อสลับ the LED บน the controller.




ที่นี่เราจะวางเมาส์เหนือ the button tab อีกครั้ง, และเลือก the Toggle Button จากรายการของ buttons.

คุณสามารถปรับตำแหน่งบน the button ได้โดยการลากมันไปบน the display. หากคุณคลิกที่ the button, คุณจะเห็น the properties ทางด้านขวาของหน้าจอ.

ที่นี่คุณสามารถเลือกประเภทของ button ที่คุณต้องการได้. ตัวอย่างเช่น, ถ้า the button จะเป็นทรงกลมหรือสี่เหลี่ยมผืนผ้าเป็นต้น.

Add the Interaction to the screen

ตอนนี้เรามี the button บนหน้าจอของเรา แต่จะเกิดอะไรขึ้นเมื่อเราคลิกปุ่มนี้ ?

เราสามารถกำหนดสิ่งนี้ได้ใน the interaction part.

โดยพื้นฐานแล้ว Interactions จะถูกจำกัดเฉพาะหน้าจอที่คุณกำลังเพิ่มพวกมันเข้าไปเท่านั้น. ดังตัวอย่างเช่น, หากคุณมี 2 หน้าจอ, การโต้ตอบทั้งหมดที่เพิ่มในหน้าจอ 1 จะทำงานบนหน้าจอ 1 เท่านั้น.



รูปภาพข้างบนเพิ่ม the interaction ไปยัง screen 1.

•  คลิกที่ the Interaction tab

•  คลิกที่ the ‘+’ button เพื่อเพิ่ม the interaction

•  เมื่อ the interaction ถูกเพิ่ม, คลิกที่มันเพื่อแก้ไขมัน

•  ตอนนี้เราต้องเลือกประเภทของการโต้ตอบที่เราต้องการบนหน้าจอ.

ที่นี่ the Trigger ถูกเซ็ตเมื่อ the button is clicked, และ the button คือ the toggleButton1.

ดังนั้นเมื่อ the toggle button ถูกคลิก, เราจะ call a new virtual function, ToggleLED, ซึ่งเราจะเขียนภายหลังใน IDE ของเรา.

ภายในนฟังชั่นนี้เราจะเขียน a code เพื่อสลับ the LED ที่ต่อกับ the controller.

Generate the Project

นี่คือการตั้งค่าทั้งหมดที่เราต้องทำใน touchGFX. ตอนนี้เราจะสร้าง the project.

ตัวเลือกต่อไปนี้สามารถถูกเห็นได้ที่มุมล่างขวาของ the software.



ที่นี่รามีตัวเลือกเพื่อ Generate the code, หรือ Run the simulator, หรือ Flash the project ไปยัง the board.

เนื่องจากเรายังจำเป็นต้องเขียนโค้ดใน the IDE, เราจะสร้างโค้ดง่ายๆสำหรับตอนนี้.

เมื่อ the code ถูกสร้าง, เราสามารถเปิด the project folder โดยการคลิก the Files button บนมุมซ้ายล่างของ the software.

Open the cubeIDE

การคลิกที่ the Files button จะนำคุณไปยัง the TouchGFX folder ของ the project.





เราจะสำรวจ the main project folder, และจากนั้นเข้าสู่ภายใน the STM32cubeIDE folder.

ตอนนี้ double click ที่ the .project file เพื่อเปิด the project ใน the cubeIDE.

รูปภาพข้างล่างแสดง the Project structure ใน the cubeIDE.





ที่นี่ เนื้อหาทั้งหมดจะอยู่ใน the generated folder. ไฟล์ทั้งหมดใน the generated folder ไม่สามารถแก้ไขได้, ดังนั้นเราจึงสามารถดูพวกมันได้เพื่อการอ้างอิงเท่านั้น. เราจะทำงานกับ the gui folder ในทุก touchGFX projects ของเราเป็นหลัก.

                                                                          CubeMX Setup

เนื่องจากเราต้องการเพิ่ม a LED ใน project ของเรา, เราจึงต้องเปิด the cubeMX และตั้งค่า the pin output จากที่นั่น.



ที่นี่ใน the cubeMX ฉันได้ตั้งค่า the pin PA0 เป็น the output pin. ฉันจะต่อ the LED เข้ากับ pin นี้

คลิก save เพื่อสร้าง the project.