Universal GUI
Hello! My name is Kirit Khalitov, I am a graduate student from MSUDT (Moscow State University of Design and Technology (MGUDT)). In my dissertation, the task arose to simplify the process of creating an interface for a local and web application, and the result was a subject.
Currently, any modern monitoring system includes application software (software) for data visualization. Typically, the launch of this software requires the recommended operating system (OS), in most of its cases, the Microsoft operating system. However, now there is a tendency to use cross-platform tools for software development. As a result, it becomes possible to launch the finished software product on different operating systems, including mobile operating systems.
In addition, due to the rapid spread of the Internet, the development of web applications or web services has become a popular area of software development. The web application is a useful addition to the client application program (application). Typically, a web application allows remote use of the monitoring system. This means that the user is not tied to the location of the hardware of the monitoring system and can use it from anywhere in the world where there is a recommended Internet connection. It is important to note that the development of web applications is significantly different from the development of client applications and this in turn creates some problems. In particular, this is the problem of creating a universal graphical user interface (GUI). In order for the client application and the web application to be implemented in a single graphic style, it is necessary to exert enough effort both for the developer of the interface of the client application and for the developer of the interface of the web application. Ultimately, the magnitude of the efforts of one or another developer will depend on which application interface will set the overall style.
Consider the currently most popular ways to build client application interfaces in C ++, as the most used for software development for Microsoft Windows (MS Windows) and Linux. The main tool for developing software for MS Windows is MS Visual Studio [1]. This integrated development environment (IDE) allows you to develop software in different programming languages, but the main languages, of course, are C ++ and C #. There are two main tools for developing an application interface - Windows Forms (WinForms) and Windows Presentation Foundation (WPF). Most of the existing applications for MS Windows are developed using WinForms, however with the advent of more modern versions of the OS (MS Windows 7, 8), WPF is becoming more popular. In addition, the latest versions of MS Visual Studio allow you to use the HTML5 markup language to build interfaces that are similar in style to native web applications. However, it is worth noting that the commercial license of MS Visual Studio is paid, as is the MS Windows license, which is undoubtedly a disadvantage for low-cost projects.
If we talk about low-budget projects, then the most suitable option is Linux. In addition to the fact that most distributions of this OS are absolutely free, including for commercial use, there are also a number of free tools for developing high-quality software for Linux OS. The most common tool for developing software in C ++ is the Qt cross-platform toolkit [2]. It is important to emphasize that Qt allows you to develop applications not only for Linux, but also for MS Windows, Mac OS X, Android and other UNIX-like operating systems. Qt developers offer both free for commercial use and a paid license with additional features. But based on the current practice of software development using this tool, a free license turns out to be more than enough.
')
If we draw an analogy with MS Visual Studio, then in Qt we have the IDE Qt Creator. Here, the alternative to WinForms are the so-called widgets (Qt Widgets), and the alternative for WPF is Qt Quick. Qt Creator also has the ability to create HTML5 based interfaces. But the most interesting toolkit module is the embedded WebKit web engine, which underlies all modern web browsers. A similar module is also available in MS Visual Studio, but it has a number of limitations, and all the more we are more interested in low-budget tools that allow us to reduce costs when creating a software product. The web engine is the core of the browser, it is responsible for the correct display of web pages. The Qt WebKit module allows you to create a client application interface using the techniques of developing web application interfaces. At the heart of creating a web application interface is a well-established technology stack. It includes the HTML markup language (HTML 4, 5), cascading style sheets (CSS 2, 3) and a scripting language JavaScript with a wide choice of additional libraries (frameworks). Special attention is given to the fact that the speed of the emergence of new useful frameworks for the JavaScript language is growing rapidly, and this makes the development of applications rich in functionality more rapid and convenient.
Now the solution to the problem of creating a universal GUI lies on the surface, but this is only at first glance.
Consider the traditional way of creating a universal GUI using the Qt WebKit module using the example of the data visualization module of an acoustic monitoring system developed as part of a PhD thesis [3]. Under the system of acoustic monitoring is meant a system that includes hardware and software. The hardware part of the system consists of a sensor network of acoustic sensors, the data from which are processed on the microcontroller and sent via any interface (UART, IEEE 802.X, etc.) to a personal computer (PC). The software part consists of a set of application programs that work both on the local PC (client software) and on the remote server (server software).
The traditional method involves the use of interprocess
Fig. 1. The traditional method of implementing a universal GUI
interactions through the built-in Qt mechanism. This implies the interaction between the main logic of the client application, shown in Figure 1 as a Data Processor , and the GUI element. One of the drawbacks of this approach is that the code for implementing the GUI in JavaScript will have specific functions that will be relevant only for the client Qt application. For a server application that is responsible for the GUI, another code specific to the server implementation will be needed. For example, if you use a PHP script to implement the core logic of the server application, you will need to implement interprocess communication using some other technology (AJAX or WebSocket). This leads to another drawback, namely the use of an additional programming language to implement the basic logic of the server application and the development of a new interprocess communication algorithm.
To solve these problems, a new method is proposed, based on the use of the WebSocket technology mentioned above. The essence of the method is to unify the interprocess communication method between the main application logic and the GUI, both on the client side and on the server side. In this case, it becomes possible to use JavaScript code to implement a universal GUI for both sides.
Fig. 2. A new method of implementing a universal GUI
In fig. 2. It can be seen that now for interprocess communication, both for the client and for the server part, the technology WebSocket is used. That is, now we have one universal JavaScript code for different applications. In this case, a prerequisite is a server application, the basic logic of which is implemented using Qt, in a language C ++, which is not quite familiar to web developers. On the one hand, such an approach to the implementation of a server application complicates the task for a highly specialized web developer. But on the other hand, we have universal parts of the code that allow us to save time on duplicating the same and the same meaning of algorithms in different languages. It is also important to emphasize that in order to use the WebSocket technology, an additional library is needed, which is freely available on the Internet or is included by default in later versions of Qt.
Fig. 3. Local (right) and server (left) applications running on Ubuntu OS 14.04
In fig. 3 shows an example of the implementation of a new method for creating a universal GUI for Ubuntu OS 14.04. As can be seen in the figure, in the end we get a universal interface, both for a local application running as an executable file of the OS, and for a server application running in a modern web browser. Since cross-platform tools are used for software development, this suggests simple portability of a software product to other operating systems in the future.
1. Qt Documentation [Electronic resource]. Access Mode: qt-project.org/doc
2. Visual Studio Library [Electronic resource]. Access mode: msdn.microsoft.com/en-us/library/vstudio
3. Young scientists - the development of the textile-industrial cluster (SEARCH - 2014): a collection of materials of the inter-university scientific and technical conference of graduate students and students with international participation. Part 2. - Ivanovo: Ivanov. state Polytechnic University, 2014. - p. 25 [Electronic resource]. Access Mode: ti.ivgpu.com/poisk/file/part_2.pdf
PS The only thing that catches the eye in the picture are different fonts, but I, frankly, was not up to them then.
PPS Is it possible to patent this method, so that on protection there was something to trump other than the software registration certificate?
Introduction
Currently, any modern monitoring system includes application software (software) for data visualization. Typically, the launch of this software requires the recommended operating system (OS), in most of its cases, the Microsoft operating system. However, now there is a tendency to use cross-platform tools for software development. As a result, it becomes possible to launch the finished software product on different operating systems, including mobile operating systems.
In addition, due to the rapid spread of the Internet, the development of web applications or web services has become a popular area of software development. The web application is a useful addition to the client application program (application). Typically, a web application allows remote use of the monitoring system. This means that the user is not tied to the location of the hardware of the monitoring system and can use it from anywhere in the world where there is a recommended Internet connection. It is important to note that the development of web applications is significantly different from the development of client applications and this in turn creates some problems. In particular, this is the problem of creating a universal graphical user interface (GUI). In order for the client application and the web application to be implemented in a single graphic style, it is necessary to exert enough effort both for the developer of the interface of the client application and for the developer of the interface of the web application. Ultimately, the magnitude of the efforts of one or another developer will depend on which application interface will set the overall style.
Modern methods of building interfaces
Consider the currently most popular ways to build client application interfaces in C ++, as the most used for software development for Microsoft Windows (MS Windows) and Linux. The main tool for developing software for MS Windows is MS Visual Studio [1]. This integrated development environment (IDE) allows you to develop software in different programming languages, but the main languages, of course, are C ++ and C #. There are two main tools for developing an application interface - Windows Forms (WinForms) and Windows Presentation Foundation (WPF). Most of the existing applications for MS Windows are developed using WinForms, however with the advent of more modern versions of the OS (MS Windows 7, 8), WPF is becoming more popular. In addition, the latest versions of MS Visual Studio allow you to use the HTML5 markup language to build interfaces that are similar in style to native web applications. However, it is worth noting that the commercial license of MS Visual Studio is paid, as is the MS Windows license, which is undoubtedly a disadvantage for low-cost projects.
If we talk about low-budget projects, then the most suitable option is Linux. In addition to the fact that most distributions of this OS are absolutely free, including for commercial use, there are also a number of free tools for developing high-quality software for Linux OS. The most common tool for developing software in C ++ is the Qt cross-platform toolkit [2]. It is important to emphasize that Qt allows you to develop applications not only for Linux, but also for MS Windows, Mac OS X, Android and other UNIX-like operating systems. Qt developers offer both free for commercial use and a paid license with additional features. But based on the current practice of software development using this tool, a free license turns out to be more than enough.
')
If we draw an analogy with MS Visual Studio, then in Qt we have the IDE Qt Creator. Here, the alternative to WinForms are the so-called widgets (Qt Widgets), and the alternative for WPF is Qt Quick. Qt Creator also has the ability to create HTML5 based interfaces. But the most interesting toolkit module is the embedded WebKit web engine, which underlies all modern web browsers. A similar module is also available in MS Visual Studio, but it has a number of limitations, and all the more we are more interested in low-budget tools that allow us to reduce costs when creating a software product. The web engine is the core of the browser, it is responsible for the correct display of web pages. The Qt WebKit module allows you to create a client application interface using the techniques of developing web application interfaces. At the heart of creating a web application interface is a well-established technology stack. It includes the HTML markup language (HTML 4, 5), cascading style sheets (CSS 2, 3) and a scripting language JavaScript with a wide choice of additional libraries (frameworks). Special attention is given to the fact that the speed of the emergence of new useful frameworks for the JavaScript language is growing rapidly, and this makes the development of applications rich in functionality more rapid and convenient.
Now the solution to the problem of creating a universal GUI lies on the surface, but this is only at first glance.
Traditional way: Qt WebKit + Qt crutches
Consider the traditional way of creating a universal GUI using the Qt WebKit module using the example of the data visualization module of an acoustic monitoring system developed as part of a PhD thesis [3]. Under the system of acoustic monitoring is meant a system that includes hardware and software. The hardware part of the system consists of a sensor network of acoustic sensors, the data from which are processed on the microcontroller and sent via any interface (UART, IEEE 802.X, etc.) to a personal computer (PC). The software part consists of a set of application programs that work both on the local PC (client software) and on the remote server (server software).
The traditional method involves the use of interprocess
Fig. 1. The traditional method of implementing a universal GUI
interactions through the built-in Qt mechanism. This implies the interaction between the main logic of the client application, shown in Figure 1 as a Data Processor , and the GUI element. One of the drawbacks of this approach is that the code for implementing the GUI in JavaScript will have specific functions that will be relevant only for the client Qt application. For a server application that is responsible for the GUI, another code specific to the server implementation will be needed. For example, if you use a PHP script to implement the core logic of the server application, you will need to implement interprocess communication using some other technology (AJAX or WebSocket). This leads to another drawback, namely the use of an additional programming language to implement the basic logic of the server application and the development of a new interprocess communication algorithm.
A more interesting approach: Qt WebKit + WebSocket
To solve these problems, a new method is proposed, based on the use of the WebSocket technology mentioned above. The essence of the method is to unify the interprocess communication method between the main application logic and the GUI, both on the client side and on the server side. In this case, it becomes possible to use JavaScript code to implement a universal GUI for both sides.
Fig. 2. A new method of implementing a universal GUI
In fig. 2. It can be seen that now for interprocess communication, both for the client and for the server part, the technology WebSocket is used. That is, now we have one universal JavaScript code for different applications. In this case, a prerequisite is a server application, the basic logic of which is implemented using Qt, in a language C ++, which is not quite familiar to web developers. On the one hand, such an approach to the implementation of a server application complicates the task for a highly specialized web developer. But on the other hand, we have universal parts of the code that allow us to save time on duplicating the same and the same meaning of algorithms in different languages. It is also important to emphasize that in order to use the WebSocket technology, an additional library is needed, which is freely available on the Internet or is included by default in later versions of Qt.
Fig. 3. Local (right) and server (left) applications running on Ubuntu OS 14.04
In fig. 3 shows an example of the implementation of a new method for creating a universal GUI for Ubuntu OS 14.04. As can be seen in the figure, in the end we get a universal interface, both for a local application running as an executable file of the OS, and for a server application running in a modern web browser. Since cross-platform tools are used for software development, this suggests simple portability of a software product to other operating systems in the future.
Bibliography
1. Qt Documentation [Electronic resource]. Access Mode: qt-project.org/doc
2. Visual Studio Library [Electronic resource]. Access mode: msdn.microsoft.com/en-us/library/vstudio
3. Young scientists - the development of the textile-industrial cluster (SEARCH - 2014): a collection of materials of the inter-university scientific and technical conference of graduate students and students with international participation. Part 2. - Ivanovo: Ivanov. state Polytechnic University, 2014. - p. 25 [Electronic resource]. Access Mode: ti.ivgpu.com/poisk/file/part_2.pdf
PS The only thing that catches the eye in the picture are different fonts, but I, frankly, was not up to them then.
PPS Is it possible to patent this method, so that on protection there was something to trump other than the software registration certificate?
Source: https://habr.com/ru/post/244281/
All Articles