Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Oddělení celoživotního vzdělávání
Závěrečná práce
Tvorba výukové pomůcky pro výuku robotiky na střední škole
Vypracoval: Mgr. Vít Barabáš Vedoucí práce: Ing. Michal Šerý, Ph.D. České Budějovice 2016
Prohlášení Prohlašuji, že svoji závěrečnou práci jsem vypracoval samostatně pouze s použitím pramenů a literatury uvedených v seznamu citované literatury. Prohlašuji, že v souladu s § 47b zákona č. 111/1998 Sb. v platném znění souhlasím se zveřejněním své závěrečné práce, a to v nezkrácené podobě elektronickou cestou ve veřejně přístupné části databáze STAG provozované Jihočeskou univerzitou v Českých Budějovicích na jejích internetových stránkách, a to se zachováním mého autorského práva k odevzdanému textu této kvalifikační práce. Souhlasím dále s tím, aby toutéž elektronickou cestou byly v souladu s uvedeným ustanovením zákona č. 111/1998 Sb. zveřejněny posudky školitele a oponentů práce i záznam o průběhu a výsledku obhajoby kvalifikační práce. Rovněž souhlasím s porovnáním textu mé kvalifikační práce s databází kvalifikačních prací Theses.cz provozovanou Národním registrem vysokoškolských kvalifikačních prací a systémem na odhalování plagiátů.
V Českých Budějovicích dne: ...............................
................................................. Podpis autora práce
Anotace Tato práce se zabývá návrhem rozšíření učební pomůcky Bigtrak ROVER pro výuku robotiky na střední škole. Práce se skládá ze dvou částí. V první části mé práce se věnuji popisu fungování pomůcky na výuku programování Bigtrak ROVER. Hlavní částí mé práce je návrh a realizace rozšíření programovacích možností pro pomůcku Bigtrak ROVER. Toto rozšíření umožní vzdálené online ovládání robotického podvozku. Klíčová slova: Bigtrak ROVER, robotika, vzdálené řízení Abstract This thesis deals with a model of expansion of the didactic tool Bigtrak ROVER designed for high school instructions of robotics. The thesis comprises of two parts. The first part is dedicated to the description of the tool's functionality for lessons in Bigtrak ROVER programming. The main part of the thesis consists in design and realisation of programming possibilities expansion for Bigtrak ROVER. This expansion allows for a remote online control of the robotic chassis. Keywords: Bigtrak ROVER, robotics, remote control
Poděkování Rád bych touto formou poděkoval vedoucímu mé závěrečné práce Ing. Michalu Šerému, Ph.D. za odborné vedení při zpracování mé práce a za cenné rady a doporučení, bez kterých bych tuto práci nenapsal. Na konec, i když neméně významně bych chtěl poděkovat své partnerce i mým rodičům, kteří mě v průběhu psaní této práce podporovali, a tím mi umožnili práci dokončit.
Obsah 1
2
Úvod ................................................................................................... 7 1.1
Cíle práce ..................................................................................... 7
1.2
Metoda vývoje aplikace ............................................................... 8
1.2.1
Analýza ................................................................................. 8
1.2.2
Návrh .................................................................................... 8
1.2.3
Vývoj ..................................................................................... 9
1.2.4
Implementace....................................................................... 9
1.2.5
Evaluace ................................................................................ 9
Terminologie a popis použitých technologií .................................... 10 2.1
3
2.1.1
Základní myšlenka Bigtrak ROVER ...................................... 10
2.1.2
Popis ovládání..................................................................... 10
2.1.3
Popis komunikace mobilu a vozítka ................................... 11
Návrh vzdálené komunikace ............................................................ 13 3.1
Definice možností ovládání........................................................ 13
3.2
Návrh klientské aplikace ............................................................ 14
3.3
Návrh komunikačního protokolu ............................................... 15
3.3.1
Návrh přenosového formátu .............................................. 16
3.3.2
Struktura DAT ..................................................................... 17
3.4
4
5
Bigtrack ROVER .......................................................................... 10
Návrh serverové části aplikace .................................................. 19
3.4.1
GUI server ........................................................................... 19
3.4.2
Ukázka dat studentského řešení z pohledu dat ................. 20
Vývoj aplikace................................................................................... 21 4.1
Serverová část aplikace.............................................................. 21
4.2
Klientská část aplikace ............................................................... 22
4.2.1
Framework Phonegap ........................................................ 22
4.2.2
Realizace GUI aplikace ........................................................ 24
Návrh testovacích úloh a následná evaluace ................................... 31 5.1
Úloha opis čtverce ..................................................................... 31
5.1.1
Cíle úlohy ............................................................................ 31
5.1.2
Potřebné pracovní pomůcky .............................................. 31
5.1.3
Zadání úlohy ....................................................................... 31
5.2
5.2.1
Cíle úlohy ............................................................................ 31
5.2.2
Potřebné pracovní pomůcky .............................................. 31
5.2.3
Zadání úlohy ....................................................................... 32
5.3
6
Úloha opis mnohoúhelníku ........................................................ 31
Slalom / bludiště ........................................................................ 32
5.3.1
Cíle úlohy ............................................................................ 32
5.3.2
Potřebné pracovní pomůcky .............................................. 32
5.3.3
Zadání úlohy ....................................................................... 32
Závěr ................................................................................................. 33
1
Úvod Během mého celoživotního studia jsem se setkal při výuce Didaktiky robotiky
s výukovou pomůckou Bigtrak ROVER. V rámci splnění podmínek předmětu jsem se rozhodl pro tuto pomůcku navrhnout rozšíření, které by umožnilo vzdálené ovládání robotického podvozku přes internet a tím tak odstranilo problém s dosahem zařízení i platformní závislost na výrobcem navržené aplikaci.
1.1 Cíle práce Tato práce je přímým rozšířením mé semestrální práce a klade si za cíl vysvětlit princip fungování mnou navrženého principu ovládání zařízení a nastínit způsoby použití technologie při výuce robotiky na střední škole. Dále popíšu mnou využité zařízení Bigtrak ROVER. V této části práce bude vysvětlen princip fungování zařízení a následně budou rozebrány výhody a nevýhody této učební pomůcky. V praktické části práce bude navržen a popsán princip vzdáleného ovládání vozítka. Následně bude navržen komunikační protokol, přes které bude zařízení komunikovat se vzdáleným serverem. Následně budou naprogramovány dvě aplikace. Klientská část běžící v mobilním zařízením, sloužícím jako řídící jednotka robotického vozítka a serverová část zprostředkovávající přenos programu do mobilního zařízení. Takto navržené aplikace budou otestovány při výuce robotiky na střední škole ve čtvrtém ročníku informatického oboru.
7
1.2 Metoda vývoje aplikace Při psaní mé diplomové práce byla vyvíjena aplikace podle vývojového modelu ADDIE. Při této práci jsem si ověřil výhody tohoto vývojového modelu. Proto bude tento model aplikován i v rámci této závěrečné práce. Velkou výhodou je vysoká efektivita vývoje, která těží ze snížení rizika výskytu neočekávaných problémů na naprosté minimum.
OBR. 1 VÝVOJOVÝ MODE ADDIE ([1])
1.2.1 Analýza Na počátku psaní práce byla provedena analýza fungování pomůcky Bigtrak ROVER. Během této vstupní analýzy bylo zjištěno, že přístup ovládání není vhodný pro všechny typy infrastruktury běžně používaných v rámci škol. Dále bylo zjištěno, jak zařízení funguje a následně použito zjištěných informací při návrhu nového způsobu ovládání, který řeší problémy již zmíněné. 1.2.2 Návrh V této fázi byly definovány cílové podmínky fungování řízení, které je potřeba vytvořit. Dále byly navrženy limitní vlastnosti, jaké musí být schopno nové řízení splnit. V poslední řadě byly navrženy 3 testovací úlohy pro studenty, které by měli být schopni vyřešit nově vytvořeným způsobem ovládání. Hlouběji je tato část rozebrána v kapitole 3.3.
8
1.2.3 Vývoj Při této části mé závěrečné práce byly naprogramovány jednotlivé aplikace. Klientská mobilní aplikace byla navržena co možná nejuniverzálněji, aby byla podporována co možná nejširší skupina mobilních telefonů. Při této části se objevili některé technické překážky, a proto jsem se opět vracel do fáze návrhu a musel jsem částečně návrh upravit. Jako největší problém se ukázala rozdílná implementace HTML5 v jednotlivých mobilních webových prohlížečích, kdy se i standardní kód nezobrazoval vždy podle očekávání. 1.2.4 Implementace Implementace proběhla formou popisu navrženého a naprogramovaného API, které bylo předáno testovaným žákům čtvrtého ročníku na střední škole, kde aktuálně vyučuji a otestováno. Během tohoto testování bylo pořízeno video se záznamem studentského řešení testovacích úloh. Studenti byli dotazování formou skupinové diskuze a v závislosti na této zpětné vazbě byla naprogramována konečná podoba vzdáleného ovládání. 1.2.5 Evaluace V závislosti na zpětné vazbě od testovaných studentů jsem měl možnost porovnat své předpokládané výstupy s jejich a musím konstatovat, že se lišil jen minimálně. Potěšilo mě, že se podařilo dodržet cíl jednoduchosti a intuitivnosti ovládání, který se projevil tak, že během jedné vyučovací jednotky byli studenti schopni psát jednoduchý řídící program, který řešil průjezd slalomem. Jako pozitivum mohu uvést, že studenti projevili zájem na další práci s tímto zařízením při dalších vyučovacích hodinách.
9
2
Terminologie a popis použitých technologií Tato kapitola se věnuje základní terminologii použité v této práci a popisu
použitého zařízení.
2.1 Bigtrack ROVER BIG TRAK (původní zařízení) je programovatelné elektrické vozítko vytvořené Miltonem Bradley v roce 1979. Jednalo se o jakýsi futuristický Sci-Fi tank pro průzkum měsíce a planetárních systémů. Zařízení umožňovalo zadat sekvenci pohybů, které se měly vozítkem vykonat vždy po určitou dobu. Tím šlo vozítko naprogramovat k předem definované cestě. Na toto historické vozítko navazuje robotický podvozek Bigtrak Rover.
OBR. 2 PŮVODNÍ VOZÍTKO BIGTRAK Z ROKU 1979
2.1.1 Základní myšlenka Bigtrak ROVER Základní myšlenkou robotického podvozku Bigtrak ROVERu je dodat levný pohon, který lze ovládat za pomoci chytrých telefonů s použitím speciální aplikace ([2]). 2.1.2 Popis ovládání Robotický podvozek Bigtrak Rover umožňuje do těla konstrukce vložit mobilní telefon a po spuštění aplikace dodané výrobcem můžeme podvozek provozovat ve
10
dvou režimech. První je režim vzdáleného ovládání, kdy na tabletu nainstalujeme aplikaci Bigtrak ROVER Controller. Podmínkou propojení je, že tablet i mobilní telefon jsou na jedné společné WiFi síti a router má povolenu veškerou komunikaci. Ovládání pak probíhá formou klikání na ovládací tlačítka v aplikaci tabletu, které mobil převede na sadu příkazů pro podvozek. Druhý režim funguje obdobně, jen lze přímo v aplikaci mobilního telefonu zadat sekvenci pohybů, které se následně po potvrzení programu rovnou provedou. Tento režim se nejvíce podobá původnímu vozítku BIGROVER a i svým vzhledem na toto historické vozítko poukazuje. 2.1.3 Popis komunikace mobilu a vozítka Komunikace mezi vozítkem a mobilním telefonem je realizována čtveřicí fotocitlivých senzorů v místě zasunutí smartphonu. Tyto foto senzory fungují jako detektory osvětlení prostoru před displejem mobilu. Pokud je na mobilu nastaveno plně začerněné (vypnuté podsvícení displeje) pozadí, podvozek to vnímá jako klid přenosu informací.
OBR. 3 VOZÍTKO BIGTRAK ROVER S INSTALOVANÝM MOBILNÍM TELEFONEM
11
Přenosová sběrnice vypadá asi takto:
OBR. 4 KOMUNIKAČNÍ SBĚRNICE
Na sběrnici se dá dívat jako na zapínač motorů. Nejlépe popíše funkčnost následující tabulka příkazů:
Plně vzad Plně vpřed otočit na místě vpravo otočit na místě vlevo kupředu zatáčet vlevo kupředu zatáčet vpravo vzad zatáčet vlevo vzad zatáčet vpravo
Originální aplikace od výrobců využívá pouze prvních 4 povelů. Ostatní povely byly přidány po zjištění principu fungování přenosu informace. U těchto příkazů záleží ovšem na schopnosti smýkání pásů po povrchu, a proto musí být konkrétní hodnoty příkazů vždy upraveny podle aktuálního povrchu, po kterém vozítko bude jezdit. Tabulka popisuje, osvětlené části displeje, při pohledu z předu a černé buňky tabulky označují osvětlenou část povrchu, tj. aktivovaný bit.
12
3
Návrh vzdálené komunikace Když jsem rozkódoval princip ovládání podvozku, mohl jsem začít s návrhem mé
vlastní mobilní aplikace. Protože jsem od začátku chtěl udělat aplikaci multiplatformní, základem aplikace se stal jazyk HTML5 a Javascript konkrétně framework jQuery. Dále jsem použil framework pro vývoj mobilních aplikací Phonegap . Základní myšlenkou mého projektu je uchování programu pro vozítko online na serveru, které si mobilní aplikace po potvrzení stáhne a provede. Tím se stane ovládání vozítka nezávislé na připojení zařízení v rámci jedné WiFi sítě a lze tak vozítko teoreticky ovládat z druhého konce planety (Nebo na měsíci? Pokud tam bude internet pak ano.).
3.1 Definice možností ovládání Před samotným programováním bylo potřeba určit, co má výsledné zařízení umožnovat. Vlastnosti by se dali shrnout do následujících bodů:
platformě nezávislé
dostupné v rámci celé sítě internet
musí být použité pouze nástroje/jazyky/knihovny zdarma (ideálně open source)
umožňuje přenášet příkazy po dávkách
komunikační protokol musí být otevřený a snadno přenositelný do vlastních aplikací
komunikace mezi mobilní aplikací a serverem je obousměrná
snadné rozšíření příkazů v budoucnu
Zvolení těchto podmínek umožní snadnou údržbu kódu a případnou rozšiřitelnost pro budoucí použití.
13
3.2 Návrh klientské aplikace Protože není možné předem určit fyzické rozměry používaného displeje, zvolil jsem responzivní design aplikace. Prvotní návrh GUI mobilní aplikace byl navrhnut v programu Pencil.
OBR. 5 WIREFRAME - NÁVRHU MOBILNÍ APLIKACE
Tento návrh se ukázal jako funkční ovšem ne pro všechny typy operačních systému. Pro operační systémy produktů firmy Apple, kde se automaticky schovává příkazová lišta s adresou, byl dostatečný, ovšem u mobilních telefonů s Android OS rušila spodní lišta nástrojů příkazy a display mobilu tak nechtěně osvětloval senzory, což bylo provedeno jako posun podvozku. Nakonec jsem tento problém vyřešil využitím frameworku Phonegap. Framework Phonegap v jednoduchosti obalí webovou stránku prohlížečem v celoobrazovkovém režimu a vypne standardní ovládací prvky. Tím je zajištěna široká podpora výsledné aplikace napříč systémy a opravena chyba z předchozího odstavce. Plná šířka okna je rozdělena na 4 části, s procentuálně definovanou šířkou aktivních bloků, které lze nastavením patřičné CSS třídy zbarvit na bílo. Z každé strany mají bloky mezeru o šířce 3%. Tím je zaručeno správné rozložení na většině běžných telefonů. Bohužel se tímto krokem objevil další problém s komunikací blíže v kap. 3.3.1.1.
14
Výsledná aplikace poté již fungovala dle očekávání:
OBR. 6 UKÁZKA REÁLNÉ MOBILNÍ APLIKACE
3.3 Návrh komunikačního protokolu Komunikace mezi mobilní aplikací
a serverem probíhá podle modelu
client => server.
OBR. 7 DIAGRAM OBOUSMĚRNÉ KOMUNIKACE[3]
15
Během této komunikace se klient asynchronně připojí na server a to s konkrétním dotazem na program, který vyžaduje. Klient předává serveru informace v URL adrese metodou GET za pomoci parametrů action a id. Server dle těchto vstupních informací získá z databáze aktuální seznam příkazů. Tyto příkazy naformátuje do jazyka JSON v očekávaném datovém formátu a odešle je jako čistý text do aplikace. Jedná se o přípravu aplikace k dalšímu využití. V budoucnu bych si dovedl představit spouštěcí menu, které umožní zvolit různé předpřipravené programy, které by se mohly následně stahovat ze serveru. Počty programů i počty příkazů v jednotlivých programech nejsou omezeny. 3.3.1 Návrh přenosového formátu Všechna data jsou přenášena v aplikační vrstvě komunikace ve formátu JSON způsobem klíč a hodnota. Klíč je realizován JavaScript objektem CMDType a hodnotou realizovanou objektem CMDDuration. Každý vygenerovaný program pak má ještě volitelně definovanou callback anonymní funkci, která je automaticky zavolaná po vykonání všech příkazů daného programu. Typická ukázka datového balíku by mohla vypadat např. takto: var callback_pointer = jsonp callback( [{"CMDType":"project", "CMDDuration":5}], user_callback);
Tento kód by se dal přeložit jako zaváděcí program pro načtení podprogramu id 5. 3.3.1.1 Problematika importu scriptu z jiného serveru Jak si můžete všimnout v předchozím příkladu JavaScript kódu, kód se přenáší jako napojení anonymní jsonp_callback funkce uložené do proměnné collback_pointer. To je z důvodu bezpečnostního problému načítání scriptů z jiných serverů, než je server, kde byl script spuštěn. Na tento velice zajímavý problém jsem narazil při řešení problému s kompatibilitou zobrazení na telefonech s Android OS. To jsem vyřešil použitím frameworku Phonegap, který ovšem má jeden zásadní problém. Takto vytvořená aplikace má kořenovou složku uloženou lokálně v mobilním zařízení a proto se může chovat jako nativní aplikace. Adresou takového serveru je pak adresa localhost. Data jsou ovšem uloženy na vzdáleném internetovém hostingu. 16
Jako řešení problému se ukázala technologie jsonp ([5]). Tento přístup programování funguje na principu načítání scriptu přilinkováním. Jedná se o bezpečný způsob mimo serverového načítání scriptů. To je obecně povoleno a běžně využíváno např. při připojování scriptů z google API. Takto přilinkovaný soubor se natáhne do zařízení a provede se jeho načtení javascriptovým jádrem. Aby mohla být takto načtená funkce i spuštěna, musíme celý kód metody ze vzdáleného scriptu uložit do nám známé a očekávané proměnné a tu zavolat z lokálního scriptu. V našem případě se metoda callback_pointer volá ze scriptu engine.js. Parametr response obsahuje přijatá data a parametr callback je ukazatelem na metodu user_callback ze vzdáleného scriptu. Metoda run_block commands je opět metodou ze souboru engine.js a má za úkol provést zpracování příkazů přenesených transportní vrstvou. Hlouběji se budu věnovat problematice zpracování příkazu v kapitole 4.2.2. 3.3.2 Struktura DAT Každé informace, která mají být srozumitelné, musejí mít jasně definovaný formát, ve kterém jsou data ukládána. Pro zakódování informací je použito u mého komunikačního formátu párů klíče a hodnota. Databázový návrh je pak rozdělen do dvou databázových tabulek, které splňují třetí normální formu.
OBR. 8 ER DIAGRAM STRUKTURY DAT V DATABÁZI
3.3.2.1 Tabulka rpl_projects Tabulka rpl_projects obsahuje názvy jednotlivých programů. Obsahuje tři parametry project_id, name a description. 17
První parametr je primárním klíčem tabulky a je spárovaný s hodnotou parametru id při volání adresy serveru. Dále se na tuto hodnotu odkazuje příkaz project z tabulky rpl_projects, čímž je realizováno volání podprogramů z jiných programů. Parametry name a desctiption slouží spíše k sémantickému popisu jednotlivých programů. Nejsou povinné, ale pro zvýšení přehlednosti dat je doporučeno tyto hodnoty vyplnit. 3.3.2.2 Tabulka rpl_commands Primárním účelem tabulky rpl_commands je uložení konkrétních dávek příkazů pro pohyb podvozku. Tabulka obsahuje atributy cmd_id, project_id, cmd_type a cmd_value. Cmd_id je primárním klíčem tabulky. Atribut project_id realizuje mezi tabulkovou vazbu 1:N. Tímto provázáním se říká, že každý program může obsahovat libovolný počet příkazů. Atributy cmd_type a cmd_value jsou platné vždy pouze v páru, kdy hodnota cmd_value závisí na hodnotě cmd_type a význam této hodnoty se liší podle hodnoty cmd_type. Atribut cmd_type může nabývat následujících hodnot:
forward
back
right
left
onlyLeftBack
onlyRightBack
onlyLeftForward
onlyRightForward
none
project
18
Názvy jednotlivých příkazů jsou vesměs samo vysvětlující a určují směr pohybu podvozku. Pro všechny pohybové příkazy platí, že uvnitř hodnoty atributu cmd_value je doba v milisekundách, po kterou je daný pohyb vykonáván. Blíže je potřeba vysvětlit příkazy none a project. Příkaz none nastaví na všech bitech komunikační sběrnice klid komunikace. Hodnota uvnitř atributu cmd_value, určuje dobu v milisekundách, po kterou se čeká, než se začne vykonávat další příkaz. Příkaz project zavolá podprogram, po jeho dokončení se pokračuje ve vykonávání zbylých příkazů programu.
3.4 Návrh serverové části aplikace Z důvodu velké dostupnosti a podpory jsem pro generování příkazu na serveru zvolil jazyk PHP. S vývojem aplikací v tomto jazyku mám již poměrně dost zkušeností a je to asi v současnosti nejběžnější webový serverový programovací jazyk. Transportní vrstva je realizována datovým jazykem JSON naformátovaným do tvaru definovaným v kapitole 3.3.1 a odeslaná jako běžný text. 3.4.1 GUI server Serverová část aplikace je tvořená dvěma pohledy. První pohled vypíše všechny programy uložené v databázi. Druhý pohled vypisuje naformátované příkazy ve formátu JSON.
OBR. 9 UKÁZKA VÝPISU PROGRAMŮ STUDENTŮ
Jak můžete vidět na obrázku 9, tak na jednom serveru můžeme uložit nezávisle více programů. Poslední 3 jsou práce studentů čtvrtého ročníku, na kterých testovali funkčnost programu na svých mobilních telefonech.
19
3.4.2 Ukázka dat studentského řešení z pohledu dat Jako ukázka napsaného kódu může posloužit následující kód jedné studentky: var callback_pointer = jsonp_callback( [ {"CMDType":"forward","CMDDuration":1000}, {"CMDType":"none","CMDDuration":10}, {"CMDType":"onlyLeftBack","CMDDuration":2000}, {"CMDType":"onlyLeftForward","CMDDuration":2000}, {"CMDType":"none","CMDDuration":10}, {"CMDType":"forward","CMDDuration":1000}, {"CMDType":"none","CMDDuration":10}, {"CMDType":"onlyRightBack","CMDDuration":4000}, {"CMDType":"none","CMDDuration":10}], user_callback);
Jedná se o kód řešící slalom podvozku z videa ukázaném v prezentaci.
20
4
Vývoj aplikace Dle návrhu z kapitoly 3 jsem naprogramoval obě dílčí aplikace. První realizovanou
byla serverová aplikace v jazyce PHP. Scripty jsou volány technologií AJAX, a proto se z pohledu serveru jedná o zcela běžný script.
4.1 Serverová část aplikace Z důvodu snadné správy byl projekt rozdělen do několika souborů. Prvním souborem je načítací soubor index.php. Tento script obsahuje načtení potřebných knihoven, jako jsou config.php obsahující proměnné s konfiguracemi databázového serveru. To by mělo výrazně usnadnit případný přesun scriptů na jiný server. Při návrhu je počítáno s tím, že každá škola resp. třída může mít svou vlastní oddělenou databázi nebo dokonce hosting. Dále načítá soubor functions.php, který je hlavní knihovnou obsahující všechny funkce pro realizaci aplikace. Posledním souborem je knihovna Db.class.php, jenž umožňuje objektový přístup k datům na serveru. V logické části souboru se vyskytuje strukturování kódu, které dle vstupních parametrů action a id rozhodne, co se má vypsat. Pokud parametr action obsahuje hodnotu gen_cmds, tak se budou generovat příkazy konkrétního programu, který má v databázi hodnotu atributu project_id rovnu parametru id metody GET. Tímto způsobem je možné generovat všechny příkazy z databáze. Uvnitř souboru function.php naleznete proměnnou $MoveType, která obsahuje všechny podporované příkazy (nejen pohybové). Jakýkoli jiný příkaz, který není v této proměnné definovaný, nebude proveden a vyvolá chybovou hlášku při parsování. Výjimku tvoří příkaz project, který svým charakterem tuto specifikaci nepotřebuje. Nejdůležitější funkcí je funkce genMoveCode($program_id), která se připojuje do databáze a načtené příkazy programu transformuje do formátu JSON. Na takto formátovaná data je aplikován přístup JSONP, kdy jsou data obalená JavaScript anonymní funkcí jsonp_callback a uložena do proměnné callback_pointer.
21
4.2 Klientská část aplikace Celá aplikace je dle návrhu realizována jako HTML5 webová dynamická stránka. Obalená do frameworku Phonegap. Abych mohl tohoto frameworku využívat, bylo potřeba nainstalovat vývojový kyt Phonegap SDK z adresy www.phonegap.com. 4.2.1 Framework Phonegap Projekt Phonegap je aplikací, která umožňuje vytvářet nativní aplikace pro různé mobilní operační systémy s programováním jednoho kódu v jazycích HTML, CSS a Javascript. V současnosti je tento projekt v majetku firmy Adobe, která zaručuje další budoucí podporu a vývoj této technologie a proto použití dává smysl. Aplikace těží z velkého rozšíření těchto programovacích jazyků, a proto jsem ji použil i já. Pokud chce člověk použít tento Framework, musí si nainstalovat ze stránek výrobce aplikaci Phonegap Desktop. Velkou výhodou je, že existuje verze aplikace jak pro OS Windows, tak i pro OS firmy Apple MAC OS X. Dalším krokem je instalace mobilní aplikace pro Vaš telefon. V současné době jsou podporované mobilní telefony s OS iOS, Android, Wondows Phone. V předchozích verzích byli podporované i jiné os jako Symbian, ale jejich podpora již byla ukončena. Všechny mobilní aplikace jsou dostupné na běžném „store“ jednotlivých platforem ke stažení zdarma. Tato aplikace umožňuje nahrávání vyvíjené aplikace do mobilního přístroje bez nutnosti vlastnění „developer“ účtu, který je na některých platformách zpoplatněn nemalou částkou. Tím je tento přístup dostupný opravdu pro každého.
OBR. 10 UKÁZKA MOBILNÍ APLIKACE ([5])
Aby mohla být aplikace nahrána do mobilního telefonu, je potřeba na vývojářském počítači spustit aplikaci Phonegap Desktop, která slouží jako server. Aplikace funguje 22
tak, že otevře komunikační kanál na síťovém rozhraní počítače na portu 3000 a tím začne přijímat příchozí komunikaci z mobilního telefonu. Tento komunikační kanál je otevřen pro všechna síťová rozhraní počítače. Kompletní podrobný návod jak propojit mobilní
zařízení
se
serverovou
aplikací
je
dostupný
z adresy
http://phonegap.com/getstarted/.
OBR. 11 UKÁZKA NASTAVENÉ APLIKACE PHONEGAP DESKTOP
Již vytvořený projekt můžete připojit standardní cestou File / Add existing project. Po přidání projektu by aplikace měla vypadat jako na obrázku OBR. 11, jen se budou lišit IP adresy ve spodní části dle aktuálního nastavení Vašeho počítače. Kliknutím na tlačítko se zelenou šipkou v kolečku, aktivujete komunikační kanál a šedým hexahonem se čtvercem uvnitř pak komunikační kanál pozastavujete. Po kliknutí v mobilní aplikaci na tlačítko Connect se natáhne aktuální verze aplikace do mobilního zařízení.
23
4.2.2 Realizace GUI aplikace Základem celé mobilní aplikace je blok HTML kódu s id=“bus“.
Tento blok obsahuje čtveřici bloků, které reprezentují aktivní plochy pro přenos informací do sběrnice podvozku. Tyto bloky jsou označeny identifikátory bit0-3 a jsou nastylovány za pomoci třídy bit. Díky tomuto návrhu je velice snadné uzpůsobovat vizuální stránku GUI a tato úprava se rovná úpravě běžné webové stránky. Základní podmínkou je co největší univerzálnost a s tou spojená responzivnost GUI (schopnost aplikace přizpůsobení se různé šířce displeje). Ta byla vyřešena procentuální šířkou 18% jednotlivých bitů s mezerou 3% šířky displeje. Další důležitou třídou v návrhu je třída bitOn, která nese informaci o obarvení pozadí bloku na bílou barvu. Přenos informací pak funguje na principu, kde má být na sběrnici LOG1, tam se nastaví pro konkrétní bit třída bitOn a naopak kde má být LOG0, tam se třída bitOn odebere. 4.2.2.1 Načtení uživatelského scriptu Konkrétní nastavování informací pak zajišťuje JavaScript soubor engine.js. Načtení je realizováno po kliknutí na tlačítko v horní části displeje. Toto propojení je realizováno následujícím kódem: $(document).ready(function (){ $('#move_forward').click(function (){ getDataFromServer(url, in_data) }); });
24
4.2.2.2 Asynchronní načítání dat Pro získání dat byla použita metoda getDataFromServer, která je definována uvnitř souboru engine.js. Tato metoda obsahuje asynchronní volání serverového scriptu pomocí techniky AJAX s využitím techniky JSONP, představené v návrhu. Výhodou takového přístupu je možnost aktualizace obsahu stránky, bez nutnosti načtení celé stránky. Pouze se znovu natáhnou data a ta se vhodným způsobem do stránky vloží, nebo nahradí data stará. Díky volání callback funkce jsonp_callback je zajištěno, že se nikdy nezačne provádět další blok pohybových příkazů dříve, než skončí ten předešlý. function getDataFromServer(url, in_data){ // JSONP $.ajax({ url: url, // název jsonp callback funkce jsonp: "jsonp_callback", // nastavení vstupních dat data: in_data, // řečení jQuery, že se jedná o JSONP dataType: "jsonp" }); }
Funkce jsonp_callback je definována následovně: function jsonp_callback(response, callback){ run_block_commands(response, i = 0, callback); return callback; }
Každým voláním této funkce dochází k registraci nového vlákna, které se spustí po dokončení načteného bloku příkazů z funkce run_block_commands. function run_block_commands(commands, i, callback){ if(i < commands.length){ i++;
25
if(commands[i-1].CMDType == 'project'){ // nové volání JSONP var new_projekt = {action: in_data.action, id: in_data.id}; new_projekt.id = commands[i-1].CMDDuration; // set variable user callback user_callback = function(){ // pokračuje se v iteraci pohybových příkazu if(i < commands.length){ // rekurzivní volání run_block_commands(commands, i, callback); } user_callback = function(){}; } getDataFromServer(url, new_projekt); } else { // spustit pohybové příkazy run(commands[i-1], function (){ run_block_commands(commands, i, callback); }); } } else { callback(); } }
26
Důležitou
částí
kódu
je
část
obsahující
rekurzivní
volání
metody
run_block_commands, které zastaví aktuální vlákno a čeká na načtení dalšího bloku podprogramů. Dokud takový kód není zcela proveden, vlákno zůstává zastaveno. 4.2.2.3 Vyčistění sběrnice Po každém volání pohybového programu se zavolá metoda clearBus. Ta nastaví na všechny bity sběrnice na hodnotu LOG0. Při zápisu na sběrnici, je dbáno, vzhledem k asynchronnímu přístupu programování a komunikace se serverem, na bezpečnost zápisu na sběrnici. To je realizováno kontrolou uzamknutí sběrnice bus_lock. Po dobu uzamčení sběrnice jakoukoli metodou, nemůže žádné běžící vlákno narušit zápis do sběrnice. To ovšem nese jistá rizika. Pokud by teoreticky programy v bloku byly kratší než 10 ms, tak by to znamenalo, že v případě načtení takového vlákna dříve než byl zámek odemčen, se toto vlákno ztratí a příkaz by se neprovedl. To jsem vyřešil postupným načítáním bloků za pomocí callback funkcí, tak jak to bylo popsáno v kapitole 4.2.2.2. function clearBus(){ if(bus_value !== {bit0: 0, bit1: 0, bit2: 0, bit3: 0}){ // uzamknutí výstupu bus_lock = true; // nastavení všech bitů na log 0 bus_value = {bit0: 0, bit1: 0, bit2: 0, bit3: 0}; bus_last_value = bus_value; // odemknutí výstupu bus_lock = false; } }
4.2.2.4 Zápis dat na sběrnici Zápis dat na sběrnici je realizován funkcí writeInBus: function writeInBus(bus){ // kontrola změny na sběrnici if(bus_value !== bus){
27
// uzamknout výstup bus_lock = true; // uložit do proměnné bus_last_value poslední hodnotu z proměnné bus_value bus_last_value = bus_value; // nastavit novou hodnotu do proměnné bus_value bus_value = bus; // odemknout výstup bus_lock = false; } }
Tato metoda pracuje s objekty bus_value a bus_last_value. To je řešeno z důvodu úspory systémových zdrojů, kdy se přepisuje nová hodnota pouze v případě, že se změnila zobrazovaná hodnota na sběrnici. Tato metoda připravuje přeloženou hodnotu do objektu obsahujícím 4 bity informací. var bus_value = { bit0: 0, bit1: 0, bit2: 0, bit3: 0 }; var bus_last_value = { bit0: 0, bit1: 0, bit2: 0, bit3: 0 };
4.2.2.5 Automatická obnova dat ze serveru Aplikace je navržena jako stránka, která si automaticky obnovuje aktuální data každých 10 milisekund. Tato hodnota se ukázala jako optimální i pro rychlé změny u krátkých bloků pohybových příkazů a zároveň dostatečně dlouhá pro běžné
28
internetové spojení. Původně byla hodnota nastavena na dobu půl sekundy, což se při testování ukázalo jako příliš dlouhá doba. Studenti chtěli ovlivňovat rychlost vozítka. To mohou realizovat rychlým zapínáním a vypínáním motorů, které by se dalo označit za PWM (Phase Width Modulation) modulaci signálu. 4.2.2.6 Možnosti regulace rychlosti pohybu Tuto modulaci navrhli jako samostatný podprogram obsahující následující sled příkazů.
cmd_type: forward, cmd_value: 5;
cmd_type: none, cmd_value: 5;
Kód pak volaly opakovaně po požadovanou dobu pohybu v daném směru. Tento kód zajistí poloviční rychlost pohybu kdy je 5 ms motor zapnutý a 5 ms ve vypnutém stavu. Motor po vypnutí ještě díky setrvačnosti trochu popojede, toho se využívá v případě PWM modulace kdy se změnou střídy reguluje množství energie uvolněné do motoru a tím se tak reguluje rychlost pohybu podvozku.
OBR. 12 UKÁZKA ZMĚNY POMĚRU STŘÍDY PŘI PWM MODULACI
Tento zjištěný problém při výuce krásně demonstruje přidanou hodnotu mnou navrženého řešení. Zatímco původní software umožňuje nastavovat pohyby v přesnosti sekund, kde by se rozhodně nedalo mluvit o snižování rychlosti, spíše o přerušování pojezdu a ano i když výsledná průměrná rychlost by byla stejná, ale v tomto způsobu řešení se jedná o plynulý pohyb. V mnou navrženém řízení se nejenom dostanou na přesnější časování, ale mají možnost nahlédnout do poněkud komplexnějšího způsobu řízení zařízení a naučili se pracovat s PWM signálem, který
29
je v elektrotechnice jednou z nejčastěji používaných modulací vůbec. Věřím, že i na takto
jednoduchém
zařízení
lze
demonstrovat
i tyto
pokročilé
principy
z elektrotechniky a právě pro velkou jednoduchost mohou studentům umožnit snadněji pochopit principy, které poté mohou použít při své další praxi. Další jasnou ukázkou užitečnosti této práce je volání cyklů. Při tomto příkladu se jasně ukázalo co je principem fungování tohoto zpomalování. Studenti pak vytvořili program realizující jednu periodu a tu pak volali v počtu potřebném pro vyřešení výsledku. Výsledkem je díky parametrům čistý a znovupoužitelný kód, který se dle hodnot dá použít na regulaci rychlosti v rozsahu od 0 – 100% maximální rychlosti pohybu s přesností jednoho procenta. Tento přístup je naprosto běžný pro stavebnice typu Arduino, kde ovšem vyžaduje pokročilejší nároky na znalosti z elektrotechniky. V mnou navrženém rozšíření je naprosto abstrahováno technické řešení a pouze se vysvětluje samotný přenos informace. Zároveň díky své jednoduchosti není v zařízení příliš prostoru pro chyby.
30
5
Návrh testovacích úloh a následná evaluace Protože jsem si dal za cíl, udělat aplikaci maximálně jednoduchou na používání,
otevřenou na snadné rozšíření a přehlednou pro případného programátora, provedl jsem zkušební testování na jedné reálné třídě. Testování bylo provedeno formou zadání třech úloh, které měli žáci vyřešit. Žáci utvořili malé skupiny po třech a byli seznámeni s příkazy, které zařízení používá. Záměně jsem jim neřekl, jak funguje přenos informací o pohybech z telefonu do podvozku, ale dostali veškeré zdrojové kódy jak serverové i klientské části.
5.1 Úloha opis čtverce 5.1.1 Cíle úlohy Úloha má seznámit studenta s ovládáním robotického vozítka. Zároveň si klade za cíl, aby student získal povědomí o možnostech vozítka. 5.1.2 Potřebné pracovní pomůcky Pro realizaci této úlohy je zapotřebí pouze vytištěný čtverec na listu papíru. Tento list je přiložen k závěrečné práci jako příloha. 5.1.3 Zadání úlohy Přilepte lepicí páskou na podlahu papír s předlohou trasy. Na startovní pozici položte robotické vozítko Bigtrak ROVER s instalovaným mobilním telefonem na kterém je nainstalovaná mobilní aplikace RPL_App. Naprogramujte v databázi sadu příkazů, která dokáže opsat vzor na papíru.
5.2 Úloha opis mnohoúhelníku 5.2.1 Cíle úlohy Úloha si klade za cíl navést studenta na použití podprogramů. Student by si na této úloze měl uvědomit, že kód, který se opakuje, není třeba zapisovat neustále znova. 5.2.2 Potřebné pracovní pomůcky Pro realizaci této úlohy je zapotřebí pouze vytištěný mnohoúhelník na listu papíru. Tento list je přiložen k závěrečné práci jako příloha.
31
5.2.3 Zadání úlohy Přilepte lepicí páskou na podlahu papír s předlohou trasy. Na startovní pozici položte robotické vozítko Bigtrak ROVER s instalovaným mobilním telefonem na kterém je nainstalovaná mobilní aplikace RPL_App. Naprogramujte v databázi sadu příkazů, která dokáže opsat vzor na papíru, tak aby vozítko neustále dokola objíždělo daný vzor.
5.3 Slalom / bludiště 5.3.1 Cíle úlohy Úloha slouží pro usazení nabitých znalostí. Student by se měl naučit hledat podobnosti při řešení daného problému. 5.3.2 Potřebné pracovní pomůcky Sada plastových kuželů. 5.3.3 Zadání úlohy Rozestavíte po podlaze plastové kužely do podoby slalomu a na startu tohoto slalomu postavte robotický podvozek. Naprogramujte program, který umožňuje projetí slalomu. Po Správném vyřešení změňte strukturu slalomu a opakujte předchozí kroky. Zamyslete se, jak výsledný program napsat, aby v databázi zabral co možná nejméně místa.
32
6
Závěr Pokud bych měl zhodnotit celý projekt, musím konstatovat, že jsem opravdu
spokojen s výsledky mého snažení. Během tvorby této práce se mi podařilo navrhnout a následně naprogramovat funkční rozšíření pro cenově velmi dostupnou výukovou pomůcku na výuku robotiky. Tímto rozšířením se mnohonásobně rozšířili možnosti využití tohoto zařízení a posunulo se tak více z hračky směrem k výukové pomůcce. Tato výuková pomůcka nevyžaduje velké vstupní znalosti, ale má velmi vysoký strop toho co s ním lze realizovat. Díky této práci mohou nově zakomponovat výuku jednoduché robotiky i učitelé informatiky na školách bez možnosti velkých investic do nákupu drahých robotických stavebnic, či cenově dostupných stavebnic, ale příliš složitých na elektrotechnické znalosti. Získají jednoduché, levné a odolné zařízení, které je možné programovat bez nároků na elektrotechnické nebo programátorské znalosti a soustředit se tak na samotné přemýšlení a algoritmování. Pro takto navržené řízení byly navrženy a následně v praxi otestovány 3 úlohy. Na těchto úlohách bylo demonstrováno, jak lze zařízení využít k vysvětlení základních principů řízení robotického podvozku. Zároveň je tato práce připravená na další rozšíření, které by mohli tento přístup řízení dostat na úroveň plně programovatelného zařízení srovnatelného s drahými stavebnicemi, jako jsou Lego Mindstorm nebo EVO. Převážně pak s využitím zpětné vazby zprostředkováním využití senzorů mobilního telefonu jako jsou magnetometr, akcelerometr, gyroskop, senzor přiblížení nebo kamer. Ke všem těmto senzorům umožňuje Framework Phonegap přístup. Engine aplikace byl navržen s ohledem na další snadnou rozšiřitelnost, kdy se nabízí implementace například příkazů cyklů, nebo implementace proměnných. Dále je zde další prostor pro použití projektu při jiných odborných informatických předmětech, kdy např. studenti mohou vytvářet grafické programovací prostředí v různých jazycích a využít univerzálního přístupu skrze databázi MySQL. Každý jazyk umožňuje připojení k této databázi a tak umožňuje i naprogramování řídicího systému.
33
Seznam použité literatury a zdrojů [1] EDUCATIONAL TECHNOLOGY. The ADDIE Model: Instructional Design [online]. 2014 [cit. 2015-03-08]. Dostupné z: http://educationaltechnology.net/the-addie-model-instructional-design/ [2] Bigtrak Rover. Internetové stránky projektu [online]. Velká Británie: Zeon Tech, 2014 [cit. 2016-06-04]. Dostupné z: http://rover.bigtrakxtr.co.uk/what.html [3] Duplex communication in Windows Communication Foundation. Duplex communication in Windows Communication Foundation [online]. USA: Iinternational developer, 2015 [cit. 2016-06-04]. Dostupné z: http://www.neelesh-vishwakarma.com/2013/08/duplex-communicationin-windows.html#.V1MLAL4Q-70 [4] JSONP [online]. USA: JSON-P, 2010 [cit. 2016-06-04]. Dostupné z: http://json-p.org/ [5] Get Started [online]. USA: Adobe, 2010 [cit. 2016-06-05]. Dostupné z: http://phonegap.com/getstarted/
Přílohy: Trasa pro splnění první úlohy
Trasa pro splnění druhé úlohy
