LiU-ITN-TEK-A--17/062--SE Creating User Interfaces Using Web-based Technologies to Support Rapid Prototyping in a Desktop Astrovisualization Software Klas Eskilson 2017-11-28 Department of Science and Technology Institutionen för teknik och naturvetenskap Linköping University Linköpings universitet nedewS ,gnipökrroN 47 106-ES 47 ,gnipökrroN nedewS 106 47 gnipökrroN LiU-ITN-TEK-A--17/062--SE Creating User Interfaces Using Web-based Technologies to Support Rapid Prototyping in a Desktop Astrovisualization Software Examensarbete utfört i Datateknik vid Tekniska högskolan vid Linköpings universitet Klas Eskilson Handledare Emil Axelsson Examinator Anders Ynnerman Norrköping 2017-11-28 Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under en längre tid från publiceringsdatum under förutsättning att inga extra- ordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/ Copyright The publishers will keep this document online on the Internet - or its possible replacement - for a considerable time from the date of publication barring exceptional circumstances. The online availability of the document implies a permanent permission for anyone to read, to download, to print out single copies for your own use and to use it unchanged for any non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: http://www.ep.liu.se/ © Klas Eskilson Linköping University | Department of Science and Technology Master thesis, 30 ECTS | Datateknik 202017 | LIU-ITN/LITH-EX-A--2017/001--SE Creating User Interfaces Using Web-based Technologies to Support Rapid Prototyping in a Desktop Astrovisualization Software Skapande av användargränssnitt med webbtekniker för snabbt prototypande i en rymdvisualiseringsmjukvara i skrivbordsmiljö Klas Eskilson Supervisor : Emil Axelsson Examiner : Anders Ynnerman External supervisor : Alexander Bock Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och admin- istrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sam- manhang som är kränkande för upphovsmannenslitterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/. Copyright The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circum- stances. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con- sent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping Uni- versity Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. c Klas Eskilson Abstract In this report, the development and implementation of a desktop user interface frame- work is presented. It is built using web technologies and the Javascript framework React together with a web socket server to render the graphical user interface in an OpenGL envi- ronment. This is done by using the open-source framework Chromium Embedded Frame- work (CEF). The resulting framework and implementation has proven successful, with promising results both from a performance perspective and from a development rapidness perspective. Acknowledgments First of all, I would like to thank everyone involved at Linköping University and New York University for giving me the opportunity to do this work, especially Anders Ynnerman and Claudio T. Silva. Working on this project in New York was an incredible experience. Secondly, I would like to thank Alexander Bock for being an excellent friend, supervisor and life saver. Furthermore, Emil Axelsson for providing excellent help. Also, everyone I met during my years in Norrköping – friends, class mates and colleagues, both during school hours and after. During early mornings with too much coffee or during late nights with too many beers, I had a great time thanks to all the amazing people. Last but not least, I would like to thank my family for their support and help throughout my studies. Klas Eskilson Stockholm, October 2017 iv Contents Abstract iii Acknowledgments iv Contents v List of Figures vii List of Tables viii 1 Introduction 1 1.1 OpenSpace . 1 1.2 Motivation . 1 1.3 Aim............................................ 2 1.4 Research questions . 2 1.5 Delimitations . 2 2 Related work 3 3 Theory 4 3.1 Web browsers and CEF . 4 3.2 Web sockets . 6 3.3 Javascript UI frameworks . 6 3.4 Transpiling . 8 3.5 Data serialization: JSON . 8 3.6 Web workers . 8 3.7 CSS prepocessors . 8 4 Implementation 10 4.1 Web browser . 10 4.2 Socket server and simulation control . 13 4.3 GUI . 17 5 Results 27 6 Discussion 29 6.1 Results . 29 6.2 Implementation . 29 6.3 Source criticism . 31 6.4 The work in a wider context . 31 7 Conclusion 33 7.1 Research questions . 33 7.2 Future work . 34 v Bibliography 35 vi List of Figures 3.1 An overview of the two-executable structure with processes and threads. 4 4.1 The screen space browser with controls. The browser window is showing a video from the OpenSpace Youtube page. 10 4.2 Screen shot showing some information about the project, using the GUI browser. 11 4.3 The layer interaction mask . 11 4.4 Overview of the mask update and user interaction process. 12 4.5 Overview of the rendering process. 12 4.6 Overview of the property sending mechanism. 14 4.7 Design mockups with different alternatives of numeric inputs. 17 4.8 The On screen GUI, immediately after application start. Overlooking Mars. 19 4.9 The On screen GUI with sidebar open. A loading animation is shown where the scene graph properties will be loaded. 20 4.10 Popovers on the bottom of the screen . 20 4.11 The calendar component. 21 4.12 Different states of a numeric input. 21 4.13 Alternative selection view with an expanded drop down menu. 21 4.14 The system menu, providing the user with some extra tools and links to information. 22 4.15 The filter list being used. 23 4.16 Loading indicators. 23 4.17 Different variations of properties. 24 4.18 Top of a movable window. 24 4.19 Scroll issue shown. How can the user be informed that there are elements outside the visible area? . 25 4.20 Content of a scrollable list fading out. 25 4.21 Visible scroll bar to the right. 25 4.22 Tree view using the collapsible component. 26 4.23 Error message when the GUI cannot reach the simulation. 26 5.1 FPS meter in the top right corner. 27 5.2 Final implemented GUI. 28 vii List of Tables 3.1 Table showing developer satisfaction. 7 4.1 Implemented property types in the GUI, and which corresponding input mecha- nisms that is used. 24 viii 1 Introduction When building an graphical user interface, being able to iterate fast is key. This makes it possible to have user feedback tightly integrated into the process. Using a set of tools that allows for these iterations and simultaneously allows the developer to make quick changes is therefore a good step in the direction of building a well functioning user interface. In this report, the development and implementation of a desktop user interface frame- work is presented. The goal with this framework is to be able to quickly create rich user interface components that can be improved over multiple iterations.