Window Manager

Window Manager Example

A guide on how to deploy multiples Qt applications in Window Manager module on CCpilot target displays with different configurations and layouts.

CrossControl’s Window Manager allows developers to realize integration of multiple applications with dynamic windows while allowing applications to be built with different toolchains like Qt, CODESYS and HTML5. It offers ease of designing the HMI system and the GUIs so that the applications can adapt to fit your task requirements with several levels of customization. 

More in details please head to Window Manager page here:

Head to the Online Documentation for all the possible configurations and modifications in Window Manager and how to install the package:

Device packages can be downloaded from here:


Installed Window Manager

Once you installed Window Manager and it is deployed on your CCpilot device, you will see an empty screen of the Window Manager without any applications or layouts displayed!

Window Manager Empty ScreenWindow Manager without any applications or layouts

In the installation package we have also included a few useful example clients and layouts developers can try and test to run.

Below we will locate these examples and run feature_showcase on CCpilot V1200 Display.

Example layouts available

In this article we will look at feature_showcase example that has already predefined layouts and desktop files for two of our demo applications, Multi-Touch Demo and Main-Cluster Demo.
These demo applications are available for download in a .tar.gz format-file at the end of this article.
All you need to do is:
  1. Download the package demo-package-for-WM.tar.gz
  2. Copy or move it to the displays /opt directory
  3. Go to /opt directory: $ cd /opt
  4. Run this command to unpack it on the device: $ sudo tar -xvf demo-package-for-WM.tar.gz -C /
Lets see in the feature_showcase folder and go through the included files.

feature_showcase contents

feature_showcase contents in VM terminal:
  1. clients: As it is described in the online documentation, in order to start an application in Window Manager you need to create a .desktop file for the application to set the environment in Window Manager.
  2. components: Includes a qml container file
  3. config.ini: This file is where developers modify the configuration of the Window Manager
  4. layouts: Includes the layouts file in .json format, that defines application regions
  5. start.sh: This is a shell script that starts the application automatically in Window Manager
In order to use the feature_showcase example all you need to do is to create a softlink the default config.ini file /etc/window_manager/config.ini to the config.ini file in feature_showcase.

You can achieve that by logging into the CCpilot display via “SSH” and use the following command in a Windows Command Prompt or Linux Terminal:
$ sudo ln -sf /opt/window_manager_application/examples/feature_showcase/config.ini /etc/window_manager/config.ini 

Then you can restart Window Manager with this command:
$ sudo systemctl restart window-manager

Also make sure to start the demo applications aswell:
$ sudo systemctl start multitouch.service

and
$ sudo systemctl start maincluster.service

This is how feature_showcase layout look like

feature_showcase layouts
  1. The QuickBar logo that can be changed to desired logo
  2. This is where the application icons appear, you can click to display the desired application or hold for a second to open the layout selector to place it in the windows that configured in layout.json file
  3. Here is the available layouts, you can press on it to expand and show all the available layouts.
  4. Here are the defined layouts from layout.json files that you can choose from.
In the above screenshot we see that two applications are displayed Gauges and Multi Touch in the layout “Left | Right” which place an application on the left of the screen and the other on the right.
There is also a third application demo Crane-demo added in the download package, that will be displayed but not included in the screenshots below! 
If you press and hold on one of the application icons, it will open the layout selector for this layout:

As you can see in the screenshot below, you can choose to place the app on Left or Right.

Left | Right layout selector

As mentioned before, you can change the layout by pressing on Layout (3) and choose between the other layouts, in this case “Single App” and “Quad”.

Available layouts

This is how the “Single App” layout looks, displays only one application in Fullscreen mode.

You can press on the other application to immediately display that application instead, easily change between different multiple applications.

Single App displaying in Fullscreen mode

This is the layout selector for “Single App” layout.

Single App layout selector

Layout selector for “Quad”, in this layout you can have four applications running simultaneously.

The option in this layout is Fullsceen, Left, Right, Top Left, Bottom Left, Top Right, Bottom Right and PiP Overlay.

Quad layout selector

Example of how the two applications can be displayed in this layout.
Multi-Touch Demo application in Fullscreen mode and Main-Cluster demo on top of it in PiP Overlay mode.

PiP Overlay

Main-Cluster Demo in Bottom Right and Multi-Touch Demo in Bottom Left.

Quad layout with two applications

All the elements and components in the Window Manager can be configured and modified easily by developers to their desired UI.

Just to showcase a few examples:

QuickBar at the top

This is how the Window Manager will display applications without any application icons.

No application icons

Last example of a custom layout with four applications running simultaneously but displaying only two, one application (Main-Cluster) at the top and the (CC Web Browser) at bottom with the Quickbar on the right side on CCpilot V1200.

Custom layout with four applicatios

Environment:

  1. Device: CCpilot V510/V700/V705/V710/V1000/V1200
  2. OS: CC Linux 3.2.0.0
  3. Qt RT: Qt-6.4.1

Demo Package:

Download the package including two demo applications Multi-Touch, Main-Cluster, .service files to run the applications automatically in Window Manager and some QML components that are necessary: demo-package-for-WM.tar.gz

    • Related Articles

    • Diagnostic Messages Qt App Example

      An example of J1939 Diagnostic Messages received, handled and displayed in a Qt Quick2 application (QML) on the CCpilot Display Computers or on the Virtual Machine (UX-Designer v5.0). Example Application running in Virtual MAchine This example ...

    • Installing the LinX-Base runtime on a CCpilot iMX8 display

      When you order a product with LinX-Base (UX-Designer, Fieldbus Access and Data Engine) the required runtime will be pre-installed. If you still need to download this runtime package manually, follow the steps below. This article is valid for all the ...

    • Access CCpilot VI2 Hardware Buttons and Buzzer from CODESYS

      This CODESYS application example shows how the state of the hardware buttons and the buzzer on the CCpilot VI2 display can be read and used in the application. There are four squares for ech of the buttons and when a button is pressed, the square ...

    • Where can I find Operation System update packages for CCpilot Displays

      Crosscontrol has all the downloadable packages available for each of the CCpilot Display Computers. Head to our list of different CCpilot devices: Display computer | CrossControl From here, choose and click on the CCpilot Display that the OS update ...

    • Data Engine access from CODESYS

      This article contains two project parts – a CODESYS NoVisu project and a Qt GUI application. The two projects use the Data Engine (DE) to send signal values between the two applications. The DE signals in the Qt application have been created with the ...