Nextion HMI Sayfalar Arasında Değer Aktarmak

Bu içeriğimizde nextion hmi sayfalar arasında veri aktarımını anlatmak için forum’dan gelen bir istek doğrultusunda oluşturuldu. Ekran arayüzümüzde sayı giriş çubukları, metin alanları, düğme bileşenleri gibi nesneler ekleyeceğiz. En önemlisi, sayfalar arasında veri aktarım için için vsscope-global özelliğini kullanacağız.
Bu proje için örnek senaryomuz, üzerinde akım ve gerilim değerlerinin girileceği bir arayüz oluşturmaktır. Değer giriş kutusuna dokunurken, sayıları girebileceğiniz veya silebileceğiniz farklı sayfada oluşan klavye arayüzüde hazırlayacağız. Bu klavye arayüzüde girilen değerler ana formumuzdaki metin/sayı girişlerine aktarılacaktır.

Eğer isterseniz hazır proje dosyalarını(.HMI) buradan indirebilirsiniz.

HMI Projesinin Oluşturulması

Yeni bir HMI projesi oluşturun, burada 320*240 yatay çözünürlüğü seçiyoruz. Bir resmi ya da istediğiniz bir rengi arka plan olarak ayarların, ardından istediğiniz yazı tiplerini oluşturun ve bunları “fonts” kısmına ekleyin. İki arayüz olduğu için iki sayfa oluşturmamız gerekiyor. Böylece bir sayfa daha oluşturup ilk sayfanın adını “A”(sizin tanımladığınız gibi), ikinci sayfanın adını “B”(sizin tanımladığınız gibi) olarak değiştiriyoruz.

A sayfasına dört metin bileşeni ekleyin, boyutlarını yukarıdaki ekran görüntüsüne benzer şekilde ayarlamak için sürükleyin. Sol taraftaki iki bileşen için metinlerini “Akım(A)” ve “Voltaj(V)” olarak ayarladık. Sağ taraftaki diğer iki bileşen için, istediğiniz arka plan rengini seçin ve ardından txt kelimelerini silin.

t0 ve t1 için vscope özelliğinde global seçtiğimize dikkat edin. Global seçildiğinde, bileşenin değerinin bu projede iletilebileceği anlamına gelir. Bu çok önemlidir, çünkü bu iki bileşenin değerleri başka bir sayfa tarafından girilecektir. Ardından, Kullanıcı Kodunda t0 ve t1 derleyici çıktı penceresi için aşağıdaki kodları yazın. Elbette, biz B sayfasını tamamladıktan sonra girilmelidirler.
t0 için Touch Release Event yani dokunmayı bırakıncaki olay kodu şöyle olmalıdır:

B.va0.val=0   //B sayfasinda va0'in vscope'u global olarak ayarlanmalidir
B.t0.txt=""   //B sayfasinda, t0'in vscope'u global olarak ayarlanmalidir
page B

t1 için Touch Release Event yani dokunmayı bırakıncaki olay kodu şöyle olmalıdır:

B.va0.val=1  //B dügmesinde va0'in vscope'u global olarak ayarlanmalidir
B.t0.txt=""  //B dügmesinde, t0'in vscope'u global olarak ayarlanmalidir
page B

Aşağıdaki ekran görüntüsünden A sayfasının nasıl görünmesini gerektiğine bakabilirsiniz:

Metin ve düğme bileşenlerini sayfa B’ye yerleştirin

Hesap makinesi benzeri bir sayı giriş arayüzü tasarladık, ancak yalnızca sayı girme ve silme işlevi vardır, hesaplama işlevi yoktur. Tabii ki, bunu da istiyorsanız, daha fazla bileşen ve karşılık gelen kodlar ekleyerek elde edebilirsiniz.

İlk olarak, girilen değeri göstermek için bir metin bileşeni ekliyoruz. Görüntü alanına bir metin bileşeni yerleştiriyoruz, boyutunu ayarlamak için sürükleyebilirsiniz. Vscope’ta global’i seçmeyi, arka plan rengini ve yazı tipini seçmeyi ve ardından txt kelimelerini silmeyi unutmayın.

İkinci olarak display alanına 13 adet buton bileşeni yerleştiriyoruz. Boyutlarını ayarlamak ve düzenli bir şekilde yerleştirmek için sürükleyin. Yazı tipini, bileşen arka planını ve yazı tipi rengini seçin. txtlerini sırasıyla 0,1,2,3,4,5,6,7,8,9,.,Sil ve Tamam yapın. Girilen değeri t0’da çıkarmak için, tüm bu bileşenlere kodlar eklemeliyiz.

Ardından va0 isimli bir variable yani değişken ekliyoruz:

Ardından, özellik tablosunda, vsscope’ta global’i seçin:

Örnek olarak 0 butonuna basıp bırakıldığında yani touch release event kısmına bunu yazmamız gerekiyor:

t0.txt=t0.txt+"0"

Örnek olarak 5 butonuna basıp bırakıldığında yani touch release event kısmına bunu yazmamız gerekiyor:

t0.txt=t0.txt+"5"

Bu işlemi sırasıyla sil ve tamam butonu hariç bütün butonlara text kısmında ne yazıyorsa aynısını yapın.

Sil butonunun touch release event kısmına bunu yazıyoruz:

t0.txt=t0.txt-1

.(nokta) butonunun touch release event kısmına bunu yazıyoruz:

t0.txt=t0.txt+"."

Tamam butonunun touch release event kısmına bunu yazıyoruz:

if(va0.val==0)
{
  A.t0.txt=t0.txt //A sayfasinda, t0'in vscope'u global olarak ayarlanmalidir
}
if(va0.val==1)
{
  A.t1.txt=t0.txt  //A sayfasinda, t1'in vscope'u global olarak ayarlanmalidir
}
page A

Aşağıdaki ekran görüntüsü bu sayfanın sonucudur:

Sonuç

Kaçırdığınız ya da anlamadığınız bir kısım olursa, yorum olarak sorabilir ya da forum sayfamızda başlık açabilirsiniz.