150 lines
7.8 KiB
TeX
150 lines
7.8 KiB
TeX
|
\chapter{Sada didaktických materiálů} \label{kapitola:didakticke-materialy}
|
||
|
|
|
||
|
|
Tato kapitola se věnuje návrhu didaktických materiálů, které jsou následně implementovány v~kapitole \ref{kapitola:webova-dokumentace} a~publikovány jako interaktivní webová stránka na adrese \url{https://docs.capyboard.dev}. Zmíněná kapitola \ref{kapitola:webova-dokumentace} se zabývá převážně technickými aspekty implementace zde navržených didaktických materiálů do formy webových stránek, zatímco tato kapitola popisuje obsah, jeho strukturu a~některé ukázkové příklady, které mohou sloužit jako inspirace pro výuku.
|
||
|
|
|
||
|
|
Didaktické materiály jsou navrženy tak, aby sloužily jako průvodce pro uživatele, ať už se jedná o~učitele, studenty, nebo další zájemce, kteří chtějí pracovat s~vývojovou deskou. Obsah dokumentace je přizpůsoben specifikům navržené vývojové desky a~jednotlivým modulům. Poskytuje přehledně strukturované a srozumitelné informace, které usnadňují pochopení jednotlivých částí systému a jejich praktické využití.
|
||
|
|
|
||
|
|
|
||
|
|
\section{Struktura}
|
||
|
|
|
||
|
|
Didaktické materiály obsahují veškeré informace potřebné k~provozování vývojové desky a~modulů. Struktura didaktických materiálů je členěna do tří základních kategorií:
|
||
|
|
|
||
|
|
\begin{figure}[h!]
|
||
|
|
\vspace{20pt}
|
||
|
|
\centering
|
||
|
|
\includegraphics[width=\textwidth]{obrazky/dokumentace-prehled.png}
|
||
|
|
\caption{Popis jednotlivých sekcí na úvodní stránce webové dokumentace, viz kapitola \ref{kapitola:webova-dokumentace}.}
|
||
|
|
\label{fig:dokumentace-prehled}
|
||
|
|
\vspace{20pt}
|
||
|
|
\end{figure}
|
||
|
|
|
||
|
|
První část se zaměřuje na základní konfiguraci vývojového prostředí a~přípravu k~práci s~vývojovou deskou. Zahrnuje proces instalace PlatformIO a~dalších potřebných nástrojů a~obsahuje připravenou šablonu, která slouží jako základ pro vytvoření jednoduchého projektu.
|
||
|
|
|
||
|
|
Druhá část se věnuje popisu vývojové desky a~jednotlivých modulů, včetně hardwarových specifikací, používaných komponent, aktivně využívaných pinů u~modulů a~doporučených knihoven pro práci s~nimi, spolu s~ukázkovým kódem. Tím je zajištěno, že uživatel nemusí vyhledávat informace v~externí dokumentaci a~může okamžitě začít pracovat.
|
||
|
|
|
||
|
|
Třetí, nejobsáhlejší část, se zaměřuje na ukázkové příklady, které jsou rozděleny podle jednotlivých hardwarových modulů a~podle náročnosti realizace. Každý příklad obsahuje úvodní zadání a~ukázkový základní kód. Důležitým prvkem ukázkových příkladů jsou tzv. \emph{výzvy}, které postupně navazují na základní zadání a~rozšiřují ho o~další kroky. Tyto výzvy představují jednotlivé kroky, kterými by měl uživatel projít a~tím si postupně rozšiřovat své dovednosti. Výhodou tohoto přístupu je možnost individuálního tempa. V~kontextu výuky v~kroužku by měl vyučující zastávat roli mediátora a~pomáhat žákům s~individuálními problémy, zatímco žáci pracují samostatně nebo ve skupinách vlastním tempem.
|
||
|
|
|
||
|
|
Jednotlivé příklady jsou zároveň rozděleny do kategorií podle konkrétních modulů, přičemž jedna sada příkladů je věnována samotné vývojové desce, další světelnému modulu, a~podobně. V~rámci těchto kategorií jsou příklady dále uspořádány podle obtížnosti, od základních úloh až po složitější zadání. Lze tedy říci, že pokud uživatel postupně projde všechny příklady včetně připravených výzev, jednotlivé úkoly na sebe plynule navazují jak tematicky, tak i~z~hlediska obtížnosti.
|
||
|
|
|
||
|
|
\begin{figure}[h!]
|
||
|
|
\vspace{15pt}
|
||
|
|
\centering
|
||
|
|
\includegraphics[width=0.25\linewidth]{obrazky/priklady-svetelny-modul.png}
|
||
|
|
\caption{Jednotlivé úkoly pro práci se světelným modulem ve webové verzi dokumentace.}
|
||
|
|
\label{fig:priklady-svetelny-modul}
|
||
|
|
\vspace{10pt}
|
||
|
|
\end{figure}
|
||
|
|
|
||
|
|
Ukázkou této návaznosti mohou být příklady pro světelný modul, viz obrázek \ref{fig:priklady-svetelny-modul}. Zde je první část věnována přípravě modulu a~základní práci s~knihovnou \emph{MD\_MAX72XX}. Jednotlivé výzvy vedou uživatele k~hlubšímu osvojení práce s~knihovnou i~samotným modulem a~připomínají základní prvky imperativního programování, jako jsou například cykly. Prvním úkolem je pro uživatele rozblikání světelného modulu a~vytvoření jednoduché animace. V~navazujícím zadání je uživatel veden k~vykreslení jednoduchého obrázku a~následně, v~dalším kroku, k~jeho složitější animaci. Tento proces je průběžně doplňován zmíněnými výzvami, které nabízejí další kroky a~rozšíření úkolu. Nakonec se uživatel propracuje až k~vytvoření simulace tzv. \uv{Game of Life} neboli hry života.
|
||
|
|
|
||
|
|
|
||
|
|
\section{Ukázkový příklad -- Vykreslení tvaru} \label{sekce:ukazkovy-priklad-tvary}
|
||
|
|
|
||
|
|
% What the fuck?!
|
||
|
|
\begin{wrapfigure}{r}{0.13\textwidth}
|
||
|
|
\vspace{-20pt}
|
||
|
|
\includegraphics[width=\linewidth]{obrazky/led-srdce.png}
|
||
|
|
\end{wrapfigure}
|
||
|
|
|
||
|
|
Nakreslete vlastní tvar, například kruh, čtverec nebo složitější tvar. Toho dosáhnete vytvořením dvojrozměrného pole bajtů s~jednoduchou logikou: 1 znamená zapnutou diodu a~0 vypnutou diodu.
|
||
|
|
|
||
|
|
\subsection*{Výzvy}
|
||
|
|
|
||
|
|
\begin{enumerate}
|
||
|
|
\item Invertujte svůj tvar, aniž byste upravovali samotné pole. Pixely, které jsou aktuálně zapnuté, by měly být vypnuté, a~naopak.
|
||
|
|
\item Definujte svůj tvar v~šestnáctkové soustavě (hexadecimální) namísto dvojkové (binární).
|
||
|
|
\end{enumerate}
|
||
|
|
|
||
|
|
\subsection*{Ukázka základního kódu}
|
||
|
|
|
||
|
|
\begin{listing}[!ht]
|
||
|
|
\label{src:kod-ukazkoveho-prikladu-tvary}
|
||
|
|
\begin{minted}[linenos]{c}
|
||
|
|
#include <MD_MAX72xx.h>
|
||
|
|
|
||
|
|
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
|
||
|
|
#define CS_PIN 10
|
||
|
|
#define SEGMENTS 1
|
||
|
|
|
||
|
|
MD_MAX72XX display = MD_MAX72XX(HARDWARE_TYPE, CS_PIN, SEGMENTS);
|
||
|
|
|
||
|
|
const int frame[8][8] = {
|
||
|
|
{0, 0, 0, 0, 0, 0, 0, 0},
|
||
|
|
{0, 1, 1, 0, 0, 1, 1, 0},
|
||
|
|
{1, 1, 1, 1, 1, 1, 1, 1},
|
||
|
|
{1, 1, 1, 1, 1, 1, 1, 1},
|
||
|
|
{0, 1, 1, 1, 1, 1, 1, 0},
|
||
|
|
{0, 0, 1, 1, 1, 1, 0, 0},
|
||
|
|
{0, 0, 0, 1, 1, 0, 0, 0},
|
||
|
|
{0, 0, 0, 0, 0, 0, 0, 0}
|
||
|
|
};
|
||
|
|
|
||
|
|
void displayShape(const int frame[8][8]) {
|
||
|
|
for (int row = 0; row < 8; row++) {
|
||
|
|
for (int col = 0; col < 8; col++) {
|
||
|
|
display.setPoint(col, row, frame[row][col]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
void setup() {
|
||
|
|
display.begin();
|
||
|
|
display.clear();
|
||
|
|
displayShape(frame);
|
||
|
|
}
|
||
|
|
|
||
|
|
void loop() {
|
||
|
|
}
|
||
|
|
\end{minted}
|
||
|
|
\end{listing}
|
||
|
|
|
||
|
|
\section{Ukázkový příklad -- Animace textu} \label{sekce:ukazkovy-priklad-animace}
|
||
|
|
|
||
|
|
Vytvořte animovaný posunující se text pomocí knihovny \emph{Parola}. Toho lze samozřejmě dosáhnout i~pomocí animace po jednotlivých snímcích, ale využitím knihoven není třeba \uv{znovu objevovat kolo}. Knihovna \emph{Parola} vychází z~knihovny \emph{MD\_MAX72xx} a~rozšiřuje ji o~řadu funkcí, jako je zarovnání, posun, animace a~mnoho dalšího.
|
||
|
|
|
||
|
|
Nezapomeňte knihovnu importovat v~souboru \texttt{platformio.ini}:
|
||
|
|
|
||
|
|
\begin{listing}[!ht]
|
||
|
|
\label{src:kod-ukazkoveho-prikladu-animace-platformio}
|
||
|
|
\begin{minted}{c}
|
||
|
|
lib_deps =
|
||
|
|
MD_MAX72XX
|
||
|
|
MD_Parola
|
||
|
|
\end{minted}
|
||
|
|
\end{listing}
|
||
|
|
|
||
|
|
\subsection*{Výzvy}
|
||
|
|
|
||
|
|
\begin{enumerate}
|
||
|
|
\item Upravte program tak, aby se text změnil po každém dokončení animace.
|
||
|
|
\item Nastavte, aby se směr a~rychlost posouvání změnily s~každým novým textem.
|
||
|
|
\end{enumerate}
|
||
|
|
|
||
|
|
\subsection*{Ukázka základního kódu}
|
||
|
|
|
||
|
|
\begin{listing}[!ht]
|
||
|
|
\label{src:kod-ukazkoveho-prikladu-animace}
|
||
|
|
\begin{minted}[linenos]{c}
|
||
|
|
#include <MD_Parola.h>
|
||
|
|
#include <MD_MAX72xx.h>
|
||
|
|
|
||
|
|
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
|
||
|
|
#define CS_PIN 10
|
||
|
|
#define SEGMENTS 1
|
||
|
|
|
||
|
|
MD_Parola display = MD_Parola(HARDWARE_TYPE, CS_PIN, SEGMENTS);
|
||
|
|
|
||
|
|
void setup() {
|
||
|
|
display.begin();
|
||
|
|
display.displayClear();
|
||
|
|
|
||
|
|
ledMatrix.displayScroll("Capyboard", PA_CENTER, PA_SCROLL_LEFT, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
void loop() {
|
||
|
|
if (ledMatrix.displayAnimate()) {
|
||
|
|
ledMatrix.displayReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
\end{minted}
|
||
|
|
\end{listing}
|