DOCSLIB.ORG

Creating User Interfaces Using Web-Based Technologies to Support Rapid Prototyping in a Desktop Astrovisualization Software Klas Eskilson

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Creating User Interfaces Using Web-Based Technologies to Support Rapid Prototyping in a Desktop Astrovisualization Software Klas Eskilson 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.
Load more

Recommended publications
  • Some Touching News the New Rules of Digital Media
    Some Touching News the new rules of digital media Josh Clark @globalmoxie Interaction designer but also what might be called: design strategist I work mainly in mobile. I wrote a book called Tapworthy about designing iPhone apps. Fill my days: Help people/companies think through crafting terrific experiences for non-desktop systems. Means figuring out how phones, tablets fit into overall digital diet. But it’s also about how these devices are creating entirely new kinds of interaction, new kinds of digital products and interfaces. That’s what I’m going to talk about today. How this explosion of new devices means we have to rethink how we approach design. Especially excited about possibilities of touch interfaces. I believe touch forces—or should force—important, FUNDAMENTAL changes in how we approach the designs of these interfaces. When you get rid of the mouse and cursor, these prosthetics that we’ve been using to point at stuf for 25 years, you get a VERY diferent experience. And it suggests entirely new interfaces. Touch will help us sweep away decades of buttons—menus—folders—tabs—administrative debris to work directly with content. This is very diferent from what came before. And certainly VERY diferent from print. I’m going to talk about two things today: 1. How we should/shouldn’t go about conceiving entirely new interfaces for news; particularly its relationship to print. Then: nitty-gritty techniques for pushing touch interfaces in exciting new directions. iPad in particular giving many of us opportunity to experiment. EXCITING. But also means we see a lot of misfires, too.
    [Show full text]
  • The Desktop (Overview)
    The desktop (overview) The desktop is the main screen area that you see after you turn on your computer and log on to Windows. Like the top of an actual desk, it serves as a surface for your work. When you open programs or folders, they appear on the desktop. You can also put things on the desktop, such as files and folders, and arrange them however you want. The desktop is sometimes defined more broadly to include the taskbar and Windows Sidebar. The taskbar sits at the bottom of your screen. It shows you which programs are running and allows you to switch between them. It also contains the Start button , which you can use to access programs, folders, and computer settings. On the side of the screen, Sidebar contains small programs called gadgets. The desktop, taskbar, and Sidebar Where did my desktop go? Because programs run on top of the desktop, the desktop itself is often partially or completely hidden. But it's still there, underneath everything. To see the whole desktop without closing any of your open programs or windows, click the Show Desktop button on the taskbar. The desktop is revealed. Click the icon again to restore all of your windows to the way they were. Desktop Training Session Handout Page 1 http://ict.maxwell.syr.edu/vista/ Working with desktop icons Icons are small pictures that represent files, folders, programs, and other items. When you first start Windows, you'll see at least one icon on your desktop: the Recycle Bin (more on that later).
    [Show full text]
  • Bforartists UI Redesign Design Document Part 2 - Theming
    Bforartists UI redesign Design document part 2 - Theming Content Preface...........................................................................................................................6 The editor and window types......................................................................................7 Python console.............................................................................................................8 Layout:................................................................................................................................................................8 The Console Window.........................................................................................................................................8 Menu bar with a menu........................................................................................................................................8 Dropdown box with icon....................................................................................................................................9 RMB menu for menu bar....................................................................................................................................9 Toolbar................................................................................................................................................................9 Button Textform..................................................................................................................................................9
    [Show full text]
  • Navigate Windows and Folders
    Windows® 7 Step by Step by Joan Preppernau and Joyce Cox To learn more about this book, visit Microsoft Learning at http://www.microsoft.com/MSPress/books/ 9780735626676 ©2009 Joan Preppernau and Joyce Cox Early Content—Subject to Change Windows 7 Step by Step Advance Content–Subject to Change Windows 7 Step by Step Draft Table of Contents Overview Front Matter ............................................................................................................................................. 3 Contents ................................................................................................................................................ 3 About the Authors ................................................................................................................................ 3 Features and Conventions of This Book ................................................................................................ 3 Using the Companion CD ...................................................................................................................... 3 Getting Help .......................................................................................................................................... 3 Introducing Windows 7 ......................................................................................................................... 3 Part I: Getting Started with Windows 7 .................................................................................................... 4 1 Explore Windows 7 ...........................................................................................................................
    [Show full text]
  • Editing the Home Screen Widgets:
    Brisbane German Club WordPress Website Manual 1 Table of Contents How To Add: A Page .............................................................................................................. 3 How To Edit: A Page .............................................................................................................. 4 How To Add: A Post ............................................................................................................... 8 How To Edit: A Post ............................................................................................................. 12 How To Edit: Home Page ..................................................................................................... 13 Editing the Home Screen Widgets: ....................................................................................... 19 How To Change: The Menu .................................................................................................. 22 Events & Calendar ............................................................................................................... 24 How To Add: a Hyperlink ..................................................................................................... 26 2 How To Add: A Page Step 1: Go to „Pages‟ on the left sidebar of the backend. Click „Add New‟ 3 How To Edit: A Page Step 1: Hold the cursor over any specific page. 4 options appear – to edit/ quick edit/ trash/ view. These are self-explanatory however to edit a page select the edit function or alternatively just click on
    [Show full text]
  • Review Interface Quick Reference
    Review Interface Review Interface Features Viewer type tabs Select which Viewer type you would like to view the current document in. Viewer Displays the current document in the selected Viewer. Document navigation Browse across documents in the Review queue. 9 6 8 1 2 3 Coding layouts Customizable coding forms for viewing and editing a document’s fields. 7 Related items card Identify and act on documents related to the active document. Document list List presentation of all the documents in the user’s Review queue. Viewer settings Menu of display configurations and review settings. 4 Keyboard Shortcut Displays the keyboard shortcuts legend. Legend Enable/Disable Turns keyboard shortcuts on or off. Keyboard Shortcuts Show/Hide Tab Strip Display or hide the Sidebar and Tab strip in the Viewer. Pop Out Viewer Select to open the Pop Out Viewer in a new browser window. Select to move the Coding Layout and the Document card to the opposite Swap Layout side of the Viewer from where they are currently located. Document Actions Menu of actions the user may perform on the document as a whole. 5 Download document Download the native file for the current document. Alternatively, you can native click on the document’s name to download the native. Copy document link Select to copy the URL to the current document to your clipboard. Select to open an email in your default email application with the URL to the Email document current document included in the body of the email. Replace document Select to replace the native file of the current document with a new file native Hover your cursor over this option and Image Profile options will display.
    [Show full text]
  • Vigil Client 10 | User's Guide
    Client 10 Remote Desktop Client Software User Guide Revised: June 1st, 2017 3xLOGIC Inc. ©2017 COPYRIGHT AND LEGAL NOTICES|VIGIL CLIENT 10 | USER'S GUIDE VIGIL Copyright ©2017 3xLOGIC, Inc. All rights reserved. 3xLOGIC Inc. 210-10385 Westmoor Drive Westminster, CO 80021 United States (303) 430-1969 Disclaimer Information in this document is subject to change without notice and does not represent a commitment on the part of 3xLOGIC Inc. The soft- ware and /or databases described in this document are furnished under a license agreement or nondisclosure agreement. They may be used or copied only in accordance with the terms of the agreement. It is against the law to copy the software on any medium except as specifically allowed in the license or nondisclosure agreement. The purchaser may make one copy of the software for backup purposes. No part of this manual and /or databases may be reproduced or transmitted in any form or by any means, electronic or mechanical, including (but not limited to) photocopying, recording, or information storage and retrieval systems, for any purpose other than the purchaser's personal use, without the express written permission of 3xLOGIC Inc. 3xLOGIC, VIGIL and AZTECH are trademarks of 3xLOGIC, Inc. Other trademarks and trade names may be used in this document to refer to either the entities claiming the marks and names or their products. 3xLOGIC Inc. disclaim any proprietary interest in trademarks and trade names other than their own. TABLE OF CONTENTS|VIGIL CLIENT 10 | USER'S GUIDE Table of Contents 1 Introduction
    [Show full text]
  • Package 'Yonder'
    Package ‘yonder’ January 10, 2020 Type Package Title A Reactive Web Framework Built on 'shiny' Version 0.2.0 Description Build 'shiny' applications with the latest Bootstrap components and design utilities. Includes refreshed reactive inputs and outputs. Use responsive layouts to design and construct applications for devices of all sizes. License GPL-3 URL https://nteetor.github.io/yonder BugReports https://github.com/nteetor/yonder/issues Encoding UTF-8 LazyData true RoxygenNote 7.0.2 Depends R (>= 3.2), shiny (>= 1.4.0) Imports htmltools (>= 0.4.0), magrittr, utils Suggests testthat (>= 2.1.0) NeedsCompilation no Author Nathan Teetor [aut, cre], The Bootstrap Authors [cph] (Bootstrap library), Twitter, Inc [cph] (Bootstrap library), JS Foundation [cph] (jQuery library), Federico Zivolo [ctb, cph] (popper.js library), Johann Servoire [ctb, cph] (bs-custom-file-input library) Maintainer Nathan Teetor <[email protected]> Repository CRAN Date/Publication 2020-01-10 21:20:07 UTC 1 2 R topics documented: R topics documented: yonder-package . .3 active ............................................4 affix.............................................5 alert . .6 background . .7 badge . .8 blockquote . .9 border . 10 buttonGroupInput . 12 buttonInput . 13 card ............................................. 16 checkbarInput . 19 checkboxInput . 21 chipInput . 23 collapsePane . 26 column . 27 d1.............................................. 30 display . 31 dropdown . 32 fieldset . 34 fileInput . 35 flex ............................................
    [Show full text]
  • Merlinx Extension
    MerlinX Extension For Adobe Creative Cloud Applications MerlinOne Inc. 17 Whitney Road Quincy, MA 02169 T (617) 328-6645 http://www.merlinone.com MerlinOne Inc. Table of Contents Table of Contents 1 Introduction 3 Installing the Extension 4 Logging In 5 Accessing the Extension 5 Collapsing and Docking the Extension 5 How to Log In 5 Specifying a Merlin Server 6 Specifying Your Name & Password 6 Connecting 6 How to Log Out 7 Overview 8 Getting Around 10 Locating Assets 10 Search 10 Collections 10 Saved Searches 12 Customizing the Display 12 Thumbnail Grid 12 MerlinX Extension (Wednesday, August 29, 2018) "1 MerlinOne Inc. Thumbnail Size 13 Thumbnail Info 13 Working With Digital Assets 14 Opening Assets 15 Asset Versions 15 Checking Out 15 Checking In 16 Reverting 16 Placing Assets in InDesign 17 Automatic Update of Placed Assets 17 Sending Assets to Your Merlin Server 18 Modified Assets 18 New Assets 18 MerlinX Extension (Wednesday, August 29, 2018) "2 MerlinOne Inc. Introduction The MerlinX Extension is an Adobe Extension that makes it easy to access your MerlinX Digital Asset Management system from within your favorite Adobe Creative Cloud application. The extension allows you to locate assets either by searching or through user- defined asset collections. In addition to helping you find assets, the extension also helps you work on them. As your creation evolves, you can periodically send it to your Merlin server through a process called “checking it in”. The server keeps track of each version of the asset you check in, so it is possible to revert changes that are not desired.
    [Show full text]
  • Reviewer's Guide 2 Overview
    Reviewer's Guide 2 Overview What is OmniOutliner? OmniOutliner for iPad is a professional-grade outlining application to easily capture, compose, and organize text and data. It's feature-rich enough to see a novel from outline to print and simple enough to create a grocery list in a snap. What makes OmniOutliner different from other iPad outlining apps? OmniOutliner includes everything you'd expect in a premiere outlining application: fast, easy capture; intuitive editing; diverse templates; and robust styles. If you all you'd like to do with your outline is prepare a grocery list or balance your checkbook, OmniOutliner for iPad can help you do that. If you're looking for something a bit more complex, OmniOutliner is designed to expand organically with your needs. Advanced options are there when you need them, and stay out of your way when you don't. Everything's been designed with iPad—and your fingertips—in mind: flexible style options; intelligent row creation; notes; links and attachments; sharing; and more. Start your outlines on the iPad and continue on the desktop, or vice versa. OmniOutliner combines the functionality of a desktop app with the powerful mobile experience of iPad. It's a powerful system created by a company that's been in the Mac business—and providing free customer support—for over 15 years. Who uses OmniOutliner? Business professionals, writers, students, parents, home users, and educators all rely on OmniOutliner for its unparalleled task management functionality. From complicated and intricate papers to a quick to-do list, some common-use examples include: • Restructuring an essay on the fly • Creating a number column to keep track of finances • Adding "Buy milk" to a grocery list • Using notes to expand on a principal idea • Creating visual allure with styles • Tapping checkboxes to keep track of completed agenda items • Using notes to expand on a principal idea 3 The Toolbar & Editbar When you launch OmniOutliner for the first time, you can start from scratch, or begin working with one of the built-in templates.
    [Show full text]
  • Help Link at the Top of Any Page to Open This Document
    CAMD Business System (CBS) Tutorial Welcome to the CAMD Business System. The purpose of this document is to guide CBS users through the modules in the updated CAMD Business System. You may use the CAMD Business System to: 1. View and modify your user profile; 2. Manage general accounts; 3. Transfer allowances; 4. Submit annual compliance information; 5. Manage agent relationships; 6. Manage feedback recipient relationships; 7. Manage Certificates of Representation, including information regarding plants, units, designated representatives, owners/operators, and generators, and 8. Manage responsible officials. You can jump to any topic you are interested in by clicking on the topic in the table of contents. Within the application, you may select the Help Link at the top of any page to open this document. June 16, 2021 1 Table of Contents Login ..........................................................................................................................................3 Your Profile ................................................................................................................................4 Reset Your Password…………………………………………………………….……………….11 Manage General Accounts……………………………………………………………………….15 Allowance Transfers ................................................................................................................. 27 Compliance ............................................................................................................................... 43 Edit Contact Information ..........................................................................................................
    [Show full text]
  • Apollo Twin USB Software Manual
    H I GH- R ESO L U T I O N I N TER F A C E with Realtime UAD Processing Apollo Twin USB Software Manual UAD Software Version 9 Manual Version 210429 www.uaudio.com Tip: Click any section or Table Of Contents page number to jump directly to that page. About This Manual ................................................................................ 6 For Apollo Twin USB .......................................................................................... 6 Introduction ......................................................................................... 7 Welcome To Apollo! ............................................................................................ 7 Apollo Software Features .................................................................................... 8 Apollo Documentation Overview ........................................................................ 10 Apollo Software Overview .................................................................................. 12 Installation & Setup ............................................................................ 14 System Requirements ...................................................................................... 14 Setup Overview ................................................................................................ 15 Software Installation ........................................................................................ 16 Windows Setup ...............................................................................................
    [Show full text]