November 26, 2014 at 19:25Universal GUI
Hello! My name is Khalitov Kirill, I am a graduate student from MGUDT (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 as a result I got a subject.
Currently, any modern monitoring system includes application software (software) for data visualization. As a rule, the launch of this software requires a recommended operating system (OS), in most of its cases, the Microsoft OS. However, now there is a tendency to use cross-platform tools for software development. As a result of this, it becomes possible to launch a finished software product on different operating systems, including mobile OS.
In addition, in connection with the proliferation 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). Usually 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, you need to make enough effort both for the developer of the client application interface and the developer of the web application interface. Ultimately, the magnitude of the efforts of one or another developer will depend on the interface of which application will determine the overall style.
Consider the currently most popular methods for building client application interfaces in C ++, as the most used for software development, for Microsoft Windows (MS Windows) and Linux. The main software development tool 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 the 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), the WPF system becomes more popular. Besides, recent 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 license of MS Windows, which is undoubtedly a drawback for low-budget projects.
If we talk about low-budget projects, then the most suitable option is the Linux OS. 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 quality software for the Linux OS. The most common tool for developing software in C ++ is the cross-platform toolkit Qt [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 toolkit, a free license is 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 is the so-called widgets (Qt Widgets), and the alternative to WPF is Qt Quick. Qt Creator also has the ability to create HTML5-based interfaces. But the most interesting module of the toolkit is the embedded WebKit web engine, which underlies all modern web browsers. A similar module is 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 can reduce the cost of 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 technique of developing web application interfaces. At the heart of creating a web application interface is an established technology stack. It includes the HTML markup language (HTML 4, 5), cascading style sheets (CSS 2, 3) and the JavaScript scripting language with a rich selection of additional libraries (wireframes). Of particular note is 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 faster and more 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 to create a universal GUI using the Qt WebKit module using the example of the data visualization module of the acoustic monitoring system developed as part of the dissertation work [3]. By acoustic monitoring system is meant a system including hardware and software. The hardware 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 applications running 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 for implementing a universal GUI
interaction using the built-in Qt mechanism. This implies the interaction between the main logic of the client application, depicted in Fig. 1 as a data handler , 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 Qt client application. For the server application responsible for the GUI, you will need another server-specific code. For example, if you use a PHP script to implement the basic logic of a server application, you will need to implement interprocess communication using some other technology (AJAX or WebSocket). This implies 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 for implementing a universal GUI
In fig. 2. it is seen that now for interprocess communication, both the client and server parts use WebSocket technology. That is, now we have one universal JavaScript code for different applications. In this case, a prerequisite is a server application, the main logic of which is implemented using Qt, in the C ++ language, which is not quite familiar to web developers. On the one hand, this approach to implementing 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 in the sense of algorithms in different languages. It’s also important to emphasize that an additional library is required to use WebSocket technology,
Fig. 3. Local (right) and server (left) applications running on Ubuntu 14.04 OS
. In fig. Figure 3 shows an example of the implementation of a new method for creating a universal GUI for Ubuntu 14.04. As you can see in the figure, in the end we get a universal interface, both for a local application running as an OS executable and for a server application running in a modern web browser. Since cross-platform tools are used for software development, this suggests a simple portability of the 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 and industrial cluster (SEARCH - 2014): a collection of materials from the inter-university scientific and technical conference of graduate students and students with international participation. Part 2. - Ivanovo: Ivanov. state Polytechnic Un-t, 2014. - P. 25 [Electronic resource]. Access mode: ti.ivgpu.com/poisk/file/part_2.pdf
PS The only thing that catches the eye is different fonts, but to be honest, then it was not up to them.
PPS Can this method be patented so that there is something to trump on the protection besides the certificate of registration of software?
Introduction
Currently, any modern monitoring system includes application software (software) for data visualization. As a rule, the launch of this software requires a recommended operating system (OS), in most of its cases, the Microsoft OS. However, now there is a tendency to use cross-platform tools for software development. As a result of this, it becomes possible to launch a finished software product on different operating systems, including mobile OS.
In addition, in connection with the proliferation 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). Usually 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, you need to make enough effort both for the developer of the client application interface and the developer of the web application interface. Ultimately, the magnitude of the efforts of one or another developer will depend on the interface of which application will determine the overall style.
Modern ways to build interfaces
Consider the currently most popular methods for building client application interfaces in C ++, as the most used for software development, for Microsoft Windows (MS Windows) and Linux. The main software development tool 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 the 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), the WPF system becomes more popular. Besides, recent 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 license of MS Windows, which is undoubtedly a drawback for low-budget projects.
If we talk about low-budget projects, then the most suitable option is the Linux OS. 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 quality software for the Linux OS. The most common tool for developing software in C ++ is the cross-platform toolkit Qt [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 toolkit, a free license is 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 is the so-called widgets (Qt Widgets), and the alternative to WPF is Qt Quick. Qt Creator also has the ability to create HTML5-based interfaces. But the most interesting module of the toolkit is the embedded WebKit web engine, which underlies all modern web browsers. A similar module is 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 can reduce the cost of 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 technique of developing web application interfaces. At the heart of creating a web application interface is an established technology stack. It includes the HTML markup language (HTML 4, 5), cascading style sheets (CSS 2, 3) and the JavaScript scripting language with a rich selection of additional libraries (wireframes). Of particular note is 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 faster and more convenient.
Now the solution to the problem of creating a universal GUI lies on the surface, but this is only at first glance.
The traditional way: Qt WebKit + Qt-crutches
Consider the traditional way to create a universal GUI using the Qt WebKit module using the example of the data visualization module of the acoustic monitoring system developed as part of the dissertation work [3]. By acoustic monitoring system is meant a system including hardware and software. The hardware 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 applications running 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 for implementing a universal GUI
interaction using the built-in Qt mechanism. This implies the interaction between the main logic of the client application, depicted in Fig. 1 as a data handler , 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 Qt client application. For the server application responsible for the GUI, you will need another server-specific code. For example, if you use a PHP script to implement the basic logic of a server application, you will need to implement interprocess communication using some other technology (AJAX or WebSocket). This implies 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.
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 for implementing a universal GUI
In fig. 2. it is seen that now for interprocess communication, both the client and server parts use WebSocket technology. That is, now we have one universal JavaScript code for different applications. In this case, a prerequisite is a server application, the main logic of which is implemented using Qt, in the C ++ language, which is not quite familiar to web developers. On the one hand, this approach to implementing 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 in the sense of algorithms in different languages. It’s also important to emphasize that an additional library is required to use WebSocket technology,
Fig. 3. Local (right) and server (left) applications running on Ubuntu 14.04 OS
. In fig. Figure 3 shows an example of the implementation of a new method for creating a universal GUI for Ubuntu 14.04. As you can see in the figure, in the end we get a universal interface, both for a local application running as an OS executable and for a server application running in a modern web browser. Since cross-platform tools are used for software development, this suggests a simple portability of the software product to other operating systems in the future.
List of references
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 and industrial cluster (SEARCH - 2014): a collection of materials from the inter-university scientific and technical conference of graduate students and students with international participation. Part 2. - Ivanovo: Ivanov. state Polytechnic Un-t, 2014. - P. 25 [Electronic resource]. Access mode: ti.ivgpu.com/poisk/file/part_2.pdf
PS The only thing that catches the eye is different fonts, but to be honest, then it was not up to them.
PPS Can this method be patented so that there is something to trump on the protection besides the certificate of registration of software?