User Tools

Site Tools


advanced_gui

Advanced GUI

V-Control Designer

V-Control Designer is software that is used to create Graphical (touch) User Interfaces for V‑Control. It communicates with the Remote Panel Server via TCP, and up to 5 V‑Control Designer instances can have simultaneous access to a Remote Panel Server. The Remote Panel Server has two connections to V-Control Devices, the RemotePanelReceiver and the RemotePanelSender. Because V-Control, the Remote Panel Server and V-Control Designer communicate via TCP, they can run on the same machine or on different ones.

While V‑Control and the Remote Panel Server is multi-platform software (Windows, MAC OSX and Linux) V‑Control Designer is Windows only at the moment. Nevertheless, V‑Control Designer can operate with Remote Panel Server running on a Linux or MAC OS computer (and of course Windows). Only V‑Control Designer itself has to run in a Windows environment.

Installation

Remote Panel Server

Unzip the downloaded file and copy it to a directory with users write permissions. Then launch the exe file.

V-Control Designer

Unzip the downloaded file and copy it to a directory with users write permissions. Then run vcredist_msvc2015_x64.exe that is located in the V-Control Designer directory. Then launch the exe file.

Licensing

V‑Control Designer is not open source such as V‑Control. However, the program is free to use. There are no license fees for V-Control Designer, but for the Remote Panel Server, and this server is mandatory. Therefore you need to buy a license for the Remote Panel Server to use V-Control Designer. A license is only valid for one instance of the Remote Panel Server, and only one instance can run on a computer.

The Remote Panel server runs in Demo mode without a license. That means that every 30 minutes the network connection will be closed and the software must restart. There are no other restrictions. If purchased a license, use the hardware key (USB thumb drive) and the Server will run in licensed mode.

Hardware License Key

The Remote Panel Server needs hardware dongle as license key. The dongle will be send after purchase. Alternatively use the USB_Key_License_Requester.exe to create a license request file:

  • Unordered List ItemPurchase V-Control Remote Panel Server
  • With the purchase, make a note that you will send a license request key later. Alternatively send the license request key with the purchase as note.
  • Download USB_Key_License_Requester.zip (Windows 64 Bit)
  • Unzip to a folder
  • Connect a USB thumb drive to your computer
  • Run USB_Key_License_Requester.exe

  • Unordered List ItemClick the Get Drives button
  • Select the USB drive in the drop down list right of that button
  • Click Create License Request
  • Copy the Key and send us an Email with that key
  • We create a license file and send it via Email back to the purchaser
  • Copy the file in the root directory of the USB drive used for the license request.

It will only work with the USB drive used for the request. Using another drive has the same result as using no key.

Remote Panel Server

There is no direct communication between V-Control and V-Control Designer. The Remote Panel Server works as intermediary between the two programs.

First start the Remote Panel Server

The Remote Panel Server opens 3 server ports. The Display Server Port is used by V-Control Designer (up to 5 at the same time). V-Control Sender Port and V-Control Receiver Port are used by V-Control devices.

V-Control needs two new devices, The RemoteScreenSender and RemoteScreenReceiver. Create TCP-Client channels with the IP Address of the Remote Panel Server and the ports for Sender and Receiver.

Join Number Concept in Detail

To interact with the V-Control Designer widgets, (buttons, labels, sliders etc.) a concept of join numbers is used. Join numbers define a connection to / from a widget. There are three different types of join numbers:

  1. Digital Joins: They can have a value of 0 or 1.
  2. Integer Joins: Any Integer value
  3. String Joins: Any type of characters

Join numbers for each type can be between 1 and 999. So you have 999 digital joins, 999 integer joins and 999 string joins. All V-Control Designers connected to one Remote Panel Server share these join numbers. So if you have more then one Designer connected to the Remote Panel Server, and they show different GUI’s (Graphical User Interface), take care that the join numbers don’t overlap.

But in some cases it can be useful to share some join numbers on different GUI’s. If you have information that is needed on all displays, then you can use a single string join number and have labels on all GUI’s with this number. Then the information appears everywhere.

Below there is a button with some of its properties. Notice the second one, Digital Join. Because a button can only have the state On or Off, the digital Join represent its state.

If the button is pressed, it sends a message with its type (Digital in this case), join number and 1 as value. If the button is released it sends the same message but 0 as value.

In V-Control, there is a device RemoteScreenReceiver. Per default, this device has device variables D001..D100 for digital joins, I001-I100 for integer joins and S001..S100 for string joins. If more join numbers needed add them in the Device Editor

If V-Control Designer sends a message with a join number and a value, then the RemoteScreenReceiver updates a device variable (D013 in this example). This generates an event, and we can use this event to run a task.

A detailed description how events work in V-Control is at Events

Lets Do the other way. Below is a label with the string String Join Caption 1.

We can now use the device RemoteScreenSender to send a message to this join number. The content of this message will be shown in the label.

Maybe you notice that the label has additional string joins. String Join Back Color, String Join Border Color and String Join Text Color can receive messages to change the corresponding colors.

The RemoteScreenSender device has commands to send messages to the Remote Panel Server

The command SendString send as message to a string join, in this case join number 1 which we used for the caption join of the label. If we run this command, the label changes its caption.

More Information about RemoteScreenReceiver and RemoteScreenSender can be found at Device Drivers.

Manage Join Numbers

In large projects it is easy to lose track of the join numbers. For that reason, V-Control can help managing join numbers. In V-Control, click the Join List tool button.

This list is used to make notes what a join number is used for. If you have a button with join number 1, and the RemoteScreenReceivers device variable D001 change event is used to trigger a task that turns on a projector, edit the row with D001 in the following way:

It is good practice to give the widgets meaningful names. The task that handles the change event has the same name with prefixed “on”. Use the comment column for further useful information. Because the list could be very long, the Search field helps to find a row of interest. Anything typed in here that matches any row content works as a filter. Only rows that match the search field content are shown.

At the bottom of the Join List, the Create Default List button creates a default list of join numbers (D001..D100, I001..I100 and S001..S100). If more join numbers are needed enter a new one in the Join Number field. The format is D101 for a new digital join number 101. I221 creates an integer join with number 221 and S123 a new string join with number 123. Click the Add Row button to insert the new join number.

GUI Overview

The Main Window is divided into three parts:

  1. The Library (left) Here are the widgets that can be dropped to the page area. These widgets are used to build the GUI.
  2. Page Area (center) This is the area where you drop and position your widgets.
  3. Project Settings / Inspector (right) Here you can set up the project and customize the widgets.

Click the Run menu item to switch to run mode.

Project Settings

Display Server IP: To establish a connection between V‑Control Designer and Remote Panel Server, you need to set up the TCP connection. Display Server IP contains the IP Address of the Remote Panel Server. If both, Remote Panel Server and V‑Control Designer running on the same system, this should be localhost (127.0.0.1). In other cases the use the real address.

Port: The TCP port that is used by Remote Panel Server to connect to Displays (Display Server Port).

Full Screen: If checked, V‑Control Designer will cover the whole screen if switched to Run mode. There will be no window decoration. To exit the run mode if full screen view, press ESC.

H Grid, V Grid: In Edit Mode, the user can display a grid that helps to position and align the widgets. H Grid and V Grid determine the distance between the grid lines.

Grid Color: Determines the color of the grid.

Show Grid: If checked, the grid is shown

Magnetic Grid: If checked, widgets will allign to the grid if you change their position by dragging them.

H Size, V Size: Determines the size of all pages in a single project. Usually this should match the Display size if you want to run in Full Screen mode.

Add Page, Delete Page V‑Control Designer can use multiple pages within one project. Here you can add new ones or delete existing ones.

Settings

Main Menu File → Settings

Default Project Press the Select button to choose a project that is loaded at startup.

Autostart Default Project If a valid project is loaded by default, enabling this check box will initiate run mode at startup.

Pages

A V‑Control Designer project consist of one or more pages. A page act as container for widgets and can use the entire screen in run mode if Full Screen is selected.

To add or delete pages switch to Project Settings.

Page Properties:

To access the page properties select the Inspector and click on an empty area in the page. Then you can change the page Name and Back Color. The name has to be unique.

Buttons

Button properties are:

  • Name: The name of the button. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Digital Join: The join number for the button pressed and release event. If pressed, this join number will have the value 1, if released then 0. The A button automatically selects a free join number.
  • Caption On: Button caption in pressed state
  • Caption Off: Button caption in unpressed state
  • Radius: If > 0 then the button has round corners.
  • Back Color Off: The back color of the button in unpressed state
  • Border Color Off: The border color of the button in unpressed state
  • Text Color Off: The Text color of the button in unpressed state
  • Back Color On: The back color of the button in pressed state
  • Border Color On: The border color of the button in pressed state
  • Text Color On: The Text color of the button in pressed state
  • Align: Alignment of the caption
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
  • Font: The font of the Caption
  • Size: Font size of the caption
  • Bold, Italic, Underline: Style of the Caption
  • Image Off, Image On: Image to show in unpressed and pressed state
  • Scale to fit: Scales the image that it fits in the widgets dimensions.
  • Keep Aspect: Keep aspect ratio of the image
  • Goto Page: Switch to another Page
  • Mode: Normal: If pressed, it automatically gets unpressed. Toggle: If pressed, it stays pressed until it was pressed again. One Time: If pressed it stays pressed. The only way to reset is to send a message with value 0.

Progress Bar

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Integer Join: The join number to set the progress. The A button automatically selects a free join number.
  • String Join Back Color: The back color of the progress bar. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • String Join Border Color: The border color of the progress bar
  • String Join Inner Color: The inner color of the progress bar. Use all the String Color Joins to change the color of the widget by V-Control.
  • Min: The minimum integer value that the progress bar can show (no progress)
  • Max: The maximum integer value that the progress bar can show (full progress)
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.

Label

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Caption: The text that is displayed
  • String Join Caption: The join number to set the Caption.
  • String Join Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • String Join Border Color: The border color of the label
  • String Join Text Color: The Text color of the label. Use all the String Color Joins to change the color of the widget by V-Control.
  • Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the label
  • Text Color: The Text color of the label.
  • Align: Text alignment
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
  • Font: The font of the Caption
  • Size: Font size of the caption
  • Bold, Italic, Underline: Style of the Caption
  • Multilie: Show multiple lines of text

Group Box

  • Name: The name of the button. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Caption: The text that is displayed
  • Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the label
  • Text Color: The Text color of the label.
  • Align: Text alignment
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Font: The font of the Caption
  • Size: Font size of the caption
  • Bold, Italic, Underline: Style of the Caption

Image

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • String Join (URL): Send the path of an image to change the image by V-Control
  • Back Color: The back color of the widger. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the widget
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.

Text Input

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Text: The text that is displayed
  • String Join Caption: The join number to set the Text.
  • String Join Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • String Join Border Color: The border color of the label
  • String Join Text Color: The Text color of the label. Use all the String Color Joins to change the color of the widget by V-Control.
  • Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the label
  • Text Color: The Text color of the label.
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
  • Font: The font of the Caption
  • Size: Font size of the caption
  • Bold, Italic, Underline: Style of the Caption
  • Multilie: Show multiple lines of text

Combo Box

Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview. Edit Items: Opens an editor to edit the items in the combo box Integer Join: The join number to select an item. Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers. Border Color: The border color of the label Text Color: The Text color of the label. Top, Left, Width, Height: Position and size of the button Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets. Font: The font of the Caption Size: Font size of the caption Bold: Style of the Caption

Spin Button

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Integer Join: The join number
  • Min: The minimum integer value
  • Max: The maximum integer value
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
  • Font: The font of the items
  • Size: Font size of the items
  • Bold: Style of the items

Slider

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Integer Join: The join number
  • Min: The minimum integer value that the progress bar can show (no progress)
  • Max: The maximum integer value that the progress bar can show (full progress)
  • Orientation: Horizontal or vertical orientation
  • Back Color: The back color of the widget. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the widget
  • Inner Color: The inner color of the widget.
  • Handle Color: Color of the handle
  • Scale Ticks: every Scale Tics pixel a marker is set
  • Show Scale: Show or hide the scale
  • Sep Width: Minimum width of a step
  • Knob Image: Image for the handle
  • Inline Image: image for the inner part
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
  • Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.

The image properties of the slider allow custom sliders. It depends only on the graphical skills how they look.

Ellipse

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • String Join Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • String Join Border Color: The border color of the label
  • Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the label
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.

The Ellipse is often used a background for other widgets to visualize a function group.

Rectangle

  • Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
  • Radius: Corner radius.
  • String Join Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • String Join Border Color: The border color of the label
  • Back Color: The back color of the label. Color values are in the format AA,RR,GG,BB. AA = alpha (00..FF), 00 means transparent, FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
  • Border Color: The border color of the label
  • Top, Left, Width, Height: Position and size of the button
  • Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.

The Rectangle is often used a background for other widgets to visualize a function group.

Web Server

One way to create fast responsive web sites is to use the build in web server and WebSockets. This allows us to establish a stable, bidirectional connection between a web application and V-Control. The benefit of a bidirectional connection is, that our web application does not have to poll the V-Control web server to get status changes. As far as a status change of a device occurs, the information is sent to the web application. All we need is to write a handler for this status message and show the new status in our GUI.

In the example below a websocket is initialized

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand open the template in the editor.-->
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <title>V-Control Web Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="./js/libs/jquery-ui-1.10.4.custom.min.css">
        <link rel="stylesheet" type="text/css" href="./js/libs/jquery-ui-1.10.4.custom.css">
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="./js/libs/jquery/jquery.js"></script>
        <script src="./js/libs/jquery/jquery-ui-1.10.4.custom.min.js"></script>
        <script src="./js/libs/v-control.js"></script>
        <script>
            $(document).ready(function() {
                //**********************************************************
                //Change the IP with the IP Address of your V-Control system
                initWebSocket("ws://127.0.0.1:8080"); //use the same port as on V-Control httpRemote (8080 here)
                //**********************************************************
            });

For more information please use your favorite search engine and learn more about JavaScript and HTML (if necessary) There is also en example with V-Conntrol 3. This will not work in the same way with V-Control4, but will be a good starting point to learn how to do. https://v-control.com/touch-guis-with-websockets/

Language / IDE of your Choice

Because V-Control uses an open API, you can use any language / IDE you familiar with and create graphical user interfaces. The API is explained here: Remote Protocol

advanced_gui.txt · Last modified: 2018/05/16 07:50 by admin