Přeskočit obsah

Lekce 2 - RGB LED + tlačítko + události¤

V této lekci začneme se zajímavějšími programy.

Ukážeme si ovládání RGB LED umístěné na Saturnu a práci s událostmi řízenými tlačítkem nebo časem.

Vytvoření projektu¤

Otevřeme editor Jacly a vytvoříme nový projekt. Typ zvolíme Jacly bloky projekt a šablonu template-jacly-saturn. Před nahráním programu se musíme připojit k Saturnu (viz lekce 1).

Pokročilá nastavení neměníme.

Instalace knihoven¤

Do nového projektu nainstalujeme potřebné knihovny:

  • button

Zadání A¤

Nejprve si ověříme znalosti z minulé lekce. Zkusíme blikat LED na Saturnu (ILED). Na začátku tohoto úkolu si otevřeme nový prázdný projekt. Můžete se inspirovat projektem z minulé lekce.

Řešení

blockSolutionA

Co je to událost v programování?¤

Událost je situace, kterou program rozpozná (například stisknutí nebo puštění tlačítka, uplynutí určitého času). Po zaznamenání události se vykoná kód, který je k této události přiřazen. Událostí může být například stisknutí tlačítka nebo uplynutí určitého času.

Tlačítko¤

Události řízené stiskem tlačítka můžeme ovládat pomocí bločků z podkategorie Tlačítko z kategorie Periferie. Abychom měli k této kategorii přístup, musíme si ji nejprve nainstalovat do našeho projektu pomocí správce balíčků. Hledejte balíček button.

Tlačítko si nejprve musíme vytvořit bločkem vytvořit tlačítko. Políčka limit dvojskoku, odskok a invertované neměníme. Pin nastavíme na boot tlačítko na Saturnu. blocksCreateButton

Na událost na tlačítku pak můžeme navázat blok kódu pomocí bloků při kliknutí a při stisknutí/puštění/dvojití kliknutí. Událost kliknutí nastane při stisknutí i puštění tlačítka, událost stisknutí při stisknutí tlačítka, událost puštění při puštění tlačítka a událost dvojitého kliknutí při dvojím kliknutí na tlačítko v daném časovém limitu. Bloček při kliknutí nám navíc dává informaci o délce stisknutí. blocksOnClick

Zadání B¤

Pomocí událostí rozsvítíme při stisknutí tlačítka LEDku na Saturnu a při puštění ji zhasneme. Použijte boot tlačítko, a ledku ILED. Je důležité nezapomenout nastavit na začátku tlačítko a LEDku jako v předchozích úkolech.

Řešení

blockSolutionB

Časové události¤

Události řízené časem můžeme ovládat pomocí bločků z kategorie Základní. Jsou zde 2 typy událostí: Intervaly a Časovače.

Interval¤

Událost Intervaly nám umožní opakovaně spouštět kód každých X milisekund. Tento kód bude každou vteřinu vypisovat zprávu do konzole. Všimněme si, že čas se udává v milisekundách, takže 1000 ms je 1 sekunda. setInterval

Interval běží, dokud ho neukončíme pomocí bloku zrušit interval. clearInterval

Časovač¤

Událost Časovač nám umožní spustit kód po uplynutí určitého času. setTimeout

Časovač běží jen jednou, po uplynutí zadaného času. Pokud chceme časovač zastavit, můžeme použít blok zrušit časovač. clearTimeout

Zadání C¤

Desetkrát za sekundu vypíšeme stav zmáčknutí tlačítka (true/false). Stav daného tlačítka získáme pomocí bloku tlačítko je stisknuté z kategorie Button. Opakování dosáhneme pomocí Intervalů, a informaci vypíšeme pomocí bloku konzole.

Řešení

blockSolutionC

Výstupní úkol V1 - Pozdrav¤

Při stisknutí tlačítka vypíšeme pozdrav.

Výstupní úkol V2 - Změna barvy¤

Při stisknutí tlačítka rozsvítíme LED na Saturnu jednou barvou a při puštění barvu změníme na jinou.

V této lekci začneme se zajímavějšími programy.

Ukážeme si ovládání RGB LED umístěné na Saturnu a práci s událostmi řízenými tlačítkem nebo časem.

Vytvoření projektu¤

Stačí kliknout na odkaz, otevře se nám VSCode a nabídne se nám možnost vytvořit projekt z připraveného balíčku.

Vytvořit projekt

Tento příkaz stačí zadat do terminálu v adresáři, kde chceme mít projekt uložený. Změníme <PROJECT_NAME> na název projektu, který chceme vytvořit.

jac project-create --package https://2026.robotickytabor.cz/lekce/baseExample.tar.gz <PROJECT_NAME>

Instalace knihoven¤

Do nového projektu nainstalujeme potřebné knihovny:

  • button

Zadání A¤

Nejprve si ověříme znalosti z minulé lekce. Zkusíme blikat RGB LED na Saturnu (pin 48). Na začátku tohoto úkolu si otevřeme nový prázdný projekt. Můžete se inspirovat projektem z minulé lekce. Budete si muset nainstalovat balíček basic, pokud ho nemáte.

Řešení 
import * as basic from "basic";
import { SmartLed, LED_WS2812B } from "smartled";
import * as colors from "colors";
import { SaturnPins } from "saturn";

const led = new SmartLed(SaturnPins.ILED, 1, LED_WS2812B);

basic.forever(async () => {
    led.set(0, colors.red);
    led.show();
    await sleep(250);
    led.set(0, colors.off);
    led.show();
    await sleep(250);
});

Co je to událost v programování?¤

Událost je situace, kterou program rozpozná (například stisknutí nebo puštění tlačítka, uplynutí určitého času). Po zaznamenání události se vykoná kód, který je k této události přiřazen. Událostí může být například stisknutí tlačítka nebo uplynutí určitého času.

Tlačítko¤

Události řízené stiskem tlačítka můžeme ovládat příkazy ze knihovny button. 

import { Button } from "button";
Nejprve musíme tlačítko vytvořit pomocí příkazu const button = new Button(PIN), kde PIN je číslo pinu. 
const buttonA = new Button(SaturnPins.BootBtn)

Poté si můžeme připojit k dané události blok kódu pomocí příkazu button.on(EVENT, () => {...}). Argument EVENT může být hodnota "press", "release", "click" a "doubleClick". Událost "press" nastane při stisknutí tlačítka, "release" při puštění tlačítka, "click" při jednom stisknutí a "doubleClick" při dvojitém stisknutí tlačítka. Argument () => {...} je kód, který se vykoná při dané události. 

buttonA.on("press", () => {
    console.log("Button pressed");
});

buttonA.on("release", () => {
    console.log("Button released");
});

buttonA.on("click", () => {
    console.log("Button clicked");
});

buttonA.on("doubleClick", () => {
    console.log("Button double clicked");
});

Když vše spojíme dohromady, můžeme při stisknutí tlačítka vypisovat zprávy do konzole. 

import { Button } from "button";
import { SaturnPins } from "saturn";

const buttonA = new Button(SaturnPins.BootBtn);

buttonA.on("press", () => {
    console.log("Button pressed");
});

buttonA.on("release", () => {
    console.log("Button released");
});

buttonA.on("click", () => {
    console.log("Button clicked");
});

buttonA.on("doubleClick", () => {
    console.log("Button double clicked");
});

LEDka pořádně¤

Na desce Saturn je pouze jedna LEDka, se kterou budeme pracovat (SaturnPins.ILED). Pro práci s ní musíme nejprve importovat knihovnu. 

import { SmartLed, LED_WS2812B } from "smartled";
import { SaturnPins } from "saturn";

Pak musíme LEDku vytvořit pomocí příkazu const led = new SmartLed(PIN, COUNT, TYPE), kde PIN je číslo pinu, COUNT je počet LEDek a TYPE je typ LEDky. LEDka je připojena na pin SaturnPins.ILED. Jelikož máme pouze jednu ledku, COUNT bude 1. Typ LEDky je LED_WS2812B, proto ho spolu s SmarLed importujeme. 

const led = new SmartLed(SaturnPins.ILED, 1, LED_WS2812B);

Pak už můžeme s LEDkou pracovat. K tomu nám slouží příkazy led.set(INDEX, COLOR) a led.show(). Příkaz led.set(INDEX, COLOR) nastaví barvu LEDky na daném indexu. Jelikož máme pouze jednu LEDku, INDEX bude 0. Barvu můžeme nastavit pomocí knihovny colors, kterou musíme také importovat. Příkaz led.show() zobrazí nastavenou barvu na LEDce. 

import { SmartLed, LED_WS2812B } from "smartled";
import { SaturnPins } from "saturn";
import * as colors from "colors";

const led = new SmartLed(SaturnPins.ILED, 1, LED_WS2812B);

led.set(0, colors.green);
led.show();

Po každém nastavení barvy je potřeba zavolat příkaz led.show(), jinak se barva nezobrazí.

Zadání B¤

Pomocí událostí rozsvítíme při stisknutí tlačítka LEDku na Saturnu a při puštění ji zhasneme. Tlačítko je na pinu SaturnPins.BootBtn, LEDka na pinu SaturnPins.ILED. Je důležité nezapomenout nastavit na začátku tlačítko a LEDku jako v předchozích úkolech.

Řešení 
import { Button } from "button";
import { SmartLed, LED_WS2812B } from "smartled";
import { SaturnPins } from "saturn";
import * as colors from "colors";

const buttonA = new Button(SaturnPins.BootBtn);
const led = new SmartLed(SaturnPins.ILED, 1, LED_WS2812B);


buttonA.on("press", () => {
    led.set(0, colors.red)
    led.show()
});

buttonA.on("release", () => {
    led.set(0, colors.off);
    led.show();
});

Časové události¤

Události řízene časem můžeme ovládat pomocí příkazů setInterval a setTimeout.

setInterval¤

setInterval(()=>{...}, TIME) nám umožní opakovaně spouštět kód každých TIME milisekund. Ukázkový kód bude každou vteřinu vypisovat zprávu do konzole. Všimněme si, že čas se udává v milisekundách, takže 1000 ms je 1 sekunda. 

setInterval(() => {
    console.log("Interval");
}, 1000);

clearTimeout

Interval běží, dokud ho neukončíme pomocí příkazu clearInterval(INTERVAL_ID). INTERVAL_ID si musíe uložit při vytváření intervalu, protože nám ho vrátí setInterval(). 

const intervalId = setInterval(() => {
    console.log("Interval");
}, 1000);
await sleep(10000);
clearInterval(intervalId);

setTimeout¤

setTimeout(()=>{...}, TIME) nám umožní spustit kód po uplynutí určitého času. Ukázkový kód bude po 5 sekundách vypisovat zprávu do konzole. 

setTimeout(() => {
    console.log("Timeout");
}, 5000);

clearTimeout

setTimeout běží jen jednou, po uplynutí zadaného času. Pokud ho chceme zastavit, můžeme použít příkaz clearTimeout(TIMEOUT_ID). TIMEOUT_ID si musíme uložit při vytváření časovače, protože nám ho vrátí setTimeout(). 

const timeoutId = setTimeout(() => {
    console.log("Timeout");
}, 5000);
clearTimeout(timeoutId);

Zadání C¤

Desetkrát za sekundu vypíšeme stav zmáčknutí tlačítka (Zmáčknuto: false/true). Stav daného tlačítka získáme pomocí příkazu button.isPressed() Opakování dosáhneme pomocí setInterval.

Řešení 
import { Button } from "button";
import { SaturnPins } from "saturn";

const button = new Button(SaturnPins.BootBtn);

setInterval(() => {
    console.log(button.isPressed());
}, 1000);

Výstupní úkol V1 - Pozdrav¤

Při stisknutí tlačítka (pin SaturnPins.BootBtn) vypíšeme pozdrav.

Výstupní úkol V2 - Změna barvy¤

Při stisknutí tlačítka (pin SaturnPins.BootBtn) rozsvítíme LED (pin SaturnPins.ILED) jednou barvou a při puštění barvu jinou barvou.