bijlage 09-b beschrijving gebruikersinterface (gui)

BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Rest webservice(0)
Database
Internet
Flexines GUI (1)
Flexines Monitor (2)
Android App (3)
Thermostat app
CSV exporter
Figuur 1 – Overzicht
In het bovenstaande figuur staat de structuur van de verschillende grafische user interfaces(gui). Alle gui’s communiceren
niet rechtstreeks met de database maar via een webservice. Een webservice is een interface waar met standaard
webprotocollen gecommuniceerd mee kan worden.
Er is gekozen voor een webservice om het mogelijk te maken dat studenten gui’s maken zonder dat zij directe toegang
hebben tot de database. Een ander voordeel is dat wijzigingen in de database alleen in de webservice aangepast hoeft te
worden. Ontwikkelaars van de GUI merken dit dus niet. Een ander voordeel is dat rekenwerk op een centrale plek kan
plaatsvinden.
9.1 GUI-2
GUI-2 is de gui die ontwikkeld is voor de eindgebruiker. Deze GUI is mede ontwikkeld met behulp van het
gebruikersonderzoek van Manon Vos-Vlamings.
9.1.1 Techniek
Gebruikte technieken zijn PHP, HTML&CSS en javascript. Ook is gebruik gemaakt van het Codeigniter framework.
9.1.3 Screenshots
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 2 - Home
Figuur 3 - My Devices
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 4 - Device details
Figuur 5 – Analyse
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 6 - Device Commands
Figuur 7 - Profiles
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
9.2 Monitor
De monitor wordt gebruikt door het Flexines onderzoeksteam. Op de monitor kan alle data die gelogd wordt in de
database worden bekeken.
9.2.1 Gekozen techniek
Gebruikte technieken zijn PHP, HTML&CSS en javascript. Ook is gebruik gemaakt van het Codeigniter framework.
Figuur 8 – Monitor
Figuur 9 - Matching overview
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 10 - Matching device
Figuur 11 - Prijsprofielen
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 12 - Profiel kopieeren
Figuur 13 - Prijsprofiel maken
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 14 - Instellingen wijzigen
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
9.3 Mobiele APP
9.3.1 Gekozen techniek
De app is ontwikkeld met Adobe Flash builder en bestemd voor een Android device.
9.3.2 Screenshots
Figuur 15 – Inloggen
Figuur 16 – Home
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 17 - My Devices
Figuur 18 - Device details
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 19 - Mijn doelen
Figuur 20 - Doel energie besparen
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 21 - Doel energie besparen details
Figuur 22 - Doel energie besparen tips
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
Figuur 23 - Doel instellen
Figuur 24 - Doel zelfvoorzienend zijn voortgang
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
9.4 Thermostaat APP
De thermostaat app wordt gebruikt om de gewenste temperatuur in te stellen. Deze app wordt door de eindgebruiker
getest.
9.4.1 Gebruikte technieken
Deze Adobe Air app is ontwikkeld met behulp van Adobe Flash builder.
9.4.2 Screenshots
Figuur 25 – Home
Figuur 26 - Kalender wijzigen
BIJLAGE 9B
BESCHRIJVING GEBRUIKERSINTERFACE (GUI)
9.5 CSV exporter
De CSV exporter kan gebruikt worden om data uit de database te exporteren naar een .csv bestand. De gebruiker kan het
apparaat selecteren en de periode.
9.5.1 Gekozen techniek
Het is een Adobe Air applicatie gemaakt met Adobe Flash Builder. De data wordt opgehaald met behulp van de
webservice.
9.5.2 Screenshots
Figuur 27 - CSV exporter