Přeskočit obsah

Lekce 3 - Displej¤

Saturn má k dispozici 64x64 barevný displej, který se v této lekci naučíme ovládat.

Vytvoření projektu¤

Jak jsme se učili v první lekci, vytvoříme si nový projekt. Máme několik možností, jak to udělat:

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>

K displeji se dostaneme přes objekt Saturn, který získéme zavoláním funkce createSaturn.

Barevné světlo vytváříme ze tří základních barev: červená (RED), zelená (GREEN), a modrá (BLUE). Tyto barvy pomocí funkce colors.rgb mícháme v různých poměrech od 0 do 255, a vytváříme tak různé barvy:

  • První hodnota (r) nám dává množství červené
  • Druhá (g) dává množství zelené
  • Třetí (b) dává množství modré

RGB Venn diagram

Zde je pár praktických příkladů:

  • lososová: colors.rgb(245, 125, 165)
  • obsidianová: colors.rgb(42, 31, 59)
  • mátozubňopastová: colors.rgb(185, 250, 217)

Pokud tyto nestačí, knihovna colors obsahuje také předdefinovanou kolekci vzácnějších barev, jako jsou colors.red, colors.yellow, colors.white, ...

Jednoduché kreslení¤

K displeji se dostaneme přes objekt Saturn, který získéme zavoláním funkce createSaturn. Poté na něm můžeme volat různé metody. Nejdůležitější jsou setPixel a show, které teď použijeme. Začneme kreslením jediné tečky. Nejdříve naimportujeme potřebné knihovny, připravíme displej, nastavíme barvu pixelu a potvrdíme změny. Příklad:

import { createSaturn } from "saturn";
import * as colors from "colors";

// Tento řádek připraví displej ke kreslení.
const saturn = createSaturn();
const display = saturn.display;

// Tento řádek nastaví barvu jediného pixelu.
// První číslo udává x-ovou souřadnici a druhé y-ovou.
// Jelikož má displej velikost 64x64, tento pixel je jeden ze středových.
display.setPixel(32, 32, colors.red);

// Tento řádek propíše provedené změny do displeje.
display.show();

Upozornění

Dokud není zavolána funkce show, změny se nepropíšou!

Displej vzhůru nohama?

Podle toho, jak je displej namontovaný, se může stát, že bude otočený o 180°. V takovém případě stačí funkci createSaturn předat parametr flip:

const saturn = createSaturn(true);

Zadání A¤

Nakresli semafor: zelenou, žlutou a červenou tečku vedle sebe.

Řešení

import { createSaturn } from "saturn";
import * as colors from "colors";

const saturn = createSaturn();
const display = saturn.display;

display.setPixel(31, 32, colors.green);
display.setPixel(32, 32, colors.yellow);
display.setPixel(33, 32, colors.red);
display.show();

Výplň¤

Pomocí funkce Display.fill lze jednoduše vyplnit celý displej jednolitou barvou. Hlavním využitím je následující kód, který rozsvítí veškeré LEDky na maximum a zajistí tak odvaření displeje.

import { createSaturn } from "saturn";
import * as colors from "colors";

const saturn = createSaturn();
const display = saturn.display;

display.fill(colors.white);
display.show();

Info

Pokud chceš vyčistit obrazovku, můžeš použít optimalizovanou funkci clear.

Zadání B¤

Vyplň celý displej modrou barvou a pak po dvou vteřinách žlutou.

Nápověda

Čeká se pomocí příkazu await sleep(pocetMilisekund);

Nápověda 2

Jedna sekunda má tisíc milisekund.

Nápověda 3

Dva krát tisíc jsou dva tisíce.

Nápověda 4

2 a = a + a

Nápověda 5

n=1 1 ns = 0 Re ( s ) = 12

Nápověda 6

Řešení

import { createSaturn } from "saturn";
import * as colors from "colors";

const saturn = createSaturn();
const display = saturn.display;

display.fill(colors.blue);
display.show();

await sleep(2000);

display.fill(colors.yellow);
display.show();

Zadání výstupního úkolu¤

Nakresli smajlík :-) Čím hezčí, tím víc bodů*

Poznámka

* Body mají čistě symbolickou hodnotu. Organizátoři neručí za férovost jejich udělování.