Een dynamische webinterface voor LDK Connect

(1)

Field

XML Gateway System About

LDK Connect Gateway: RTL4 / OB Van #2

Network Status

Camera systems:

Network IP Settings LDKCONNECT

1 LDK 8000 3G-Triax Yes Yes

Number: Type System On Air Quality Ref. Gen.

2 unsupported camera

---!

4 LDK 3000 3G-Triax Yes Yes Not a valid system

Message

---!

21 LDK 3000 Triax Yes Yes Camera is not initialized 22 LDK 3000 Triax Yes Yes High temperature alert

!

23 LDK 4000 Fiber Yes Yes Oeps!

30 LDK 6000 Triax Yes Yes

-30 LDK 6000 Triax Yes Yes

-Install Setup Operation C2IP

Yes Yes Not a valid system Yes Yes

Yes Yes Camera is not initialized Yes Yes High temperature alert Yes Yes Oeps! Yes Yes

-Yes Yes

-Afstudeerverslag

Student: Dim van den Heuvel Plaats: Breda

Versie: 1.0 Datum: 18/8/2011

Bedrijf: Grass Valley Nederland B.V. Opleiding: Informatica (I) deeltijd

(2)

Colofon

Student: Dim van den Heuvel

Studentnummer: 1124069

Datum: 18/8/2011

Opdracht: Afstuderen Informatica

“Een dynamische webinterface voor LDK Connect”

Versie: 1.0

Opleidingsinstituut: Avans Hogeschool Breda Opleiding: Informatica (I) deeltijd Docentbegeleider: Maurice van Haperen Bedrijf: Grass Valley Nederland B.V.

Kapittelweg 10 4827 HG BREDA 

Bedrijfsbegeleider: Wim van Diepen

(3)

Inhoudsopgave

Hoofdstuk 1 – Inleiding

Hoofdstuk 2 – Organisatie

2.1 Bedrijfsbeschrijving . . . 13 2.1.1 Grass Valley . . . 13 2.1.2 R&D-afdeling . . . 14 2.1.3 Cultuur . . . 14 2.2 Projectorganisatie . . . 14 2.2.1 Softwaregroep . . . 14

2.2.2 Het project LDK Connect . . . 14

2.2.3 Mijn rol . . . 15

Hoofdstuk 3 – Probleemanalyse

3.1 Probleemsituatie . . . 17 3.2 Probleemstelling . . . 17 3.3 Doelstelling . . . . 17 3.4 Product . . . 18

Hoofdstuk 4 – Uitvoering

4.1 Pre-projectfase . . . 19 4.1.1 Systeemkenmerken. . . 19 4.1.2 Onderzoek geschiktheid DSDM . . . 19 4.1.3 Risocoanalyse . . . 20 4.1.4 Fasering . . . 21 4.1.5 Timeboxing . . . 21 4.2 Oriëntatiefase . . . 21 4.2.1 Haalbaarheidsonderzoek . . . 21 4.2.2 Bedrijfsanalyse. . . 22 4.3 Functioneel model-fase . . . 23 4.3.1 Prioriteiten bepalen . . . 23 4.3.2 Functionele eisen. . . 23 4.3.3 Niet-functionele eisen . . . 24 4.4 Ontwerp- en bouwfase . . . 24 4.5 Implementatiefase . . . 25

Hoofdstuk 5 – Architectuur

5.1 LDK Connect. . . 27

5.1.1 Camera control network . . . 27

5.1.2 XML Gateway . . . 27

(4)

5.2 Systeeminrichting . . . 28

5.2.1 Client-serverarchitectuur . . . 28

5.2.2 Keuze 1: Client side . . . 28

5.2.3 Keuze 2: Grafische vormgeving . . . 29

5.2.4 Keuze 3: Webserver. . . 29

5.2.5 Keuze 4: Server side scripting . . . 29

5.2.6 Keuze 5: Berichtenverkeer. . . 30 5.2.7 Architectuurdiagram. . . 30 5.3 Gesimuleerde omgeving. . . 31 5.3.1 Datamodel . . . 31 5.3.2 Simulator backoffice . . . 31 5.3.3 Portable server. . . 31

Hoofdstuk 6 – Resultaten

6.1 Opbouw van de interface . . . 33

6.1.1 Structuur . . . 33 6.1.2 Uitwerkingen . . . 34 6.2 Uitwerking operation-tab . . . 34 6.2.1 HTML-code . . . 34 6.2.2 JavaScript-code . . . 35 6.2.3 PHP-script . . . 37 6.3 Uitwerking floorview-tab. . . 37 6.3.1 HTML/PHP-code . . . 37 6.3.2 JavaScript-code . . . 38 6.3.3 PHP-script . . . 39

Hoofdstuk 7 – Handleiding LDK Connect

7.1 Inleiding . . . 41

7.1.1 Toegang tot de webinterface. . . 41

7.1.2 Simulator backoffice . . . 41 7.2 XML Gateway. . . 42 7.2.1 Tabs . . . 42 7.2.2 Statusbalk . . . 42 7.2.3 Network status . . . 43 7.2.4 Network IP Settings. . . 43 7.2.5 XML Clients . . . 43 7.3 C2IP Monitoring . . . 43 7.3.1 Network status . . . 43 7.3.2 Network IP Settings. . . 43

7.3.3 Lijst met camerasystemen . . . 43

7.3.4 Camera-detailinformatie. . . 44 7.4 Floor Manager . . . 45 7.4.1 In het veld . . . 45 7.4.2 Floor view . . . 45 7.4.3 Locations . . . 46 7.5 System configuration . . . 48 7.6 About . . . 48

(5)

Hoofdstuk 8 – Conclusies en aanbevelingen

8.1 Conclusies . . . . 49

8.1.1 Services . . . 49

8.1.2 Toegepaste technologie . . . 49

8.1.3 Herbruikbaarheid . . . 49

8.1.4 Onoverzichtelijke source code . . . 50

8.2 Aanbevelingen . . . 50

8.2.1 Applicaties . . . 50

8.2.2 Toekomstige ontwikkelingen . . . 50

Bijlage I: Persoonlijke ontwikkeling

Bijlage II: Planning

Bijlage III: Beschrijving technologieën

Bijlage IV: Bronnen

(6)

(7)

Voorwoord

In de periode van april 2011 tot en met augustus 2011 heb ik als deeltijdstudent informatica (I) een afstudeeropdracht uitgevoerd bij mijn werkgever Grass Valley in Breda. Dit

afstudeerverslag beschijft zowel het afstudeerproces als de behaalde resultaten.

In de afgelopen jaren heb ik bij Avans heel veel geleerd op het gebied van informatica, niet alleen technieken en methodes maar ook een manier van denken. Tijdens de uitvoer van mijn afstudeerproject bleken heel veel losse onderwerpen samen te komen tot een groter geheel en dat was erg leuk om te ervaren.

Graag wil ik mijn bedrijfsbegeleider Wim van Diepen bedanken voor zijn geduld en zijn technische creativiteit en mijn collega Robert de Leeuw voor zijn enthousiasme en de bereidheid om mijn vele vragen te beantwoorden.

Dim van den Heuvel Breda, 11 augustus 2011

(8)

(9)

Samenvatting

Dit afstudeerverslag beschrijft het proces en het resultaat van de ontwikkeling van een dynamische user interface voor LDK Connect, een systeem dat door camerafabrikant Grass Valley in Breda ontwikkeld wordt. LDK Connect geeft applicaties van buiten toegang tot het cameranetwerk en biedt uitgebreide mogelijkheden om camera's binnen het netwerk te monitoren.

Aan het begin van het project zijn zowel een probleemanalyse als een bedrijfsonderzoek uitgevoerd, eerst intern en later ook in samenwerking met een grote klant van Grass Valley. Hieruit is de gewenste functies van het systeem naar voren gekomen. Veel aspecten van het systeem blijken een grote gebruikersbetrokkenheid te kennen en de user interface is dan ook een belangrijk subsysteem.

Er is gekozen om de user interface als webinterface uit te voeren die met behulp van asynchrone data-uitwisseling (AJAX-techniek) geschikt wordt gemaakt voor dynamische systemen, zoals een cameranetwerk. Een onderdeel van de afstudeeropdracht is om aan te tonen dat de gekozen oplossingsrichting en technieken de juiste zijn.

Met het opzetten van een simulatieomgeving en het combineren van technieken als HTML, JavaScript, AJAX en PHP is een volwaardige webinterface gerealiseerd. Het uitvoeren van de user interface als functioneel prototype heeft aangetoond dat de gebruikte technieken en oplossingsrichting daadwerkelijk voldoen.

Het ontwikkeltraject is volgens de DSDM-methode uitgevoerd. Deze iteratieve en

incrementele ontwikkelmethode bleek goed te passen bij de aard van het project en leverde stapsgewijs nieuwe deelfuncties op.

Aan het einde van het project is een ontwerpprototype opgeleverd dat bruikbaar is voor implementatie in het LDK Connect-project. Het protoype zal in september op de internationale broadcast-beurs IBC in Amstedam aan klanten en mede-ontwikkelaars gedemonstreerd worden.

(10)

(11)

Hoofdstuk 1 - Inleiding

Hoofdstuk 1

Inleiding

“Een gedenkwaardig moment tijdens het WK voetbal in 2010: voetballer Dirk Kuyt die de ban brak tegen Denemarken en zich daarna uitte tegen de camera die achter het doel hangt. Die camera komt uit Breda. Net als alle andere televisie- en slow-motioncamera's in alle voetbalstadions in Zuid-Afrika. Stuk voor stuk in Breda ontworpen, ontwikkeld, met de hand gebouwd, getest en afgeleverd. Marketing-manager Bart van Dijk: Grass Valley heeft in tien stadions 290 camera's staan en hangen. In de grootste stadions zijn er 32 posities, in de meeste andere 29, waarvan 6 speciale slow-motioncamera's zijn, en tussen een paar stadions wordt met de units gependeld.”

Het instellen, bedienen en monitoren van een grote groep camera's tijdens een televisieproductie zoals de registratie van de WK-finale is geen gemakkelijke taak. Een regieruimte lijkt vlak voor en tijdens een grote productie nog het meest op de verkeerstoren van Schiphol op een drukke vakantiedag.

Terwijl de regisseur de inhoudelijke en artistieke leiding van de productie in handen heeft, is het hoofd techniek verantwoordelijk voor het goed functioneren van alle camera's,

verbindingen en signalen. Hij heeft voor zijn taak verschillende hulpmiddelen tot zijn beschikking zoals controle- en bedieningspanelen en signaalmonitoren.

Binnenkort krijgt hij er een krachtig, nieuw stuk gereedschap bij: LDK Connect. Dit nieuw te ontwikkelen serverplatform zit als een spin in het web; het biedt externe applicaties gecontroleerde toegang tot het cameranetwerk en verzamelt tegelijkertijd operationele- en statusinformatie van alle camera's in het netwerk. Een belangrijke steutel tot het succes van LDK Connect is de toegankelijkheid van de informatie: een goede en bruikbare user interface is daarvoor onontbeerlijk.

Dit document is een verslag van het ontwikkelen en bouwen van deze user interface als subsysteem van LDK Connect. Eerst wordt eerst een beschrijving gegeven van Grass Valley en het gebied waarin het bedrijf actief is. Daarna wordt dieper ingegaan op de probleemanalyse en vervolgens worden de uitvoering en de aanpak van het project toegelicht. De architectuur en de gekozen systeeminrichting worden beschreven, evenals de resultaten en functionele uitleg. Tot slot zijn in het laatste hoofdstuk de conclusies en de aanbevelingen terug te vinden.

(12)

(13)

Hoofdstuk 2 - Organisatie

Hoofdstuk 2

Organisatie

2.1 Bedrijfsbeschrijving

2.1.1 Grass Valley

Het in Breda gevestigde Grass Valley Nederland is een onderdeel van het gelijknamige Amerikaanse bedrijf dat wereldwijd producten voor de broadcastmarkt ontwikkelt, produceert en verkoopt. Grass Valley heeft vestigingen in Amerika, Duitsland, Nederland en Japan en een hoofdkantoor in San Francisco. In Breda worden professionele videocamera's voor

liveproducties ontwikkeld en gefabriceerd. Het bedrijf verkoopt zijn producten aan televisiestudio's, mediaproductie-bedrijven en facilitaire bedrijven op het gebied van broadcasting.

Grass Valley Breda heeft 175 werknemers in dienst die verdeeld zijn over afdelingen als research & development, manufacturing, customer support en diverse stafafdelingen. Het bedrijf heeft het op één na grootste wereldmarktaandeel op de broadcastmarkt.

Figuur 2-1. Vereenvoudigd organigram van Grass Valley Breda.

Product Management Research & Development Software Human Resources Finance & Control Manufacturing Customer Support General Management Mechanics Layout Technical Development Systems Firmware S.O.A.P Marketing & Sales support Personal Asst. &

(14)

2.1.2 R&D-afdeling

De R&D-afdeling is verantwoordelijk voor het ontwerpen en realiseren van camera's en randapparatuur. Het werkgebied van de afdeling omvat zowel elektrotechnische als mechanische ontwikkeling en kent een hoge mate van specialisatie in onder andere beeldsensortechnologie, chipsontwerp en videobewerking. Er wordt sterk projectmatig gewerkt in multidisciplinaire teams van ontwikkelaars, projectleiders, systeemspecialisten en testers. De verantwoordelijkheid van de R&D-afdeling strekt zich uit over de hele levenscyclus van een product. Er werken ongeveer 60 mensen op deze afdeling.

De R&D-afdeling is een staf-lijnorganisatie, ook wel matrixorganisatie genoemd, die opgedeeld is in kleine, zelfsturende werkgroepen van tussen de vijf en tien medewerkers. De

werkgroepen zijn ingedeeld op basis van vakdiscipline en worden aangestuurd door een groepsleider. Aansturing vindt plaats op twee manieren: via de projectleider voor de planning, taken en projectwerkzaamheden en via de groepsleider voor de vakinhoudelijke, kwalitatieve en hiërarchische zaken.

2.1.3 Cultuur

Enige tijd geleden is er op de R&D-afdeling een kort onderzoek naar de bedrijfscultuur uitgevoerd volgens de methode van Harrison en Handy. Uit dit onderzoek bleek dat de taak- en de persoonscultuur de belangrijkste componenten van de bedrijfscultuur zijn. Er is een hoge mate van deskundigheid aanwezig en de medewerkers zijn zeer gedreven op hun vakgebied. Resultaten worden belangrijker geacht dan regels en machtsverhoudingen. Een ander kenmerk van de bedrijfscultuur is de geringe hiërarchie: groepsleiders hebben geen hoge machtsstatus maar zijn vooral meewerkend voorman.

2.2 Projectorganisatie

2.2.1 Softwaregroep

De softwaregroep bestaat uit vijf ontwikkelaars en een groepsleider en is verantwoordelijk voor het ontwikkelen en onderhouden van control- en user interface-software van

camerasystemen. Het gaat voornamelijk om embedded software maar het werkgebied grenst aan firmware of systeemsoftware. De softwaregroep wordt geleid door Wim van Diepen.

2.2.2 Het project LDK Connect

LDK Connect, dat in het volgende hoofdstuk gedetailleerder wordt beschreven, wijkt in een aantal opzichten af van andere projecten die Grass Valley uitvoert. In de eerste plaats is het een volledig softwareproject—een op zichzelf staande applicatieen in de tweede plaats zijn de gebruikte technieken redelijk nieuw terrein voor het ontwikkelteam.

(15)

Een ander groot verschil is dat dit project een veel grotere gebruikersbetrokkenheid kent dan veel andere, meer technisch georiënteerde, projecten.

Figuur 2-2. Samenstelling van het projectteam van LDK Connect.

2.2.3 Mijn rol

Mijn officiële functie is technisch schrijver en usability-ontwikkelaar en mijn functie maakt deel uit van de systeemgroep. Tijdens het uitvoeren van mijn afstudeeropdracht ben ik parttime uitgeleend aan het LDK Connect-project dat binnen de softwaregroep wordt uitgevoerd. In het projectteam vervul ik de rol van juniorontwikkelaar waarin ik verantwoordelijk ben voor het bouwen van de user interface voor het op te leveren systeem.

Teamleader/ Ontwikkelaar Wim van Diepen

Trainer Jan Paul Campman Projectleider

Evert van der Kuijl

Senior Ontwikkelaar Robert de Leeuw

Junior Ontwikkelaar Dimitri van den Heuvel

Junior Ontwikkelaar Mathijs Litjens Productmanager

Bart van Dijk

(16)

(17)

Hoofdstuk 3 - Probleemanalyse

Hoofdstuk 3

Probleemanalyse

3.1 Probleemsituatie

Tijdens een televisieproductie worden vaak tientallen camerasystemen gebruikt die op het moment van uitzending allemaal in de juiste toestand moeten staan. Voor een hoofd techniek of een regisseur is het lastig om in één oogopslag het hele cameranetwerk te overzien. Een extra complicatie is het feit dat veel camerasystemen afkomstig zijn van verhuurbedrijven, eigen reportagewagens of andere bedrijven en pas op de draaidag en -locatie worden

samengebracht. Hierdoor is het mogelijk dat er verschillen zitten in de configuraties of softwareversies van de camera’s.

In een productie komen de videosignalen van alle camerasystemen in de videoswitcher samen, meestal via een signaalrouter. Hoewel de meeste camera's door een cameraman of -vrouw bediend worden, kan het nuttig zijn om een camera op afstand door de videoswitcher of -router te laten bedienen. Op dit moment kan dat nog niet, omdat het cameranetwerk een gesloten netwerk is.

3.2 Probleemstelling

Er is geen goede mogelijkheid om een netwerk van camerasystemen goed te monitoren vanuit één centraal punt. Daardoor kost het extra tijd en moeite om vóór en tijdens een productie een goed overzicht te krijgen van de status van de camera’s.

Het cameranetwerk is een afgeschermd netwerk om de veiligheid, robuustheid en betrouwbare werking te garanderen. Camerasystemen zijn daarom niet toegankelijk voor apparatuur buiten het cameranetwerk, ze kunnen bijvoorbeeld niet door een videoswitcher of router bediend worden.

3.3 Doelstelling

Het doel is om een platform te ontwikkelen dat deel uitmaakt van het camernetwerk en dat alle camerasystemen in het netwerk kan monitoren en externe apparatuur toegang geeft tot die systemen.

Een afgeleide doelstelling is het ontwikkelen van een user interface voor dit platform waarbij de toegankelijkheid en de gebruiksvriendelijkheid zeer groot zijn.

(18)

Hoofdstuk 3 - Probleemanalyse

3.4 Product

De opdracht bestaat uit het ontwerpen, vormgeven en bouwen van een dynamische user interface voor het te ontwikkelen platform en de applicaties die erop draaien. De user interface moet voldoen aan de vastgelegde ontwerpeisen op het gebied van architectuur, grafische vormgeving en ontwikkelomgeving en moet in staat zijn om dynamische gegevens uit te wisselen tussen de gebruiker en het systeem.

Bij de afstudeeropdracht ligt de nadruk vooral op het aantonen van de geschiktheid van de gekozen technieken voor het doel en functie van de user interface.

(19)

Hoofdstuk 4 - Uitvoering

Hoofdstuk 4

Uitvoering

4.1 Pre-projectfase

4.1.1 Systeemkenmerken

Om een IT-project te kunnen uitvoeren, moeten we een ontwikkelmethode kiezen. De keuze voor de ontwikkelmethode wordt in grote mate bepaald door de kenmerken van het project en het op te leveren product. Daarom hebben we voor LDK Connect en de ontwikkeling van de user interface een aantal hoofdkenmerken genoteerd:

• Er is grote behoefte aan prototypes om de functionaliteit vast te stellen. • De gebruikers spelen een belangrijke rol.

• De hoofdfunctionaliteit is op te delen wordt stapsgewijs ontwikkeld.

Bij deze kenmerken denken we al snel aan een iteratief-incrementele ontwikkelmethode zoals RUP (Rational Unified Process), Scrum of DSDM (Dynamic Systems Development Method). We hebben gekozen voor DSDM omdat er al ervaring was met deze ontwikkelmethode.

4.1.2 Onderzoek geschiktheid DSDM

Om te onderzoeken of DSDM daadwerkelijk geschikt is als ontwikkelmethode voor dit project, hebben we een aantal belangrijke criteria getoetst aan de projecteigenschappen.

Tabel 4-1. Toetsing geschiktheid DSDM voor het project.

Nr. Beoordelingscriterium Opmerkingen Geschikt?

1 Is er voldoende actieve

gebruikersbetrokkenheid?

Veel workshops en demo’s gehouden, zowel intern als extern.

Ja

2 Heeft het ontwikkelteam voldoende

beslissingsbevoegdheid?

Managementlid is motivator van team, gebruikersambassadeur is product manager.

Ja

3 Kunnen er frequente (deel)opleveringen

gedaan worden?

Timeboxing is goed mogelijk omdat het systeem modulair is opgebouwd.

Ja

4 Geschikt voor het bedrijfsdoel? Zeer geschikt. Past in strategische visie

van het bedrijf (service-oriëntatie, productintegratie, informatie-ontsluiting).

Ja

5 Is iteratieve en incrementele ontwikkeling

mogelijk?

(20)

Zoals uit de tabel af te lezen valt, zijn de meeste criteria van toepassing op het project, met uitzondering van criterium 7 dat geen voldoende krijgt. Dit bleek ook tijdens de uitvoer van het project een steeds terugkerend onderwerp te zijn.

4.1.3 Risocoanalyse

Voordat we het project gaan uitvoeren, maken we een risicoanalyse. De risico’s worden vooraf in kaart gebracht, er wordt een weegfactor aan toegekend en er worden maatregelen bedacht om de risico’s te voorkomen of te beperken. Hieronder volgt een overzicht van de belangrijkste risico’s.

Tabel 4-2. Mogelijke bedreigingen voor het project.

6 Kunnen de eisen naar prioriteit ingedeeld

worden?

Er is een MoSCoW-lijst voor de functionele eisen opgesteld.

Ja

7 Zijn de eisen op hoog niveau voldoende

vastgelegd?

Lastig om goede functionele eisen te destilleren; ook voor bedrijf een leercurve.

Onvoldoende

8 Zijn gebruikers/gebruikersadviseurs goed

benaderbaar?

Er is veel overleg met medeontwikkelaars uit andere bedrijfsonderdelen en met klanten.

Ja

9 Is het ontwikkelteam niet te groot? Klein team (6): projectleider,

gebruikersambassadeur, een teamleider en drie ontwikkelaars.

Ja

10 Wordt er prototypevriendelijke

technologie gebruikt?

Door gebruik van softwaretools kan snel een prototype gebouwd worden.

Ja

11 Is de op te leveren toepassing voldoende

modulair?

Functionaliteit is goed op te delen in deelstukken.

Ja

12 Is het project rekenkundig niet te

complex?

Er zijn geen complexe algoritmes of berekningen nodig.

Ja

Nr. Beoordelingscriterium Opmerkingen Geschikt?

Nr. Bedreiging Kans Effect Risico Maatregelen

1 Het ontwikkelteam beschikt niet

over de juiste kennis en vaardigheden.

2 3 6 Kennis vergroten door bijscholen

(zelfstudie), of zoeken naar alternatieven.

2 Het doel en bereik van het project

zijn niet goed of niet duidelijk genoeg vastgelegd.

3 3 9 Het ontwikkelteam moet een

kritische houding aannemen v.w.b de functionele eisen: prioriteiten afdwingen.

3 De gekozen oplossingsrichting

blijkt niet de juiste te zijn.

2 5 10 Zeer moeilijk helemaal te

voorkomen. Ervaren ontwikkelaars inzetten.

4 Tijdens het project treden

wijzigingen op in de samenstelling van het ontwikkelteam.

1 3 3 Rollen vastleggen, goed

documenteren en alternatieve bezetting achter de hand houden.

5 Het project is of blijkt afhankelijk te

zijn van andere projecten.

3 3 9 Op tijd borgen dat de nodige

aanpassingen gedaan worden.

6 Er is te weinig draagvlak in het

bedrijf om de veranderingen die het project teweeg brengt te dragen.

1 2 2 Het project heeft bij implementatie

geen grote invloed op de organisatie.

(21)

4.1.4 Fasering

Zoals bij de meeste ontwikkelmethodes is het ontwikkeltraject bij DSDM in verschillende fases opgedeeld: de oriëntatiefase, de funtioneel model-fase, de ontwerpen bouwfase en de implementatiefase. Daarna volgen eventueel nog een post-projectfase of evaluatie. Figuur 4-3. Schematische voorstelling van het DSDM-ontwikkelingsmodel.

4.1.5 Timeboxing

Een van de belangrijkste kenmerken van DSDM is dat de methode een zeer strikte

tijdsplanning aan het ontwikkelteam oplegt. Een timebox is een vaste tijdsperiode waarin een (deel)functionaliteit moet worden opgeleverd. Het op tijd opleveren van de (deel)functionaliteit is belangrijker dan de functionaliteit zelf. Een voorwaarde is dan wel dat de functionaliteit deelbaar is en dat er prioriteiten kunnen worden toegekend aan de functies. In het geval van het afstudeerproject was dat het geval.

4.2 Oriëntatiefase

4.2.1 Haalbaarheidsonderzoek

In deze fase wordt het vooronderzoek gedaan naar technieken en naar het toepassingsgebied van het op te leveren product. Bij Grass Valley zijn het haalbaarheidsonderzoek en de

bedrijfsanalyse verenigd in het concept description plan (CDP), dat wordt opgesteld door de product manager. Hierin staan de primaire functies van het systeem beschreven, en ook de gewenste betrouwbaarheid en prestaties:

Ontwerp-prototype evalueren Ontwerp-prototype identificeren Tijdschema afspreken Ontwerp-prototype maken Functioneel prototype identificeren Tijdschema afspreken Functioneel prototype maken Prototype Evalueren Gebruikers opleiden Implementeren Bedrijf evalueren Gebruikers-goedkeuring en handleidingen Business Study Haal- baarheids-onderzoek Pre-projectfase Post-projectfase Functioneel model-fase Ontwerp- en bouwfase Implementatiefase Oriëntatiefase

(22)

• Samenstelling en verantwoordelijkheden van het projectteam; • Doel en bereik van het project;

• Commerciële haalbaarheid van het op te leveren systeem; • Beschrijving van de globale functionaliteit;

• Marktonderzoek en financiële onderbouwing.

4.2.2 Bedrijfsanalyse

Plan van aanpak

Een van de onderdelen van de bedrijfsanalyse is het opstellen van een plan van aanpak voor het uit te voeren project. Het plan van aanpak is de leidraad tijdens het uitvoeren van het project. De meeste onderwerpen uit het van het plan staan al in de hoofdstukken 2 t/m 5 van dit verslag beschreven, zodat hier wordt volstaan met de nog niet beschreven onderdelen.

Projectactiviteiten

De volgende projectactiviteiten werden uitgevoerd: • Uitvoeren onderzoek (probleemanalyse). • Uitvoeren functioneel mode-fase. • Uitvoeren ontwerp-en bouwfase.

Projectgrenzen en randvoorwaarden

• Lengte — het afstudeerproject en daarmee het ontwikkeltraject voor de user interface duurt in totaal 18 weken (week 15 t/m week 33).

• Breedte — de afstudeeropdracht omvat de ontwikkeling van de view-laag (user interface) van het bestaande project LDK Connect.

• Randvoorwaarden — beschikbaarheid van tools, ontwikkelhardware en tijd om onderzoek te doen en verslagen te schrijven.

Producten

De volgende eindproducten zullen worden opgeleverd:

• Een afstudeerverslag (waarin proces- en productverslag zijn gecombineerd). • Een werkend prototype van het eindresultaat (user interface + simulatieomgeving).

Architectuur

De architectuur vormt de ruggegraat van een informatiesysteem en dient dus al vroeg bepaald te worden. De bedrijfsanalyse - en met name de probleemanalyse - leveren de informatie waarmee een architectuurkeuze gemaakt kan worden. In het geval van LDK Connect is dat een client-serverarchitectuur, waarbij de user interface de view-laag voorstelt. In hoofdstuk 5 wordt in detail ingegaan op de systeemarchitectuur.

Teamsamenstelling

Een projectteam wordt gevormd op basis van de grootte, aard en complexiteit van het uit te voeren project. Op basis van de concept en de systeemarchitectuur kunnen de gevraagde expertises van de ontwikkelaars bepaald worden. In paragraaf 2.2 op pagina 14 wordt de teamsamenstelling van LDK Connect beschreven.

(23)

4.3 Functioneel model-fase

De functioneel model-fase dient om de gebruikerseisen zo duidelijk mogelijk naar boven te halen en de functionaliteit van het systeem vast te leggen. Er zijn een aantal iteraties mogelijk die nieuwe functionele eisen opleveren, of bestaande eisen gedetailleerder vastleggen.

Iteratie 1

Het ontwikkelteam heeft in overleg met de product manager, die de rol van opdrachtgever vervult, de lijst van functionele eisen voor LDK Connect opgesteld. Dit is een verfijning van de functionaliteit die in het concept description plan is vastgelegd.

Iteratie 2

In de ontwerpen bouwfase is er een ontwerpprototype ontwikkeld van de webinterface die we in juni konden presenteren in een workshop waarbij het hoofd techniek van een grote klant, Cinevideogroup, was uitgenodigd. Door gerealiseerde functionaliteit te tonen hebben we de functionele eisen verder kunnen uitwerken en uitbreiden. De toegevoegde functionele eisen van de tweede iteratie zijn toegevoegd aan tabel 4-4 onder nummers 13 t/m 16.

4.3.1 Prioriteiten bepalen

Aan de functionele eisen worden door het team prioriteiten toegekend volgens het MoSCoW-principe. Dit woord is een acroniem voor de volgende classificaties:

• Must have — zonder deze eis kan het product niet opgeleverd worden. Bovendien moeten alle must haves worden uitgevoerd in het eindproduct.

• Should have — een eis die weliswaar niet noodzakelijk is voor de werking van het systeem maar wel zeer gewenst is.

• Could have — deze eis kan worden gehaald als er genoeg tijd en budget is om hem te realiseren.

• Would like to have — een eis die wel genoteerd wordt, eventueel voor toekomstige ontwikkelingen, maar in het huidige project niet wordt gerealiseerd.

4.3.2 Functionele eisen

Onderstaande tabel somt de functionele eisen op voor de user interface van LDK Connect. De eisen zijn een afgeleide van de functionele eisen die voor LDK Connect zijn opgesteld.

Tabel 4-4. Functionele eisen voor LDK Connect.

Nr. Omschrijving Prioriteit

1 Geeft C2IP-netwerkinstellingen weer Must

2 Geeft Public Ethernet-instellingen weer Must

3 Geeft C2IP-netwerkverkeer weer Should

4 Geeft Public Ethernet-netwerkverkeer weer Should

5 Toont lijst met XML-clients en hun detailgegevens Must

6 Toont lijst met C2IP-clients (camerasystemen) met hun detailgegevens Must

7 Legt systeemidentificatie vast Could

8 Maakt onderhoud van softwarelicenties mogelijk Would

(24)

4.3.3 Niet-functionele eisen

Onderstaande tabel somt de niet-functionele eisen op: Tabel 4-5. Niet-functionele eisen voor LDK Connect.

4.4 Ontwerp- en bouwfase

Deze fase loopt gedeeltelijk parallel met de functioneel model-fase, omdat de in deze fase gebouwde ontwerpprototypes dienen om de functionaliteit beter vast te leggen of verder te verfijnen. Deze fase is een aantal keer doorlopen, waarna er teruggekeerd is naar de functioneel model-fase.

Tijdens deze fase wordt de functionaliteit daadwerkelijk gerealiseerd, inclusief de niet-functionele eisen. Het resultaat is een oplevering van een deel van de functionaliteit, afhankelijk van de gesteld prioriteit. Eerst worden de Must en daarna de Should have-eisen afgehandeld en als er nog tijd is de Could haves.

Ieder stuk functionaliteit wordt in deze fase ook getest. In het geval van de user interface voor LDK Connect is vooral de browser-compatibiliteit regelmatig getest.



10 Houdt logfiles met statusgeschiedenis bij Could

11 Maakt onderhoud van gebruikersaccounts mogelijk Could

12 Ondersteunt webservices Would

13 Geeft cameralocaties op een plattegrond weer Must

14 Kan verschillende plattegronden laden en gebruiken Should

15 Toont lijst met cameralocaties en hun detailgegevens Must

16 Maakt onderhoud van locaties mogelijk Should

Nr. Omschrijving Prioriteit

Nr. Omschrijving

1 Is bestand tegen C2IP-netwerkoverbelasting

2 Draait op een standaard, door Grass Valley voorgeschreven, hardwareplatform

3 Draait 24 maanden zonder down-time

4 Kan benaderd worden met behulp van een standaard browserclient

5 Detecteert aan de Public Ethernet-kant binnen 1 s een nieuw C2IP-device

6 Eerste keer opstarten duurt minder dan 180 s

7 Koude start duurt minder dan 90 s

8 Herstelt in minder dan 120 s van ernstige fouten

9 Wordt niet beïnvloed door kortdurende onderbrekingen van de verbinding

10 Staat minimaal 5 simultane gebruikers toe

(25)

4.5 Implementatiefase

Het daadwerkelijk in gebruik nemen van de webinterface van LDK Connect valt buiten het bestek van de afstudeeropdracht. Er is uiteindelijk gekozen voor een ‘proof of concept’-benadering met een gesimuleerd cameranetwerk. Zie ook het volgende hoofdstuk voor de realisatie van het eindproduct.

De implementatiefase is op het moment van schrijven (augustus 2011) in volle gang. De activiteiten die voor het integreren van de user interface door het ontwikkelteam moeten worden uitgevoerd zijn:

• Omzetten van HTML en PHP-templates naar C++ implementatie; • Unit- en systeemtests uitvoeren;

(26)

(27)

Hoofdstuk 5 - Architectuur

Hoofdstuk 5

Architectuur

5.1 LDK Connect

5.1.1 Camera control network

Een cameranetwerk bestaat uit camera’s, base stations en verschillende typen control panels (OCP’s en MCP’s) die de camera's bedienen. Grass Valley heeft een netwerkinfrastructuur ontwikkeld die is gebaseerd op Ethernet TCP/IP technologie: C2IP (‘Camera Control over IP networks'). Op het C2IP-netwerk wordt een eigen protocol gebruikt, genaamd NewSpeak, om alle systeemcomponenten met elkaar te laten communiceren.

Figuur 5-1. Camera control network met LDK Connect.

5.1.2 XML Gateway

Een van de hoofdfuncties van LDK Connect is de XML Gateway. Een gateway is een apparaat dat twee gescheiden netwerken met elkaar verbindt. Het zorgt in dit geval ook voor de vertaling van het ene naar het andere netwerkprotocol. Het cameranetwerk werkt met Grass Valley’s eigen NewSpeak-protocol terwijl de aansturing van buitenaf met het universele XML-protocol werkt. C2IP netwerk Publiek netwerk LDK Connect Server Browser client Operational Control Panels Master Control Panel Camerasystemen Video-switcher Master Black USB Iris 34 F4.5RE 2 XML client 1

(28)

5.1.3 XML Protocol

Dit protocol maakt het mogelijk om bedieningsfuncties en -waarden van camera’s op te vragen en in te stellen. Een client kan zich ook abonneren (‘subscribe’) op een functie om te

veranderingen te monitoren.

Hieronder staat een voorbeeld van een XML-bericht om de camerafunctie 546 (‘Detail Level’, een videofunctie) van camera 23 een waarde van 50 te geven:

<function-value-change>

<type>CameraSystem</type>

</function>

</function-value-change>

Het XML protocol staat beschreven in een apart gepubliceerde ‘XML Protocol specification’.

5.2 Systeeminrichting

5.2.1 Client-serverarchitectuur

Bij het opzetten van een user interface voor LDK Connect gaan we uit van de bestaande client-serverarchitectuur van LDK Connect. Op basis van deze architectuur moeten we een aantal keuzes maken voor de verdere inrichting van het gebruikerersinterface-subsysteem. Hieronder volgen de keuzes en afwegingen.

5.2.2 Keuze 1: Client side

Een webinterface is een bijzondere client-serverapplicatie in de zin dat de clientapplicatie niet (volledig) door de ontwikkelaar bepaald kan worden; dit is immers een door de gebruiker gekozen webbrowser. Gelukkig biedt het gebruik van JavaScript1 tegenwoordig veel mogelijkheden om de client toch voldoende flexibel te kunnen inrichten.

Tabel 5-2. Mogelijkheden voor client side-inrichting.

Het lijkt erop dat een AJAX-framework, ofwel een geïntegreerde omgeving voor het bouwen van webapplicaties, zoals Google Web Toolkit, hier de beste keuze is. Vooral de goede ontwikkelingsintegratie, onderhoudbaarheid en compatibiliteit zijn gunstige aspecten die voor deze keuze spreken.

AJAX-framework (Google Web Toolkit)

HTML+ JavaScript-biliotheek (jQuery)

Ontwikkelingsintegratie Zeer goed Matig

Onderhoudbaarheid Goed Matig

Testbaarheid Zeer goed Matig

Browser-compatibiliteit Goed Redelijk

Aanpasbaarheid Matig Zeer goed

(29)

AJAX-frameworks nemen de ontwikkelaar een hoop werk uit handen, zoals het programmeren van JavaScript en het valideren van HTML-code.

Echter, doordat we in een bestaande omgeving werken waarin al eerder keuzes zijn gemaakt voor systeemontwikkeling en architectuur, is de keuze toch op HTML + JavaScriptbibliotheek gevallen.

Een andere reden om voor dit project voor een HTML+JavaScript te kiezen, is dat het veel duidelijker zichtbaar hoe de verschillende componenten op een lager niveau samenwerken. Vanuit didactisch oogpunt is dit een groot voordeel.

5.2.3 Keuze 2: Grafische vormgeving

Aan de grafische vormgeving van de webinterface werden door het management vanaf al bij de start van het project hoge en specifieke eisen gesteld. Dit heeft te maken met de integratie van LDK Connect met andere productgroepen van Grass Valley. Natuurlijk speelt ook mee dat Grass Valley een multimediabedrijf bij uitstek is. Zoals in een eerder hoofdstuk al is

aangegeven, is voor het grafisch ontwerp een extern ontwerpbureau (‘The Alloy’) ingeschakeld. Tabel 5-3. Keuze voor de grafische vormgeving.

Door de gestelde hoge eisen voor de grafische layout blijkt de matige aanpasbaarheid van GWT een probleem op te leveren. De enige oplossing zou zijn om zelf GWT-widgets (user interfacecomponenten) moeten ontwerpen, maar dat kost veel tijd.

Daarom is voor LDK Connect gekozen voor een ontwerp met HTML+CSS+JavaScript waarmee zeer exact tegemoet kon worden gekomen aan de eisen. Een nadeel is dat de compatibiliteit met verschillende browsers moest worden onderzocht met een langer validatie- en testtraject tot gevolg.

5.2.4 Keuze 3: Webserver

Vanwege de open source-licentie, de eenvoudige installatie en de goede ondersteuning is voor de Apache gekozen. Er is ook een stand-alone van Apache (XAMPP) beschikbaar die bij het ontwikkelen zeer nuttig is gebleken.

5.2.5 Keuze 4: Server side scripting

Voor de keuze van de server side scripting zijn er verschillende mogelijkheden. Voor LDK Connect bestond al programmatuur (gecompileerde C++) dat als CGI-programma wordt uitgevoerd. Het gecompileerde C++-programma genereert de HTML-code die via een named

pipe naar de webserver wordt gestuurd.

Tabel 5-4. Keuze voor de server side scripting. GWT Designer (Google)

HTML+ CSS+JavaScript-bibliotheek (jQuery)

Ontwikkelgemak (modulariteit) Goed Redelijk

Aanpasbaarheid Matig Goed

HTML + PHP C++ via CGI

Robuustheid Goed Goed

Geschiktheid voor webinterfaces Goed Matig

(30)

Voor de ontwikkeling van de webinterface is PHP een veel logischere keuze. Er hoeft niet gecompileerd te worden en PHP is speciaal ontworpen om specifieke serverfuncties uit te voeren, zoals redirecting, database-manipulaties en het parser van bijvoorbeeld JSON- en XML-berichten. Bovendien is PHP-script eenvoudig te combineren met HTML zodat er snel een werkende pagina gemaakt kan worden.

5.2.6 Keuze 5: Berichtenverkeer

Ook voor het berichtenverkeer tussen client en server dient een interfaceprotocol en een uitwisselingsformaat te worden gekozen. De standaardkeuze bij het gebruik van AJAX is XMLHttpRequest1 voor de interface en XML (eXtensible Markup Language) als

bestandsformaat. Er is ook een wat compacter alternatief: JSON (JavaScript Object Notation). Tabel 5-5. Keuze voor het formaat van het berichtenverkeer.

Omwille van de compactheid (en de snelheid) en de goede ondersteuning door jQuery en PHP is gekozen voor JSON als formaat voor het berichtenverkeer.

5.2.7 Architectuurdiagram

Als we alle keuzes voor de systeeminrichting hebben gemaakt krijgen we het onderstaande architectuurdiagram.

Figuur 5-6. Webinterface met AJAX-architectuur.

1. XMLHttpRequest wordt niet door alle browsers ondersteund, maar verschillende

JavaScriptbiblio-XML JSON

Compatibiliteit Goed Goed

Leesbaarheid Goed Redelijk

Omvang van de berichten Groot Klein

Ajax Engine (jQuer

y) User interf ace JavaScript-aanroep HTML Database (MySQL) Apache webser ver Ser

ver side scripting (PHP)

SQL query Recordset-data XMLHttpRequest HttpRequest JSON data

Client

Server

HTML data rf a ce

(31)

5.3 Gesimuleerde omgeving

5.3.1 Datamodel

Om niet afhankelijk te zijn van een fysiek cameranetwerk en niet te hoeven wachten op de oplevering van de rest van de software van LDK Connect, is er een simulatieomgeving opgezet die voor de user interface precies zo reageert als een echt cameranetwerk.

Voor het simuleren van een camerasysteem is een datamodel gemaakt. Dit model is niet alleen handig voor het opzetten van de gesimuleerde omgeving, maar ook om een goed inzicht te krijgen welke informatie beschikbaar moet zijn in het op te leveren systeem.

Figuur 5-7. Conceptueel datamodel van het camerasysteem.

5.3.2 Simulator backoffice

Omdat het datamodel slechts een statische voorstelling van het cameranetwerk geeft, en we juist in het dynamische aspect van de webinterface zijn geïnteresseerd, is er een backoffice-applicatie gemaakt. Dit is een eenvoudig invoerscherm waarmee de gegevens in de database aangepast kunnen worden. Het aanpassen van de attributen van een camera in de database correspondeert dan met een dynamische overgang die zichtbaar wordt in de user interface. Twee andere elementen uit de user interface die dynamisch worden gesimuleerd zijn de Netwerkstatus in de XML Gateway-tab en de Systeemstatus in de System-tab. Hier worden door middel van AJAX random getallenreeksen gegenereerd om aan te tonen dat de interface werkt.

5.3.3 Portable server

Tijdens het ontwikkelen is de portable versie van de webserver Apache gebruikt die door Apache Friends wordt gedistribueerd. Deze versie van Apache wordt ook gebruikt om de user interface te demonstreren. CameraHead Camnum Enabled Supported Type OnAir Iso Calsignal System PckHead VMode Message Temphead A3 BL BL A8 BL BL BL A15 A4 A15 A50 I <M> <M> <M> <M> <M> <M> <M> <M> <M> <M> <M> <M> OCP OCPId OCPType PckOCP A2 A15 A4 <M> <M> <M> Location Label Lens Mounts Type Name MapX MapY A2 A15 A35 A8 A25 A6 A6 <M> <M> <M> <M> <M> <M> <M> Basestation BSId BSType PckBS Quality Reference Genlock A2 A15 A4 I BL BL <M> <M> <M> <M> <M> <M> Adapter AdapId AdapType PckAdap TempAdap A2 A15 A4 I <M> <M> <M> <M> Viewfinder SuperXpander is gekoppeld aan (3) is gekoppeld aan (2) is gekoppeld aan (1) is verbonden met bestuurt staat op XMLclients ID Name XMLVersion IPAddress Port TimeConn. LastMessage PacketsSent PacketsRec. BytesSent BytesRec. A2 A40 A5 A15 A4 A15 A15 I I I I <M> <M> <M> <M> <M> <M> <M> <M> <M> <M> <M>

(32)

(33)

Hoofdstuk 6 - Resultaten

Hoofdstuk 6

Resultaten

6.1 Opbouw van de interface

6.1.1 Structuur

De webinterface heeft een modulaire opzet, waarbij het hoofdscherm een aantal tabbladen bevat die toegang geven tot de verschillende applicaties van het systeem. De tabbladen zijn ondergebracht in aparte HTML-pagina's die naar elkaar linken. Als er in een tabblad nog subtabs worden gebruikt, worden deze door middel van een PHP-script geïmporteerd in het

hoofdtabblad. De naam van het te openen subtabblad wordt dan via de URL doorgegeven (bijvoorbeeld: 'c2ip.php?t=operation').

Pagina's met actieve inhoud worden door middel van JAVA-requests ingevoegd vanuit de server. Hiervoor wordt per tabblad een JavaScriptbestand geïmporteerd dat deze requests afwikkelt.

Ten slotte zijn er pop-upschermen, zoals het detailscherm met camera-informatie. Deze schermen worden door jQuery aangeroepen (met de '$.dialog'-functie) en verder als normale HTML-pagina's uitgevoerd.

Figuur 6-1. Boomstructuur LDK Connect webinterface

XML Gateway index.php Install _c2ip_install.php Setup _c2ip_setup.php Floor view _floor_floorview.php C2IP c2ip.php Floor floor.php System system.php About about.php LDK Connect Main Operation _c2ip_operation.php Locations _floor_locations.php

(34)

6.1.2 Uitwerkingen

In dit hoofdstuk worden twee voorbeelden van interactieve componenten van de webinterface verder uitgewerkt:

• Operation-tab, die de operationele informatie van de camera’s weergeeft. Zie voor de functionele beschrijving van deze sectie paragraaf 7.3.3 op pagina 43.

• Floor view-tab, die de actuele cameralocaties op een plattegrond weergeeft. Zie voor de functionele beschrijving van deze sectie paragraaf 7.4.2 op pagina 45.

☞

Opmerking

In de uitgewerkte voorbeelden zijn de niet-relevante stukken code weggelaten.

6.2 Uitwerking operation-tab

6.2.1 HTML-code

De HTML-code is het basis-sjabloon voor de opbouw van de webinterface. In de header van de pagina worden de CSS-files (voor de opmaak) en de JavaScriptfiles (voor de clientfuncties) geïmporteerd.

Broncode 6-2. HTML-code voor het afbeelden van de C2IP-tab (“c2ip.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>LDK Connect | C2IP Monitoring</title>

<body>

(35)

</div>

// Wacht tot het hele document ingeladen is en start dan het updaten van de tabel

refreshTableOperation(); });

</script>

<span class="section_titles">Camera systems:</span> <div class="table_large_heading">

6.2.2 JavaScript-code

Dit is een gedeelte van de JavaScriptcode dat de opbouw van de cameratabel voor zijn rekening neemt. Met behulp van jQuery wordt een AJAX-request gestuurd aan het PHP-script “getCameraData.php”, dat op de server staat.

Dit script levert een JavasScript-object (“data”) in JSON-opmaak terug dat een dataset met cameragegevens bevat. Vervolgens wordt het object als array uitgelezen en een HTML-tabel gecontstrueerd. Ten slotte wordt deze tabel met behulp van jQuery in de HTML-code gestopt. Broncode 6-3. JavaScript-code voor het aanmaken van de cameratabel (“c2ip.js”).

function refreshTableOperational() {

// Eerste keer tabel aanmaken

getTableOperational();

// Steeds herhalen na 1.5s tussentijd

setTimeout("refreshTableOperational()", 1500); }

function getTableOperational() {

// Haal met een AJAX-request data op van de server als JSON-bericht

(36)

// Maak HTML-tabel leeg

$("#dynaTable").empty();

// Bouw tableHead op in string

$("#dynaTable").append('<thead>'); var strTableHead = "";

strTableHead += "<tr>";

strTableHead += "<th width=\"83px\" class=\"large\">Number</td>"; strTableHead += "<th width=\"83px\" class=\"large\">Type</td>"; strTableHead += "<th width=\"83px\" class=\"large\">System</td>"; strTableHead += "<th width=\"83px\" class=\"large\">On Air</td>"; strTableHead += "<th width=\"83px\" class=\"large\">Quality</td>"; strTableHead += "<th width=\"43px\" class=\"large\">Ref.</td>"; strTableHead += "<th width=\"43px\" class=\"large\">Gen.</td>"; strTableHead += "<th class=\"large\">Message</td>";

strTableHead += "</tr>";

// hang de gebouwde table header aan het DOM-element THEAD

$("#dynaTable").find('thead').append(strTableHead);

// Bouw tableBody op in string

$("#dynaTable").append('<tbody>'); var strTableBody = "";

var YesNo = new Array("No","Yes"); var OnAirBulb = new Array("grey","red"); var IsoBulb = new Array("grey","yellow"); var CallBulb = new Array("grey","green");

var OddEven = new Array("alternatingColor_2","alternatingColor_1");

// loop door alle elementen met de Query-iterator ‘each’

$.each(data, function(key){ strTableBody+= "<tr class='"+OddEven[key%2]+"' onMouseOver=\"this.className='alternatingColor_3';this.style.cursor='pointer'\" onMouseOut=\"this.className='"+OddEven[key%2]+"'\" onclick = \"openDialog('details_camera.php?camnum="+this["Camnum"]+"', 'details', 425, 525);\">"; strTableBody+= "<td class=’cell80px’>"+this["Camnum"]; if (this["Message"] != "") {

strTableBody += "<img src='warning_icon.gif' class='inline'>"; }

strTableBody+= "</td>";

strTableBody+= "<td class=’cell80px’>"+this["Type"]+"</td>"; strTableBody+= "<td class=’cell80px’>"+this["System"]+"</td>"; strTableBody+= "<td class=’cell80px’>";

strTableBody+= "<img src=’bulb_"+OnAirBulb[this["OnAir"]]+".gif’>"; strTableBody+= "<img src=’bulb_"+IsoBulb[this["Iso"]]+".gif>";

strTableBody+= "<img src=’bulb_"+CallBulb[this["Calsignal"]]+".gif’>"; strTableBody+= "</td>";

strTableBody+= "<td class=’cell80px’><img src=’/blue.gif’ height=’10\" width=’"+this["Quality"]+"’></td>"; strTableBody+= "<td class=’cell40px’>"+YesNo[this["Reference"]]+"</ td>"; strTableBody+= "<td class=’cell40px’>"+YesNo[this["Genlock"]]+"</td>"; strTableBody+= "<td class=’cell’>"+this["Message"]+"</td>"; strTableBody+= "</tr>"; });

// hang de gebouwde table body aan het DOM-element TBODY

$("#dynaTable").find('tbody').append(strTableBody); });

(37)

6.2.3 PHP-script

Het PHP-script staat op de server en wordt aangeroepen door een AJAX-request. Het script maakt een connectie naar een MySQL-database (die ook op de server staat) en haalt met een query een recordset op. Deze wordt vervolgens als JSON-bericht naar de client teruggestuurd. Broncode 6-4. PHP-script voor het ophalen van de cameradata (“getCameraData.php”).

<?php

// Genereer een text-type header voor het JSON-bericht

header('Content-Type: text/JavaScript'); header('Cache-Control: no-cache'); header('Pragma: no-cache');

// Haal de camera-informatie op uit de database

$connection = mysql_connect("localhost","root"); if (!$connection) {

die("Could not connect to database: ".mysql_error()); }

mysql_select_db("cambase", $connection);

$query = "SELECT * FROM cameras WHERE Enabled = '1' ORDER BY Camnum ASC"; $result = mysql_query($query);

// Zet om naar een array en voer uit als JSON-gecodeerd bericht

$rs = array(); while($row = mysql_fetch_assoc($result)){ array_push($rs,$row); } echo json_encode($rs); // Sluit de database-verbinding mysql_close($connection); ?>

6.3 Uitwerking floorview-tab

6.3.1 HTML/PHP-code

Dze pagina vraagt met behulp van PHP-script alle locatiegegevens uit de database. Met deze gegevens worden vervolgens JavaScriptfuncties gebouwd die er op hun beurt voor zorgen dat de camera-ikoontje worden toegevoegd aan de ‘floor’.

Broncode 6-5. HTML-code voor het aanmaken van de floorview.

<...>

<...>

// ophalen informatie uit database en daarna JavaScript genereren

$connection = mysql_connect("localhost","root");

(38)

mysql_select_db("cambase", $connection);

$query = "SELECT * FROM Locations ORDER BY Label ASC"; $result = mysql_query($query);

$rows = mysql_num_rows($result);

while ($row = mysql_fetch_array($result)){

echo "addLocation('".$row[Label]."','".$row[Camnum]."', '".$row[Name]."','".$row[MapX]."','".$row[MapY]."');\n"; }

mysql_close($connection); ?>

// Voorbeeld van gegenereerde JavaScriptcode (run time): //

// addLocation('16HiL','21', '16m High Left','562px','345px'); // addLocation('16HiR','30', '16m High Right','44px','202px'); // addLocation('Cb','80', 'Centre Back','595px','5px');

// addLocation('FGL','22', 'Low Goal Left','20px','284px'); // addLocation('FGR','23', 'Low Goal Right ','710px','200px'); // addLocation('GLL','31', 'Goal Line Left','721px','285px'); // addLocation('GLR','21', 'Goal Line Right','279px','247px'); // addLocation('LL','80', 'Left Luggage','719px','65px'); // addLocation('MC1','', 'Main Camera','125px','345px');

// wacht tot hele pagina ingeladen is en start dan de AJAX-refresh

$(document).ready(function() { refreshCameraStatus(); }); </script> <...>

6.3.2 JavaScript-code

De JavaScript-functie ‘AddLocation’ maakt het camera-ikoon aan. Het maakt gebruik van de jQueryUI-functie ‘draggable’. De afbeeldingen worden gestapeld (via z-indexing) en er wordt een dialoogscherm toegevoegd (om het pop-upscherm met detailgegevens te tonen). Ook wordt de event-trigger ‘stop’ toegekend aan de draggable-status. Dit betekent dat als het ikoontje wordt losgelaten, het script ‘postLocation.php’ wordt uitgevoerd.

Broncode 6-6. JavaScript-code voor de functie “addLocation()”.

function addLocation(label,camnum,name,posx,posy) {

// opbouwen string voor het toevoegen van de versleepbare DIV

var camStr = "";

camStr += "<div id='" + label + "' "; camStr += "class='draggable_layout' ";

camStr += "style='text-align: center; position: absolute; left: "+posx+"; top: "+posy+";'>";

camStr += "<div style='width:70px;height:60px;position:relative;'>"; camStr += "<img src='img/fieldcam_grey.gif' id='cam_" + label + "' alt='' title='' style='position:absolute;left:0px;top:5px;z-index:1'"; if (camnum != ""){ camStr += " onDblclick=\"openDialog(\'details_camera.php?camnum="+camnum+"\',\'details\',42 5,525);\""; } camStr += ">";

camStr += "<img src='img/warning_empty.gif' id='war_" + label + "' style='position:absolute;left:40px;top:0px;z-index:2;'>";

camStr += "<img src='img/bulb_small_grey.gif' id='air_" + label + "' style='position:absolute;left:16px;top:43px;z-index:3;'>";

(39)

camStr += "<img src='img/bulb_small_grey.gif' id='iso_" + label + "' style='position:absolute;left:30px;top:43px;z-index:4;'>";

camStr += "<img src='img/bulb_small_grey.gif' id='cal_" + label + "' style='position:absolute;left:44px;top:43px;z-index:5;'>"; camStr += "</div>"; camStr += name; if (camnum != ""){ camStr += " ("+camnum+")"; } camStr += "</div>";

// met jQuery de div toevoegen en versleepbaar maken

$("#floorcontainer").append(camStr); $(".draggable_layout").draggable();

// Voeg een event-trigger toe voor het stoppen met slepen

// bij droppen van het icoon eindpositie opslaan met AJAX in database

$(".draggable_layout").draggable({ containment: "#floorcontainer", stop: function(event,ui){ strlabel=this.id; strx=this.style.left; stry=this.style.top;

$.post("postLocation.php", { label: strlabel, x: strx, y: stry } ); }

}); }

6.3.3 PHP-script

Dit is het PHP-script dat zorgt voor het wegschrijven van de eindlocatie van het camera-ikoon naar de database. Het script wordt aangeroepen door een AJAX-request van de webpagina. Broncode 6-7. PHP-script voor opslaan eindposite camera-ikoon in database.

<?php

// haal gegevens op van AJAX-post request

$label= $_POST['label']; $X = $_POST['x'];

$Y= $_POST['y'];

// Maak connectie met database

$connection = mysql_connect("localhost","root");

if (!$connection) { die("Could not connect to database: ".mysql_error()); } mysql_select_db("cambase", $connection);

// Sla positie van draggable icoon op in database

$query = "UPDATE Locations SET MapX = '".$X."', MapY = '".$Y."' WHERE Label = '".$label."'";

mysql_query($query);

// Sluit de database-verbinding

mysql_close($connection); ?>

(40)

(41)

Hoofdstuk 7 - Handleiding LDK Connect

Hoofdstuk 7

Handleiding LDK Connect

7.1 Inleiding

7.1.1 Toegang tot de webinterface

In de uiteindelijke versie van de webinterface zal een gebruiker moeten inloggen in het systeem, maar voor de ontwikkeling van de webinterface is deze functionaliteit buiten beschouwing gelaten.

In de gesimuleerde omgeving is de webinterface direct op te roepen door in de browser het volgende adres in te geven:

http://localhost

7.1.2 Simulator backoffice

De webinterface van LDK Connect draait in een gesimuleerde camera-omgeving en om het systeem te testen is er een backoffice beschikbaar waarin de parameters van de gesimuleerde camera’s kunnen worden aangepast. Open het backoffice door in de browser het volgende adres in te geven:

http://localhost/sim.php

(42)

Bovenaan in het scherm staan alle gesimuleerde camera’s. Klik op een van de camera’s om de parameters te tonen. In het invoerscherm kunnen nu alle gegevens willekeurig gewijzigd worden. Klik op Save om de wijziging te bevestigen.

☞

Opmerking

De ingevoerde wijzigingen worden direct zichtbaar in de webinterface.

7.2 XML Gateway

7.2.1 Tabs

Bovenaan het hoofscherm bevinden zich een aantal tabs, die corresponderen met de

verschillende hoofdfuncties en applicaties van het systeem. Klik op een tab om het scherm te openen.

De eerste tab, XML-Gateway, toont de instellingen en de eigenschappen van de gateway-applicatie. De gateway zorgt voor het verbinden van externe clients met het C2IP-netwerk en het vertalen van het XML-protocol naar C2IP-commando’s (camera-commando’s).

Figuur 7-2. Schermlayout van de XML Gateway-applicatie.

7.2.2 Statusbalk

Toont de (studio)naam en locatie van de LDK Connect server. Deze blijft permanent zichtbaar in alle schermen.

LDK Connect: RTL4 / OB Van #2

LDKCONNECT C2IP Floor System About

Network Status Network IP Settings

XML Clients

Floor Tally Studio Sent Received 6634 Packets Bytes 6124 892 kB 547 kB 188.77.1.2 1.1

Number: Type IP Address XML

Producer Harry Ttruman 127.0.0.1 1.0

Tally Manager #4 177.192.0.1 Tracker guy 168.180.1.199 1.0 1.0 2 hrs 15 mins Time connected 4 hrs 12 mins 29 hrs 45 mins 7 hrs 8 mins 10:45:22 Last message 09:45:09 12:44:01 15:45:00 Subnet mask Gateway IP address 192.168.1.15 255.255.0.0 255.255.0.0 XML Gateway

(43)

7.2.3 Network status

Toont het dataverkeer (verstuurd/ontvangen) van het publieke netwerk in kBytes en packets.

7.2.4 Network IP Settings

Toont het IP-adres-, subnet mask- en gateway-instellingen voor het publieke netwerk. Deze instellingen kunnen alleen in het operating systeem van de server worden gewijzigd.

7.2.5 XML Clients

Dit is een lijst van alle bij de gateway aangemelde XML clients. Dit kunnen andere Grass Valley studioapparaten zijn (zoals een videoswitcher) of een software-applicatie die op een computer draait. De tabel toont de naam van de client, zijn IP-adres, de XML-versie waarmee de client zich heeft aangemeld, de tijd gedurende welke hij is aangemeld en het tijdstip van het laatstverstuurde bericht.

Klik op een XML client (horizontale rij) in de lijst om een detailscherm te openen dat de gedetailleerde gegevens van de geselecteerde XML client weergeeft.

7.3 C2IP Monitoring

De C2IP Monitoring-applicatie toont een overzicht van alle camerasystemen die zich in het cameranetwerk bevinden en geeft relevante gegevens van ieder systeem weer.

Bovenaan het scherm zijn twee ingeklapte panelen zichtbaar: Network Status en Network IP Settings. Door op het pijltje aan de rechterkant te klikken worden de panelen uitgeklapt en wordt de informatie zichtbaar:

7.3.1 Network status

Toont dataverkeer (verstuurd/ontvangen) van het C2IP-netwerk in kBytes en packets.

7.3.2 Network IP Settings

Toont het huidige IP-adres-, subnet mask- en gateway-instellingen van het C2IP-netwerk. Deze instellingen kunnen op de server in het operating systeem worden gewijzigd.

7.3.3 Lijst met camerasystemen

De monitoringgegevens van de camerasystemen zijn opgedeeld in drie functionele groepen die te vinden zijn onder de gelijknamige subtabs in het hoofdscherm:

– Operation: informatie die tijdens een operationeel gebruik nuttig is, zoals de On-Air status, de signaalkwaliteit en eventuele foutmeldingen.

– Install: gegevens die tijdens de installatie van een cameranetwerk relevant zijn, voornamelijk software-packageversies van de verschillende systeemdelen. – Setup: informatie die net voor een uitzending uitgelezen wordt, zoals interne

(44)

Figuur 7-3. Schermlayout van de C2IP Monitoring-applicatie.

7.3.4 Camera-detailinformatie

Klik op een camera (horizontale rij) in de lijst om een detailscherm te open dat alle beschikbare gegevens van de geselecteerde camera weergeeft. De informatie is ingedeeld per

systeemcomponent: camera head, camera adapter, base station, transmissie en het bedieningspaneel (operational control panel).

Het paneel dat de informatie van de camera head toont wordt standaard uitgeklapt, de overige gegevens worden zichtbaar door op de grijze pijltjes aan de rechterkant te klikken.

Figuur 7-4. Detailscherm camerasysteem.

LDKCONNECT XML Gateway Floor System About

Network Status

Camera systems:

Network IP Settings

Number: Type System On Air Quality Ref. Gen.

---!

4 LDK 3000 3G-Triax Yes Yes Not a valid system

Message

!

---!

21 LDK 3000 Triax Yes Yes Camera is not initialized

!

22 LDK 3000 Triax Yes Yes High temperature alert

!

23 LDK 4000 Fiber Yes Yes Oeps!

30 LDK 6000 Triax Yes Yes

-30 LDK 6000 Triax Yes Yes

-Operation Install Setup

C2IP C2IP Camera Head Details Adapter Base Station Transmission Type LDK 3000 On Air Temperature 0ºC Package 05 Video mode 720p50 Type LDK 5630 package 07 Temperature 45ºC

(45)

7.4 Floor Manager

7.4.1 In het veld

In de Floor Manager worden de cameralocaties zichtbaar gemaakt in een ‘floor view’ die specifiek is voor de productie. Deze applicatie is vooral interessant voor grote producties met tien of meer camera’s, zoals registraties van voetbalwedstrijden en grote concerten of shows. Het scherm van de Floor Manager heeft twee tabbladen: Floor view en Locations die hieronder worden beschreven.

7.4.2 Floor view

Geeft een schematische voorstelling van de productievloer weer. De cameralocaties in het veld worden door witte of grijze ikonen weergegeven.

Figuur 7-5. Schermlayout van de Floor Manager, Floor view tab.

Tip

✎

_{Klik op Change Floor rechts onderaan om een andere plattegrond te selecteren. Er zijn}

sportvelden, een racecircuit en een beursvloer beschikbaar.

LDKCONNECT XML Gateway C2IP System About

Floor view Locations

Low Goal Right (23) Main Close up (2)

16m High Right (23)

! Main Camera (1)

Goal Line Right (21)

16m High Left (3)

! Left Luggage (24) Centre Pitch

! Goal Line Left (66) Floor

! Low Goal Left (22)

(46)

Camera-ikoon

De ikonen geven symbolisch aan waar de camera’s in het veld staan. Ze zijn versleepbaar zodat de werkelijke opstelling van de camera’s nagebootst kan worden. Een ikoon geeft de locatie aan en de gekoppelde camera. Ook worden de belangrijkste operationele gegevens grafisch weergegeven.

Figuur 7-6. Camera-ikoon.

Als het symbool donkergrijs is, is er geen camera gekoppeld aan deze locatie. Het aanmaken en wijzigen van locaties kan in de volgende tab, die hieronder wordt beschreven.

Door te dubbelklikken op het camera-ikoon verschijnt er een camera-detailscherm met alle gegevens van de camera.

7.4.3 Locations

Onder het tabblad Locations is de lijst met cameralocaties te vinden. Figuur 7-7. Schermlayout van de Floor Manager, Locations tab.

!

Left Cam (17)

Alarm foutmelding of te hoge head temperature

Camerasymbool (versleepbaar en klikbaar Nummer van de gekoppelde camera Naam van cameralocatie Camera On Air status LDK Connect: RTL4 / OB Van #2 LDKCONNECT Camera locations:

16HiL 16m High Left 30 Studio

Label Name Camera Type

Cb Centre Back 80 Fixed

FGL Low Goal Left 22 Slomo

FGR Low Goal Right 23 Slomo LL

GLL Goal Line Left 31 Slomo

GLR Goal Line Right 21 Slomo

LL Left Luggage 80 Crane

MC1 Main Camera 1 Fixed

MC2 Main Close-up 2 Studio B

PiC Centre Line Pitch Level Studio

86x Lens 86x 66x 86xLL 86x 86x 86x Box 86xB 95x

Vinten Vector 70/700 head

Mounts Manage

Vinten 200 Vinten Vector 70/700 head Vinten Vector 70/700 head Vinten Vector 70/700 head Vinten 200 Pedestal

Vinten Vector 70/700 head Pedestal

Vinten Vector 70/700 head

XML Gateway C2IP System About

Floor view Locations

Floor Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Add Location

(47)

Door op Add Location onderaan het scherm te klikken wordt een detailscherm geopend waarmee een locatie kan worden toegevoegd:

Figuur 7-8. Detailscherm Add Location.

Behalve de gegevens van de locatie (zie ook bijlage IV hiervoor) kan er in dit scherm ook een koppeling met een camera ingegeven worden in het veld Camnum. Als dit veld wordt

leeggelaten dan wordt er geen koppeling aangemaakt. De locatie verschijnt als een grijs ikoon in de Floor view.

Door op Edit te klikken in de lijst kunnen de gegevens van een locatie aagepast worden: Figuur 7-9. Detailscherm Edit Location.

DETAILS Add Location Apply Label: Name Camnum: Type:: Lens: Mounts:: DETAILS Edit Location Apply Label: FGR

Name Low Goal Right

Camnum: 23

Type:: Slomo LL

Lens: 86x

(48)

7.5 System configuration

Dit tabblad bevat alle systeem- en serverinstellingen die voor de LDK Connect server gedaan kunnen worden, inclusief user- en licentieadministratie.

Figuur 7-10. Schermlayout van System configuration.

7.6 About

Dit scherm bevat de copyrightinformatie en het versienummer van de serversoftware. Figuur 7-11. Schermlayout van de tab About.

LDKCONNECT

LDK Connect Unlimited

License Availibility

XML Gateway Unlimited

Field Manager Expired

John Doe Jr. Unlimited

User Name Manage

Juan Perez Unlimited

Lisa Lopez Fred Nerks Expired CPU load Free memory Uptime 22:44 mins 76% 81 %

System Identification System Status

Manage Software Licenses Manage Users

XML Gateway C2IP Floor System About

Add Licence Add user Apply View logfiles