Touch GUIs with WebSockets

One of the new features of V-Control 3.7.14 is the ability of the build in web server to handle 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.

Status messages are sent to all connected web applications at the same time. In the following example we have a web application to control two projectors. In addition we have buttons to run 6 tasks.

WebExample Screenshot

Lets assume that two users (i.e. one with a Tablet and one with a smartphone) have connected to V-Control with their browsers. As far as user A changes an input of one projector, user B see this change on his device, because the other input is selected on his screen as well. And lets assume that user C has direct access to the V-Control system. He controls one of the projectors direct from the V-Control GUI. As far as he changes an Input or send a Power command, Users A and B can see the status change on their tablets / phones.

We have provided an example project that you can study and use as template for your own projects. To work with this example, you have to load the webexample.vc3 project file, located in V-Control example directory. By default, V-Controls httproot directory contains the web application (httproot is the standard directory for web content). To switch on the web server take a look at the documentation here.

The example project uses some dummy devices. These devices do not really exist, but emulate the existence. Thus you can test the example without the need to have the devices connected to V-Control.

Changing the WebSockets IP Address

In the default index.html file, the websocket uses 127.0.0.1 (localhost) as server address. You have to change this with the IP address of your V-Control machine, otherwise only a local browser on the V-Control machine can access the websocket. To change this, open the index.html file with a text editor and change line 19.

initWebSocket(“ws://127.0.0.1:8080″). Change 127.0.0.1 to your V-Control IP Address.

As you can see in the code snippet above, in line 19 we initialize the websocket. The websocket itself and some helper functions are located in v-control.js.

Sending Commands

To send commands from the web app to V-Control we provide two functions in v-control.js, scrRunTask(Task) and devRunCommand(DeviceName, ChannelList, Command, DP1, DP2, P1, P2, P3, P4).

Lets start with a simple scrRunTask example

This calls the task “Clip1” on the V-Control system.

Adding Event Handler

V-Control send the message “Clip1;START” if the task is running and “Clip1;STOP” if when the task is finished. This enables us to write an event handler that changes the text color of our button.

The function ShowStatus is called from the websockets onMessage event located in v-control.js. Our event handler uses the EventData variable to check if a task was started or stoped. Depending on the Task status the text color of the button that launched the task switches from white to red or vice versa.

Here is the complete index.html file. If you have any questions please contact our forum for support.