LWEB-802 - 803 User Manual
LWEB-802 - 803 User Manual
User Manual
LOYTEC electronics GmbH
Contact
Version 2.3
Document № 88074216
Contents
1 Introduction .................................................................................................. 7
1.1 Overview .............................................................................................................. 7
1.2 Scope..................................................................................................................... 9
2 What’s New in LWEB-802/803 ................................................................. 10
2.1 New in LWEB-802/803 2.3.0 ............................................................................ 10
2.2 New in LWEB-802/803 2.2.0 ............................................................................ 12
2.3 New in LWEB-802/803 2.1.0 ............................................................................ 13
2.4 New in LWEB-802/803 2.0.0 ............................................................................ 15
2.5 New in LWEB-802 1.5.0.................................................................................... 17
2.6 New in LWEB-800 1.9.0 and LWEB-802 1.4.0 ............................................... 17
3 Quick-Start Guide ...................................................................................... 20
3.1 Overview ............................................................................................................ 20
3.2 Data Point Configuration ................................................................................. 21
3.3 Graphical Design ............................................................................................... 22
3.4 Download Configuration .................................................................................. 28
3.5 Start LWEB-802 Visualization ........................................................................ 29
3.6 Install and Start LWEB-803 Visualization ..................................................... 31
4 Network Infrastructure.............................................................................. 33
5 LWEB-802 ................................................................................................... 34
5.1 Start LWEB-802 ................................................................................................ 34
5.2 LWEB-802 without Internet Access ................................................................ 35
5.3 Project List......................................................................................................... 36
5.4 Global Settings ................................................................................................... 37
5.5 Navigation Menu and System Menu ................................................................ 38
5.6 Project Settings .................................................................................................. 40
5.7 Error Handling .................................................................................................. 43
5.8 Statistics ............................................................................................................. 43
5.9 System Log ......................................................................................................... 43
6 LWEB-803 ................................................................................................... 45
6.1 Installation ......................................................................................................... 45
6.2 System Tray Icon ............................................................................................... 45
6.3 LWEB-803 Visualization Menu ....................................................................... 45
6.4 Occupancy Detection ........................................................................................ 47
6.5 Zoom Levels ....................................................................................................... 48
6.6 Standard View, Frameless View, and Design View ........................................ 48
Abbreviations
1 Introduction
1.1 Overview
LWEB-802 and LWEB-803 are graphical user interfaces to operate and monitor building
automation systems. They can both display the same graphical project as shown in Figure 1
and Figure 2. LWEB-803 is an application which is installed on a Windows PC.
LWEB-802 is a web application which runs in a web browser. Therefore, LWEB-802 is
platform independent and can also be executed on Android and iOS devices.
Both LWEB-802 and LWEB-803 use the standardized OPC XML-DA Web service to
communicate with remote LOYTEC devices. For a list of supported devices refer to
Chapter 8. The use of Web services allows an easy handling and a smooth communication
via the intranet or internet – even across firewalls.
The graphical design of the LWEB-802/803 user interface consists of pages, which can
simply be created by using the L-VIS/L-WEB Configurator software without any know-how
in HTML, Java, etc. Dynamic information is shown in the form of numeric values, text,
changing icons, bar graphs, analog meters, trend logs, alarm and event lists, or schedule
controls.
Common Features:
Displays customized graphic pages with dynamic content from LOYTEC devices
Uses Web services (OPC XML-DA) for communication
Allows links between distributed graphical projects
Design of graphical projects with the L-VIS Configuration Tool
Supports different graphical resolutions
Gives access to automation functions such as Alarming, Scheduling, and Trending
(AST™)
LWEB-802 Features:
Runs in the following web browsers: Google Chrome (recommended), Firefox, Internet
Explorer 10-11, Microsoft Edge, Android web browser 4.x and later, iOS web browser
LWEB-803 Features:
1.2 Scope
This document covers the LWEB-802 and LWEB-803 Visualization. It also gives an
overview on how to use the L-INX/L-GATE Configurator to create the configuration for a
LOYTEC device and the L-VIS/L-WEB Configurator to create an LWEB-802/803 project.
A detailed description of the L-INX/L-GATE Configurator can be found in [2], a detailed
description of the L-VIS/L-WEB Configurator can be found in [1]. The LWEB-900 Server
is covered in [3].
Localization
English
German
French
Chinese Traditional
Chinese Simplified
Japanese
The language can be changed in the global settings dialog. The new setting takes effect after
reloading the application (CTRL+r).
Sound support
LWEB-802/803 now supports playback of sounds and buzzer actions. The sound can be
muted in the project settings (see section 5.6).
LWEB-802 can scale the graphical view automatically to the display size. This feature can
be enabled in the project settings (see section 5.6).
LWEB-802/803 can automatically check if a new version of the project is available. This
check is performed once every hour. If a new version is detected, it is reloaded
automatically. This feature can be enabled in the project settings (see section 5.6).
The use interface to configure presets, events, and calendar patterns has been
improved.
The short and long press behaviour on free areas of the scheduler control now
matches the behavior of the L-VIS device.
The ISO and US date flags are now taken into account when editing events.
If a “on value update” action is attached to an alarm list control, the action is now triggered
only if a new alarm occurs and not if the state of an existing alarm changes.
LWEB-802/803 now supports math objects in all places where input data points can be
used, including cascaded math objects. This saves on internal registers for calculation
results and keeps the project simple, because the formula is located at the exact place where
its result is being used. It is no longer necessary to locate the math object, identify the
register used for the calculation result and searching for the place where this register is
finally used as input.
LWEB-802/803 now supports the new wrap around option for bitmap controls:
To improve the load time of graphical views, an application cache and a project cache have
been implemented. The parsing of the project file has been improved.
Entering and leaving kiosk mode can be protected with a PIN code (see section 6.7).
For devices with no mouse input, the data point context menu can now be opened using a
long press.
Lock position
A new option to lock the position of the main window was added to the display options of
LWEB-803. This feature is useful to prevent accidentally moving the LWEB-803 window.
LWEB-803 can display graphical views from an LWEB-900 server. The dialog to select the
graphical view was improved to shows the tree structure of the LWEB-900 project.
L-Vis math objects can now be used in all places where input data points can be used,
including cascaded math objects. This saves on internal registers for calculation results and
keeps the project simple, because the formula is located at the exact place where its result is
being used. It is no longer necessary to locate the math object, identify the register used for
the calculation result and searching for the place where this register is finally used as input.
Support for Windows Server 2003 and Internet Explorer 9 was discontinued.
System menu
The system menu gives access to the LWEB-802/803 settings and statistics (see Figure 6).
This menu can be opened by clicking on the last entry in the navigation menu. Refer to
section 5.5 for details.
This new feature needs to be enabled in the project settings (see Figure 7). To view data
point details, click with your right mouse button on a control. A context menu is displayed
listing the attached data points (see Figure 8). Select the name of the data point for which
you want to inspect the properties as shown in Figure 9.
Keypad
The L-VIS/L-WEB Configurator allows defining button size and system colors (see Figure
10). The new LWEB-802/803 version uses those settings when displaying a keypad.
LWEB-803 has been developed as a desktop version of the LWEB-802 web application and
is based on the same source code. This has the advantage that the behavior of both versions
of the visualizations is identical and new features can be implemented faster.
Currently not all LWEB-800 features are supported in LWEB-802/803. The following
features are not yet supported:
Sound support
If the navigation buttons of a trend control are disabled in the L-VIS Configurator (see
Figure 11), the buttons will be displayed only after clicking into the control (see Figure 12
and Figure 13) and the cursor is active.
Figure 13: Navigation Buttons appear when clicking into Trend Control
Frameless view
In addition to standard view and design view, LWEB-803 now supports also frameless
view. In frameless view no title bar is displayed. In contrast to design view, the background
is not made transparent.
Some presentation PCs support user input both via mouse and via touch screen. Previous
versions ignored touch events if a mouse was present. The current LWEB-802/803 responds
to both types of events.
LWEB-802 now supports the analog meter control. This control displays a numeric value
by a needle moving over a scale, similar to the way a traditional moving-coil ammeter
works. Refer to L-VIS User Manual [1] for details.
The latest version of the LWEB-802 web application can be accessed using the following
URL:
http://www.loytec.com/lweb802/
If you want to access a specific version of the LWEB-802 web application, add the version
number to the end of the URL. In this way you can fix the LWEB-802 version after you
have tested your project. For example, to access version 1.4.0, use the following URL:
http://www.loytec.com/lweb802/1.4.0/
Animated MNG images are now displayed in true color instead of with the VGA palette.
This feature requires that your LWEB-800/802 project has been saved with the latest
version of the L-VIS Configurator.
Support limit lines: It is now possible to display the current value of a data point in
the trend chart. For the current value of the data point a horizontal line is drawn
across the entire graph. This feature can be used to add limit lines to the trend
graph.
Improve trend zooming: If cursor is active, zoom relative to current cursor position
else relative to center.
Figure 15 shows an example of a trend log control. On the primary y-axis the room
temperature (red) and the temperature setpoint (yellow) are displayed. The heating valve
(green) is displayed on the secondary y-axis. Linear interpolation is used to display the
room temperature; no interpolation is used for the temperature setpoint and the heating
valve. A limit line (white) is displayed at 17°C.
IE10 support
Windows 8 support
In LWEB-802 the zoom functionality has been reworked for mobile devices: The zoom
operation no longer affects the size of system menus. Zoom and scroll operations no longer
interfere with touch events on controls.
MNG support
LWEB-800 supports animated MNG (Multiple Image Network Graphics) images already
for some time. Now LWEB-802 can also display animated MNG images. In LWEB-802
MNG images are rendered using the VGA palette instead of true color.
Vector fonts
LWEB-802 supports vector fonts since version 1.3.0. Now LWEB-800 can also display
vector fonts.
Occupancy Detection
The occupancy detection of LWEB-800 can now be enabled/disabled for each LWEB-
800/802 project separately. Refer to section 7.2 for details.
3 Quick-Start Guide
This Chapter gives step-by-step instructions on how to configure a LOYTEC device and
how to use LWEB-802 as well as LWEB-803 by means of a simple example project.
3.1 Overview
Install the LOYTEC device and configure the IP address. Refer to the L-INX/L-
GATE User Manual [2].
Install the L-INX/L-GATE Configurator from the setup.exe. This file can be
downloaded from www.loytec.com. Refer to the L-INX/L-GATE User Manual [2].
Install the L-VIS/L-WEB Configurator from the setup.exe. This file can be
downloaded from www.loytec.com. Refer to L-VIS User Manual [1]
Figure 16 shows an overview of the basic configuration steps of the quick-start guide:
1) Start L-INX/L-GATE Configurator and create the data point configuration. This step
defines the OPC tags which represent data points in the CEA-709 or BACnet network.
The OPC tags can be read or written from the LWEB-802/803 application.
3) Download the data point configuration and the LWEB-802/803 project to the LOYTEC
device.
5) Download the LWEB-803 application from the LOYTEC homepage and install it. Start
LWEB-803 and display the same LWEB-802/803 project as in LWEB-802
These basic configuration steps will be described in the next sections by means of a simple
example project.
User Register
Select the User Registers folder in the tree view, then right click in the data point view and
select New Datapoint…
Press the Create Register button to generate the data point reg_1.
Trend Log
Select the Trend folder in the tree view, then right click in the data point view and select
New Trend…. Fill out the dialog box as shown in Figure 18. To attach a data point to the
trend log, press the Add… button and select the reg_1 register which was created
previously.
Change to the L-WEB Projects tab and click on the Add New… button. Make sure that the
file type is set to lweb2. Enter a name for the project and click on the Create and Design
Graphics button (see Figure 19). The L-VIS/L-WEB Configurator opens in a new window.
Project Settings
The size of the LWEB-802/803 Visualization display can be changed in the menu File
Project Settings… on the Display tab as shown in Figure 20.
The empty project shows the root menu with no entries (menu items). First, add a menu
item to the root menu. To do this, right click on the root menu object in the tree view and
select Add Item from the context menu. A new menu item is created and connected to the
menu object. Next, add a page to the menu item. This page will be displayed when the user
selects the menu item from the root menu. Open the context menu of the menu item (right
click on the item in the tree view) and select Add Page.
In order to see Page 1 of Menu Item 1 right after the device starts, make this page the
projects default page. Open the context menu of Page 1 in the tree view and select Set as
Default. Add a second page to Menu Item 1. The tree view should now look like shown in
Figure 22.
Figure 22: Tree view after creating menu item with pages
To be able to navigate from Page 1 to Page 2, we add a bitmap control and attach a Next
page action. Right-click on the Page 1 object in the tree view and choose Add Bitmap
from the context menu. On the Common Properties tab (see Figure 23), press the Select…
button and choose an appropriate bitmap from the LOYTEC icon library (C:\Program
Files\LOYTEC\L-Vis Configuration\Icon Library\Grafix\Icons).
To attach an action to the bitmap control, select Add Action from the controls context
menu in the tree view. On the Action tab, select the Next page action as shown in
Figure 24.
To be able to navigate from Page 2 back to Page 1, add a bitmap control to Page 2 with the
action Prev page. The tree view should now look like shown in Figure 25.
The next step is placing a number control on Page 1 to be able to change the value of
reg_1. To create the number controls, right-click on the page object in the tree view and
choose Add Control Number from the context menu. To connect the reg_1 data point
to the number control, select Add Data Point… from the controls context menu. A dialog
will appear which is used to manage and select data points. Select the folder User Registers
from the tree view at the left of the dialog. Select reg_1 and press Select. To be able to
change the value of the data point it is necessary to change the direction from input to
output. Therefore, activate the checkbox Reverse direction as shown in Figure 26.
To create the trend controls, right-click on the page object in the tree view and choose Add
Control Trend from the context menu. To connect a data point to the trend control,
select Add Data Point… from the controls context menu. A dialog will appear which is
used to manage and select data points. Select the folder Trend from the tree view at the left
of the dialog. There should be one element trend_1 and a plus symbol in front of it. Click
on the plus symbol to show the data points attached to the trend control. Select reg_1 and
press Select.
Figure 27: Tree view after creating number control and trend control
Now position the controls on your page so that they do not overlap each other. Grab and
drag them with the mouse. To resize the controls with the mouse, move the pointer to the
lower right corner of the controls area in which the value is displayed: Disregarding any
decorations around the value area, like the scale of the trend control. Then grab the control
at the lower right corner of the container area.
Now we will add a browser control to the second page. A browser control is a special form
of a text control. To create a browser control, right-click on the page object in the tree view
and choose Add Control Text from the context menu. Enter www.loytec.com in the
Text input field on the Common Properties tab. Deselect Auto-Resize and resize the
control so that it uses the space below the Prev page button. On the Text/Bitmap/Drawing
tab select the Web Browser Mode (URL, <body>, or <html>).
Close the L-VIS/L-WEB Configurator tool and select Yes in the displayed dialog to update
the design with the current project.
Figure 30: LWEB-802/803 Project tab with quick_start project not on device
To download the data point configuration and the LWEB-802/803 project we first need to
connect to the device. For this example we will connect as shown in Figure 31.
Per default the Download Configuration button also downloads the LWEB-802/803
project. If you have set up your L-INX/L-GATE Configurator to download LWEB-802/803
project separately, press the Download button as shown in Figure 33.
To start the LWEB-802/803 project in the web broser (LWEB-802) you need access to the
LOYTEC web server. If you do not have internet access, you can copy the LWEB-802 web
application to your local network (refer to section 5.2).
The first page of the project is shown in Figure 36. If you change the value of reg_1_Write,
the trend control will be updated.
Figure 37 shows the second page of the project. In the quick start demo project we used the
LOYTEC website as an example for the browser control. However, the browser control is
mainly intended to integrate web cams into an LWEB-802/803 project.
After installing the software you have to add your LWEB-802/803 project to the project list.
Click on the entry New project… to open the New Connection dialog (see Figure 38). In
the drop-down box Location select Device. Enter the IP address and port of your device.
The default password for LOYTEC devices is ‘operator’. The operator password can be
changed on the Web UI of the device as shown in Figure 39.
4 Network Infrastructure
The LWEB-802 web application can be loaded from different locations (LOYTEC
Homepage, LOYTEC device, LWEB-900 server). If HTTPS is used to load the LWEB-802
web application, all the following communication needs to use HTTPS also: The project has
to be loaded using HTTPS and the OPC XML-DA communication needs to use HTTPS.
5 LWEB-802
http://www.loytec.com/lweb802/
If you want to access a specific version of the LWEB-802 web application, add the version
number to the URL. In this way you can fix the LWEB-802 version after you have tested
your project. For example, to access version 1.4.0, use the following URL:
http://www.loytec.com/lweb802/1.4.0/
You can access the preinstalled version of LWEB-802 using the following URL:
http://<device ip address>/lweb802_pre/
You can access the user-installed version of LWEB-802 using the following URL:
http://<device ip address>/lweb802 /
Add new project: Click on the entry New project… to add a new project, The
New Connection dialog is opened (see Figure 45).
Edit project: To edit an existing project, click on the edit icon beside the name.
The edit dialog allows changing the connection settings or deleting the project.
Global settings: The global application settings can be changed by clicking on the
gear icon in the top right corner. For detailed information about the global settings
refer to section 5.4.
The Global settings dialog as shown in Figure 46 contains the following settings:
Show error tooltips: If this checkbox is set a tooltip is displayed showing the
OPC error when hovering over a grayed-out control. See also section 5.7.
Value refresh rate: This setting defines how often data point values are updated in
LWEB-802. The default setting is use project settings.
Language: This drop down box allows changing the display language. The new
setting takes effect after reloading the application (CTRL+r).
Left click and hold: The left click and hold operation opens the navigation menu
after the time configured in the L-VIS/L-WEB Configurator. Please note that for
correct operation, the left click and hold action should be executed on a free spot
on the display. If the area of an input control is clicked, the control enters input
mode and all further input is processed by the control.
Right click: A right click has the same effect as a left click and hold operation. It is
not available on touch displays.
The navigation menu displays the menu items which were defined in the L-VIS/L-WEB
configurator and the “System” entry to open the LWEB02/803 system menu shown in
Figure 48.
Default page: If the LWEB-802/803 project file contains multiple pages the
default page which is displayed when starting LWEB-802/803 Visualization can be
selected from this drop-down list.
The PIN codes can be configured in the L-VIS/L-WEB Configurator using the
menu File Project Settings (see Figure 50). Press the Button Setup Pin
Codes… to open the Access Codes Dialog and set the PIN code for Level 15 (see
Figure 51).
Context menu for data points: If this checkbox is enabled, you can click with
your right mouse button on a control to view data point details. On devices without
mouse input, a long press can be used on passive controls. A context menu is
displayed listing the attached data points (see Figure 52). Select the name of the
data point for which you want to inspect the properties as shown in Figure 53.
Mute sound: This option allows disabling sound output for the project.
Autoscale: This option is only available in LWEB-802. The user can always
change the zoom level manually using pinch-zoom or CTRL + mouse wheel. The
autoscale operation is performed for each project load, orientation change, or
resize event. The drop down box contains the following settings:
o Fit in Window: The graphical view is scaled to completely fit into the
browser window.
o Cover Window: The graphical view is scaled to fit either the width or the
height of the browser window so that the whole browser window is
covered.
o Fit Width: The graphical view is scaled to fit the width of the browser
window.
o Fit Height: The graphical view is scaled to fit the height of the browser
window.
5.8 Statistics
The Statistics dialog displays communication statistics from all LOYTEC devices which
are currently used in the LWEB-802/803 project (see Figure 55).
6 LWEB-803
LWEB-803 is the desktop version of LWEB-802. It offers the following additional features:
Kiosk mode
6.1 Installation
The LWEB-803 software can be downloaded from the LOYTEC Web site
http://www.loytec.com. To install the LWEB-803 software on your PC, run the setup
program and follow the instructions of the installation wizard.
Right clicking on the system tray icon brings up the LWEB-803 Visualization menu.
The LWEB-803 Visualization menu is shown in Figure 58. The menu contains the
following entries:
Show: Show the LWEB-803 Visualization main window.
Hide: Hide the LWEB-803 Visualization main window.
Display Options: These options affect the display of the main window:
o Design View: In design view the main window will be displayed without
a title bar and with a transparent background. See also section 6.6.
o Frameless View: In frameless view the main window will be displayed
without a title bar. See also section 6.6.
o Kiosk Mode [Ctrl+Enter]: In kiosk mode, the user can only access the
LWEB-803 main window but not the Windows desktop or other
applications. When LWEB-803 is switched into kiosk mode, the main
window comes to the front and covers the whole screen. Shortcuts to
access other applications (e.g. Alt+Tab) are blocked. Use the key
combination Ctrl+Enter to leave kiosk mode. See section 6.7 for details.
o Stay On Top: If the LWEB-803 main window is displayed, display it on
top of all other windows.
o Lock Position: Do not allow to move the LWEB-803 main window.
o Zoom: Select the zoom level of the main window.
L-WEB Project:
o Goto Default Page: In the Project Settings dialog, a default page can be
configured (see section 5.6). When Goto Default Page is selected, the
LWEB-803 main window will display the configured default page.
o Reload Project: Reloads the current LWEB-802/803 project from the
LOYTEC device. Use this option after you have downloaded a new
project to the device.
o Project Settings: Configure the LWEB-802/803 projects. Refer to
section 5.6 for a detailed description.
o Statistics: Displays a window showing statistics for communication with
LOYTEC devices and LWEB-900 Server. Refer to section 5.8 for a
detailed description.
o Edit Connections: Edit connection settings.
Independent of the view mode the window can be resized using one of the different zoom
levels in the Display Options menu of the system tray context menu or by using the
following keyboard shortcuts:
Shortcut Description
The display mode can be changed via the context menu of the LWEB-803 system tray icon
or by using the following keyboard shortcuts:
Shortcut Description
In Kiosk mode the following shortcuts to access other applications are blocked:
Alt+Tab, Shift+Alt+Tab
Alt+Esc, Shift+Alt+Esc
Ctrl+Esc
Use the key combination Ctrl+Enter to leave kiosk mode. To prevent unauthorized users
from leaving kiosk mode a PIN code can be configured. The PIN codes can be set in the
L-VIS/L-WEB Configurator using the menu File Project Settings (see Figure 50). Press
the Button Setup Pin Codes… to open the Access Codes Dialog and set the PIN code for
Level 15 (see Figure 51).
If LWEB-803 should start automatically in Kiosk Mode when the PC boots, select the
option Start Project with Windows and then activate the Kiosk Mode.
It is also possible to create math objects in the L-VIS/L-WEB Configurator. Be aware, that
these math objects will be executed for each LWEB-802/803 instance. Therefore local math
objects should be used only together with local LWEB-802/803 registers. In all other cases,
create the math object on the LOYTEC device.
Figure 66 shows how the PC Activity system data point can be used to periodically update
a data point on the LOYTEC device as long as there is activity on the PC. The PC Active
data point and an Update datapoints action are attached to a data point connector. The
action triggers if PC Active changes. As long as the value of PC Active is 1, the output
data point nvoExtOccupA6 is updated every 300000 milliseconds (5 minutes).
1) From your local network, open the web UI of the router by entering the IP address
in your web browser’s URL box.
2) Look for the port forwarding section and configure the following information:
Protocol: TCP
External Port: Port used to access the LOYTEC device from external network
3) Check if you can access the web UI of your LOYTEC device from the external
network using the IP address of the router and the external port configured in the
port forwarding (http://<IP address of router>:<external port>/)
Next you have to add the information of how to access the device from the external network
to your LWEB-802/803 project:
1) In the L-VIS Configurator open the data point dialog as shown in Figure 70 and
press on the OPC Server button.
2) In the input field Public Address, enter the IP address or hostname of your router
and in the Public Port enter the external port which you configured in the port
forwarding (see Figure 71).
Figure 71: Manage OPC Device, Configure Public Address and Port
Device Status
Authentication Code
Authentication Result
TZ Offset
8 LOYTEC Devices
The following table lists all LOYTEC device supported by LWEB-802/803 and their
features.
9 Troubleshooting
e-mail : [email protected]
Web : http://www.loytec.com
tel : +43/1/4020805-100
fax : +43/1/4020805-99
or
email: [email protected]
web: http://www.loytec-americas.com
tel: +1 (512) 402-5319
fax: +1 (262) 408 5238
or
email: [email protected]
tel: +886 (2) 8913 7838
fax: +886 (2) 8913 7830
10 References
11 Revision History