HMI: Dokunmatik Ekranı Arduino ile Kullanmak

Bu yazıya başlamadan önce HMI Ekran Nedir yazımızı okumanızı tavsiye ediyoruz. Nextion markasının üretmiş olduğu LCD’ ler diğer grafik ve karakter LCD’ lere göre farklı bir yapıda çalışmakta. Bu farklılık LCD’ nin ayrı olarak programlanmasından kaynaklanmakta. Yani LCD için hazırlanan, Nextion’un üretmiş olduğu bir özel bir arayüz uygulaması var ve siz bu arayüz uygulamasıyla LCD üstünde arzu ettiğiniz arayüzü rahatlıkla oluşturabilirsiniz. Bu özellik ile ister Arduino, ister PIC, ister STM gibi. Kartları Nextion Editör isimli uygulama üstünden geliştirdiğiniz arayüzler ile rahatlıkla kullanabilirsiniz. Mikrodenetleyicide olması gerekli olan tek ihtiyaç UART iletişim kanalı. Çünkü Nextion ekran ile kullanılacak mikrodenetleyiciler ya da mikroişlemciler ile UART üstünden haberleşiyor. UART hattı üstünde veri göndererek LCD’ üstündeki değerleri değiştirebilir veya ekrana dokunduğunuzda dokunmaları UART üstünden algılayabilirsiniz. Bu yazımızda ekran yazılımı hem SD KART hem de USB to TTL (seri haberleşme) yöntemi ile yükleyeceğiz.

Nextion Uygulaması ile Arayüz Oluşturmak

Nextion ile HMI ekrana arayüz oluşturmak için Nextion Editör programını indirip bilgisayarınıza kurmanız gerekiyor. Nextion Editor programındaki sürükle-bırak özelliği arayüz geliştirmeyi kolaylaştırmaktadır. Nextion Editörü ile projelerinize, Resim, Yazı, Kayan Yazı, Analog ve Dijital değerleri görmek için sayısal giriş ve çıkışlar, Buton, Grafik, İlerleme çubuğu(progressBar), Slider, Checkbox, Radio ve QRcode gibi pek çok bileşen ekleyebilirsiniz. Programı indirmek için buraya tıklayabilirsiniz.

Programın kurulumu bir hayli kolaydır. Kurulumu yaptıktan sonra Nextion Editör programını çalıştırıyoruz. Karşımıza aşağıda resimde görülmüş olduğu gibi bir sayfa çıkacaktır. Bu sayfadan sol üst köşede bulunan File – New adımlarını izleyerek, oluşturacak olduğumuz projeyi .HMI uzantılı olarak her hangi bir klasöre kaydediyoruz.

Kayıt işlemi sonrasında karşımıza aşağıda görselde görülmüş olduğu gibi bir sayfa çıkacaktır. Karşımıza çıkan sayfada Ekran ile alakalı genel ayarlarımızı yapacağız. Device bölümünde, projemizde kullanacak olduğumuz Ekran modelini seçiyoruz. Biz derslerimizde 2.8 (320×240) inch olan modeli kullanacağız.

DISPLAY kısmında, projemizde kullanacak olduğumuz Ekranın Yatay (90° veya 270° derece) veya Dikey (0° veya 180°) olarak nasıl görüntüleneceğini seçebiliyoruz.

project kısmında ise projemizde kullanacak olduğumuz HMI Ekrana istersek herhangi bir şifre koyabiliyoruz. Koyduğunuz şifreyi asla kaybetmeyin, yaptığınız tüm işlemler sıfırlanır hatta tekrar geri dönüşü olmayabilir.

Tüm ayarlamalarımızı yaptıktan sonra OK butonu ile devam ediyoruz, karşımıza arayüzü oluşturacağımız programın bileşen ve araçlar sayfası çıkmış oluyor, artık bir HMI ekrana arayüz geliştirmek için hazırız.

1. Ana Menü
2. Ekran Alanı : Projede kullanacak olduğumuz Ekran Boyutu görülmektedir. Bu alana sürükle-bırak özelliğiyle bileşenler eklenir.
3. Araç Kutusu : Projede kullanacak olduğumuz bileşenler burdan eklenir.
4. Resim ve Font Alanı : Projede kullanacak olduğumuz Resim eklenir. Ayrıca Projede kullanacak olduğumuz Yazı Fontları ayarlanır.
5. Derleyici Çıkışı : Projeyi derlediğimiz zaman çıktı burda gösterilir.
6. Olay Alanı : Projede kullanılacak olan seçili bileşenin çalıştırmasını istediği kullanıcı kodları bu alana kaleme alınır.
7. Sayfa Alanı : Projede kullanılacak olduğumuz sayfalar burdan eklenir. Birden çok sayfa ekleyebiliriz.
8. Özellikler Alanı : Projede kullanacağımız bileşenin fonksiyonları burda gösterilir ve düzenlenir.

HMI Ekrana İlk Bakış ve Çalıştırma

Siparişiniz elinize ulaştığı zaman paketten böyle bir kutu daha çıkacak;

Kutu içeriği ise şu şekilde;

4-Pinli GND-RX-TX-VCC bağlantılı kablo ve GND-VCC pinli Micro-USB-F girişli adaptör

HMI Ekranın arkasında ise bizi böyle bir görüntü karşılıyor;

Dahili SD-Kart takabilme özelliği sayesinde kablo bağlantısı olmadanda içine yazılım atmanız mümkün hale geliyor. Bunun yanında gücünü ve yeteneklerini üzerinde taşıdığı STM32F ARM Cortex mikroişlemcisinden alıyor.

HMI Ekranı Bilgisayara Bağlamak

Nextion HMI Ekranlar, UART üzerinden haberleştiğin yazının en başında belirtmiştik, bu yüzden iletişimleri kurmak için isterseniz Arduino, isterseniz USB to TTL (UART) dönüştürücüler kullanabilirsiniz. Biz bu yazımızda, USB to TTL çeviricisini kullanıp, projemizi yükleyeceğiz. Kablo bağlantıları yaptıktan sonra güç verdiğimizde bizi böyle bir demo ekranı karşılıyor;

Bağlantı Şeması

Nextion Editor programından her hangi bir projeyi Compile edip, Upload butonuna bastıktan sonra, HMI ekranın bağlı olduğu COM portunu seçerek ilk yüklemede eğer HMI Ekranın versiyonu eski yada uyumlu değilse, program otomatik olarak güncellemekte ve kullanıma çok kısa bir sürede hazır hale getirmekte.

İlk bakış ve çalıştırma işlemi bu kadardı, şimdi Arduino ile HMI Ekranımızı birleştirip anlaşılır bir proje örneği ortaya çıkaralım.

Arduino Nextion Kütüphanesi

Aslında bu ekranı kullanmak için kütüphaneye gerek yok fakat, daha hızlı ve basit kullanımlar için kütüphaneyi kurmak her zaman daha kullanışlı oluyor o yüzden sizinde ilk kullanım için kütüphaneyi kurmanızı öneriyorum. Öncelikle kütüphaneyi Arduino IDE’si üzerinden indirebilirsiniz, ya da doğrudan buradaki bağlantıdan indirebilirsiniz. İndirmeyi tamamladıktan sonra, .zip klasörünü çıkartıp, Arduino kütüphanelerinin kurulu olduğu klasöre kopyalıyoruz. İndirdiğimiz klasörün adını “ITEADLIB_Arduino_Nextion” olarak değiştiriyoruz. Şu anlık ilk kurulum tamamlanmış oluyor.

Kütüphaneyi Arduino UNO İçin Hazırlamak

Kütüphane bizim de sorguladığımız bir şekilde “Arduino MEGA” içi oluşturulmuş bu yüzden eğer MEGA kartını kullanacaksınız bu adımı atlayabilirsiniz. Bu adımda, kütüphaneyi Arduino UNO için düzenleyeceğiz.

1. Arduino kütüphanelerinin kurulu olduğu klasöre gidin ve “TEADLIB_Arduino_Nextion”  , isimli klasöre girin.
2. NexConfig.h isimli dosyayı favori metin düzenleyiciniz ile açın.
3. Satır 27’yi yorum haline getirin, kısacası böyle görünmeli: //#define DEBUG_SERIAL_ENABLE
4. Satır 32’yi yorum haline getirin, kısacası böyle görünmeli: //#define dbSerial Serial
5. Satır 37’yı bu şekilde değiştirin: #define nexSerial Serial

Düzenleme işlemi bitti, şimdi projemize başlayabiliriz.

Yeni bir yazılımı veya yeni bir cihazı tanımanın en iyi yolu bir proje örneği yapmaktır. Burada, Arduino pinlerini kontrol etmek ve verileri görüntülemek için Nextion ekranında bir kullanıcı arayüzü oluşturacağız.

Oluşturacağımız uygulamanın özellikleri şunlardır:

• Kullanıcı arayüzünün iki sayfası vardır: biri Arduino pinlerine bağlı iki LED’i kontrol eder ve diğeri DHT11 sıcaklık ve nem sensöründen toplanan verileri gösterir;
• İlk sayfada bir LED’i açmak için bir düğme, bir LED’i kapatmak için başka bir düğme, LED’in mevcut durumunu gösteren bir metin kutusu vardır;
• Bu ilk sayfada ayrıca başka bir LED’in parlaklığını kontrol etmek için bir kaydırıcı vardır;
• İkinci sayfa, bir metin etiketinde mevcut sıcaklığı ve bir ilerleme çubuğundaki mevcut nemi gösterir;
• Ayrıca aynı sayfada okumaları güncellemek için bir güncelleme düğmesi vardır.

Gerekli Malzemeler

• Arduino UNO
• Nextion HMI 2.8″
• MicroSD Kart(Opsiyonel)
• LED x 2
• DHT11/22/XX Isı ve Nem Sensörü
• 220 Ohm Direnç x 2
• 4.7K Ohm Direnç
• Kablolar ve Breadboard

Devre Şeması

Dokunmatik ekranı doğrudan Arduino UNO üzerinden besleyebilirsiniz fakat, yetersiz akım ve güç ekranı bozabilir, bu yüzden harici bir güç kaynağı kullanmanız hem Arduino UNO kartınız hem de HMI ekranınız için en sağlıklısı olacaktır.

5V-1A bir güç kaynağı bu proje(2.8 Nextion HMI, Arduino UNO, DHT11, LEDler) için yeterlidir.

Nextion Editor ile Projenin Arayüzünü Oluşturmak

Nextion Editor’ı açın ve yeni bir dosya oluşturmak için Dosya > Yeni’ye gidin. Proje dosyanıza bir isim verin ve kaydedin. Ardından, aşağıdaki şekilde gösterildiği gibi Nextion modelinizi seçmeniz için bir pencere açılır. Buradan kendi modelinize uygun olan modeli seçin.

Eğer tek tek oluşturmak istemiyorsanız buradan .hmi dosyasını indirebilirsiniz.

Ekranı seçtikten sonra, ekranın yönünü seçmeniz için bir pencere daha sizi karşılayacak:

Vertical yani yatay görünümü seçtikten sonra “Done” butonu ile projemizin ana sayfasına yönleniyoruz.

Arka Plan Eklemek

Bir resmi arka plan olarak kullanmak için, Nextion ekranınızla tam olarak aynı boyutlara sahip olmalıdır. Biz 2.8″ ekran kullanıyoruz, bu nedenle arka plan görüntüsünün 240 × 320 piksel olması gerekiyor. Ekran boyutlarınızı kontrol edin ve arka plan resminizi buna göre düzenleyin. Örnek olarak aşağıdaki resmi kullanıyoruz fakat isterseniz her hangi bir resmi 240×320 boyutlarına indirgeyip kullanabilirsiniz:

Arka plan resminizi seçtikten sonra bu yolla devam ediyoruz:

1. Nextion ekranının sol alt köşesinde yazı tipleri ve resimler için bir pencere var. “Picture” sekmesini seçin .
2. + düğmesine bastıktan sonra arka plan resminizi seçin. Seçtiğiniz resim, resim listesine eklenecek ve bir numara verilecektir. İlk eklenen olduğu için bu numara “0” olacaktır.

3. Araç kutusuna gidin ve Resim bileşenine tıklayın. Eklediğiniz resim, resim alanınıza otomatik olarak eklenecektir.

4. Bu bileşeni seçtikten sonra, “Attribute” alanında özelliklerini görmelisiniz. Düzenlemek için niteliklere çift tıklayabilirsiniz. İstediğiniz resmi seçmek için “pic” kısmına çift tıklayın. İstediğiniz resmin indeksi olan “0” yazmalı veya açılan yeni pencerede resmi seçmelisiniz. “0” yazdıktan sonra, değişiklikleri kaydetmek için ENTER tuşuna basmanız gerekiyor.

Yazı Fontları Eklemek

Ekrana metin yazdjrmak için, Nextion Editor’da bir yazı tipi oluşturmanız gerekiyor. Tools > Font Generator. Yolunu izleyince yeni bir pencere açılıyor, buradan fontu seçebilirsiniz.

Burada yazı tipi yüksekliğini, türünü, aralığını ve kalın olmasını isteyip istemediğinizi seçebilirsiniz. Yazı tipi, sol alt köşedeki Yazı Tipi kütüphanesine eklenecek ve bir isim verilecektir. Bu sizin ilk yazı tipiniz olduğundan, isim olarak “0”a sahip olacaktır.

Metin(text), Kaydırma(slider), Düğme(button) Eklemek

Şu anda, ekran alanına bileşenler eklemeye başlayabilirsiniz. Projemiz için, aşağıdaki şekilde gösterildiği gibi üç düğmeyi, iki etiketi ve bir kaydırıcıyı sürükleyin. Görünümlerini istediğiniz gibi düzenleyebilirsiniz.

Tüm bileşenlerin objname adında bir özniteliği vardır. Bu, bileşenin adıdır. Bileşenlerinize iyi isimler verin çünkü daha sonra Arduino kodu için onlara ihtiyacınız olacak. Ayrıca, her bileşenin o sayfadaki o bileşene özgü bir kimlik numarasına sahip olduğunu unutmayın . Aşağıdaki şekil, kaydırıcı için nesne adını ve kimliğini göstermektedir.

Bileşenleri istediğiniz gibi düzenleyebilirsiniz, ancak kullanacağımız Arduino koduyla çalışması için kaydırıcının “maxval” değerini 255 olarak düzenlediğinizden emin olun.

Dokunulabilir Bileşenler

Dokunulabilir bileşenler (düğmeler ve kaydırıcı) için bir olay tetiklemelisiniz, böylece Arduino bir bileşene dokunulduğunu bilir. Bir bileşene bastığınızda veya bıraktığınızda olayları tetikleyebilirsiniz. Kısacası dokunmatik eylemini ayarlayacağız.

Burada dokunma bırakıldığında bir olayı tetikleyeceğiz. Bu olay, dokunulan bileşenin kimliğini gönderecektir.

Bunu yapmak için, düğmelerden birini seçin ve olay penceresinde “Touch Released Event” sekmesini seçin ve “Send Component ID” seçeneğini işaretleyin. Bu işlemi diğer düğme ve kaydırıcı için tekrarlayın.

Yeni Bir Sayfa Oluşturma ve Gezinme

GUI’nize daha fazla sayfa eklemek gerçekten çok basit. Sağ üst köşedeki Sayfa alanında, yeni bir sayfa eklemek için Ekle düğmesini seçin . Yeni bir sayfa oluşturulacaktır. İlk sayfanız 0 olduğundan dolayı bu sayfanın numarası tahmin edeceğiniz üzere 1 olacaktır.

Ana sayfadan, ikinci sayfaya gitmek için sağ alt köşeye buton ekleyip isim olarak bNext tanımladık.

Bu düğmeyi sayfa1’e yani ikinci sayfaya yönlendirmek için, kullanıcı kodu bölümünde (aşağıda kırmızıyla vurgulanan) Etkinlik penceresine eklemeniz gerekiyor.

Kullanıcıyı başka bir sayfaya yönlendirmek istiyorsanız, Kullanıcı Kodunu sayfanın numarasıyla değiştirmeniz yeterlidir.

İkinci sayfamız DHT11 sıcaklık ve nem sensöründen gelen verileri gösterecektir. Sıcaklığı Santigrat ve Fahrenheit cinsinden ve nemi tutmak için birkaç etiketimiz var. Ayrıca nemi görüntülemek için bir ilerleme çubuğu ve okumaları yenilemek için bir GÜNCELLEME düğmesi ekledik.

Ana sayfaya geri dönmek için ise bBackt butonunu ekledik bu buton sayfa0’a yeniden yönlendirir.

“ºC”, “ºF” ve “%” gibi birimleri  Arduino kodumuz çalışırken okumalarla doldurulacak boş etiketlerimiz olduğuna dikkat edin.(t0_, t1 t2)

Arayüzü Test Etmek

Arayüzünüzü Nextion Editor’de test edebilirsiniz. Bunun için ana menüdeki hata ayıklama(Debug) düğmesine tıklamanız gerekiyor.

Yeni bir pencere açılacaktır, simülasyon şeklinde testleri yapabilirsiniz.

Bu pencerede düğmelere tıklayabilir ve ne olduğunu görebilirsiniz. İlgili düğmelere tıklayarak sayfalar arasında geçiş yapabilmelisiniz. Yukarıdaki şekilde kırmızıyla vurgulanmış olarak her düğmeyi tıkladığınızda döndürülen verileri de görmelisiniz.

Projeyi Derlemek ve Yüklemek

Oluşturduğunuz projeyi ister SD kart ile ister seri haberleşme adaptörleri ile gerçekleştirebilirsiniz.

İpucu

Seri haberleşme adaptöre ile program yüklemek, SD karta göre kat ve kat daha hızlı ve işlevseldir.

SD Kart ile Program Yüklemek

1. Ana menüdeki Compile düğmesine tıklayın;

2. microSD kartı bilgisayarınıza takın;

3. File > Open File Builder seçeneğine gidin ;

4. Şu anda çalışmakta olduğunuz dosyaya karşılık gelen .TFT dosyasını kopyalayın ;

5. Bu dosyayı microSD karta yapıştırın (not: microSD kart önceden FAT32 olarak biçimlendirilmiş olmalıdır);

6. microSD kartı Nextion ekranına takın ve ekrana güç verin.

7. Ekranda kodun yüklendiğini belirten böyle bir mesaj görmelisiniz.

8. Hazır olduğunda aşağıdaki mesajı görüntülemesi gerekir:

9. Nextion ekranının gücünü kesin ve microSD kartı çıkarın.

10. Gücü tekrar açın, programımız başarıyla yüklenmiş ve kullanıma hazır hale gelmiştir.

Seri Haberleşme ile Program Yüklemek

Her hangi bir USB-to-TTL çeviri ile Nextin HMI ekranınıza program yükleyebilirsiniz.

Bağlantıları tamamladıktan sonra, aşağıdaki adımlarla programımızı ekrana yükleyebiliriz;

Upload butonuna basın ardından, port seçimi ve yazdırma hızını seçmelisiniz

Yükleme işlemi sırasında ilerlemeyi hem program üzerinden hem ekran üzerinden takip edebilirsiniz.

Ekran ise böyle bir durumda olacaktır;

Yükleme işlemi bittikten sonra, ekran otomatik olarak tekrar başlayacaktır.

Arduino Kodunu Yazmak

GUI hazır olduğunda, Nextion’un Arduino ile etkileşime girebilmesi için Arduino kodunu yazmanız gerekir ve bunun tersi de geçerlidir. Nextion ekranıyla etkileşim kurmak için kod yazmak, Arduino’ya yeni başlayanlar için kolay değildir, ancak göründüğü kadar karmaşık da değildir.

Arduino’nun Nextion ekranıyla etkileşime girmesi için kod yazmayı öğrenmenin iyi bir yolu, Nextion kitaplık klasöründeki örnekler klasörüne gitmek ve keşfetmek.

Yapmanız gereken ilk şey, Arduino ile etkileşime girecek olan GUI’deki bileşenlerinizi not almak ve kimliklerini, adlarını ve sayfalarını not etmektir. İşte kodun etkileşime gireceği tüm bileşenlerin bir tablosu (bileşenleriniz, onları GUI’ye eklediğiniz sıraya bağlı olarak farklı bir kimliğe sahip olabilir).

Gerekli Kütüphaneler

Adafruit_DHT ve Nextion kütüphaneleri işlem yapabilmeniz için bu projede gereklidir.

Arduino Kodu

#include "Nextion.h"
#include "DHT.h"
#define DHTPIN 4     // what digital pin we're connected to
// Uncomment whatever type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
// Initialize DHT sensor.
DHT dht(DHTPIN, DHTTYPE);
// LED pins
const int led1 = 8;
const int led2 = 9;
// Declare your Nextion objects - Example (page id = 0, component id = 1, component name = "b0") 
NexText tState = NexText(0, 4, "tState"); 
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexText tHumidity = NexText(1, 9, "tHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
// Register a button object to the touch event list.  
NexTouch *nex_listen_list[] = {
  &bOn,
  &bOff,
  &h0,
  &bUpdate,
  NULL
};
/*
 * Button bOn component pop callback function. 
 * When the ON button is released, the LED turns on and the state text changes. 
 */
void bOnPopCallback(void *ptr) {
  tState.setText("State: on");
  digitalWrite(led1, HIGH);
}
/*
 * Button bOff component pop callback function. 
 * When the OFF button is released, the LED turns off and the state text changes. 
 */
void bOffPopCallback(void *ptr) {
  tState.setText("State: off");
  digitalWrite(led1, LOW);
}
/*
 * Slider h0 component pop callback function. 
 * When the slider is released, the LED brightness changes and the slider text changes. 
 */
void h0PopCallback(void *ptr) {
  uint32_t number = 0;
  char temp[10] = {0};
  // change text with the current slider value
  h0.getValue(&number);
  utoa(number, temp, 10);
  tSlider.setText(temp);
  // change LED brightness
  analogWrite(led2, number); 
}
/*
 * Button bUpdate component pop callback function. 
 * When the UPDATE button is released, the temperature and humidity readings are updated. 
 */
void bUpdatePopCallback(void *ptr) {
  // Reading temperature or humidity takes about 250 milliseconds!
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  float f = dht.readTemperature(true);
  // Check if any reads failed and exit early (to try again).
  if (isnan(h) || isnan(t) || isnan(f)) {
    return;
  }
  // Update temperature in Celsius
  static char temperatureCTemp[6];
  dtostrf(t, 6, 2, temperatureCTemp);
  tTempC.setText(temperatureCTemp);
  // Update humidity percentage text and progress bar
  char hTemp[10] = {0}; 
  utoa(int(h), hTemp, 10);
  tHumidity.setText(hTemp);
  jHumidity.setValue(int(h));
  // Update temperature in Fahrenheit
  static char temperatureFTemp[6];
  dtostrf(f, 6, 2, temperatureFTemp);
  tTempF.setText(temperatureFTemp);
}
void setup(void) {    
  dht.begin();
  Serial.begin(9600);
  // You might need to change NexConfig.h file in your ITEADLIB_Arduino_Nextion folder
  // Set the baudrate which is for debug and communicate with Nextion screen
  nexInit();
  // Register the pop event callback function of the components
  bOn.attachPop(bOnPopCallback, &bOn);
  bOff.attachPop(bOffPopCallback, &bOff);
  h0.attachPop(h0PopCallback);
  bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
  // Set LEDs as outputs
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
}
void loop(void) {   
  /*
   * When a pop or push event occured every time,
   * the corresponding component[right page id and component id] in touch event list will be asked.
   */
  nexLoop(nex_listen_list);
}

Kodun Analizi

Merak ettiğiniz ya da anlamadığınız kısımları yorumlar kısmında belirterek, bizden eklememizi isteyebilirsiniz.

Editörde Oluşturduğumuz Nesneleri Bağlamak

Bu kısım GUI için oluşturduğumuz nesnelerin id’sini kullanarak Arduino üzerinde programımıza tanıtmış oluyoruz.

NexText tState = NexText(0, 4, "tState"); 
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
NexText tHumidity = NexText(1, 9, "tHumidity");

Proje Dökümanları

.HMI .INO .TFT dosyalarını doğrudan burdan indirip kullanmaya başlayabilirsiniz.

Son Görüntü