Getting started with TouchGFX || STM32F750

                                                                                     The code

อย่างที่ฉันได้กล่าวไปก่อนหน้านี้ เราจะทำงานกับ the gui folder เป็นหลัก.

เปิดไฟล์ Screen1View.cpp ใน the gui folder.



ที่นี่เราต้องกำหนดฟังก์ชันที่เราสร้างขึ้นใน the interaction เช่น ToggleLED ().

ดังนั้นให้คลิกขวาที่ the Screen1View.hpp definition ที่ the top และคลิก “open declaration”.



ข้างบน the code แสดง the entire Screen1View.hpp file. ที่นี่เราเพิ่ม the function virtual void ToggleLED();, ซึ่งเราได้กำหนดใน the interaction.

ตอนนี้เราจะเขียน the source code สำหรับฟังชั่นนี้ใน the Screen1View.cpp file.



ก่อนการเขียน the function ตรวจสอบให้แน่ใจว่าคุณได้ include the header file สำหรับ controller ของคุณแล้ว, มิฉะนั้น the HAL functions จะไม่ได้ถูกกำหนด.

ก่อนอื่นเราจะอ่านสถานะของ the toggle button (getState()). ถ้า the state เป็น true, เราจะหมุน the LED ON, ถ้าเป็นอย่างอื่นหมุน the LED OFF.

ที่นี่ toggleButton1 เป็นขื่อของ the toggle button และถูกกำหนดใน the touchGFX designer เมื่อตอนเราเพิ่ม the button.

นั่นคือโค้ดทั้งหมดที่เราจำเป็นต้องเขียน. ตอนนี้ คุณสามารถอย่างใดอย่างหนึ่ง flash the project โดยใช้ the touchGFX, หรือ the cubeIDE ของมันเอง.

ถ้าคุณกำลังแฟลชโดยใช้ the IDE, คุณจำเป็นต้องเลือก  the respective loader ใน  the debugger (ถ้ามันไม่ได้ถูกเลือกไว้โดยค่าเริ่มต้น) นี้ถูกแสดงอยู่ในรูปภาพด้านล่าง

                                                                                            Result

ข้างล่างนี้คือภาพที่แสดง the toggle button และ the LED ที่ต่อกับ pin PA0.



ในรูปภาพแสดงตอนที่ the button อยู่ใน the OFF state, the LED ก็ OFF ด้วย. The button state ถูกเปลี่ยนเป็น ON ในรูปภาพที่สอง, และดังนั้น the LED ก็เช่นกัน.

https://controllerstech.com/touchgfx-2-how-to-use-textarea-and-wildcards/

TouchGFX #2. How to use TextArea and Wildcards

นี่เป็นบทช่วยสอนที่ 2 ใน the STM32 TouchGFX series, และวันนี้เราจะมาดูวิธีใช้ the Text Area, และวิธีใช้ the wildcard. Text Area สามารถถูกใช้เพื่อแสดงข้อความต่างๆ บนหน้าจอได้. โดยทั่วไปแล้ว The wildcards ถูกใช้เพื่อแสดงค่าที่ไม่ได้กำหนดไว้ล่วงหน้าในระหว่าง the design process. ซึ่งอาจรวมถึงค่าต่างๆ อย่างเช่น the sensor’s data, หรือหรือค่าที่ป้อนเข้าโดยผู้ใช้ เราจะดูวิธีการแสดงพวกมันในบทช่วยสอนนี้.

คุณต้องดูบทช่วยสอนก่อนหน้า เพราะฉันจะข้ามการตั้งค่าพื้นฐานที่ได้อธิบายไปแล้วในบทช่วยสอนก่อนหน้านี้

มาเริ่มต้นด้วย the touchGFX setup

                                                                          TouchGFX Setup

ผมทึกทักเอาว่าคุณคงได้เห็นบทช่วยสอนก่อนหน้านี้แล้ว ดังนั้นฉันจะข้าม the project setting part. นี้คือ a background image ที่เพิ่มไปยัง the project และเราจะดูเพียง the configuration of the components, ที่เราจะใช้เฉพาะใน project นี้.

TextArea Setup



ก่อนอื่นเราต้องเพิ่ม Text Area ให้กับหน้าจอของเรา ทางด้านขวา คุณจะเห็นคุณสมบัติของ textArea

สิ่งเดียวที่ฉันทำการเปลี่ยนแปลงคือฉันได้เปลี่ยนสีข้อความเป็นสีขาวเพื่อให้สามารถมองเห็นได้บนพื้นหลังสีดำ

เนื่องจากเราจะใช้ text area นี้เพื่อแสดงค่าตามข้อมูลที่ผู้ใช้ป้อน เราจึงไม่สามารถใช้ข้อมูลเริ่มต้นได้ เราต้องใช้ the wildcards สำหรับสิ่งเดียวกัน

Wildcard setup



The wildcard สามารถถูกเพิ่มจาก the textArea properties ของมันเอง.

1.  คลิก the Add (+) button เพื่อเพิ่ม the wildcard.
     •  ใน the Translation section, คุณสามารถเห็น the “<value>”. <value> นี้จะถูกแทนที่โดยค่าที่กำหนดไปยัง the wildcard ในระหว่าง the runtime.
2.  คลิกที่ the Wildcard เพื่อดูคุณสมบัติของมัน.
3.  คลิกk the add (+) button ถ้าคุณต้องการกำหนดค่าเริ่มต้นบางค่า/ข้อความให้กับ the TextArea.
4.  ฉันได้กำหนดค่า 0.
5.  เราจะใช้ the wildcard buffer เพือเก็บ the wildcard values. ฉันได้กำหนด the buffer ด้วย 5 bytes.

ตอนนี้ the wildcard ถูกสร้างขึ้นแล้ว แต่เราต้องกำหนด the wildcard characters ด้วย. โดยพื้นฐานแล้วคุณกำหนดว่าอักขระใดที่ the wildcard สามารถใช้ได้.



เพื่อกำหนด the wildcard characters, ไปยัง Text, และจากนั้นเลือก the typography ที่คุณกำลังใช้สำหรับ the textArea. ฉันกำลังใช้ the default typography.

ตอนนี้ใน the wildcard range, คุณสามารถกำหนดช่วงของอักขระที่ the wildcard สามารถใช้ได้.

ตัวอย่างเช่น The range 1-9 หมายถึงมันสามารถใช้ตัวเลขจาก 1 ถึง 9 ได้เท่านั้นและในกรณี 0 มาถึง, หรืออักขระอื่นใดๆมาถึง, มันจะแสดง the fallback character (‘?’ ในกรณีนี้).

ฉันได้กำหนดช่วงตั้งแต่ 0x20-0x7E ซึ่งครอบคลุมช่วงอักขระทั้งหมดตามตาราง ASCII ที่แสดงด้านล่าง

Button Setup

ฉันได้กำหนด 2 flex buttons สำหรับ the counter. รูปภาพถูกแสดงข้างล่าง



รูปภาพที่กำหนดให้กับ buttons เหล่านี้สามารถถูกพบได้ใน the TouchGFX\assets\images folder.

เราจะเพิ่มบาง interactions ในหน้าจอนี้สำหรับ buttons เหล่านี้.

Interactions

ฉันได้เพิ่ม 2 interactions สำหรับ the 2 buttons. พวกมันถูกแสดงข้างล่าง



The first interaction มีชื่อว่า down และจะถูกทริกเมื่อ the flexButton1 (down button) ถูกคลิก.
เมื่อ button นี้ถูกคลิก, มันจะเรียก a new virtual function, “downclicked“, ซึ่งเราจะเขียนใน the code.

The second interaction มีชื่อว่า up และจะถูกทริกเมื่อ the flexButton2 (up button) ถูกคลิก.
เมื่อ button นี้ถูกคลิก, มันจะเรียก a another virtual function, “upclicked“, ซึ่งเราจะเขียนใน the code.