OK

Při poskytování služeb nám pomáhají soubory cookie. Používáním našich služeb vyjadřujete souhlas s naším používáním souborů cookie. Více informací

Úvodní stránka » Arduino » Nextion display - II.díl - první vlastní projekt

Nextion display - II.díl - první vlastní projekt

Máme stažený a nainstalovaný Nextion Editor, popsali jsme si základní práci s ním, podívali jsme se na připravené projekty a teď je čas si vytvořit vlastní. Je to opravdu jednoduché, i když několik prvních odstavců ve Vás mohou vzbudit opačný dojem. nenechte se zmýlit.

Když jsem před dvěma lety poprvé držel v ruce displej, přiznám se že i naposledy. Byla to z nouze cnost a to jenom proto, že jsem se s klasickým displejem do čipu prostě nevešel. Dnes je situace úplně jiná a tak si probereme podrobně.

Co se za ty dva roky změnilo? Zásadně se zlepšila podpora, zvýšil počet funkcí a snížila cena. Hlavní dvě vylepšení které mě zaujaly je rozšíření funkcí o for, while a else a možnost změnit pořadí jednotlivých prvků. Dnes je to použitelný displej, který pomůže zjednodušit programování, ušetřit spoustu místa v paměti čipu a přitom za rozumnou cenu. Je dobře, že kolega otevřel toto téma.

Začneme pěkně od začátku a hned opustíme příklady kterých je webu dost. Nejdříve vytvoříme vlastní projekt na displeji, a pak jeho interakci s Arduinem. No a nebyl bych to já, kdyby to bylo podle oficiální dokumentace. Považujte to za první návod v češtině.

Tvorba projektu probíhá ve dvou fázích. Samostatně se programuje displej a samostatně Arduino.

Část první – displej Nextion

Po otevření aplikace Nextion Editor si v nabídce Setting – Device nejprve vyberte typ displeje, pro který budete program psát. Později už nejde změnit. Přesněji jde, ale veškeré obrázky, pozadí, vytvořené klávesnice atd. se Vám rozpadnou a ve složitějších projektech je jednodušší začít znovu, než to přepisovat. My si vybereme displej NX3224T024_11, tedy displej 2,4" o rozlišení 240x320 pix.

Dále si v nabídce Setting – Display nastavte otočení displeje, kdy vertikální a horizontální opět nejde později měnit. My si vybereme vertikální (na výšku). Dále vyberte kódování textu. Jestli chcete funkční češtinu, zadejte iso-8859-2 (označováno jako Latin2 nebo Středoevropské ISO). ANO čtete správně, tento displej na Arduinu umí češtinu.

Nastavení máte hotovo a teď se jde na vlastní displej. Pokud nastavujete jakýkoliv prvek, je zapotřebí nejprve si ho označit a pak v záložce Atribute nastavujete jeho vlastnosti.

Než se dostaneme k popisu jednotlivých vlastností, ještě si ukážeme další dvě věci se kterými bude nutné pracovat.

Výběr písma:

Displej umí pracovat pouze s fonty, které si do displeje nahrajete. Je to stejné jako jsme programovali SPI displeje, kam jsme fonty nahrávali jako položku PROGMEM. Tady je to výrazně jednodušší a vejdou se jich tam desítky. Takže můžete naprogramovat displej třeba v 10 jazycích včetně azbuky, arabských znaků... jenom pak budete muset akceptovat omezení dané výchozím kódováním, v našem případě Latin2. Chceme přeci češtinu.

Nahrání fotu: v nabídce Tools – Font Generator vyberte velikost písma, zaškrtněte pokud chcete tučné, kompresi neřešte a vyberte typ písma. Pokud chcete češtinu, musí to být český font. Arial, Times, Sans Serif, Courier, cokoli chcete. Je tu takový háček. Pokud vyberete proporciální písmo, budou mezery mezi některými znaky nepravidelné. Displej neumí formátovat proporciální znaky a každému vyhrazuje přesné místo. Prostě jako by je umisťoval do kostiček v křížovce. Pak zadejte název fontu a uložte ho do složky kde máte umístěný projekt. Není to podmínkou, ale alespoň ho pak nebudete hledat.

Pak klikněte vlevo dole na záložku Fonts a tlačítkem + přidejte vygenerovaný font.

POZOR – pokud budete měnit pořadí fontu, aktualizovat ho a dělat různé jiné podobné brikule, myslete na to že se Vám změní i texty v projektu. Text se při kompilaci kódu displeje volá na základě ID fontu – to je to první číslo vlevo.

Nahrání obrázků:

Nextion Edior není grafický software. Každé barevné pozadí, hezké tlačítko s kulatými rohy a cokoliv Vás napadne, je zapotřebí do displeje umístit jako obrázek. Obrázek si předem připravte v jakémkoliv grafickém editoru a uložte si to v libovolném formátu, bmp, tif, jpg, png...... POZOR displej nepodporuje průhlednost (u PNG s nastavenou průhledností budete mít černé pozadí) a pak je zapotřebí obrázek uložit v rozměrech, které budou zobrazeny na displeji a nesmí přesahovat přes okraje. Obrázek lze v programu "oříznout", tedy můžete vybrat a zobrazit na displeji pouze konkrétní část obrázku, ale nejde nijak zmenšit ani zvětšit, ani ho přesunout přes okraj displeje.

Obrázek máme vytvořený, klikněte vlevo dole na záložku Picture, + a přidejte obrázek. Nahraný obrázek můžete samozřejmě využít v jakékoliv části displeje a kolikrát chcete.

Popis společných vlastností prvků:

id = 0 – jedná se o číslo, kterým se Vám bude prvek hlásit, respektive pod jakým ho budete volat. Nemůžete si vymyslet co chcete, vždy je to číslo. Existuje ještě parametr objname, který se chová stejně a tam si už můžete zadat co chcete.
vscope = local/global – tato vlastnost určuje, jak se budou chovat proměnné tohoto prvku a podle toho se pak i volají. Local znamená, že při každé aktualizaci tohoto prvku (myslím tím načtení, změna stránky, refresh) se znovu načte výchozí nastavená hodnota. Global znamená že Vám hodnota zůstává uložena i po např. změně stránky a můžete se na tento prvek odkazovat odkudkoliv chcete. Změní se pouze, když ho změníte vy sami.
sta = crop image/solidcolor/image a někdy no blackround. Jedná se o nastavení pozadí prvku.
bco = podle výběru sta se Vám aktualizuje toto pole. Jedná se o konkrétní vlastnost pozadí prvku, barva,. výběr obrázku atd.

Popis jednotlivých prvků:

Každý prvek má svoji specifickou funkci. Některé vlastnosti můžete při běhu programu měnit ať už interakcí a příkazy displeje, nebo přímo programem z Arduina. Popisovat budu jen to co je vždy navíc oproti předchozím položkám.

Text – jak název sám napovídá, jedná se o textové pole, které slouží k zobrazení textu. Víme že i číslo může být textem, ale text nemůže být číslem.

style – způsob zobrazení pole, ploché, promáčknuté...
pco – barva textu
font – typ fontu, je to ID fontu
xcen – vertikální vyrovnání textu vůči poli ve kterém je text vložen
ycen – horizontální .......
txt – výchozí hodnota textu po načtení prvku, můžete nechat i prázdné
txt-maxl – maximální počet znaků v poli, tím určujete i kolik paměti se vyhrazuje pro konkrétní pole, neplýtvejte jím zbytečně
isbr – povolení zalamování textu
pw – určuje co se bude zobrazovat – Character – zobrazí znaky, Password – zobrazí tečky
spax – vertikální vzdálenost mezi znaky
spay – horizontální vzdálenost mezi znaky (pokud se nezalamuje text, chová se to poněkud divně

Scrolling text – běžící text. Super novinka, kterou jsem před dvě lety musel naprogramovat. Je dobrá když potřebujete zobrazit text, který se vám jinak do textového pole nevejde, nebo chcete dynamicky obohatit zobrazení.

dir – směr toku textu
tim – rychlost posuvu o jeden znak v ms
dis – opět má vliv na rychlost posunu, co přesně to dělá, na to jsem nepřišel a detailní podpora se za dva roky nezměnila
en – true – spustí se běh textu po otevření stránky, false – běh spustíte za pomoci příkazu

Number – pole určené pro čísla. Výhodou je, že je pak při komunikaci s Arduinem nemusíte převádět a můžete je počítat. To u textového čísla nejde.

val – chová se stejně jako txt

Button – stydím se to přeložit.

bco2, pic2 ... – barva, obrázek pozadí při stisku tlačítka
pco2 – barva fontu při stisku tlačítka

Progres bar – to zase nevím jak to přeložit. Prostě posuvník – nabývá hodnoty 0-100. Má dva způsoby zobrazení. Buď jako pozadí s barvou posunutí, nebo jako dva obrázky, kdy překrývá jeden druhý a dají se tak vytvářet opravdu pěkné efekty.

dez – směr zobrazení posuvníku, když chcete změnit směr, např. zprava doleva a zleva doprava použijte fintu s barvami.

Picture – prostě obrázek. Asi je potřeba říci, že každý prvek lze nastavit jako tlačítko. Pak mi poněkud uniká funkce tohoto prvku, ale pro formu je to dobré. Možná je to dobré k ušetření místa v paměti displeje. Nemá žádné parametry. Prostě ho používejte k zobrazení obrázků, nebo k tlačítku, které nemění pozadí při stisku.

Crop – oříznutí obrázku. Je to prvek podobný Picture s tím rozdílem, že za pomoci tohoto prvku zobrazíte pouze jeho část, zbytek skryjete.

Hotspot – jedná se o průhledné pole, kterému můžete přiřadit nějakou funkci. Je vhodné např. když vytváříte klávesnici, tak ji prostě namalujete a tlačítka vytvoříte za pomoci toho prvku.

Gauge – otáčející se ručička. Používá se jako ukazatel, když chcete vytvořit klasický analogový budík, otáčkoměr, voltmetr, cokoliv vás napadne.

val – úhel natočení ve stupních 0 - 360, POZOR – nula je ve skutečnosti jako 9 hodin, nebo azimut 270
wid – šířka čáry v px

Waveform – super osciloskop, umí kreslit křivky i čáry, měnit průběh, gryfy a to několika hodnot současně, prostě sen

dir – směr posunu křivek
ch – počet kanálů – kolik můžete zobrazit najednou hodnot
gdc – barva mřížky
gdw a gdh – rozlišení mřížky

Slider – je to Progres bar, rozšířený o funkci posuvníku, lze použít třeba k nastavení stmívání displeje, či nastavení libovolných hodnot, vyjma záporných. Toto pole vrací číslo.

mode – směr posuvníku
psta – nastavení toho posouvacího kurzoru, jehož barva se nastavuje v pco
wid a hig – rozměr kurzoru
maxval – maximální hodnota
minval – minimální hodnota, nelze zadat zápornou hodnotu

Timer – toto už není prvek pro zobrazení na displeji, ale proměnná pro další práci. Jedná se o časovač. Můžete na něj navázat co chcete, já osobně ho používám nejčastěji pro automatické skrytí chybového hlášení po zadání nesprávných hodnot.

tim – cas po jehož uplynutí se spustí požadovaná akce
en – určuje zda se spustí automaticky, či ručně – viz Scrolling text

Variable – opět proměnná, už pouze hodnota. Je možno ji nastavit jako číslo, nebo text. Používá se pro ukládání proměnných během výpočtů, nebo přenos proměnných mezi stránkami.

Dual-state button – prostě tlačítko, které ale na rozdíl od prvku Button nabývá hodnot true nebo false. Ideální pro použití přepínače.

val – výchozí hodnota tlačítka – podle toho se zobrazí obrázek

Checkbox – zaškrtávací tlačítko, vlastně jenom jiná forma Dual-state button, která zabírá v paměti méně místa.

Radio – no zvuk nepřehraje. Chlubili se tím co to bude umět a skutek utek. Je to kulatý Checkbox, který zabírá ještě méně místa.

První příklad

Zkusíme si naprogramovat první vlastní displej. Něco jednoduchého – oblíbený blik. A pěkně od začátku a sami, krok za krokem. Je dobré si to vyzkoušet, proto Vám neposkytnu zdrojový soubor. Určitě si ho ale vytvořte. Později ho budete potřebovat.

  •  otevřete si Nextion Exitor
  • nastavte typ displeje
  • nastavte otočení
  • nastavte kódování
  • importujte font, např. Sans Serif, velikost písma 16
  • importujete obrázky ke stažení zde
  • nastavte pozadí stránky jako image a obrázek nastavte back
  • vložte prvek Text, nastavte crop image, jako obrázek vyberte back zapište libovolný text – LED Arduino, pak nastavte velikost a umístění. Tím získáte text, který bude napsán na pozadí stránky.
  • vložte prvek Dual-state button, jako pozadí nastavte image a do pic0 vyberte obrázek OFF a do pic1 obrázek ON, nezapomeňte vymazat text a počet znaků můžete nastavit na nula
  • pak vložte prvek Picture a přiřaďte mu obrázek tmavého sluníčka a to samé ještě jednou se žlutým sluníčkem, pak oba prvky umístěte tak, aby se překrývaly.
Výsledek by měl vypadat nějak takto:

Když máte připravenu sadu ikon, je to práce na desítky vteřin.

Tím máme hotovou grafickou část a jdeme programovat tlačítka. Zatím se zaměříme pouze na samotný displej, interakci s Arduinem si přidáme v příštím článku.

Naprogramování akce tlačítka:

Vyberte prvek bt0 (vytvořený Dual-state button) a do Touch Press Event vložte následující kód:

if(bt0.val==0)
{
  vis p1,0
  vis p0,1
}
if(bt0.val==1)
{
  vis p0,0
  vis p1,1
}

Když stisknete Debug, otevře se vám okno, kde uvidíte zda jste to naprogramovali správně. Po stisku tlačítka se bude měnit ikona podle toho zda je zapnuto, nebo vypnuto. Zobrazí se Vám dva stavy:

Zobrazení displeje Zobrazení displeje

Vidíte že psaní kódu je velmi podobné jako v Arduino IDE. Jsou tam ale některé odlišnosti.

Pravidla psaní kódu - Nextion Editor nic neodpouští

  • hned na začátku zapomeňte na nějaké super funkce, funguje pouze if, else, while a for. NIC JINÉHO. Před dvěma lety fungovalo pouze if. Časem se funkce jistě rozšíří. Nicméně i s tímto se dá pracovat.
  • při psaní se nesmí dělat žádné mezery, vyjma příkaz funkce za kterým následuje adresa prvku a očekávaná hodnota
  • závorky musí být ukončeny ENTREM a další na dalším řádku. Závorky funkce musí být na samostatných řádcích jak to vidíte v příkladu.
Popis vlastního kódu:

if(bt0.val==1) Za koncovou závorkou dotazu, tedy nesmí nic následovat.

bt0.val - je adresa prvku a nastavovaná, respektive kontrolovaná hodnota. Tímto způsobem můžete kontrolovat a nastavovat všechny hodnoty, které jsou v Nextion Editoru v záložce Atributes označeny zeleně. Tedy když bych chtěl nastavit hodnotu prvku bt0.val=1, bt0.txt="text" (napíše text atd.) V rámci dotazu můžete snadno porovnávat čísla i texty. To je super.

Závorky {} každá musí být na samostatném řádku

Pak příkaz vis p0,0 znamená skryj prvek p0 a vis p0,1 znamená zobraz prvek. Pokud stejný příkaz chcete poslat přes Arduino, dělá se to trochu jinak. Ale o tom až příště.

Kompletní seznam příkazů najdete zde. Vypisovat je, to je opravdu na dlouhý článek. Postupně se k těm nejdůležitějším dostaneme.

A konečně konec. Příště se podíváme na příkazy z Arduina a zkusíme tedy rozsvítit tu diodu.

JB

jaroslav.bohac@arduinotech.cz

Přidat komentář

Zvýrazněné položky jsou povinné.

Přehled komentářů

  1. Otázka (Štefík Patrik, 9.7.2017 22:15:40) Odpovědět

    Dobrý deň,
    dá sa aby mi obrazovka Nextion zobrazovala špeciálne znaky stredoeurópskej znakovej sady v textoch ktoré "posiela" Arduino doska ? Za odpoveď vopred dakujem


TOP produkty

Arduinotech GSM shield

Arduinotech GSM shield
877 Kč s DPH

Arduino DUE

Arduino DUE
696 Kč s DPH

Kontakt

Ing. Petr Foltýn
Kunčice pod Ondřejníkem 814, 73913
TOPlist