User Tools

Site Tools


other_gui_options

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

other_gui_options [2018/06/25 11:07] (current)
admin created
Line 1: Line 1:
 +===== 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
 +
 +<code>
 +<!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)
 +                //**********************************************************
 +            });
 +</code>
 +
 +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: [[api|Remote Protocol]]
other_gui_options.txt ยท Last modified: 2018/06/25 11:07 by admin