Arduino ile Nextion Dokunmatik Ekran Kullanımı

Merhaba arkadaşlar,

Bu konuda kullanmayı yeni denediğim ve Arduino gibi mikrodenetleyiciler ile görsel arayüzler oluşturmayı kolaylaştıran bir grafik LCD modelini inceleyeceğiz. Başlıktan da anlaşıldığı üzere Nextion markasının ürettiği LCD’ ler diğer grafik ve karakter LCD’ lere göre biraz farklı bir mantık ile çalışmakta. Bu farklılık LCD’ nin ayrı olarak programlanmasından kaynaklanmakta. Yani LCD için hazırlanan firmanın ürettiği bir özel bir arayüz uygulaması var ve siz bu arayüz uygulaması ile LCD üzerinde istediğiniz arayüzü rahatlıkla oluşturabiliyorsunuz. Bu özellik aynı zamanda geliştiriciye platformdan bağımsızlık imkanı veriyor. Yani siz ister Arduino, ister PIC, ister STM vb. kartları Nextion Editör isimli uygulama üzerinden geliştirdiğiniz arayüzler ile rahatlıkla kullanabiliyorsunuz. Mikrodenetleyicide olması gereken tek ihtiyaç UART arayüzü. Çünkü ekranlar kullanılacak mikrodenetleyiciler veya mikroişlemciler ile UART üzerinden haberleşiyor. Siz UART hattı üzerinde veri göndererek LCD’ üzerindeki değerleri değiştirebiliyor yada ekrana dokunduğunuzda dokunmaları UART üzerinden algılayabiliyorsunuz. Daha başka bu LCD takla mı atsın .. :)

Ekranları internet üzerinde bir çok yerden bulmak mümkün. Ancak aceleniz yoksa yurtdışından(Aliexpres vb.) almanızı tavsiye ederim. Fiyatlar yarı yarıya düşüyor nerdeyse. Farklı boyutlarda ve hafızalarda modelleri bulunmakta. Bu modeller 2.4 inch ve 4MB Flash hafızadan başlayıp 7 inch ve 16MB Flash hafızaya kadar gidebilmekte. Burdaki inch değeri herkesin blidiği ekran boyutu. Flash hafıza ise ekranın dahili hafızası. 4 MB oluşturacağınız hafıza için küçük gelebilir. Bu durumda Ekran üzerinde bulunan SD kart slotunu kullanarak arayüzünü çalıştırabiliyorsunuz. SD kart kullanmak istemediğiniz zamanlarda basit bir ftdi dönüştürücü ile ekranı programlıyabiliyorsunuz. Ekranın şu ana kadar benim için tek olumsuz yanı Nextion Editor arayüzünün PNG resimleri desteklemiyor olması. Bu özellik dışında başka bir olumsuz özellik ile karşılaşmadım.

Nextion Editor ile güzel bir arayüz oluşturmak istiyorsanız biraz Photoshop yada benzeri bir program bilgisine ihtiyaç duyacaksınız. Ancak basit arayüzler için elbet bu gerekli değil. Nextion Editor’ de solid arayüzlerde oluşturma imkanınız var. Yapacağımız proje için tasarladığım kendi çizimlerimi deniyebilmeniz için sayfanın sonunda paylaşacağım.

Arayüz oluşturulması

Şimdi gelelim yapacağımız projeye. Nextion ile iki sayfalı bir uygulama yapacağız. İlk sayfada iki buton iki text box, ikinci sayfada ise bir progressbar, iki durumlu buton ve textbox olsun. Butonlara basınca ledlerin durumu değişsin. Analog girişlere bağlıyacağımız potansiyometrelerin gerilim değerlerini textbox’ lar üzerinde gösterelim. 3. potansiyometrenin analog değerini % olarak progress bar üzerinde gösterelim. İki durumlu buton ise ikinci bir ledi kontrol etsin.

 

Resimde kullanacağımız Tasarım arayüzü görünmekte. Arayüz çok fazla fonksiyona sahip olmadığından kullanılması çok zor değil. Bir çok programda olduğu gibi “File”, “Tool”, “Help” gibi menüleri var. Sol tarafda ise C# ile arayüz geliştirmişlerin yakından tanıdığı “Toolbox” menüsü var. Üstte yeni proje açmak ve var olmak dosayaları açmak için “New” ve “Open” tuşları mevcut. Burada diğer tasarım arayüzlerinden yabancı olabileceğiniz “Compile“, “Debug” ve “Upload” butonları mevcut. Bu butonlar oluşturduğunuz arayüzü sırası ile derlemek, simule etmek ve Nextion Ekranınıza yüklemek içindir. Simule etme özelliğinin olması özellikle normal OLED ekranlar ile yapacağınız tasarımlara kıyasla işinizi oldukça hızlandıran bir özellik. Siz oluşturduğunuz arayüzü derledikten sonra “Debug” butonuna basarak Nextion ekrana yüklemeden bilgisayar üzerinde nasıl göründüğüne bakabiliyor ve etkileşime geçtiğinizde (tıklama, kaydırma vb.) size ne verisi geleceğini gözlemleyebiliyorsunuz.

Yeni proje oluşturma işlemi ile başlıyalım. “New” butonuna bastığınız anda size oluşturucağınız projenin “*.HMI” uzantılı dosyasını nereye kayıt edeyim diye soracaktır. Kendinize uygun bir yer seçip devam edebilirsiniz. Daha sonra resimdeki gibi bir ekran karşınıza gelecektir. Bu ekranda Nextion Ekranınız modelini seçmeniz gerekmektedir. Doğru seçmeye dikkat edin yanlış seçmeniz durumunda oluşturduğunuz tasarımı ekranınıza yükleyemezsiniz. Benim kullandığım modül 240*400 boyutlarında olduğu için onu seçtim ve editör ekranımın boyutları bu ebatta olacaktır.

 

Ekran boyutunu seçtikten sonra “OK” butonuna basmadan solda ok ile gösterilen “DISPLAY” ekranında ekran yönünü seçmelisiniz. Bu seçimi yaptıktan sonra editör içerisinde değiştirme seçeneği bulunmamaktadır.

Yukarıdaki resimde numaralı olanlar resim eklemek için gereken adımlardır. Sırası ile baktığımızda:

1. Resimleri projeye dahil etme, silme işlemlerinin yapıldığı kısımdır. Ekleyeceğiniz resimlerin ekran boyutundan büyük olmamasına dikkat etmelisiniz. Editör içi yeniden boyutlandırma olmadığından resminizin tamamı görüntülenemeyecektir. Yani benim ekranım için en büyük resmin “400 x 200” boyutlarında olmalıdır. Genelde ilk resim arka plan resmidir ve tüm ekranı kaplayacak şekilde seçilir.
2. Resim eklemek için kullanılacak aracı “toolbox” aracından ekleyebiliriz.
3. Ekran üzerinde aracın görünümü. 4. kısımda görünen yerin açılması için 3 numarada görünen eklediğimiz araca tıkamalısınız.  Bu sadece resim aracı tüm araçlar için geçerlidir.
4. Bu kısım seçilen aracın özelliklerinin bulunduğu kısım. Seçilen araca göre bu kısımdaki özellikler değişecektir. Resim aracı için sadece ok ile gösterilen “pic” kısmına tıklamanız gerekecektir. Daha sonra 5. kısım açılacaktır.
5. Bu kısımda o araç için gösterilecek resim seçilecektir. Resmin üzerine çift tıklarsanız resim görüntülenmek amaçlı açılır. Bu yüzden resmi seçip sonra “OK” butonuna basmalısınız.

Numaralandırılmamış olan kısımlar sayfaları gösteren ve eventler meydana geldiğince kullanıcı kodlarının yazılabileceği yerlerdir. Kullanıcı kodları zorunlu değildir. Eğer gerek duyarsanız eklemelisiniz. Ancak kullanıcı kodu kısmının üzerindeki eventler buton gibi araçlar kullanılırken önemlidir. Soldaki sekme olan “Touch Press Event” butona anını ifade etmektedir. “Touch Release Event” ise butonu bırakma anı anlamına gelmektedir. Ayrıca aradaki “Send Component ID” checkbox’ u seçilen araçda ilgili event meydana geldiğinde o araca ait bilgiler gönderilip gönderilmeyeceğini belirler. Örnek ile açıklayacak olursam; Bir butonun “Touch Release Event” sekmesindeki checkbox işaretli ise o butonun üzerine dokunup elinizi kaldırdığınızda Nextion’ dan Arduino’ ya seri port üzerinden “0x65 0x00 0x02 0x00 0xFF 0xFF 0xFF” şeklinde bir veri gidecektir ki bunu simule ederek de görebilirsiniz. Bu verinin anlamı şu şekildedir:

• 0x65: Veri başı belirteci
• 0x00: Sayfa ID’ si belirteci
• 0x02: İlgili aracın ID’ si
• 0x00: Buton için bırakma eventi (Basma eventi 0x01′ dir)
• 0xFF: 3 adet 0xFF iletişimin bittiği anlamına gelmektedir.

Daha önce de belirttiğim gibi Nextion’ u kullanmak için herhangi bir kütüphane olmasına gerek yok aslında. Siz Nextion’ dan gelen veriyi anlayabilir ve Nextion’ a doğru formatta veri gönderebilirseniz zaten cihazı istediğiniz mikrodenetleyici ile rahatlıkla kullanabilirsiniz. 

Şimdi de buton eklemeye bakalım. Nextion editöründe default olarak butonlar bulunmakta ancak o butonlar sıradan kare şeklinde estetik görünüme sahip olmayan butonlardır. Siz bu butonlara resmi kıpma özelliği vererek daha estetik görünümlü butonlar haline getirebiliyorsunuz. Mantığı aslında çok basit. Butona bir arka plan resmi veriyorsunuz. Basıldığı zaman ise farklı bir arka plan resmi veriyorsunuz. Böylece butona basıldığında görsel bir değişim olması hoş bir buton elde etmiş oluyorsunuz. En güzel yanı ise arka plandaki resimden buton çerçevesi olan kısmını kendini ayırabiliyor olması. Bu işlemi adım adım inceleyecek olursak:

1. Araçlar ekranından butonu arayüzümüze ekledik
2. Butonun konumunu resim üzerinde istediğimiz yere sürükledik ve boyutunu kenarlarından çekerek ayarladık.
3.  Butonun arka planını kesme moduna getirdik
4. pic1: Butonun basılmadan önceki resim, pic2: Butona basıldığı andaki resim (Resim seçim ekranı arka plan seçimi ile ayndıdır.)
5. Butondan elimizi kaldırma eventi sekmesine geçtik
6. Komponent bilgisini gönderek mikrodenetleyiciden butona basılmasının algılanmasını sağladık.

Bu şekilde basitçe bir butonu arayüzümüze eklemiş olduk. Dikkat etmeniz gereken nokta arka plan resmi seçiminde butona özel arka plan resmi eklemenize gerek olmaması. Siz arka plan resmini başta seçtiğimiz resmi seçin. Butonu kaydırdığınızda denk gelen yer direk butonun resmi olacaktır. Bu butonun arka plandaki resmi kırparak çalışıyor olmasının sağladığı güzel bir özelliktir. İki durumlu butonda da durum benzerdir. Ancak aynı özellik “progress bar” da bulunmamaktadır. Bu yüzden progress barı ayrı bir çizim olarak eklemelisiniz. 

Bu kısım yeterince açık gelmedi ise Youtube üzerinden video izlemenizi tavsiye ederim. Youtube üzerinde bir çok kaynak mevcut. Çünkü görsel şeyleri yazı ile anlatmak oldukça zor bir iş. Video üzerinde bu tür şeyleri anlamanız çok daha kolay olacaktır.

Nextion Editör ile yaptığımız tasarımı ekrana yüklemek için bir FTDI dönüştürücüye ihtiyaç vardır. VCC, GND, RX ve TX bağlantılarını yaptıktan sonra arayüz üzerindeki “Upload” butonuna basıp dönüştürücünün bağlı olduğu portu seçmeniz yeterli olacaktır.

Proje Şematiği

Projede kullanacağımız arayüzü oluşturduk. Şimdi sıra geldi bağlantı şemasına. Fritzing programında Nextion ekran bulamadığım için yerine farklı bir eleman koydum. Bağlantı şeklinin doğru olmasına dikkat ettiğiniz sürece sorun olmayacaktır.

• Nextion 5V      ==> Arduino 5V
• Nextion GND  ==> Arduino GND
• Nextion TX      ==> Arduino D10
• Nextiob RX      ==> Arduino D11

Yazılım

Uygulamanın yazılım kısmında bir Arduino için yazılmış bir kütüphane kullanacağız. Bu kütüphane başta biraz karmaşık gelebilir ancak zamanla kullanışlı olduğunu fark edeceksiniz. Kütüphaneye buradan ulaşabilirsiniz. Bu kütüphaneyi kullanmak istemezseniz buradaki Nextion komut setlerini inceleyebilirsiniz.

Öncelikle kütüphaneleri projeye dahil edelim.

#include <Nextion.h>           //Zorunlu olarak kullanılmalı
#include <NextionPage.h>
#include <NextionProgressBar.h>
#include <NextionButton.h>
#include <NextionText.h>
#include <NextionDualStateButton.h>

Kütüphaneler adından da anlaşıldığı üzere ihtiyaca göre dahil edilmeliler. Yani sizin projenizde buton kullanacaksanız buton için olan kütüphaneyi projeye dahil etmelisiniz. Yoksa bellekte gereksiz yer kaplayacaktır. Daha sonra arayüz ile haberleşeceğimiz UART birimini seçelim. Bu kısmı belirlemek sizin kullanımınıza kalmış. İster SoftwareSerial kütüphanesi ile oluşturulmuş bir UART seçin isterseniz Arduino üzerindeki normal Seri haberleşme donanımlarını. Arduino Uno üzerinde sadece bir tane Seri haberleşme donamını bulunur. Ancak Arduino Mega’ da 4 tane vardır (Serial, Serial1, Serial2, Serial3). Hepsi aynı işi yapacaktır. Ancak Uno kullanıyorsanız SoftwareSerial kullanmanızı tavsiye ederim. Diğer türlü her programlama sırasında Nextion erkanın kablolarını Arduino’ dan çıkarmanız gerekecektir (Aksi taktirde timeout hatası alırsınız). SoftwareSerial kullanırken haberleşmenin en yüksek hızının 38400 baud rate olduğuna dikkat etmelisiniz. Daha üstünü kütüphane desteklememektedir. 

#include <SoftwareSerial.h>
SoftwareSerial nextionSerial(10, 11); // RX, TX

SoftwareSerial kütüphaneisi dahil edip sınıfı oluşturduk. Burada parametre olarak verilen 10 ve 11 numaralı pinler kullanılan haberleşme pinleridir. Burada dikkat edilmesi gereken RX-TX bağlantısının çapraz yapılması gerektiğidir. Yani Nextion Ekranın TX bağlantısı, Arduino üzerindeki RX olan 10 numaralı pine bağlanmalıdır. Bu işlemden sonra sıra geldi ekranda kullanacağımız araçları yazılımda oluşturmaya.

Nextion nex(nextionSerial);                  //kullanılacak haberleşme sınıfı
NextionButton btn1(nex, 0, 2, "b0");
NextionText text1(nex, 0, 4, "t0");
NextionText textPercent(nex, 1, 6, "t0");
NextionProgressBar progressBar(nex, 1, 5, "j0");
NextionDualStateButton swBtn(nex, 1, 4, "bt0");

Yukarıda da örnekle arayüzde kullanacağımız elemanların bazılarını tanımlamış olduk. Buradaki tanımlamalar şu şekildedir.

NextionButton btn1([Constructer], [page id], [tool id], [tool name]);

• Constructer: Nextion için Arduino kütüphanesinin sınıf adı
• page id: Nextion arayüzündeki aracın olduğu sayfanın numarası
• tool id: Nextion arayüzündeki aracın sahip olduğu id numarası
• tool name: Nextion arayüzündeki aracın sahip olduğu isim

Sıra geldi son ayarlamalara. Bu kısımda belirlediğimiz seri haberleşmeyi başlatmalı ve Nextion kütüphanesinin “init” fonksiyonunu çağırmalıyız. Ayrıca varsa butonların basılma anında çalışacak “callback” fonksiyonlarını ayarlamalıyız.

  nextionSerial.begin(9600);      //seri iletişim 9600 baud rate
  nex.init();                     //ile başlatılıyor

  btn1.attachCallback(&btn1Callback);   //buton 1 basılma eventi

Buton 1 basılma eventi çok basit bir şekilde çalışır. Ekran üzerinde basılınca Arduino üzerinde belirlediğiniz fonksiyonun çalışacaktır. Örneğin buton1 için şu şekilde bir fonksiyon oluşturabiliriz. Butona basıp bırakınca Arduino üzerindeki led’ i yakalım.

void btn1Callback(NextionEventType type, INextionTouchable *widget)
{
if (type == NEX_EVENT_POP)      //buton bırakma eventi
  {
    digitalWrite(led1, HIGH);
  }
}

Burada belirtilen “NEX_EVENT_POP” tanımlaması, Nextion ekranında butona basıp elinizi kaldırma anında oluşan event anlamına gelmektedir. İsterseniz bunu “NEX_EVENT_PUSH” ile değiştirerek butona bastığınız anda ledin yanmasını sağlayabilirsiniz. Ancak buton basılma animasyonun belirgin olması için genelde “NEX_EVENT_POP” kullanmanızı tavsiye ederim.

Kullandığınız eleman “Dual State Buton” ise anahtar açık yada kapalı konumda mı diye sorgulama yapmanız gerekebilir. Onu da şu şekilde öğrenebilirsiniz.

bool isSwOn = swBtn.isActive();

Bu kısımdan sonra butonlardan gelen eventleri dinlemeye ve arayüz üzerindeki araçlara değer göndermeye hazırız. Nextion arayüzündeki bir aracın değerini değiştirmek oldukça kolaydır. Örneğin textbox’ un değerini şu şekilde değişebilirsiniz.

text1.setText("Hello World");

Ancak burada dikkat etmeniz gereken “setText” isimli fonksiyon parametre olarak C++’ da tanımlanmış String yapısını desteklememektedir. Bu yüzden de tam sayı, virgüllü sayı gibi değişkenlerinizi doğru bir şekilde “char []” formatına çevirmelisiniz. Bunun için farklı yöntemler olabilir benim kullandığım yöntem bu şekildedir.

 char txt[20];           //değişkeni tanımladık
 String str = "Volt1: " + String(vol1) + " V";   //verimizi string tipinde oluşturduk
 str.toCharArray(txt, str.length());       //string tipindeki veriyi char [] tipinde değişkene aktadrık
 text1.setText(txt);                   //veriyi arayüzde yazdırdık

Progress bar’ ın değerini güncellemek için ise aşağıdaki fonksiyonu kullanmanız yeterlidir.

  progressBar.setValue(percent); //0 - 100 arası progress bar değeri

Ancak burada dikkat etmeniz  gereken ekran ile yapılacak haberleşmenin bloklayıcı yapıda olması. Yani siz ekranı veri yazmak ile çok fazla meşgul ederseniz ekran üzerindeki butonların tıklama eventlerini kaçırmaya başlayacaksınız. Bu yüzden de Arduino üzerindeki led’ lerinizi butonlar ile kontrol edemeyeceksiniz. Size tavsiyem Ekran üzerindeki veri güncelleme işlemini “delay” kullanmak yerine “millis” fonksiyonu yardımı ile şu şekilde yapmanız.

  if (millis() - sendLastTime > 1000)       //son veri yazdırma işleminden 1 sn geçti mi
  {
    char txt[20];           //değişkeni tanımladık
    String str = "Volt1: " + String(vol1) + " V";   //verimizi string tipinde oluşturduk
    str.toCharArray(txt, str.length());       //string tipindeki veriyi char [] tipinde değişkene aktadrık
    text1.setText(txt);                   //veriyi arayüzde yazdırdık

    sendLastTime = millis();
  }

Burada anlatılanlar Nextion ile oluşturulmuş arayüzün ek bir donanım ile kontrol edilmesi ile ilgiliydi. Arayüz dışarıdan bir donanıma ihtiyaç duymadan kendi içerisindeki yazılım ile de kontrol edilebilmekte. Yani siz arayüz içerisindeki bir progress bar’ ın değerini yine arayüz içerisindeki bir buton ile değiştirebilirsiniz. Ancak o kısımlar bu konunun içeriği olmadığından onlara değinmedim.

Arayüzün son hali aşağıdaki gibidir. Kaynak kodlarına ve arayüzün benim oluşturduğum haline bağlantıdan ulaşabilirsiniz.

Konu hakkında olmayan sorularınızı baser61061@gmail.com adresinden sorabilirsiniz.

İyi çalışmalar dilerim.