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 09: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 09:07 by admin