User interfaces op basis van webtechnologie

Huidige automatiseringssystemen maken veelal gebruik van grafische user interfaces op basis van SCADA. De wensen op het gebied van bedieningen nemen echter steeds verder toe en ontwikkelingen als Digital Twin worden steeds belangrijker. De HTML-GUI kan dan een uitkomst bieden. De HTML-GUI kan op ieder denkbaar PLC of PC platform functioneren en is bovendien zeer gebruiksvriendelijk. Ook is er geen lock-in met een leverancier aanwezig en komt er een einde aan (moeilijke) migraties van operationele systemen.

De case


Sinds begin jaren ’90 heeft de webbrowser een stormachtige groei doorgemaakt. Waar de eerste websites nog voornamelijk bestonden uit statische code, met hier en daar een afbeelding, is nu vrijwel iedere denkbare applicatie gebouwd op basis van markup-talen als HTML en CSS en scripttalen als JavaScript. Met name door de komst van webstandaarden (o.a. HTML5 en CSS3) wordt het ook steeds eenvoudiger om websites te bouwen die op ieder denkbaar platform functioneren en bovendien zeer gebruikersvriendelijk zijn. In de industriële automatisering wordt voor het realiseren van bedieningsinterfaces nog veelal gebruik gemaakt van de SCADA-programma’s. Bediening in de browser kan grote voordelen opleveren voor bediening op afstand, koppelen met Digital Twin, goedkope test- en trainingssystemen, ruim beschikbare programmeerkennis etc.

Een GUI gebaseerd op webtechnologie: de architectuur

 

Voorbeeld van een door Strypes ontwikkelde GUI op basis van de Landelijke Tunnelstandaard, werkend in de Google Chrome-webbrowser

Steeds vaker maken de SCADA-pakketten plaats voor een bedieningsinterface gebaseerd op webtechnologie. Strypes heeft onderzoek gedaan naar de inzet van deze technieken om een GUI te realiseren. Het is gebleken dat het in veel gevallen goed mogelijk is om een volledige GUI op web-basis te realiseren. Hiervoor is een architectuurmodel ontwikkeld dat bestaat uit vijf lagen:

De applicatie is gevormd door de daadwerkelijke applicatiecode, welke bestaat uit code in drie vormen:

  • HTML – hierin is de structuur van de grafische user interface vastgelegd: welke elementen zijn er en wat de hiërarchie is tussen deze elementen (bijv. een knop in een bepaald deelvenster) en welke visuele stijl ze hanteren;
  • CSS – hierin is de visuele stijl van de elementen in de GUI vastgelegd (kleur, lettertype, grootte, positie) en speciale eigenschappen van de elementen vastgelegd, zoals bijvoorbeeld een kleur die verandert als de muis van de bedienaar eroverheen gaat;
  • JavaScript – hierin is een deel van het dynamisch gedrag van de GUI vastgelegd. Dit gaat bijvoorbeeld om acties die in de GUI plaatsvinden na het indrukken van een knop (bijv. het verbergen van een deel van het scherm) en de uitwisseling van data met het onderliggende framework (het presenteren van statussen en de doorgave van bediencommando’s)

De applicatielaag is custom-made waarvoor vrij beschikbare libraries op het web beschikbaar zijn voor veel standaardtoepassingen. Een voorbeeld hiervan is de jQuery-bibliotheek (voor JavaScript) waaruit een heleboel standaardtoepassingen (bijv. animaties) in de applicatie kunnen worden geïntegreerd.

Het applicatieframework is de “motor” van de applicatie die voorziet in de communicatie tussen de daadwerkelijke GUI-applicatie en een onderliggende database. Het framework is vaak een bestaand softwarepakket dat kan worden aangepast om te voorzien in de behoeften van de gebruikersinterface. Communicatie op deze laag gaat in twee richtingen:

  • Van GUI naar database – hierbij gaat het met name of bediencommando’s en zaken als het onderdrukken of bevestigen van signaleringen;
  • Van database naar GUI – hierin vindt communicatie plaats van o.a. de actuele status van installaties en eventueel actieve signaleringen.

De databaselaag voorziet in een soort “buffer” tussen de user interface en het onderliggende besturingsplatform, waarbij statussen en commando’s worden opgeslagen. Van iedere toestandsvariabele en signalering is de actuele waarde bijgehouden. Het applicatieframework zorgt dat iedere wijziging in een toestandsvariabele ook instantaan op de gebruikersinterface gepresenteerd is. Performance-eisen zijn hierdoor geen issue meer.

De communicatielaag verzorgt de uitwisseling van informatie tussen de database en het onderliggende besturingsplatform, bijvoorbeeld via een standaard als OPC-UA en een polling-mechanisme, waarbij het besturingsplatform een aantal keer per seconde wordt gecontroleerd op gewijzigde informatie.

 

De voordelen

De transitie van de traditionele SCADA-pakketten naar een GUI gebaseerd op webtechnologie brengt een flink aantal voordelen met zich mee:

  • Snelheid – webtechnologie is gebaseerd op een verwachtingspatroon bij gebruikers dat een input vaak binnen milliseconden is omgezet in een output (denk aan de reactiesnelheid van besturingselementen op websites die vaak instantaan zijn). Hierdoor resulteren wijzigingen in de onderliggende besturingshardware vaak al binnen enkele milliseconden in een wijziging op het scherm;
  • Stabiele basis die voortdurend in ontwikkeling is – sinds de commercialisatie van het world wide web halverwege de jaren negentig zijn er miljarden webapplicaties gebouwd. De technologie verbetert zich nog steeds dagelijks;
  • Kennis is breed beschikbaar ­– waar expertise voor bepaalde SCADA-pakketten soms beperkt blijft tot enkele personen is er een zeer brede markt voor webontwikkelaars die GUI’s kunnen onderhouden en verbeteren;
  • Grafische mogelijkheden zijn nagenoeg onbeperkt – met name sinds de komst van HTML5 en technieken als WebGL zijn de grafische mogelijkheden van webapplicaties gigantisch gegroeid. Variërend van eenvoudige effecten als gekleurde scrollbars en schuivende faceplates tot complete 3D-weergave van objecten, allemaal direct ondersteund in de browser;
  • Ruim scala aan testmogelijkheden – In SCADA-pakketten is het testen van grafische user interfaces vaak een kwetsbaar, tijdrovend en duur proces. Het gebruik van browsers effent het pad voor testtools zoals TestComplete, Selenium en SoapUI. Hierbij test men visuele testen met volledig automatische scripts , wat enorm scheelt in de kosten bij projecten waar veel regressie toegepast wordt.

Strypes maakt het verschil

Een organisatie die werkelijk het verschil maakt, is er in onze visie op gericht om klanten zo goed mogelijk te bedienen en ervoor te zorgen dat medewerkers zich maximaal ontwikkelen en zich betrokken voelen bij de onderneming. Groei en winst voor de organisatie zijn afgeleiden van groei en winst voor onze opdrachtgevers en onze medewerkers, en dus geen doel op zich.
Benieuwd naar hoe het is om bij Strypes te werken? Neem contact met ons op.

CONTACT VIA E-MAIL +31 (0)343 769024