CUE WebGUI User Manual
WebGUI versIon 0.7
User Manual
UM044_01_WebGUI
07.10.2011
Copyright © CUE, a.s., Praha, Czech Republic 1990 - 2011
All rights reserved. Specications are subject to change without prior notice.
Contents
4 IntroductIon
4 Overview
4 Requirements
5 regIstratIon
6 How webguI works
6 Overview
6 Simulation Mode
7 Hardware Mode
7 Working Mode
8 How to use webguI
8 Project Preparation
10 Web Pages Creation
12 Web Pages Simulation and Upload
13 Programming
16 webguIgrapHIccollectIon
16 WebGUIBuilder
18 Page
19 PushButton
21 Label
22 TextBox
23 Bargraph
24 InputTextForm
WebGUI
26 webguIserver
26 Overview
26 Properties
26 Events
27 Functions
28 software and fIrmware lIcense
29 notes
www.cuesystem.com
support@cuesystem.com
User Manual
Page 3
IntroduCtIon
Overview
WebGUI is a new application that expands the range of user functions offered by the Cue System. It is
a software solution allowing to design and run web pages stored in touch panel or controller. Web pages
can serve for remote monitoring and controlling of Cue System using standard internet browser. Web
pages are designed by the same way as touch panel layouts. That means no special knowledge about
web page design is required.
Controlled Devices
Windows PC
running
Internet Browser
Windows Laptop
running
Internet Browser
Controller or Touch Panel
WebGUI
Smartphone or
TabletPC
running
Internet Browser
Requirements
• Resources WebGUIResources_x.xx.zip downloaded from
http://www.cuesystem.com/software_application_resources.aspx.
You need a login.
• PC with Cue Visual Composer version 1.40 or higher
• Internet browse
www.cuesystem.com
support@cuesystem.com
User Manual
Page 4
regIstratIon
In order to use WebGUIServer software it has to be registered. Registration is bound to the hardware
product serial number (where WebGUIServer is connected), e.g. CS0253.000001.
To register WebGUIServer please
1. Send serial number of your hardware product to register@cuesystem.com.
2. You will get back LicenseKey le.
3. Open this le in the Notepad.
WebGUI
4. Copy WebGUI Serial Number and Registration Number to appropriate properties of an instance of
WebGUIServer.
Notes
• Without registration WebGUIServer runs for 1 hour and then stops.
• In Cue Visual Composer simulation / debugging mode WebGUIServer runs without any limitation.
www.cuesystem.com
support@cuesystem.com
User Manual
Page 5
How webguI works
Overview
WebGUI is XPL2 pre-programmed widget which allows to generate and run web pages stored in a touch
panel or in a controller.
WebGUI consists of following components
• Graphic collection WebGUIGraphicCollection
• Device driver WebGUIServer
• Module WebGUIInterface
Web pages are designed by the same way as touch panel layout using objects included in
WebGUIGraphicCollection. These objects are prepared to generate web pages automatically. The basic
object is window WebGUIBuilder. It isn’t included in target web pages, but it must be used for web pages
design and for communication during page simulation and generation. All other objects included in
graphic collection generate the same objects for web pages. Current WebGUI version includes following
objects
• Page
• PushButton
• Label
• TextBox
• InputTextForm.
Device driver WebGUIServer must be connected to CUEunit (controller or touch panel) where web
pages are automatically generated and stored. Module WebGUIInterface connects graphic collection and
WebGUIServer during page design and simulation.
Web pages are generated during debug of the application.
For more details about WebGUIComponents see approprite chapters.
WebGUI
Simulation Mode
Cue Visual Composer
WebGUI
touch panel
WebGUIGraphic
Collection
In the Simulation Mode WebGUI touch panel
and controller are simulated in the PC using Cue
Visual Composer simulation mode.
Web pages are generated by WebGUI touch
panel and WebGUIserver creates web les to
lestorage of the controller. In this mode the
lestorage is temporary folder in the PC.
WebGUIBuilder
Pages incl.
Pages incl.
Pages incl.
objects
objects
objects
PC
WebGUI
Interface
Module
Filestorage
incl.
web page les
Controller
Internet
browser
WebGUIServer
User module
localhost
Internet browser running on the same PC
in localhost mode can be used for web page
preview.
www.cuesystem.com
support@cuesystem.com
User Manual
Page 6
Hardware Mode
WebGUI
PC
Cue Visual Composer
WebGUI
touch panel
WebGUIGraphic
Collection
WebGUIBuilder
Pages incl.
Pages incl.
Pages incl.
objects
objects
objects
In the Hardware Mode WebGUI touch panel is
simulated in the PC using Cue Visual Composer
simulation mode and controller is running in
hardware mode. That means real unit must be
connected.
Web pages are generated by WebGUI touch
panel and WebGUIserver writes appropriate les
to lestorage of the real controller. That means
web page les are prepared for for working
mode.
Internet
browser
Controller
WebGUIServer
Ethernet
Ethernet
This mode is used for
• web pages simulation from real unit
• nal web pages les upload
Internet browser running on the same PC can
be used for web page preview. IP address and
port of the real unit is used.
WebGUI
Interface
Module
Filestorage
incl.
web page les
User module
Working Mode
PC
Internet
browser
In this mode web pages can be used directly
from controller. WeGUIServer reads web page
les stored in lestorage of the unit.
Ethernet
Controller
Filestorage
incl.
web page les
WebGUIServer
User module
Application upload using Final in CVC must be
done before start of this mode.
www.cuesystem.com
support@cuesystem.com
User Manual
Page 7
How to use webguI
Provide the following steps in sequence as described below.
Project Preparation
CVC Project Creation
• Create a new Cue Visual Composer project or open your existing project, where WebGUI will be
implemented.
• CVC version 1.38 or later is required.
Resources
Add the following software components to the project resources
• Driver CUE_WEBserver_WebGUIserver_Tcp_Server_x.xx.cvcd
• Graphic collection WebGUIGraphicCollection_x.xx.cvcg
All these components are included in the le WebGUIResources_x.xx.zip.
Conguration
• Insert one CUEunit (touch panel) to your conguration
• Change name to WebGUI1. This instance name is default name used in module WebGUIInterface.
• Set properties Display Width and Display Height of the WebGUI1 to requested values. These
values dene default size of web pages.
• Insert one CUEunit (controller) to your conguration or use existing CUEunit where web pages will be
stored.
• Create an instance of WebGUIServer (drag this driver from resources area to conguration tab) and
keep instance name WebServer1.
• Connect the WebServer connector to TcpServer1 or TcpServer 2 conector of the CUEunit where web
pages will be stored.
WebGUI
• Set property Port of the WebServer1. Default value is 8080 and we recommend to keep it.
• Only one instance of WebServer can be used in one CUEunit.
www.cuesystem.com
support@cuesystem.com
User Manual
Page 8
WebGUI
Interface Module
• Import module WebGUIInterface.cvcm to Modules of the CUEunit where driver is connected.
• This module is included in the le WebGUIResources_x.xx.zip.
WebGUIBuilder
• Create an instance of WebGUIBuilder window in WebGUI1 touch panel (drag and drop WebGUIBuilder
from graphic resources to touch panel WebGUI1.
• Keep instance name WebGUIBuilder1.
Debug Proles
• Create Debug prole Simulation and set Debug Mode Simulation for units WebGUI1 and for
Controller1 too. This prole will be used for web simulation on your PC. All les are generated and
stored in your PC.
• Create Debug prole Hardware and set Debug Mode Simulation for unit WebGUI1 and set Debug
Mode Hardware for Controller1. This prole will be used for web simulation from real hardware unit
and for nal upload to real hardware unit.
Test
• Start Debug in Simulation prole. In the simulation window you see WebGUIBuilder screen with error
message “No pages“.
• For more information about WebGUIBuilder see chapter WebGUIGraphicCollection / WebGUIBuilder.
www.cuesystem.com
support@cuesystem.com
User Manual
Page 9
Loading...