Webinterface voor een hdtv-ontvanger. Karl Van den Bleeken. Promotor: prof. dr. ir. Wilfried Philips Begeleider: Philippe Serbruyns

Webinterface voor een hdtv-ontvanger Karl Van den Bleeken

Promotor: prof. dr. ir. Wilfried Philips Begeleider: Philippe Serbruyns Masterproef ingediend tot het behalen van de academische graad van Master in de toegepaste informatica

Vakgroep Telecommunicatie en informatieverwerking Voorzitter: prof. dr. ir. Herwig Bruneel Faculteit Ingenieurswetenschappen Academiejaar 2007-2008

Webinterface voor een hdtv-ontvanger 2008 Inhoudsopgave Probleemstelling ........................................................................................................... 3 Bestaande interface ...................................................................................................... 5 Database ....................................................................................................................... 6 Intro ........................................................................................................................... 6 Problemen ................................................................................................................. 6 Verkennen van de database. ..................................................................................... 7 telnet ...................................................................................................................... 7 eigen tools .............................................................................................................. 7 Tabellen: .................................................................................................................. 10 Kanalen ................................................................................................................. 10 Opnames .............................................................................................................. 12 server‐side .................................................................................................................. 15 Intro ......................................................................................................................... 15 Problemen ............................................................................................................... 15 Connecteren met SQLITE database ......................................................................... 16 HEADERS .................................................................................................................. 17 PHP $GET en $POST variabelen .............................................................................. 17 $GET ..................................................................................................................... 17 $POST ................................................................................................................... 17 Client‐side ................................................................................................................... 18 Mogelijkheden ......................................................................................................... 18 AJAX...................................................................................................................... 18 CROSS BROWSER SUPPORT! ................................................................................ 19 Problemen ............................................................................................................... 19 Intro ...................................................................................................................... 19 Debugging ............................................................................................................ 19 Webapplicatie ............................................................................................................. 20 Intro ......................................................................................................................... 20

1

Webinterface voor een hdtv-ontvanger 2008 Problemen ............................................................................................................... 21 Programmeeromgeving ........................................................................................ 21 Virtualisatie .......................................................................................................... 22 Architectuur ............................................................................................................. 24 WEBAPPLICATIE .......................................................................................................... 25 Intro ......................................................................................................................... 25 Kanalen .................................................................................................................... 25 Implementatie vereisten ...................................................................................... 25 Uitleg werking ...................................................................................................... 26 Implementatie architectuur ................................................................................. 28 Opnames ................................................................................................................. 29 Implementatie vereisten ...................................................................................... 29 Uitleg werking ...................................................................................................... 29 Implementatie architectuur ................................................................................. 31 Verder Werk ................................................................................................................ 32 Referenties .................................................................................................................. 33

2

Webinterface voor een hdtv-ontvanger 2008

Probleemstelling Meer en meer zijn ontvangers voor digitale televisie heuse computers met aansluitingen voor internet, usb‐apparaten, computerschermen en zomeer. Omwille van het groot aantal te ontvangen kanalen (b.v. duizenden via satelliet) wordt het beheer van de kanalenlijst op zulke ontvangers al snel een probleem. Vele ontvangers beschikken daarom over een ingebouwde webserver die toelaat via een browser één en ander aan te passen. Het doel van de scriptie is het ontwikkelen van een webinterface voor de CubeRevo (1) digitale ontvanger, die nog volop in ontwikkeling is en die zowel DVB‐T, DVB‐S (satelliet), en DVB‐C (kabel) ondersteunt. Deze ontvanger is gebaseerd op het Renesas‐SH4 platform en draait linux. De webserver is gebaseerd op busybox (2), en is bewust heel eenvoudig gehouden. De scriptie moet de webinterface verbeteren, o.a., door het gebruik van gesofisticeerde technologieën, zoals AJAX.

3

Webinterface voor een hdtv-ontvanger 2008 Volgende zaken moeten zeker verwezenlijkt worden: Kanalen beheer: o Het moet mogelijk zijn om op een eenvoudige en duidelijke manier te browsen tussen de verschillende kanalen. o Er moet een mogelijkheid zijn om wijzigingen te maken aan kanalen. Zoals bijvoorbeeld het wijzigen van de naam van het kanaal. o Het beheren van favorieten moet ook mogelijk zijn, zodat het even eenvoudig is om een zender toe te voegen aan de favorieten als deze hier terug uit te verwijderen. o En als laatste moet je ook in staat zijn om het kanaal te veranderen op de receiver zelf. Zodat je eenvoudig kan zien over welk kanaal het juist gaat. Opname beheer o Het eenvoudig bekijken van alle geplande opnames moet mogelijk zijn via de webinterface. o Ook moet het mogelijk zijn om deze bestaande opnames te wijzigen of te verwijderen via diezelfde interface. o Het toevoegen van een nieuwe opname met alle mogelijke opties zoals je op de receiver zelf ook zou kunnen.

4


Bestaande interface Bij aanvang van mijn thesis bestond er al een vergelijkbare webinterface genaamd Geckow (3). Deze interface was ontwikkeld voor de relook (4) satelliet ontvanger, de voorganger van de cuberevo. Deze al bestaande webinterface wordt overgezet om ook zijn werk te doen op de cuberevo. Nadelen ‐ ‐ ‐

Het aanpassen van de kanalen is nog niet mogelijk. De opname planner werkt nog niet. Zoeken kanaal op naam niet mogelijk

5


Database Intro Het zoeken en selecteren van de te gebruiken database was nogal eenvoudig. De cuberevo gebruikt namelijk intern al een database om al zijn gegevens in op te slagen. Deze database is een SQLite (5) database. SQLite is een zeer lichte database en daarom uiterst geschikt om te gebruiken in embedded systemen zoals een satellietontvanger. De database wordt opgeslagen in een bestand, en kan dan eenvoudig uitgelezen en bewerkt worden door het openen van dit bestand. Hierdoor moet men geen service draaien welke continu systeem resources gebruikt, maar enkel dit bestand openen om iets op te zoeken.

Problemen Een eerste opdracht was het uitzoeken van de opbouw van de database. Zodat ik een duidelijk beeld kreeg van de bestaande tabellen, en hoe deze zich tot elkaar verhouden. Daarbij moest ik definiëren welke tabellen voor mij van belang zijn, en welke waardes ik hier in moet weg schrijven.

6


Verkennen van de database. telnet Een eerste poging was via de command line. Door het programma SQLITE uit te voeren, was het mogelijk om queries te draaien en zo informatie te krijgen over de opbouw van de database. Nu was dit niet echt een eenvoudige en productieve manier van werken.

eigen tools Omdat ik niet echt een programma vond dat in staat was om op een eenvoudige manier 2 tabellen met elkaar te vergelijken, heb ik zelf een kleine tool geschreven. Deze tool is geschreven in PHP (6) en doet niet meer dan tabellen uitlezen uit 2 database files, en dan gelijkgenoemde tabellen met elkaar vergelijken. Op deze manier was ik in staat om gemakkelijk te achterhalen welke informatie er werd veranderd in de database als ik aanpassingen deed in de satellietontvanger zelf.

7


Uitleg bij de mogelijkheden: Indien het veld groen wordt weergegeven zijn er geen verschillen tussen de verschillende tabellen. Een geel veld geeft aan dat table1 en table2 niet meer gelijk zijn. Maar er is enkel een waarde veranderd. Beide waardes worden samen weergegeven zodat je eenvoudig kan zijn hoe deze verandert is. Als het veld rood wordt weergegeven, dan bevindt de volledige rij zich niet in table1 of table 2. Deze missende rijen worden automatisch bovenaan de tabel weergegeven. Indien bij de inspectie één tabel volledig leeg is, maar de andere wel rijen bevat, dan zal de volledige tabel in het rood worden weergegeven.

8

Webinterface voor een hdtv-ontvanger 2008 SQLITE Maestro Nadat ik een duidelijk beeld had van de tabellen en hun onderlinge relaties, gebruikte ik voor het testen van queries het programma SQLite Maestro (7). Dit is een programma met een goede GUI die het mogelijk maakt om op een eenvoudige manier queries los te laten op de tabellen en snel en duidelijk de uitkomst van deze queries te laten zien.

9


Tabellen: Kanalen Channelinfo Voor de kanalen is channelinfo de belangrijkste tabel. Hier worden alle mogelijke zenders opgeslagen die de satellietontvanger kan vinden. Deze zal ik dan ook gebruiken om wijzigingen te kunnen doen aan de kanalen. De belangrijkste kolommen zijn: o id: dit is de primaire sleutel van het kanaal, deze wordt gebruikt om een kanaal te identificeren tijdens het programmeren. o Shortname, fullname: De naam van het kanaal, standaard wordt fullname op de receiver weergegeven, maar dit kan aangepast worden in de instellingen o Service_id: dit is het nummer van het kanaal dat gebruikt wordt om een kanaal te selecteren via de afstandsbediening.

10

Webinterface voor een hdtv-ontvanger 2008 FAVGRPInfo In deze tabel staan alle namen van de Favoriet groepen opgeslagen. Hier zijn de belangrijkste kolommen: o Id: dit is de primaire sleutel van het kanaal, deze wordt gebruikt om een kanaal te identificeren tijdens het programmeren. o Name: de naam van Favorieten groep. (bv.: Music, Movie, …)

FAVListInfo Deze tabel staat voor de koppeling van een kanaal en een groep favorieten. Deze koppeling komt tot stand door het id van het kanaal weg te schrijven in ch_id, en het id van de groep weg te schrijven in grp_id.

11


Opnames Sch_items In deze tabel worden alle handellingen opgeslagen die moeten uitgevoerd worden voor een opname of verandering van kanaal. Dit zijn de kolommen: o Open_time: het moment dat deze actie moet worden uitgevoerd o Data: desch_ id uit scheduledinfo o Sch_name: de actie die moet worden uitgevoerd. Dit zijn de mogelijkheden o start_rec: het starten van een opname o start_zap: het veranderen van een kanaal o end_rec: het beëindigen van een opname. o Wakeup: het opstarten van de receiver. o sleep_warm_rec: het in standby zetten van de receiver na een opname. o sleep_warm_zap: het in standby zetten van de receiver na het veranderen van kanaal. Dit als de eind tijd is verstreken. o sleep_cold_rec: het uitschakelen van de receiver na een opname. o sleep_cold_zap: het uitschakelen van de receiver na het veranderen van kanaal. Dit als de eindtijd is verstreken.

12

Webinterface voor een hdtv-ontvanger 2008 Scheduledinfo In deze tabel bevindt zich alle informatie van een bepaalde recording, waarbij volgende kolommen voorkomen, en hun betekenis. ‐

‐ ‐ ‐

‐

‐ ‐ ‐ ‐

‐ ‐ ‐ ‐ ‐ ‐

mode_type: o 0 Æ opname o 1 Æveranderen van kanaal. program_name: De naam van de opname. ch_id, sat_id, tp_id, channel_name,: informatie van het kanaal is_recording: Huidige status van de opname. o 0 ÆWacht op zijn beurt o 1Æ Opname wordt uitgevoerd. Period: Het aantal keer dat deze opname moet worden uitgevoerd. o 0 Æeenmalig, o 1Ædagelijks, o 2Æwekelijks, o 3Æin het weekend start_time: begin van de opname end_time: einde van het opname parent_lock: het al dan niet gebruik maken van de parent lock. power_control: Na opname volgende actie uitvoeren: ‐ o 1 Æ niets, o 0Æ zet receiver in standby, o 1Æreceiver afsluiten pg_id, event_id, status_flag, file_name, epg_id: worden niet gebruikt, zet deze standaard op schmgr_start_id: de actie die moet worden uitgevoerd om te starten (id van sch_item) schmgr_end_id: de actie die moet worden uitgevoerd om te stoppen (id van sch_item) schmgr_wakeup_id: de actie die moet worden uitgevoerd om de receiver op te starten (id van sch_item) schmgr_sleep_id: : de actie die moet worden uitgevoerd nadat de opname is voltooid. (id van sch_item) sch_id: De id van de opname.

(indien de waarde van een kolom waarbij de naam begint met schmgr gelijk is aan ‐1 wordt er geen actie uitgevoerd.)

13


14


serverside Intro De keuze van de programmeertaal op de server was nogal beperkt. Voor het kiezen van de programmeertaal op de server side had ik enkele mogelijkheden, allemaal gebruik makend van de CGI‐BIN: 1. Rechtstreeks in C communiceren met de receiver. 2. Werken in PHP De voorwaarden bij het bepalen van de programmeertaal: ‐ ‐ ‐

Snel, niet te zwaar voor de receiver, aangezien deze maar beschikt over beperkte hardware. Mogelijkheid tot laden in een webapplicatie. Eenvoudig te verbinden met SQLite.

Mijn keuze is uiteindelijk uitgegaan naar PHP, dit omdat aan al de bovenstaande vereisten voldaan is en omdat PHP veel eenvoudiger is om in te programmeren dan in C‐code. Aangezien ik vooral veel connectie moest maken met de database en in mindere mate met de receiver zelf, lag de keuze voor PHP dan ook voor de hand.

Problemen Tijdens het programmeren in PHP ben ik wel enkele problemen tegen gekomen. ‐ ‐ ‐

Een eerste was om een connectie te leggen met een database. Ook had ik problemen met de headers zodat het document juist werd weergegeven. En als laatste waren er nog problemen met de $GET en $POST variabelen in PHP.

15


Connecteren met SQLITE database Om connectie te maken met een database in PHP, bleek de plugin PDO het meest geschikt, die standaard wordt gecompileerd vanaf php5. PDO staat voor PHP Data Objects, en geeft de mogelijkheid om eenvoudig te connecteren met een database in PHP. Voor SQLite is dit de PDO‐SQLite plugin die gebruikt moet worden. Om een query uit te voeren via een PDO object moeten volgende stappen ondernomen worden: ‐

‐

Eerst en vooral een nieuw object aanmaken waarbij het type database wordt meegegeven en de naam van de database waarmee er geconnecteerd moet worden. Dan moet men een sql query invoeren in het gemaakte object, en deze laten uitvoeren. En dan geeft het object het resultaat terug, en kan men dit eenvoudig uitlezen.

Een groot voordeel van het werken met dit object is dat het overzetten van de applicatie naar een andere database zeer eenvoudig is, zolang de sql instructies worden ondersteund en de namen van tabellen en kolommen gelijk blijven. Indien aan beide voorwaarden voldaan is, moet men enkel het aanmaken van het object wijzigen en kan men zo verder werken met een andere database.

16


HEADERS Een ander probleem in PHP was het gebruik maken van headers. Er moesten namelijk steeds twee headers toegevoegd worden aan een document dat via de CGI‐BIN gaat. Een eerste header is om de CGI‐BIN te laten weten, via welk programma het php bestand geparst moet worden. Deze header ziet er als volgt uit: #!/usr/bin/php Deze moet altijd aan het begin van een pagina toegevoegd worden. Een andere header die toegevoegd moest worden is voor de browser. Deze is niet in staat om te herkennen welk type document hij voorgeschoteld krijgt, enkel aan de hand van een extensie. En de CGI‐BIN geeft ieder document dat hij geparst heeft automatisch de content type: plain‐text, met als gevolg dat de browser deze ook zo behandelt. Aangezien ik xml files als resultaat nodig heb moest ik volgende header toevoegen:

PHP $GET en $POST variabelen $GET De variabele $GET welke de parameters bevat die worden meegeven in de URL van de opgevraagde pagina werd niet herkend door de receiver. Daarom was ik genoodzaakt om deze variabele op een alternatieve manier te kunnen uitlezen. Dit heb ik dan gedaan door de $_SERVER['REQUEST_URI'] variabele uit te lezen. (Deze geeft de opgevraagde URL terug.) En dan uit deze url de $GET variabele uit te lezen en weg te schrijven in een array.

$POST De $POST variabele werd ook niet herkend, dus ook hier moest ik een oplossing voor vinden. Deze methode wordt vooral gebruikt om gegevens weg te schrijven naar een server. Nu aangezien deze variabelen in de headers zitten en daardoor zeer moeilijk terug te vinden zijn als je deze variabelen niet kan uitlezen, heb ik er voor gekozen om geen posts te doen, maar enkel gebruik te maken van een get.

17


Clientside Mogelijkheden Voor op de client‐side moest ik de keuze maken tussen: 1) Een plugin maken voor Firefox. 2) Een html interface. Hierbij moest ik er vooral rekening mee houden, dat de aanvragen naar de server tot een minimum beperkt werden. Dit om de receiver zelf niet te hard te belasten. Na wat onderzoek bleek dat beide werkten via javascript en dat de belasting gelijk bleef. Maar ik heb er uiteindelijk voor gekozen om een html interface te gebruiken, die met behulp van AJAX de nodige informatie opvroeg aan de receiver. Met als hoofdreden dat je dan vanuit elke browser de webinterface kon benaderen, en niet nog een extra browser en plugin moest installeren voordat je deze interface kon gebruiken.

AJAX Ajax staat voor asynchronous Javascript and XML. Dit is een techniek om dynamisch data op te vragen van een webserver. Met als groot voordeel dat een pagina niet telkens volledig ververst moet worden, maar enkel de noodzakelijke informatie opgevraagd wordt, en zo de load van de webserver beperkt wordt. Hiervoor ben ik op zoek gegaan naar een bestaand javascript framework. Dit om het voor mezelf een beetje te vereenvoudigen. Na wat rondzoeken leek mij vooral prototype (9) een zeer goed framework. Niet al te zwaar maar toch genoeg mogelijkheden. Ook grafische effecten waren heel eenvoudig uit te voeren. Na wat testen bleek echter dit framework niet echt geschikt. Dit omdat het Ajax gedeelte niet zo vlot werkte als ik gehoopt had. En daarom ben ik verder gegaan op een framework uit het boek “Ajax for Webappliction developers” (10). Dit boek bleek zeer geschikt als basis om te werken met Ajax en heb ik dan ook als leidraad gebruikt voor de mappenstructuur van javascript en php classes.

18


CROSS BROWSER SUPPORT! Zoals al eerder vermeld, heb ik gekozen om zoveel mogelijk browsers te ondersteunen met mijn webapplicatie, daarom is deze dan ook uitvoerig getest in: ‐ ‐ ‐ ‐

Internet explorer 6 & 7 (11) Firefox (12) Opera (13) Safari (14)

Problemen Intro Tijdens het ontwikkelen van de user interface ben ik op twee problemen gestoten. Het eerste was het debuggen van Javascript, hierbij waren de foutmeldingen die ik kon uitlezen in de browser altijd zeer vaag, en het probleem was daarom niet altijd duidelijk. Hiervoor ben ik dan op zoek gegaan naar een goede debug methode. En ben terecht gekomen bij Firebug (15). Een tweede belangrijk punt was het creëren van een goede layout. Hiervoor was er maar 1 oplossing, en dit was gebruik maken van HTML voor de structuur en CSS voor de opmaak.

Debugging Voor het debuggen van javscript maakte ik gebruik van Firebug(9). Dit is een add on geschreven voor firefox(10) Hiermee was het zeer eenvoudig om javascript te debuggen. Zo is het eenvoudig mogelijk om breakpoints te zetten in een script, en zo de waardes van de verschillende variabelen te kunnen volgen. Maar niet alleen voor het javascript gedeelte bleek deze tool uiterst nuttig. Ook het bekijken van de AJAX request en de respons is mogelijk met deze tool. Ook kan deze on the fly CSS code aanpassen en rendert firefox deze aanpassingen zonder de pagina te moeten herladen.

19


Webapplicatie Intro Nadat alle keuzes gemaakt waren van de te gebruiken technologieën, was het tijd om de applicatie te beginnen programmeren. Nu waren er toch nog enkele keuzes die ik moest maken. 1) Het opzetten van een programmeeromgeving. Dit om op een zo efficiënt mogelijke manier te kunnen programmeren. Dit om type fouten en syntax fouten tijdens het programmeren al tot een minimum te beperken. 2) Ook ben ik op zoek gegaan naar een manier om de receiver virtueel te draaien zodat ik thuis kon programmeren. Dit om de volgende redenen. a. De plaats van de receiver was zeer ongelukkig gekozen. Deze stond in een labo waar continu een server draaide die voor de nodige overlast zorgde. Dit zorgde voor veel afleiding en kwam niet ten goede aan de productiviteit. b. Een andere reden was, dat ik thuis beschikte over 2 schermen waardoor ik meer ruimte had. Wat de productiviteit behoorlijk verhoogde. Zo kon ik verschillende applicaties tegelijk open zetten, en moest ik niet continu de juiste applicatie zoeken op mijn startbalk. 3) En als laatste moest ik nog een goede architectuur ontwerpen zodat ik op een uniforme manier de applicatie kon opbouwen.

20


Problemen Programmeeromgeving Als programmeeromgeving gebruikte ik Eclipse (16). Deze heb ik leren gebruiken tijdens het developpen van JAVA applicaties in het eerste semester. Dit is een zeer uitgebreide ontwikkelomgeving waar je eenvoudig extra plugins kunt aan toevoegen voor support van verschillende programmeertalen. De plugins die ik gebruikte: phpeclipse (17) Deze add on voor eclipse voegt zeer handige features toe. Een voorbeeld is de autocompletion van code, zo worden al de gebruikte variabelen en classes aangevuld na het typen van enkele letters. Maar ook alle functies van php worden herkend, dit zorgt voor minder fouten tijdens het programmeren. Ook zit er een on the fly syntax checker in, zodat fouten worden ontdekt zonder dat de pagina moet worden geladen in een webbrowser. JSEclipse (18) Deze add on voegt dezelfde functionaliteit toe als de php add on, maar dan voor het javascript gedeelte.

21


Virtualisatie Om eenvoudig te kunnen developpen ben ik gaan zoeken naar een manier om de cuberevo virtueel op mijn laptop te kunnen simuleren. Uiteindelijk is mijn keuze gevallen op VMWARE Workstation (19) als software voor een virtuele machine. Ik had hier vroeger al eens mee gewerkt en was dus vertrouwd met de interface en mogelijkheden. Voor de webserver ben ik niet zelf begonnen met het maken van een virtuele machine. Hiervoor heb ik gekozen voor Virtual Appliance LAMP (20). Dit is een linux distributie op basis van een Ubuntu server. Met als voordeel dat al de nodige servers al geïnstalleerd zijn. ‐ ‐ ‐ ‐

Apache als webserver Mysql als database server PHP 5 voor het afhandelen van de php paginas Samba voor een eenvoudige verbinding met de bestanden

Het enige wat ik nog miste was de sqlite server. Maar dit heb ik snel kunnen installeren na wat opzoekwerk op het internet.

22

Webinterface voor een hdtv-ontvanger 2008 Het gebruik van virtualisatie had zeker een meerwaarde, en zorgde voor een snellere en efficiëntere ontwikkeling. Nu waren er wel enkele zaken waar ik rekening mee moest houden. ‐

‐

‐

‐

Na het wijzigen van de database moest ik regelmatig testen of de wijzigingen wel op een juiste manier worden toegepast op de receiver. Zoals bijvoorbeeld kijken of een toegevoegde favoriet, effectief terug te vinden is op de receiver. Oproepen van de CGI‐BIN applicaties van de relook receiver kon ik wel doen op mijn virtuele machine. Maar het was niet mogelijk om het effect van deze oproepen virtueel te testen. Ook waren er verschillen tussen de cgi‐bin versie op de receiver en de native php support van de virtuele machine. Dit waren dan hoofdzakelijk de problemen die vermeld staan onder problemen server‐side in de thesis. En als laatste moest ik ook nog rekening houden met de gebruikte hardware. De hardware van mijn laptop die gebruikt werd door de virtuele machine was namelijk zwaarder en handelde verzoeken dus ook sneller af dan op de receiver het geval was. Hieronder staat een tabel met de tijdsverschillen gemeten met firebug. Dit zijn de tijden die nodig zijn om een bepaalde AJAX request af te handellen. Beide tijden zijn gemeten op mijn laptop (20).

Request (kanalen) Virtueel Receiver params=type:t:30:0 43ms 402ms params=type:tv:30:0 79ms 404ms params=fav:News:30:0 97ms 405ms params=fav:Music:30:0 55ms 418ms params=alfa:t:30:0 51ms 414ms In de tabel komt duidelijk een behoorlijk groot verschil naar voor tussen de tijd die nodig is door de receiver, als de tijd door de virtuele machine. Nu zijn wachttijden van 500ms nog zeer acceptabel voor een webinterface, aangezien het opleveren van een resultaat in deze tijd niet ervaren wordt als veel trager.

23


Architectuur Onderstaande afbeelding geeft de architectuur weer van de applicatie.

Request GET/POST

PHP XML

QUERY

SQLITE

Response Layout Deze architectuur bestaat uit volgende stappen: ‐

‐

‐

Eerst vindt er een Request via een javascript functie uit een request klasse plaats. Deze request vraagt de php pagina serviceconnector.php op, met als parameters de php classe en methode die gebruikt moeten worden. In PHP zal dan de aanvraag behandeld worden door verbinding te maken met de SQLite database. Het resultaat wordt dan als XML file aangeboden aan een javascript Response functie. Deze functie van een response classe verwerkt dan het xml antwoord, en schrijft dan de benodigde elementen weg naar de webpagina door gebruik te maken van een Layout classe.

24


WEBAPPLICATIE Intro Bij het openen van de webapplicatie krijg je volgend start scherm te zien.

Op deze pagina heb je de keuze om te beginnen zoeken en werken met de kanalen (“channels”) die je met de receiver kan bekijken. Of een opname plannen, wijzigen of verwijderen. Op de volgende pagina’s worden de vereisten van de applicatie nog eens uitgelegd en hoe deze zijn geïmplementeerd in de webapplicatie.

Kanalen Implementatie vereisten a) Het moet eenvoudig zijn om te zoeken in alle zenders die ter beschikking staan op de receiver. b) Het moet mogelijk zijn om wijzigingen aan te brengen aan de kanalen. Dit om het achteraf eenvoudiger te maken. c) Zenders moeten gegroepeerd kunnen worden bij een groep favorieten, en hieruit verwijderd worden. Beide handelingen moeten eenvoudig uit te voeren zijn in de webinterface. d) Als een zender gevonden is moet deze op een eenvoudige manier getoond kunnen worden op de TV aangesloten op de receiver. e) Een gevonden zender moet ook gebruikt kunnen worden voor een opname welke in de tweede module van de applicatie behandeld zal worden.

25


Uitleg werking Het hoofd scherm van “channels” ziet er als volgt uit:

a) Het doorzoeken van de kanalen is mogelijk op volgende manieren: o De naam van het kanaal beginnen typen in het tekstvak. o Een kanaal kiezen op favorieten door op één van de groepen te klikken. o De kanalen die beginnen met een bepaalde letter door op de respectievelijke letter te klikken vlak boven de tabel. Al deze methodes zullen tot gevolg hebben dat er een AJAX request gedaan wordt naar de server. En dan zullen de resultaten van deze zoekacties op het scherm getoond worden. Dit gebeurt op volgende manier:

26

Webinterface voor een hdtv-ontvanger 2008 Hierbij zal je telkens een maximum van 20 resultaten te zien krijgen. Dit is een limiet die ingesteld is zodat er nooit een overvloed aan resultaten op het scherm te zien zijn. Nu is het wel mogelijk om de volgende resultaten op te vragen, door op “prev” (vorige) of “next” (volgende) te klikken. Deze zullen wel enkel verschijnen indien er meer dan 20 resultaten zijn. b) Het aanpassen van zenders kan men eenvoudig doen, door het klikken op edit, in de rij van de zender die men wil wijzigen nadat men deze heeft gevonden met een zoekactie. Het resultaat ziet er dan als volgt uit:

Een wijziging kan men achteraf eenvoudig opslaan door op “save” te klikken.

c) Zoals eerder vermeld kan je eenvoudig de zenders opvragen die bij een favoriet horen. Om deze toe te voegen aan een groep, moet men ook op edit klikken en dan is het mogelijk om een favorieten groep te selecteren in een drop down box, dit in de kolom “Favoriet” d) Het wijzigen van zender op de receiver gebeurt door het klikken op “ZAP”. e) Voor het selecteren van een kanaal voor een opname dient de knop “SELECT”.

27


Implementatie architectuur Hier nog een overzichtje van de bestanden die gebruikt worden en waar ze zicht bevinden in de architectuur:

program_request.js

GET/POST program.php

XML

QUERY

SQLITE

program_response.js program_layout.js

28


Opnames Implementatie vereisten a) b) c) d)

Een overzicht kunnen bekijken van al de geplande opnames. Het moet mogelijk zijn om een nieuwe opname te plannen. Het moet mogelijk zijn om geplande opnames te wijzigen en te verwijderen. Alle opties die mogelijk zijn op de receiver moeten ook geselecteerd kunnen worden in de webinterface.

Uitleg werking Het hoofdscherm van “channels” ziet er als volgt uit:

a) Bij het openen van de webinterface wordt er automatisch een lijst opgevraagd met al de geplande opnames, die er al in de database staan. Hierdoor zijn deze ook meteen zichtbaar bij het openen van de “scheduler”. b) Voor het maken van een nieuwe opname zal men altijd eerst de “channels” tab moeten bezoeken. Hier kan men dan de juiste zender zoeken op de manier die eerder in deze thesis staat beschreven. Als men dan “select” selecteert naast de gewenste zender, komt met automatisch terecht in de “scheduler”, waarbij het juiste kanaal ineens is ingevuld in het “Channel to record” vak. In dit vak is het niet mogelijk om zelf iets te typen, men kan enkel dingen selecteren uit “channels”. c) Het wijzigen en het verwijderen van recordings kan men eenvoudig bekomen door respectievelijk op EDIT of DELETE te klikken, op de rij van de recording die men wenst aan te passen. Bij het selecteren van EDIT zal deze recording dan ingeladen worden in het invulformulier, met de opties die zijn opgeslagen in

29

Webinterface voor een hdtv-ontvanger 2008 de database. Bij het opslaan zullen deze opties dan ook in de tabel worden weggeschreven zodat de opties bewaard blijven. Hieronder ziet u een afbeelding, waar de recording die onderaan staat is ingeladen in het formulier om de recordings te wijzigen.

d) Om af te ronden nog een overzicht van de mogelijke opties: • Action: Hier kan men kiezen of de geplande taak een opname is, of het een wijziging van kanaal inhoudt. • Occurence: Het aantal malen dat deze opname moet worden uitgevoerd. De mogelijkheden: 1 malig, wekelijks, in het weekend. • After recording: Wat de receiver moet doen na de recording: niets, afsluiten of in standby gaan. • Parent Lock: de parent lock al dan niet inschakelen op deze recording. • Tijdsduur: Om het einde van de opname te bepalen kan men kiezen tussen: • ‐ Een einduur opgeven • De tijdsduur opgeven Om te switchen tussen beide keuzes moet je op de link “Toggle duration” klikken

30


Implementatie architectuur Hier nog een overzichtje van de bestanden die gebruikt worden en waar ze zicht bevinden in de architectuur:

scheduler_request.js

GET/POST scheduler.php

XML

QUERY

SQLITE

scheduler_response.js scheduler_layout.js

31


Verder Werk Er zijn nog wel wat opties die toegevoegd kunnen worden aan deze webinterface. 1) Instellingen van de receiver veranderen. 2) Het zappen volledig implementeren in php, en rekening houden met een muziek of tv zender.. 3) De status van de receiver uitlezen via php. 4) De cache van opnames syncroniseren met de database na het wijzigen van deze opnames. 5) Het werken met EPG data in de webinterface, door deze vanuit de cache in de database te schrijven. Dit zijn maar enkele mogelijkheden die het werken met de receiver behoorlijk zullen vereenvoudigen.

32


Referenties 1. Cuberevo ‐ DGStation. [Online] http://www.dgstation.co.kr/new/product_feature.php?model=cuberevo&menu=8. 2. Busybox ‐ Embedded Linux. [Online] http://www.busybox.net/about.html. 3. Geckow ‐ Webinterface. [Online] http://www.denktenk.com/modules/weblinks/singlelink.php?lid=3. 4. Relook ‐ DGStation. [Online] http://www.dgstation.co.kr/new/product_feature.php?model=relook300s&menu=1. 5. SQLite database. [Online] http://www.sqlite.org. 6. PHP. [Online] http://www.php.net. 7. SQLite Maestro. [Online] (8) http://www.sqlmaestro.com/products/sqlite/maestro/. 8. Prototype ‐ JavaScript Framework. [Online] http://www.prototypejs.org/. 9. Hadlock, Kris. Ajax for Web Application Developers. s.l. : Sams Publishing, 2007. 0‐ 672‐32912‐3. 10. Internet Explorer. [Online] http://www.microsoft.com. 11. Firefox. [Online] http://www.mozilla‐europe.org/nl/products/firefox/. 12. Opera. [Online] http://www.opera.com/. 13. Safari ‐ Webbrowser. [Online] http://www.apple.com/nl/safari/. 14. Firebug. [Online] http://www.getfirebug.com/. 15. Eclipse. [Online] http://www.eclipse.org. 16. PHPEclipse. [Online] http://sourceforge.net/projects/phpeclipse/. 17. JSEclipse. [Online] http://labs.adobe.com/technologies/jseclipse/. 18. VMWARE. [Online] http://www.vmware.com/products/ws/. 19. LAMP. [Online] http://virtualappliances.net/products/lamp.php. 20. Dell latitude D830. 21. PDO ‐ PHP Data Object. [Online] http://www.php.net/pdo.

33

Webinterface voor een hdtv-ontvanger. Karl Van den Bleeken. Promotor: prof. dr. ir. Wilfried Philips Begeleider: Philippe Serbruyns

Recommend Documents