För att systemet väl ska efterlikna ett större automatiserat industriflöde så måste
användargränssnittet, GUI, vara förenklat. Om gränssnittet går för djupt in med styrning på detaljnivå så förloras vitsen med automatisering. Gränssnittet måste därför styra på en övergripande nivå där styrsystemet får instruktioner som skall utföras, där sedan
styrsystemet automatiskt låter rätt del i systemet styras beroende på uppgift att utföra. Eftersom webbutvecklingen inte är projektets avgörande del läggs mindre vikt vid detta avsnitt, fokus här blir på de delar som styr det automatiserade systemet.
3.4.1 Webbgränssnitt
För att få ett flexibelt och tillgängligt GUI så väljs ett webbaserat gränssnitt ut mot användaren. Detta medför att användaren kan styra systemet från många olika enheter, och att gränssnittet får stor flexibilitet. Webbgränssnittet blir precis som det låter enbart ett gränssnitt mot användaren. Styrsystemet baseras till större del på informationsflödena i databasen där varje del i systemet själv läser och skriver data, det blir alltså ingen
direktkontakt mellan GUI och det automatiserade systemet. På detta vis blir GUIt en enkel del sett ur utvecklingssynpunkt, det blir en förhållandevis enkel hemsida som skapas. Grunden blir väldigt enkel, men möjligheterna för med komplex design finns för att göra ett mer tilltalande GUI och för att få fram en bättre användarvänlighet.
Grundarbete
Grunden till hela gränssnittet utvecklas med HTML och CSS för designen och med PHP för anslutningen till databasen. Egentligen skulle detta räcka, men för en förbättrad
användarvänlighet så används även andra utvecklingsmetoder. Mer om detta längre fram. Till en början byggs GUI:t enkelt upp för att kunna visa data från databasen och för att kunna mata in mer data, tillika ge instruktioner för styrsystemet. PHP-kod används för att upprätta en anslutning till databasen när data läses och skrivs. I PHP-koden används sedan SQL-frågor för att hantera urval av data och all styrning av databasen.
Utökad användarvänlighet
För att få en utökad användarvänlighet används Javascript för de mer avancerade funktionerna i GUI:t. Biblioteken jQuery och Ajax som är baserade på Javascript
inkluderas för denna utvidgning. Ajax är en grupp funktioner i jQuery-biblioteket. Genom dessa funktioner möjliggörs uppdatering av delar på webbsidan utan att ladda om hela sidan. Detta används för att uppdatera visning av systemstatus och för att läsa ut eventuella felkoder från robotarna. Det är detta som gör att systemet blir uppkopplat ”live”. jQuery hanterar funktioner för att byta ut informationen ur vissa delar på hemsidan, medan Ajax hanterar anropen till databasen. Anropen till databasen sker med PHP-filer, men det är Ajax-funktionerna som aktiverar dessa filer och mottager data från dessa. Med hjälp av detta system visas felmeddelanden direkt de uppstår, istället för att vänta först tills att användaren laddar om sidan och genererar ett nytt databasanrop. På samma sätt hanteras funktioner för start och stopp av systemet.
Responsiv design
Eftersom målet med projektet är att systemet ska bli flexibelt så behövs ett GUI som kan användas från flera olika medier med olika skärmupplösning och inmatningsmetoder. Systemet måste kunna styras från både större medier så som datorer, men även från mindre så som surfplattor, och även mobiltelefoner. Ett givet val när det är ett
webbgränssnitt som ska anpassas så är att använda responsiv design.
Responsiv design innebär att designen byggs på sådant vis att layouten anpassas olika beroende på skärmstorlek. För detta GUI anpassas sidan på sådant vis att om en liten skärm som en mobiltelefon ansluter så är sidan begränsad för att inte bli för invecklad. Men om en surfplatta ansluter till sidan är bara innehållet mer anpassat för att fylla ut skärmen bättre mot om en dator med fullstor skärm ansluter.
3.4.2 Databaslayout
Med ett webbgränssnitt till styrsystemet så blir databaslayouten en oerhört viktig del så som nämnt innan. Hela styrsystemet blir beroende av databasen där allt ifrån instruktioner till loggar lagras. Databasen måste innehålla all dynamisk data som styrsystemet hanterar.
Figur 6. GUI för medelstor (surfplatta) till vänster, och liten skärm (mobiltelefon) till höger.
Då MySQL används i detta projekt så utvecklas databasen med SQL och det finns gott om hjälpmedel för layoutarbetet. Ett verktyg som är mycket användbart är PhpMyAdmin, som nämnts innan. Med detta verktyg blir det lätt att arbete i databasen under hela projektets gång. PhpMyAdmin är mycket användbart vid så väl utvecklingsarbetet som för underhåll då det är mycket enkelt att både skapa och modifiera tabeller, men även att hantera data som lagras i databasen.
Utveckling av databasen
Första steget i utvecklingsarbetet av databasen är att gå igenom vilka informationsflöden som styrsystemet bygger på. Varje flöde med data som skickas mellan gränssnittet och styrsystemet måste mellanlagras i databasen, dels för att gränssnittet inte har någon egen kontakt med robotarna, men även för lagring av information för uppföljning och felsökning.
Tabeller
Databasen byggs upp enligt figur 8.
Figur 8. Tabellöversikt och databasrelationer.
Tabellerna används enligt nedan:
- tblUser: Lista med alla användare och inloggningsuppgifter. - tblProduct: Lista med alla produkter och saldon.
- tblOrder: Alla ordrar lagras här och dess status.
- tblOrderItem: Lagrar vilka produkter och antal som ingår i varje order. - tblRoboStatus: Information om aktuell status för anslutna robotar. - tblSystem: Hanterar meddelanden från styrsystemet i GUI till robotar.
- tblEventLog: Listar meddelanden om händelser och fel både från GUI och robotar.
Robotanslutning till databas
Robotarna ansluter till databasen för att läsa och skriva information med jämna
mellanrum. Dessa anslutningar hanteras av ett eget webbsystem av enklare modell. Att låta robotarna ansluta direkt till databasen och skicka SQL-förfrågningar blir både osäkert och låst med hårdkodade lösningar. Att låta robotarna ansluta till en hemsida där data skrivs ut och läses in blir mer flexibelt och säkert. På så vis behöver inte databasens kontouppgifter lagras i robotens kod. De enkla hemsidorna gör anrop till databasen och allt detta hanteras lokalt på webbservern, sedan visas utdata som textsträngar som roboten mottager. Textsträngarna formateras enligt en standard kallad JSON. Denna standard kan hanteras både på webbsidor med PHP och i C#-koden på robotarna. Flexibiliteten blir då att roboten har enbart en hårdkodad adress till denna sida inlagt, medan databasen kan struktureras om och även byggas om helt så länge sidorna presenterar samma data till robotarna som ursprungligen.
Figur 9. Databasanslutning från robotar.
De sidor som används för robotarna för att läsa och skriva till databasen är följande: - getorders: Läs in alla nya ordrar.
- getorder: Robot skickar med id till en order för att läsa mer information.
- getproducts: Robot skickar med id till order för vilken den vill se alla produkter och antal.
- updatestatus: Uppdaterar status för angiven order till angiven status. - robostatus: Uppdaterar robotstatus och aktuell information om drift. - eventlog: Skickar information till eventloggen.
- system: Läser in om robot skall startas, stoppas eller köra om initiering.