Responsive GUI Framework in Lua
Total Page:16
File Type:pdf, Size:1020Kb
IT 18 035 Examensarbete 30 hp July 2018 Responsive GUI framework in Lua Vlad Alexandru Draghici Institutionen för informationsteknologi Department of Information Technology Abstract Responsive GUI framework in Lua Vlad Alexandru Draghici Teknisk- naturvetenskaplig fakultet UTH-enheten Responsive graphical user interfaces, which can adapt to changes in display size, improve the user experience and are easier to develop Besöksadress: and maintain compared to ones relying on absolute (pixel) placement. Ångströmlaboratoriet Lägerhyddsvägen 1 Based on a survey of several responsive frameworks across desktop, Hus 4, Plan 0 mobile and web platforms, we design and develop a backwards- compatible responsive extension of an existing non-responsive Lua GUI Postadress: framework. We also provide the specification that describes the Box 536 751 21 Uppsala features selected to be part of the new responsive framework, as well as some implementation details pertaining to those features. Telefon: 018 – 471 30 03 Telefax: 018 – 471 30 00 Hemsida: http://www.teknat.uu.se/student Handledare: Fadi Bitar Ämnesgranskare: Johannes Borgström Examinator: Mats Daniels IT 18 035 Tryckt av: Reprocentralen ITC Acknowledgements I would like to thank the university coordinator Justin Pearson for assisting me with administrative matters throughout the whole duration of my the- sis work, my university reviewer Johannes Borgstr¨omfor helping me with drafting the report and giving me valuable insights, the developer supervisor Fadi Bitar and the team at XLN Audio for assisting in the practical portion of my thesis and for creating a wonderful work environment for me, and my parents and family for always supporting me. Contents 1 Introduction 1 1.1 The problem . 1 1.2 Report structure . 1 1.3 General description . 2 1.4 Goals . 2 1.5 Current technologies and architecture . 3 1.6 Delimitations . 4 2 Background 5 3 Pre-implementation 7 3.1 Existing responsive GUI frameworks and technologies . 7 3.1.1 CSS Flexbox . 7 3.1.2 CSS Grid . 9 3.1.3 CSS Media Queries . 10 3.1.4 Android . 11 3.1.5 iOS . 12 3.1.6 Qt . 13 3.1.7 wxWidgets . 14 3.1.8 Others . 14 3.2 Comparison . 14 4 Method of choosing features 16 5 Specification and implementation 18 5.1 Containers . 18 5.2 Relative positioning . 21 5.3 Style files . 23 5.4 Properties based on device size . 24 5.5 Testing . 25 6 Conclusion 26 7 Future work 27 1 Introduction 1.1 The problem Responsive graphical user interfaces can adapt to changes in the shape and size of a device's screen. They also enable easier maintenance and develop- ment of products by removing some of the need to manually specify most interface elements' sizes and positions. Developing non-responsive interfaces, by contrast, can be more tedious than necessary, because of the need to spec- ify each UI element's position and size. In addition, such interfaces usually do not adapt well to screen configurations for which they have not been tested. 1.2 Report structure The report structure is as follows: • The introduction (section 1) describes the problem, goals, delimita- tions, and background of the project. • Section 2 provides a background into the problem described by the report. • In the pre-implementation (section 3) part, the research phase of the project is described, containing survey of existing responsive GUI frame- works. In addition, the feature specification for the implemented solu- tion is presented here. • The implementation, including various algorithms used, is described in section 5. • The conclusion (section 6) analyzes the end product and tries to deter- mine if the main goals of the thesis have been achieved. • Future work (section 7) proposes possible improvements to the existing implementation, including features that have been left out during the current project. 1 1.3 General description The project takes place at the Swedish music software development company called XLN Audio, which develops music production plugins used in digital audio workstations (DAWs). A DAW is an application allowing users to create, modify and record audio, including music. Most DAWs allow using music or audio plugins, which allow for different types of enhancement, ma- nipulation of sound, including for specific musical instruments. XLN Audio develops such music plugins with the help of a technology stack that includes an upper layer developed in Lua (see section 1.5). This layer includes, among other things, a GUI framework for specifying the interface of the plugins. The goal of the thesis is to expand upon this GUI framework, adding responsive functionality to it. 1.4 Goals The goals of this master's thesis are to extend the current Lua GUI frame- work with responsive functionality and to provide other features for easier application development and maintenance. This will allow developers to as- sign general behaviours to a UI element or group of elements, to position and dimension elements in relation to other UI elements without the need for coordinates, to separate some UI element property declarations from the main layout files (similar to how HTML and CSS operate in that regard), and to specify different behaviours for different screen sizes. This will not only ease the development of products by eliminating the need for detailed manual positioning and size of elements, but will also add a responsive nature to the products, which will benefit end users. The most important questions that I have tried to answer during this project are the following: • Which existing responsive features in other GUI frameworks would be relevant to XLN Audio's music plugins and which wouldn't be? • What are the most significant features to add in a limited-scope project such as this one? 2 1.5 Current technologies and architecture XLN Audio's music plugins are developed using a technology stack with three main layers, with the actual application logic of each product making up the fourth and final layer: • The lowest C++ layer consists of the third-party C++ application de- velopment framework JUCE, used mainly in the creation of standalone or plugin music production software. JUCE allows developers to target multiple platforms (in our current case, desktop ones - Windows and macOS) with not much modification to the code required from the ap- plication developer. Audio plugins communicate with DAWs through protocols such as AAX, AU and VST. The JUCE framework provides wrappers around these protocols to make plugin development easier. Other open-source libraries such as Boost, a C++ library containing a wide variety of features such as file system management and math functions, is also used. • An intermediary, proprietary C++ layer consisting of a framework de- veloped by the company on top of JUCE, nicknamed "Cotton". This layer includes functionality like low-level graphics, digital signal pro- cessing (DSP) and handling the file system. In addition, Cotton is designed to be as generic as possible and acts as a Lua interpreter for all the products developed by the company. • A higher layer written in the Lua programming language, which in- cludes the preset system and the GUI framework. The preset system allows saving user parameters and preferences and is designed to work with different preset lists from different products. The GUI framework is a set of components and functionality that enables developers to specify a product's interface in the form of Lua tables. This layer calls a cotton API that handles the drawing of the specified UI elements. • The final layer is the actual interface specification and application logic for a specific product, written in Lua. This architectural division enables rapid prototyping of the company's soft- ware products, since it allows changing most of the UI and logic of the appli- cation in Lua with ease (since it is an interpreted language), without the need to recompile the whole C++ platform. In addition, it enables the software 3 design team to conceive and experiment with a future product's GUI with minimal involvement from the software developer team. 1.6 Delimitations The thesis project only involves creating the responsive framework for speci- fying the GUI of the company's software products, not actually creating any GUI or audio product. User studies are also out of scope. While the initial scope of the project stated that there would be some tangential work done on the lower-layer C++ platform, which would involve coding in that area only if strictly and directly related to the subject of the thesis, this hasn't been a necessity at all. 4 2 Background Modern web, mobile and desktop application development has changed con- siderably over the last few years, requiring interfaces to adapt to the wide variety of device screen sizes and shapes[1]. Considering the increased screen sizes and high-resolution screens increasingly used by professionals, software music plugins have the potential to benefit from a responsive GUI. In addi- tion, an easier way to specify UI in products could result in a faster delivery of products to customers, as well as better subsequent maintenance. A responsive GUI is one that adapts to different device and screen sizes and allows an easy way to rearrange UI elements when a user resizes the window. In addition, when the content inside a page changes dynamically at run-time, it performs a recalculation of the positions of some elements on the screen. This helps to keep an optimal and user-friendly positioning of UI elements regardless of screen size and helps prevent things like horizontal scrolling. One more advantage of responsive GUIs is that they speed up develop- ment and maintenance[2]. Currently with some static interfaces in general, most UI elements are given a position by manually specifying absolute coor- dinates.