Individální projekty MPOA

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Grafická knihovna LittlevGL pro 32F429IDISCOVERY ======

----

===== Zadání =====

Seznamte se s grafickou knihovnou LittlevGL. Portujte knihovnu na vývojový kit 32F429IDISCOVERY s 2.4'' QVGA TFT displejem. Využijte možnosti dotykového ovládání a demonstrujte možné funkce této knihovny.


----



===== Grafická knihovna LittlevGL =====

LittlevGL je volně dostupná grafická knihovna vhodná k vytváření grafických uživatelských rozhraní v embedded aplikacích. Knihovna je psaná v jazyce C a je tedy vodná pro širokou řadu mikrokontrolerů. Velkou výhodou této knihovny je obsáhlá dokumentace a podpora. Na webových stránkách je dostupná řada vzorových řešení, které slouží jako taková malá ukázka co se dá s touto knihovnou vytvořit. Rovněž je součástí webových stránek dokumentace, která obsahuje všechny potřebné informace a to od prvních krůčků po detailní popis všech objektů realizovatelných pomocí této knihovny. Komunita používající tuto knihovnu je poměrně široká, dá se tedy spousta problému řešit na místním fóru. Rovněž jsou ukázky vytváření jednotlivých objektů a vzorová řešení obsažena i v souborech samotné knihovny.

Vzor toho, co se dá pomocí této knihovny zobrazit, je představen na následující animaci. 

{{ :2019:littlevgl_demo1.gif?nolink |}}

Jak je z animace patrné, pomocí knihovny se dá vytvořit spoustu objektů. Jednotlivé objekty jsou vytvářeny systémem parent (rodič) a child (dítě). Základním pravidlem je, že každé dítě musí mít jednoho rodiče a rodič může mít více dětí. Samozřejmě dítě se může stát rodičem a mít tak svoje děti. Co to v tomto případě znamená? Vhodné je si to ukázat na výše zobrazené animaci. Prvotní obrazovka je rozdělena na 3 rodiče (Tab1, Tab2, Tab3), kteří mají svoje děti. V případě Tab1 jsou to všechny zobrazené objekty (tlačítka, přepínače, tabulky..). V tomto místě by mohlo být vytvořeno další okno, například po stisknutí nějakého tlačítka ve výběru, ve kterém by mohly být další objekty (děti).

Při vytváření těchto objektů se dá využít stylů. Buď se použijí již vytvořené styly, nebo se dají zkopírovat a upravit. Důležité je, že si může programátor vytvořit styl pro každý objekt, který se v jeho obrazovce objevuje vícekrát a tím pádem nemusí při každém vytváření objektu nastavovat jeho parametry. Příkladem může být obyčejné tlačítko. Pomocí stylu si nastavím barvu, barvu pozadí, barvu pozadí při stisku, popřípadě nějakou animaci a poté už pouze aplikuji daný styl na jednotlivé vytvořené objekty.

----


===== Portování knihovny na vývojový kit ===== 

V první fázi práce na projektu jsem chtěl použít prostředí EmBitz v kombinaci s STM32CubeMX. Nepodařilo se mi dosáhnout uspokojivého výsledku ani po spoustě pokusů. Vždy jsem narazil na nějakou chybu, kterou jsem neuměl odhalit. Při hledání možných řešení jsem narazil na možnosti použití prostědí STM32 IDE, které je vytvořeno pro STM procesory a je založeno na bázi prostředí Eclipse. Poté se mi podařilo knihovnu na vývojovou desku portovat a to s pomocí návodu dostupného přímo na webových stránkách grafické knihovny. V tomto návodu používá autor stejnou desku STM32F429 ([[https://blog.littlevgl.com/2017-07-15/stm32f429_disco_port|návod]]). Pro zprovoznění zobrazení a ovládání na dotykovém displeji bylo nutné připsat drivery do zdrojových souborů (tft.c a touchpad.c). Funkci jsem ověřil použitím vzorového řešení, které bylo vhodné pro menší displej (například výše zobrazené vzorové řešení by pro zobrazení na malém displeji nebylo vhodné).



----






===== Demonstrace funkcí knihovny =====

Je vodné začít strukturou samotného programu. Ve funkci **main** jsou provedeny potřebné inicializace a je také implementována indikace úspěšného nahrání programu do desky (LED 3 8x zabliká). Dále je volána funkce pro vykreslení samotného grafického rozhraní. Funkce **demo_create()** vykreslí vzorové řešení, zatímco funkce **my_demo_create()** vykresluje mnou naprogramované řešení. V nekonečné smyčce je každých 10 ms analyzována změna a případně provedeno překreslení rozhraní.

<code c>
int main(void)
{
	HAL_Init();

	/* Configure the system clock to 180 MHz */
	SystemClock_Config();

	/*Start up indication*/
	BSP_LED_Init(LED3);
	uint8_t i;
	for (i = 0; i < 8; i++) {
		BSP_LED_Toggle(LED3);
		HAL_Delay(50);
	}

	lv_init();
	tft_init();
	touchpad_init();

	my_demo_create();  	
	//demo_create();	

	while (1)
	{
		HAL_Delay(10);
		lv_task_handler();
	}
}
</code>

Samotné vytváření objektů a jejich případných callbacků, či eventů je programováno ve funkci **my_demo_create**, která se nacházi v souboru **src/ukazka.c**. Při vytváření ukázky jsem využíval návodů na webových stránkách a také již funkčních řešení. Ze začátku jsem vyšel z výše zmíněného rozhraní, které jsem na desku portoval jako první. Musím zmínit, že knihovna obsahuje spoustu objektů a možností, že není možné je všechny zároveň prezentovat.

Jako první věc, co jsem změnil bylo pozadí grafického rozhraní. Buď je možné vytvořit nějaké pozadí ručně a nebo je možné aplikovat nějaký obrázek. Knihovna samotná neumí pracovat s formáty jako je JPG nebo PNG. Na webových stránkách je ovšem k dispozici converter, který s těchto formátů vygeneruje **.c** formát, který už umí knihovna použít. Je tedy možné si na pozadí nastavit téměř jakýkoliv obrázek.

K vysvětlení základních nastavení použiji příklad vytvoření blikání ledkou na displeji pomocí tlačítka.
Nejprve je zapotřebí vytvořit tlačítko.
<code c>
lv_obj_t * btn1 = lv_btn_create(parent, NULL);  //vytvoření tlačítka
lv_obj_set_event_cb(btn1, btn1_event_handler);  //nastavení callbacku, která poté bude sloužit k blikání ledkou
lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 40);  //nastavení pozice tlačítka na displeji
</code>
Jak je vidět nejsou nastaveny žádné parametry vzhledu tlačítka, bude tedy nastaven defaultní vzor. Dále je možné vytvořit na tlačítku nějaký nápis.
<code c>
lv_obj_t * label = lv_label_create(btn1, NULL);  //vytvoření popisku v tlačítku btn1
lv_label_set_text(label, "LED"); //nastavení textu
</code>
Nyní je potřeba vytvořit ledku. Defaultně tvar led diody vypadá spíše jako tlačítko, tak byl v tomto případě použit vytvořený styl style_led. Samotná dioda je poté vytvořena následovně.
<code c>
static lv_obj_t * led1; //pokud chceme poté ledkou blikat, musí být definována v globálních proměnných
led1  = lv_led_create(parent, NULL); //vytvoření ledky
lv_led_set_style(led1, LV_LED_STYLE_MAIN, &style_led); //nastavení stylu ledky
lv_obj_align(led1, NULL, LV_ALIGN_CENTER, 0, -40); //nastavení pozice ledky
</code>
Nyní je naprogramováno tlačítko i ledka. Zbývá už jen přidat funkci na blikání ledkou. K tomuto jsou v této knihovně používány funkce **event_handler**. 
<code c>
static void btn1_event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED) {
    	lv_led_toggle(led1); //ledka změní svůj stav, pokud je kliknuto na tlačítko
    }
}
</code>

Na tomto principu funguje vytváření většiny objektů v této knihovně. Moje demonstrující ukázka obsahuje rozšířenou vzorovou verzi o kalendář a blikání ledkou. Celý kód obsahující tyto objekty je v souboru **ukazka.c**.

{{youtube>qRJtxZOd0-s?medium}}


----


 

 
===== Závěr =====

Během řešení tohoto projektu byla portována grafická knihovna LittlevGL na vývojový kit STM32F429. Dále byly stručně demonstrovány některé funkce této knihovny. Knihovna jako taková je velmi obsáhlá a skrývá spoustu zajímavých možností, co se týče tvorby grafického rozhraní. Mým plánem bylo původně vytvořit detailnější a obsáhlejší ukázku. Bohužel jsem se během řešení potýkal se spoustou problémů. Problémy nastaly jak při portování knihovny na desku, tak poté při používání jednotlivých funkcí. Většina úskalí měla nakonec banální řešení, které mi ovšem vzhledem k mým programovacím znalostem většinou po dlouhou dobu unikalo. Výsledná kvalita zpracování projektu není tedy valná, ale snad aspoň nastínila možnosti této knihovny. Pro širší pochopení doporučuji navštívit webové stránky knihovny, kde jsou všechny funkce popsány a vysvětleny. 
----

===== Zdroje =====
[[https://littlevgl.com/|Webové stránky knihovny]]

[[https://blog.littlevgl.com/2017-07-15/stm32f429_disco_port|Portování vzorového řešení na vývojový kit]]

===== Soubory =====

[[https://drive.google.com/file/d/1LSIssBNarClxF5JNQPHA2XXfH3DlbRVr/view?usp=sharing|Projekt ke stažení]]
Individální projekty MPOA

Uživatelské nástroje

Nástroje pro tento web

Nástroje pro stránku
