Nextion edytor - instrukcja
Intro
Niesłabnąca popularność wyświetlaczy Nextion zainspirowała nas do umieszczenia więcej szczegółów na temat edytora grafiki dla tych wyświetlaczy. W tej chwili dostępna jest wersja V1.61.2 która posiada kilka nowych funkcjonalności. Nowa wersja posiada również nowe graficzne elementy interfejsu. Nową wersję możemy pobrać z tego miejsca.
Okno programu składa się z wielu paneli które można według własnego uznania przemieszczać i zmieniać ich rozmiary.
- Pasek tytułowy.
- Pasek menu.
- Pasek narzędzi.
- Panel zarządzania ekranami.
- Panel elementów graficznych (widget ).
- Panel atrybutów.
- Panel zarządzania obrazkami.
- Panel zarządzania fontami.
- Panel zarządzania plikami audio.
- Panel zarządzania video typu Gmov.
- Panel zarządzania plikami video.
- Panel projektu.
- Elementy niemające reprezentacji graficznej.
- Panel kodu użytkownika.
- Terminal kompilatora.
- Wybór wyświetlania programu lub ekranu .
- Pasek statusu.
Nowy projekt
Aby utworzyć nowy projekt wybieramy File -> New. W następnym kroku musimy wybrać rodzaj wyświetlacza.
Następnie musimy wybrać typ orientacji wyświetlacza oraz sposób kodowania tekstu:
Możemy również zabezpieczyć projekt hasłem:
Elementy graficzne
Element graficzny który chcemy umieścić na ekranie pobieramy z panelu elementów.
Jak widać nie wszystkie elementy są dostępne dla wyświetlaczy typu Basic i Enhanced.
Elementy oraz funkcjonalności oznaczone symbolem są dostępne tylko dla wersji Intelligent.
Text 
-
txt Sam tekst
-
font Czcionka
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
pw Typ tekstu hasło/normalny tekst. Dla typu hasło zamiast znaków wyświetlone zostaną tylko znaki '*'.
-
pco Kolor tekstu.
-
bco Kolor tła
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka tekstowego.
- key przypisanie klawiatury do edycji tekstu.
- w szerokość okienka tekstowego.
- h wysokość okienka tekstowego.
Scrolling text 
-
txt Sam tekst
-
font Czcionka
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
pco Kolor tekstu.
-
bco Kolor tła
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
dir Kierunek przesuwania
-
dis Szybkość przesuwania w px (2-50)
-
tim Opóźnienie przesuwania
-
en Zezwolenie przesuwania
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka tekstowego.
- key przypisanie klawiatury do edycji tekstu.
- w szerokość okienka tekstowego.
- h wysokość okienka tekstowego.
Number 
-
val Liczba całkowita z zakresu -2147483648 do 2147483647
-
font Czcionka
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
pco Kolor tekstu.
-
bco Kolor tła
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
format Reprezentacja liczby (dziesiętnie, waluta, hex)
-
lenth Ilość pokazywanych cyfr
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka liczbowego.
- key przypisanie klawiatury do edycji liczby.
- w szerokość okienka liczbowego.
- h wysokość okienka liczbowego.
Xfloat 
-
val Liczba całkowita z zakresu -2147483648 do 2147483647
-
font Czcionka
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
pco Kolor tekstu.
-
bco Kolor tła
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
ws0 Ilość cyfr na lewo od przecinka
-
ws1 Ilość cyfr na prawo od przecinka
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka liczbowego.
- key przypisanie klawiatury do edycji liczby.
- w szerokość okienka liczbowego.
- h wysokość okienka liczbowego.
Button 
-
txt Tekst pojawiający się na przycisku
-
font Czcionka
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
pco Kolor tekstu nieaktywnego przycisku.
-
pco2 Kolor tekstu aktywnego przycisku.
-
bco Kolor tła nieaktywnego przycisku.
-
bco2 Kolor tła aktywnego przycisku.
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka liczbowego.
- txt_maxl liczba znaków tekstu.
- w szerokość okienka liczbowego.
- h wysokość okienka liczbowego.
Progress bar 
-
val Wartość paska postępu
-
dis Zaokrąglenie narożników 0-100, 0 - kąt prosty
-
pco Kolor pierwszo-planowy.
-
bco Kolor tła.
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość paska postępu.
- h wysokość paska postępu.
Picture 
-
pic Indeks obrazka w projekcie (lista obrazków jest w panelu nr7)
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość obrazka. Podanie wartości niższej niż faktyczny rozmiar grafiki spowoduje przycięcie jej.
- h wysokość obrazka. Podanie wartości niższej niż faktyczny rozmiar grafiki spowoduje przycięcie jej.
Crop 
-
picc Indeks obrazka w projekcie (lista obrazków jest w panelu nr7)
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość obrazka. Podanie wartości niższej niż faktyczny rozmiar grafiki spowoduje przycięcie jej.
- h wysokość obrazka. Podanie wartości niższej niż faktyczny rozmiar grafiki spowoduje przycięcie jej.
Hotspot 
-
x Położenie na ekranie x
-
y Położenie na ekranie y
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość obszaru klikania.
- h wysokość obszaru klikania.
Gauge 
-
val Wartość wychylenia wskazówki w stopniach 0°-360°, 0°-wskazówka na pozycji 9:00
-
format Wstępne wychylenie wskazówki (offset)
-
up Długość wskazówki w px. Jeśli dłuższa niż zegar to zostanie skrócona do wymiarów zegara. Wartość 32767 oznacza automatyczną długość.
-
down Długość wskazówki po drugiej stronie osi
-
left Przesunięcie promieniowe wskazówki
-
pco Kolor wskazówki
-
pco2 Kolor osi
-
hig Średnica osi
-
ws0 Szerokość końca wskazówki
-
ws1 Szerokość początku wskazówki
-
ws2 Szerokość stopki wskazówki
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname Nazwa obiektu.
- vscope Zasięg lokalny/globalny.
- sta Typ tła elementu.
- w Szerokość zegara.
- h Wysokość zegara.
Waveform 
-
bco Kolor tła
-
gdc Kolor siatki
-
gdw Rozmiar siatki w poziomie
-
gdh Rozmiar siatki w pionie
-
pco0 Kolor wykresu nr0
-
pco1 Kolor wykresu nr1
-
pco2 Kolor wykresu nr2
-
pco3 Kolor wykresu nr3
-
dis Procentowe skalowanie wykresu od 10% do 1000%
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta Typ tła elementu.
- dir Kierunek rysowania wykresu.
- ch Liczba kanałów.
- w szerokość elementu.
- h wysokość elementu.
Składowa y przebiegu jest ograniczona do wysokości przebiegu -1 lecz maksymalnie do 255.
Slider 
-
wid Szerokość elementu przesuwanego.
-
hig Wysokość elementu przesuwanego.
-
dis Zaokrąglenie naróżników.
-
bco Kolor tła za suwakiem.
-
bco Kolor tła przed suwakiem.
-
val Położenie suwaka.
-
maxval Maksymalna wartość suwaka.
-
minval Minimalna wartość suwaka.
-
ch Procentowa szerokość tła 0% do 1000%
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- mode Poziomy/pionowy.
- sta Typ tła elementu.
- psta Typ suwaka.
- w Szerokość elementu.
- h Wysokość elementu.
Dual-state button 
-
font Czcionka
-
bco Kolor tła nieaktywnego przycisku.
-
bco2 Kolor tła aktywnego przycisku.
-
pco Kolor tekstu nieaktywnego przycisku.
-
pco2 Kolor tekstu aktywnego przycisku.
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
val Aktualny stan 0 lub 1
-
txt Tekst pojawiający się na przycisku
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- sta typ tła.
- style styl okienka .
- txt_maxl liczba znaków tekstu.
- w szerokość elementu.
- h wysokość elementu.
Checkbox 
-
bco Kolor tła.
-
pco Kolor kwadratu w stanie "zaznaczony".
-
val Aktualny stan 0 lub 1
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość elementu.
- h wysokość elementu.
Radio 
-
bco Kolor tła.
-
pco Kolor koła w stanie "zaznaczony".
-
val Aktualny stan 0 lub 1
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- w szerokość elementu.
- h wysokość elementu.
QRcode 
-
bco Kolor tła.
-
pco Kolor ciemnych stref QR.
-
txt Tekst do zakodowania
-
x Położenie na ekranie x
-
y Położenie na ekranie y
-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
- objname nazwa obiektu.
- vscope zasięg lokalny/globalny.
- txt_maxl liczba znaków tekstu.
- w szerokość elementu.
- h wysokość elementu.
Switch 

-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie.
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
-
val Aktualny stan 0 lub 1
-
bco Kolor tła nieaktywnego przycisku.
-
pco Kolor suwaka przycisku.
-
bco2 Kolor tła aktywnego przycisku.
-
pco2 Kolor suwaka aktywnego przycisku.
-
pco1 Kolor tekstu przycisku.
-
font Czcionka
-
dis Zaokrąglenie narożników 0-100, 0 - kąt prosty
-
txt Tekst pojawiający się na przycisku. Znak rozdzielający to "/"
-
x Położenie na ekranie x
-
y Położenie na ekranie y
- objname Nazwa obiektu.
- vscope Zasięg lokalny/globalny.
- dez Poziomo/Pionowo
- w Szerokość.
- h Wysokość.
ComboBox 

-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie.
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
-
font Czcionka
-
bco Kolor tła aktywnego elementu listy.
-
pco Kolor tekstu aktywnego elementu listy.
-
xcen Justowanie w poziomie.
-
ycen Justowanie w pionie
-
spax Odstępy między znakami w poziomie
-
dis Zaokrąglenie narożników 0-100, 0 - kąt prosty
-
txt Tekst pojawiający się po resecie ekranu
-
up Wyświetlanie strzałki w "górę"
-
pco3 Kolor strzałki obok tekstu.
-
bco1 Kolor tła elementów listy.
-
pco1 Kolor kolor tekstu na rozwiniętej liście.
-
path Lista elementów.
-
dir Kierunek rozwijania lisy.
-
qty Liczba elementów listy pokazanych po rozwinięciu.
-
ws0 Odstęp pomiędzy elementami rozwiniętej listy.
-
val Index aktualnie wybranego elementu.
-
bco2 Kolor tła wybranego elementu.
-
pco2 Kolor tekstu wybranego elementu.
-
hig Wysokość/szerokość rozwiniętych elementów.
-
down Domyślne wyświetlenie listy po resecie ekranu rozwinięta/zwinięta.
-
mode Sposób wyświetlenia strzałek na rozwiniętej liście.
-
wid Rozmiar strzałek na rozwiniętej liście.
-
ws1 Przerwa pomiędzy strzałkami a rozwiniętą listą. *1
-
ch Bezwładność wyświetlenia.
-
x Położenie na ekranie x
-
y Położenie na ekranie y
- objname Nazwa obiektu.
- vscope Zasięg lokalny/globalny.
- sta typ tła.
- txt_maxl Maksymalna długość (zajętość pamięci).
- path_m Maksymalna długość kontentu dla listy.
- w Szerokość.
- h Wysokość.
TextSelect 

-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie.
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
-
font Czcionka
-
bco Kolor tła.
-
pco Kolor tekstu drugoplanowy.
-
pco2 Kolor tekstu wybranego elementu.
-
spax Odstępy między znakami w poziomie
-
hig Wysokość/szerokość wybieranych elementów.
-
dis Poziome linie dla okienka wyboru
-
pco1Kolor poziomych linii.
-
val Index aktualnie wybranego elementu.
-
ch Bezwładność.
-
path Lista elementów.
-
x Położenie na ekranie x
-
y Położenie na ekranie y
- objname Nazwa obiektu.
- vscope Zasięg lokalny/globalny.
- sta Typ tła.
- style Styl graficzny elementu.
- txt Tekst ustawiany poprzez zmianę atrybutu val. Tylko do odczytu (Nie ustawiać).
- path_m Maksymalna długość kontentu dla listy.
- w Szerokość.
- h Wysokość.
SLText 

-
drag Umożliwia użytkownikowi przesuwanie elementu po ekranie.
-
aph Stopień przeźroczystości.
-
effect Rodzaj animacji pojawiania się elementu na ekranie.
-
font Czcionka
-
bco Kolor tła.
-
pco Kolor tekstu.
-
xcen Justowanie w poziomie.
-
left Wyświetlanie scrollbar.
-
ch Bezwładność.
-
txt Tekst.
-
isbr Przenoszenie do nowej linii.
-
spax Odstępy między znakami w poziomie
-
spay Odstępy między znakami w pionie
-
val_y Pozycja wyświetlania tekstu. (pozycja scrollbar)
-
x Położenie na ekranie x
-
y Położenie na ekranie y
- vscope Zasięg lokalny/globalny.
- sta Typ tła.
- style Styl graficzny elementu.
- key Przypisanie klawiatury do edycji tekstu.
- txt_maxl Liczba znaków tekstu.
- path_m Maksymalna ilość linii tekstu.
- maxval_y Maksymalna wartość przesunięcia (max scrollbar). Ustawiane przez wyświetlacz. Tylko do odczytu. Nie ustawiać
- w Szerokość.
- h Wysokość.