Design and implementation of a web-based user interface for a differential ion mobility spectrometer

Abstract

This thesis covers the design and development of a user interface for a differential ion mobility spectrometer (DMS). The user interface is implemented as a single page web application. This way the DMS device can be controlled both from its own screen and by using a web browser on an external device. The user interface must work well in both usage environments, have smooth navigation between views and have good performance even on the limited hardware of the DMS device.

An interactive user interface prototype was first developed to base the final implementation on. The development of the prototype consisted of making mockups of the user interface and then connecting the images together into the interactive prototype. The initial mockups were made based on requirements of the DMS system as a whole and feedback from the development team of the device. The prototype was then used in a usability test that attempted to find usability problems in the initial design. The test revealed multiple minor problems that were fixed in the initial design to make it fit for implementation.

The second part of the thesis attempts to find the best JavaScript library for the user interface of the DMS device. Three libraries that were popular at the time of writing this thesis, Angular, React and Vue, were compared. From them, React was chosen for the user interface, because of its reliance on standard JavaScript features, because it has a more flexible component system than the others and because it seems the most mature as a library.

The user interface was finally implemented based on the user interface mockups and the selected single page application library. The final implementation works well with the rest of the software on the device, is usable from the DMS device and external devices and is fit for managing all functionality of the DMS device.

Tämä työ kattaa differentiaali-ionimobiliteettispektrometrin (DMS) käyttöliittymän suunnittelun ja kehityksen. Käyttöliittymä toteutetaan web pohjaisena käyttäen single page application arkkitehtuuria. Näin DMS-laitetta voidaan hallita sekä sen omalta näytöltä, että web selaimella ulkopuolisilta laitteilta. Käytöliittymän täytyy toimia hyvin kummassakin käyttöympäristössä, navigoinnin sen näkymien välillä tulee olla sulavaa ja sen suorituskyvyn tulee olla hyvä jopa DMS-laitteen rajatulla laitteistolla.

Lopullista käyttöliittymän toteutusta varten kehitettiin ensin interaktiivinen prototyyppi, johon toteutus voitaisiin pohjauttaa. Prototyypin kehitys koostui käyttöliittymän mallikuvien tekemisestä ja näiden kuvien liittämisestä yhteen interaktiiviseksi prototyypiksi. Alustavat mallikuvat pohjautuvat koko DMS järjestelmän vaatimuksiin ja laiteen kehitystiimin antamaan palautteeseen. Prototyyppiä käytettiin käytettävyystestissä, joka pyrki löytämään käytettävyysongelmia käyttöliittymän alustavassa suunnitelmassa. Testi paljasti monia pieniä ongelmia, jotka voitiin korjata alustavassa suunnitelmassa. Näin siitä saatiin sopiva toteuttamista varten.

Työn toinen osa pyrkii löytämään parhaan JavaScript kirjaston DMS laitteen käyttöliittymää varten. Kolmea kirjastoa, jotka olivat työn kirjoittamisen aikaan suosittuja, vertailtiin: Angular, React ja Vue. Näistä React valittiin käyttöliittymää varten, koska se tukeutuu JavaScript:n standardiominaisuuksiin, sen komponenttijärjestelmä on joustavampi kuin muiden ja se vaikuttaa kirjastona kypsimmältä.

Käyttöliittymä toteutettiin siitä tehtyjen mallikuvien ja valitun single page application kirjaston pohjalta. Lopullinen toteutus toimii hyvin järjestelmän muun ohjelmiston kanssa, on käytettävissä DMS laitteelta ja ulkopuolisilta laitteilta ja sopii DMS laitteen kaiken toiminnallisuuden hallintaan.