diff --git a/docs/v2/robotExtensions/blokGridUI/index.md b/docs/v2/robotExtensions/blokGridUI/index.md index 99a743d25..8a3e18b73 100644 --- a/docs/v2/robotExtensions/blokGridUI/index.md +++ b/docs/v2/robotExtensions/blokGridUI/index.md @@ -12,7 +12,7 @@ Rozhraní zobrazené na ovládacím zařízení je vytvářeno pomocí souboru ` Takhle by třeba mohlo vypadat rozhraní navržené v designeru, máme na něm posuvník s popiskem, kterým si budeme nastavovat barvu ledek na robůtkovi, ledku, kterou budeme blikat stejnou barvou a textové pole, do kterého budeme vypisovat RGB hodnoty nastavené barvy. -Tady máte ke stažení popsaný projekt (nastavení barvy ledky na desce, blikající ledka stejné barvy na rozhraní...). +Tady máte ke stažení popsaný projekt (nastavení barvy ledky na desce, blikající ledka stejné barvy na rozhraní, ...). === "Odkaz" ``` @@ -42,9 +42,9 @@ Layout.begin(OWNER, DEVICE_NAME, builder => { builder.SetColor.onChanged(slider => { // kód spuštěný změnou na posuvníku }); -}); +}); ``` -Po připojení robůtka k wi-fi (popsáno v [lekci 1](../lekce1/index.md#dalkove-ovladani)) inizializujeme rozhraní funkcí `Layout.begin()`, které v argumentech předáváme jméno vlastníka, jméno zařízení a blok kódu, ve kterém nastavíme události spouštěné změnami v rozhraní. Tak zrovna `builder.SetColor.onChanged(slider => { // kód zde })` bude obsahovat kód, který se spustí, když widget s id `SetColor` projde nějakou změnou. V tomto případě je daný widget náš posuvník a změnou bude, když jím někdo posune. V proměnné `slider` je našemu kódu předán stav posuvníku, takže si poté můžeme vyčíst třeba jeho aktuální hodnotu takto: +Po připojení robůtka k wi-fi (popsáno v [lekci 1](../../robot/lekce1/index.md#lekce-15-dalkove-ovladani)) inizializujeme rozhraní funkcí `Layout.begin()`, které v argumentech předáváme jméno vlastníka, jméno zařízení a blok kódu, ve kterém nastavíme události spouštěné změnami v rozhraní. Tak třeba `builder.SetColor.onChanged(slider => { // kód zde })` bude obsahovat kód, který se spustí, když widget s id `SetColor` projde nějakou změnou. V tomto případě je daný widget náš posuvník a změnou bude, když jím někdo posune. V proměnné `slider` je našemu kódu předán stav posuvníku, takže si poté můžeme vyčíst třeba jeho aktuální hodnotu takto: ```ts let hodnota = slider.value; @@ -58,15 +58,15 @@ setInterval(() => { }, 500); ``` -Nemusíme ale ledce nastavovat jenom jestli je zapnutá nebo vypnutá. Vlastně můžeme měnit všechny její vlastností, které jsem si nastavili v designeru. +Nemusíme ale ledce nastavovat pouze jestli je zapnutá nebo vypnutá. Vlastně můžeme měnit všechny její vlastností, které jsem si nastavili v designeru. ![](assets/suggExample.png) !!! info "Našeptávač se ve VSCode zobrazuje sám, ale pokud vám zmizí, znovu si ho můžete zobrazit stisknutím ++ctrl+space++. " -Jak vidíte, našeptávač nám nabízí přístup k barvě stavu, výšce, šířce, pozici... Prostě ke všem vlastnostem ledky, které si můžeme v designeru nastavit. Některým z nich můžeme v kódu prostě přiřadit hodnotu a ona se projeví na rozhraní (viz příklad blikání ledkou na rozhraní v GridUI). Když si potom jednu vlastnost vybereme a najedeme na ni myší, ukáže se nám, jaký typ hodnoty požadují. Vlastnost `.on` u ledky bere booleanskou hodnotu, vlastnost `.widgetH` číslo, které určuje výšku widgetu, a `.color` string ve formátu `#ffffff` (RGB hodnoty v hexadecimální soustavě). +Jak vidíte, našeptávač nám nabízí přístup k barvě stavu, výšce, šířce, pozici... Prostě ke všem vlastnostem ledky, které si můžeme v designeru nastavit. Některým z nich můžeme v kódu prostě přiřadit hodnotu a ona se projeví na rozhraní (viz příklad blikání ledkou na rozhraní v GridUI). Když si potom jednu vlastnost vybereme a najedeme na ni myší, ukáže se nám, jaký typ hodnoty požaduje. Vlastnost `.on` u ledky bere booleanskou hodnotu, vlastnost `.widgetH` číslo, které určuje výšku widgetu, a `.color` string ve formátu `#ffffff` (RGB hodnoty jsou v hexadecimální soustavě). -Obdobně snadno přijdete na všechno, co se dá vyvádět s ostatními widgety. Ještě jedna věc: nastavovat hodnoty můžete všem vlastnostem, které jsou speciální pro konkrétní widget (barva, velikost fontu, hodnota posuvník atd.) zatímco k obecným vlastnostem, jako je pozice, velikost widgetu a uuid, můžete přistupovat pouze ke čtení. +Obdobně snadno přijdete na všechno, co se dá vyvádět s ostatními widgety. Ještě jedna věc: nastavovat hodnoty můžete všem vlastnostem, které jsou speciální pro konkrétní widget (barva, velikost fontu, hodnota posuvníku atd.) zatímco k obecným vlastnostem, jako je pozice, velikost widgetu a uuid, můžete přistupovat pouze ke čtení. Pohled na jednotlivé widgety a jejich vlastnosti je dostupný v dalším bloku. diff --git a/docs/v2/robotExtensions/blokGridUI/widgets.md b/docs/v2/robotExtensions/blokGridUI/widgets.md index aea1454bf..2e7b0fcaa 100644 --- a/docs/v2/robotExtensions/blokGridUI/widgets.md +++ b/docs/v2/robotExtensions/blokGridUI/widgets.md @@ -1,5 +1,5 @@ # Widgety -[GridUI designer](https://gridui.robotikabrno.cz/) nám nabízí spoustu různých widgetů, ale co všechno s nimi dokážeme vyvádět? Tady jich většinu projdeme a ukážeme si všechny informace, které jsme schopni ze jednotlivých widgetů tahat a naopak co u nich všechno můžeme kódem nastavovat. +[GridUI designer](https://gridui.robotikabrno.cz/) nám nabízí spoustu různých widgetů, ale co všechno s nimi dokážeme vyvádět? Tady jich většinu projdeme a ukážeme si všechny informace, které jsme schopni z jednotlivých widgetů získat a naopak, co u nich všechno můžeme kódem nastavovat. [GridUI designer](https://gridui.robotikabrno.cz/){ .md-button .md-button--primary } @@ -117,7 +117,7 @@ Layout.Circle1.max = 100; // maximální hodnota Layout.Circle1.value = 75; // jeden konec vybarvené části kruhu Layout.Circle1.valueStart = 50; // druhý konec vybarvené části kruhu ``` -!!! tip "Doporučuji si nejprve ručně pohrát s hodnotama v [designeru](https://gridui.robotikabrno.cz/) a pochopit, co která doopravdy dělá." +!!! tip "Doporučuji si nejprve ručně pohrát s hodnotami v [designeru](https://gridui.robotikabrno.cz/) a pochopit, co která doopravdy dělá." ## Vstup @@ -149,7 +149,7 @@ Layout.Input1.text = "superTajneHeslo"; // text ve vstupu ![](assets\joystick.png) -U joysticku opět můžeme v `Layout.begin()` nastavit kód zpuštěný změnou jeho polohy nebo kliknutím/ťuknutím na něj. Také můžeme vyčítat jeho pozici pomocí `Layout..x` a `Layout..y`. +U joysticku opět můžeme v `Layout.begin()` nastavit kód spuštěný změnou jeho polohy nebo kliknutím/ťuknutím na něj. Také můžeme vyčítat jeho pozici pomocí `Layout..x` a `Layout..y`. ```ts const OWNER = "owner";