Ana sayfa Çözümler GUI Builder için İdeal TouchGFX Nesnesi Nasıl Seçilir

Çözümler

► Temel Hizmetler: ▪ Ekran; ▪ Üretim Çözümleri; ▪ İletişim Arayüzü; ▪ Dokunma Çözümü; ▪ Yüzey İşlem; ▪ Optik Yapıştırma; ▪ GUI Design Tool; ▪ IC Çözümleri

► Çeşitli Sektörler: ▪ Tıbbi; ▪ Nakliye; ▪ Elektrikli araç şarjı; ▪ Eğlence; ▪ Mimari; ▪ Sektör; ▪ Enerji; ▪ Alışveriş

GUI Builder için İdeal TouchGFX Nesnesi Nasıl Seçilir

Jul 14,2025

Açıklama

TouchGFX, STMicroelectronics tarafından sağlanan ve STM32 mikrodenetleyici (MCU) çiplerini hedefleyen gömülü sistem geliştirme için tasarlanmış bir grafik kullanıcı arayüzü (GUI) geliştirme çerçevesidir. Bu çerçeve, STM MCU kullanıcılarının akıcı, güzel ve çeşitli kullanıcı arayüzü sayfaları oluşturmasına yardımcı olmak için nesne bağlamı ekranları tasarlama yeteneği sunar.

Aşağıdaki örnek, TouchGFX sürüm 4.23.2 referans alınarak hazırlanmıştır:

Şekil 1: TouchGFX başlangıç ekranı, Example, Demo, Create Board chip gibi seçenekleri gösteriyor.

TouchGFX Yapısına Genel Bakış

TouchGFX program mimarisi, Şekil 2'de gösterildiği gibi Model-View-Presenter (MVP) desenini benimser ve aşağıdaki avantajları sağlar:

Görevlerin Ayrılması (Separation of Concerns): Kod bakımı farklı aşamalarda değişiklik gösterir, bu da kullanıcıların arayüzler yazmasını ve alt katmanlarla iletişim kurmasını kolaylaştırır; böylece net, anlaşılır ve yüksek yeniden kullanılabilirlikte yapılar elde edilir.

Birim Testi (Unit Testing): Üst katmandaki görünüm, GFX tarafından oluşturulan kodla doğrudan etkileşimde bulunabilir, bu da sonuçların bağımsız olarak doğrulanmasını kolaylaştırır.

Şekil 2: TouchGFX bileşenlerinin ilişki diyagramı (MVP)

View (Görünüm): GFX tarafından oluşturulan ana ekran sayfasıdır ve arayüz temsili için tasarlanmıştır. Genellikle MVP’nin üst katmanında pasif uç olarak görev yapar, UI arayüzü için tüm tasarım bilgilerini yönetir ve kullanılan nesnelerin özelliklerine göre ilgili ekranları görüntüler.

Model (Model): Veri işleme ve gönderme için ana merkezdir. Bazı iletişim paketleri burada değerlendirilir veya işlenir ve ardından Presenter aracılığıyla View’a gönderilerek mevcut görüntülenen içerik ve nesne durumu değiştirilir.

Presenter (Sunucu): View ile Model arasındaki iletişim kanalını sağlar, Model’den veri taleplerine izin vererek fonksiyonların yeniden kullanılmasını mümkün kılar.

FW (Firmware) tasarım felsefesi nedeniyle, Model'in komut işleme merkezi olarak vurgulandığı bir diyagram (Şekil 3) çizilebilir.

CAN bus, RS485, UART, Bluetooth, Wi-Fi gibi farklı arayüzlerin alt seviyede işlenmesi sonucu veriler Model’e iletilir, ardından Presenter aracılığıyla View’a aktarılır ve nesne durumu değiştirilir.

Şekil 3: Birden fazla arayüz ve MVP mimarisi arasındaki iletişim

İki örnek, veri alışverişi yöntemini açıklamaktadır:

Örnek 1: Host’un cihaza bir CANopen komutu gönderdiğini varsayalım (Şekil 4).

CANopen, IF portundan paketleri alır, CAN görevi aracılığıyla paket verilerini gerekirse çözer ve içeriği Model’e iletir. Model veritabanını güncelledikten ve ilgili komutu çalıştırdıktan sonra sonucu Presenter aracılığıyla View’a göndererek sayfanın yenilenmesini sağlar.

Şekil 4: Host’un komut gönderme örneği

Örnek 2: Kullanıcı cihazdaki bir UI nesnesine dokunursa, dokunma olayı paketi Host’a geri bildirilir (Şekil 5).

Kullanıcı etkileşimli bir nesneye tıkladığında, View bir tıklama olayı üretir; bu olay Presenter aracılığıyla Model’e User Event olarak iletilir. Model, kullanılan arayüze bağlı olarak yanıt verir, kodu CAN görevine gönderir ve sonunda Host’u bilgilendirmek için TX paketi yollar.

Şekil 5: Kullanıcı dokunma olayı Host’a geri gönderildi

View Sayfası Bilgi Genel Bakışı

TouchGFX yazılım arayüzünde, N sayfa tasarlandığında N adet ilgili View ve Presenter seti oluşturulur, ancak tüm görünüm sayfalarını kontrol eden yalnızca bir Model vardır.

Kullanıcı bir UI senaryosu tasarladığında; grafikler, görünüm, koordinatlar ve metin gösterimi dahil olmak üzere, "Generate Code" (Kod Üret) düğmesine basıldığında, ilgili isimlendirilmiş view sayfasında kod oluşturulur.

Oluşturulan klasörler ..\generated\ ve ..\gui\ olarak ayrılır; burada ..\generated\ tasarlanan sayfanın temel kodlarını içerirken, ..\gui\ nesne etkileşimlerinin mantığını barındırır.

Bu bilgileri kullanarak nesneleri ilgili sayfalarına sürükleyip bırakabilir ve kullanılabilir kodlara başvurabiliriz.

Aşağıda yukarıdaki açıklamanın basit adım adım açıklaması verilmiştir:

Örneğin:

1. Boş bir projeyi açın ve "Create New" (Yeni Oluştur) düğmesine basarak bir Proje oluşturun (Şekil 6).

Şekil 6: TouchGFX proje açılış ekranı

2. TouchGFX'te varsayılan olarak bir Screen1 (Ekran1) olacaktır. Yeni bir buton nesnesi ekleyin, istediğiniz resmi seçin ve "Generate Code" (Kod Üret) işlemini gerçekleştirin (Şekil 7).

Şekil 7: Buton oluşturma gösterimi

3. Proje yoluna geçildiğinde iki yeni klasör göreceksiniz: gui ve generated (Şekil 8):

Şekil 8: Proje klasör içeriği

generated klasörü, Screen1 bileşenleri ile ilgili temel kodları içerir. Bu kodlar TouchGFX tarafından otomatik oluşturulur ve doğrudan değiştirilemez. Sayfadaki nesne durumu değiştiğinde ve kod yeniden oluşturulduğunda, generated klasöründeki kod güncellenir.

Aynı şekilde, "Generate Code" (Kod Üret) işlemi sonrası GFX, Screen1ViewBase.cpp dosyasını ..\generated\gui_generated\src\screen1_screen klasöründe oluşturur (Şekil 9).

Şekil 9: Screen1ViewBase.cpp konumu

Notepad++ ile Screen1ViewBase.cpp açıldığında (Şekil 10), Screen1 sayfası ve buton verileri ile ilgili özellikler ve içerikler görülebilir:

- Buton koordinatlarını ayarlama:
button1.setXY(63, 109);

- Buton resim kimliğini ayarlama:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID), TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));

- Buton nesnesini sayfaya ekleme:
Add(button1);

Şekil 10: Screen1ViewBase.cpp içeriği

XXXBase.cpp ismiyle olan kodlar "Generate Code" (Kod Üret) sırasında yeniden oluşturulur ve özellik verilerindeki değişiklikler burada yansıtılır. Dolayısıyla butonun pozisyonu, resmi vb. ayarlandığında işlevler de değişebilir.

gui klasörü ise TouchGFX kullanıcılarının program mantığını yazdığı yerdir (Şekil 8). Bu yüzden MVP mimarisi de burada oluşturulur (Şekil 11 ve 12), böylece kendi MVP kod iletişim yöntemlerimizi planlayarak UI tasarım yönlendirmesini gerçekleştirebiliriz.

Şekil 11: Model yolu

Şekil 12: Presenter ve View yolları

4. GUI/Generated Tasarım Açıklaması için Basit Bir Senaryo Tasarlama

- Buton ile metin arasındaki etkileşim için mantıksal kontrol yazma.
- Butona her tıklanıldığında metin değeri artar.

Bu işlevin uygulanışı şu şekildedir:

Adım 1:

İki nesne sürükleyin: bir buton (button1) ve bir metin alanı (textArea1) (Şekil 13).

Şekil 13: Buton kontrolü ile UI tasarım projesi

Adım 2:

Sağ taraftan etkileşim eylemini seçin, bir Buton tıklama olayı ekleyin ve bu eylem gerçekleştiğinde add_number fonksiyonunun çağrılmasını seçin (Şekil 14).

Şekil 14: Interaction1 olayı eklenmesi

Adım 3:

Screen1ViewBase.cpp dosyasını inceleyin (Şekil 15) ve button1 ve textArea1 için ilgili özellik kodlarını bulun.

Yeni eklenen etkileşimler nedeniyle, buttonCallbackHandler oluşturulur ve button1 dokunma olayını yönetir. Tıklanınca, geri çağırma fonksiyonu aracılığıyla add_number fonksiyonunu çağırır.

Şekil 15: Screen1ViewBase.cpp

Screen1ViewBase.hpp içeriği (Şekil 16).

Şekil 16: Screen1ViewBase.hpp içeriği

Adım 4:

gui bölümünde Screen1View.cpp ve Screen1View.hpp dosyalarını ekleyin.
add_number programını, birikim için count parametresini kullanacak şekilde yazın (Şekil 17 ve 18).

Unicode kullanarak: snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count) ile güncellenen count değerini textArea1 içine aktarın.

Sonra textArea1.invalidate() ile veriyi yenileyin.

Şekil 17: Screen1View.cpp içeriği

Şekil 18: Screen1View.hpp içeriği

Simülatörü çalıştırdıktan sonra, her button1 tıklamasında, textArea1 (count değeri) 0'dan başlayarak artmaya başladığını görebilirsiniz (Şekil 19).

Şekil 19: Simülatör sonuç ekranı

Bu, nesne özellik tanımlarının genellikle generated yolunda oluşturulduğunu ve kullanıcıların mantık yürütme kodunu gui bölümünde yazdığını doğrulamaktadır.

TouchGFX ve Builder Nesne Özellikleri Örnekleri

Winstar tarafından sağlanan Smart Display GUI Builder, UI/UX tasarımı için sürükle ve bırak özellikli bir araçtır. Müşterilere, ST MCU tabanlı ürünlerin hızlı geliştirilmesi ve tasarımı için uyarlanmış, kodsuz bir geliştirme hizmeti sunar. TouchGFX framework'ünün bir uzantısı olarak inşa edilen GUI Builder, TouchGFX'in orijinal widget işlevselliklerini entegre eder, ana farkı ise birden fazla sistem arabirimi ve iletişim protokolünü desteklemesidir. Bu, kullanıcıların komutların widget kontrolünü ve değişikliklerini nasıl etkilediğini doğrudan gözlemlemelerini sağlar.

İşte Builder'a giriş:
https://www.winstar.com.tw/tr/video/play/142.html

Smartdisplay'in tasarım felsefesi, TouchGFX ayarlarının işlevselliğiyle ilgilidir ve STM32 MCU kullanılarak yazılmış firmware, MVP'nin temeli olarak kabul edilir. İçindeki nesneler, mevcut öğelerle ve mantıkla birleştirilerek tasarlanmıştır.

Bu nedenle, GUI Builder tarafından açılan nesneler arasında, bazı öğeler, ilgili görüntüleme sonuçlarını elde etmek için mevcut TouchGFX UI bileşenleri kullanılarak uygulanabilir.

*Ek Açıklama Bölümü

Builder slider (kaydırıcı) kullanılarak basit bir örnek aşağıda verilmiştir (Şekil 20):

Şekil 20: Builder slider özellik sayfası

Builder Slider’ın özellikleri aşağıdaki gibidir:

Size:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Pos: 0

Bu parametreler, TouchGFX içerisindeki Slider Bileşen ayarları ile eşleşir (Şekil 21).

Şekil 21: TouchGFX Slider özellikleri

TouchGFX Slider’ın özellikleri aşağıdaki gibidir:

Location:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Y: 0

Kullanıcılar, GFX’te Başlangıç (Start) değerini ayarlayarak Builder’da benzer sonuçları simüle edebilir (Şekil 22).
Değer 100 olarak ayarlanırsa Builder’da da aynı sonuç simüle edilebilir (Şekil 23).

Şekil 22: TouchGFX'te Start = 100 ayarlanması

Şekil 23: Builder'da Test Değeri = 100 ayarlanması

GFX tarafından oluşturulan Screen1ViewBase.cpp dosyasına baktığımızda (Şekil 24):

Şekil 24: Screen1ViewBase.cpp içindeki fonksiyon

Yukarıda belirtilen parametrelerin kodda nasıl kullanılabileceğini ve değiştirilebileceğini anlayabiliriz. Bu sayılar, GFX projesinin tasarımıyla doğrudan ilişkilidir. Builder proje yüklediğinde ve Cihaz Slider’ın başlangıç parametrelerini sıfırladığında geçerlidir.

Eğer Host Slider değerini değiştirme komutu gönderirse, view içinde slider1.setValue() fonksiyonunu çalıştırarak nesnenin değişimini tamamlar (Şekil 25).

Şekil 25: Host slider komutu gönderiyor

Bu, Builder ile TouchGFX nesneleri arasındaki ilişkinin basit bir açıklamasıdır.

Builder Nesnelerinin Gelecekteki Genişletilmesi ve Geliştirme Değerlendirmesi

TouchGFX’in 4.24.0 sürümündeki son güncellemeyle birlikte yeni nesneler ve fonksiyonlar kullanıma sunuldu. Eğer Builder entegrasyonu değerlendirilmek istenirse, önce GFX’ten varsayılan demo örnekleri denenebilir ve araştırılabilir (Şekil 26):

Şekil 26: Çeşitli örnek projeler

4.24.0 sürümü QR kod gibi yeni nesneleri desteklediğinden, Builder entegrasyonu durumunda kullanılabilecek parametre ve fonksiyonlar değerlendirilmelidir.

QR Kodu Kullanarak Örnek:

1. BlankUI seçin.
2. QR kod Konteyner’ını sürükleyin.
3. Ayarlanabilir özelliklere bakın (Şekil 27):
Location: (X, Y)
Configuration:
- QRVersion
- Scale
- Text
- Error Correction Code…

Şekil 27: QR kod özellik ekranı

QR kod ile ilgili bu parametreler resmi web sitesinden referans alınabilir (Şekil 28).

Şekil 28: Resmi web sitesi açıklaması

Screen1ViewBase.cpp içinde oluşturulan fonksiyonda, kullanılabilir parametre ve ayarları doğrulayın (Şekil 29):

1. Koordinatları ayarlayın: qrCode1.setXY(208, 224);
2. QR kod sürümünü ayarlayın: qrCode1.setQRCodeVersion(3);
3. QR ölçeğini ayarlayın: qrCode1.setScale(5);
4. QR kod oluşturmak için metin girin:
qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

Şekil 29: Screen1ViewBase.cpp içinde oluşturulan kod