Beijer Electronics Nexto Xpress BCS-XP340 User manual
Quick Start Guide
Nexto Xpress Compact PLC
SUEN00396 –WebVisualization with HTML5
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
2 (18)
Normal.dotm, 2020-09-09
1Function and area of use
This document provides guidelines when working with Web Visualization and Nexto Xpress.
2About this Startup document
This Startup document should not be considered as a complete manual. It is an aid to be able to
Startup a normal application quickly and easily.
Use the following hardware, software, drivers and utilities in order to obtain a stable application:
In this document we have used following software and hardware
•BCS Tools 3.30
•Nexto Xpress BCS-XP340
For further information refer to
•Nexto Xpress CPU User”s manual (Click here to download)
•Beijer Electronics knowledge database, HelpOnline
This document and other Startup documents can be obtained from our homepage.
documents.
Copyright © Beijer Electronics, 2020
This documentation (below referred to as ‘the material’) is the property of Beijer Electronics. The holder or user has a non-
exclusive right to use the material.
The holder is not allowed to distribute the material to anyone outside his/her organization except in cases where the material is
part of a system that is supplied by the holder to his/her customer.
The material may only be used with products or software supplied by Beijer Electronics.
Beijer Electronics assumes no responsibility for any defects in the material, or for any consequences that might arise from the use of
the material.
It is the responsibility of the holder to ensure that any systems, for whatever applications, which is based on or includes the
material (whether in its entirety or in parts), meets the expected properties or functional requirements.
Beijer Electronics has no obligation to supply the holder with updated versions.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
3 (18)
Normal.dotm, 2020-09-09
3Table of Contents
1Function and area of use.........................................................................................2
2About this Startup document....................................................................................2
3Table of Contents..................................................................................................3
4Introduction ........................................................................................................4
Add Webvisu function to the project ....................................................................5
Add a visualization page...................................................................................7
Basic objects.................................................................................................8
Background templates ................................................................................... 13
Import external pictures ................................................................................ 14
Alarms ...................................................................................................... 15
Download .................................................................................................. 17
5About Beijer Electronics ....................................................................................... 18
Contact us ................................................................................................. 18
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
4 (18)
Normal.dotm, 2020-09-09
4Introduction
Nexto Xpress model BCS-XP340 supports user-defined Web pages named “Web Visualization” created
by the WebVisu function in BCS Tools. This function allows you to implement HTML5 graphics directly
in the plc and browse to it using a HTML5 compatible browser . If there is a need for an industrial
terminal or terminal with marine approvals, the X2 Pro Web panels from Beijer Electronics covers these
requirements.
The web pages are designed in BCS Tools together with the plc application, this gives us a “one
development environment” solution. At download both logic and visualization is transfered to the plc.
This is a great solution for remote sites, installations without a need of permanent HMI or simply just a
way to get information without being present in front of the HMI.
One should take notice that the hardware resources a bit limited and if long term storage of data is needed,
thousands of tags etc this would not be a suitable solution.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
5 (18)
Normal.dotm, 2020-09-09
Add Webvisu function to the project
Start BCS Tools and open the project where we will add the WbeVisu function.
The first step is to add the “Visualisation manager”. This object consists of generic
settings, shortcut keys, user definitions and more.
Right-click the “Application” , go to “Add object and the select the “Visualization
Manager” as shown in the screenshot.
Inside the “WebVisu” there are settings like the start page (html file), which by default is
“webvisu”
This is the page to use in the URL, http://192.168.15.1:8080/webvisu.htm
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
6 (18)
Normal.dotm, 2020-09-09
Start Visualization
Name of the visualization where the start is displayed as CODESYS WebVisu.
Name of the .htm file
Base URL of the web page. The URL is also specified as the address in the web browser.
Example: http://localhost:8080/webvisu.htm
Use as default page
The page specified in Name of .htm file is preset as the default page. Now this page will
always open when a user specified in the web browser the IP address and port of the web
server that is running on the controller: http://<IP address web server>:<port web
server>.
Example: http://localhost:8080
Update rate (ms)
Refresh rate (in milliseconds) in the web browser
Further details about the options can be read in the online help.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
7 (18)
Normal.dotm, 2020-09-09
Add a visualization page
To create a new page right-click the Application select Add Object and Visualization. A
new empty page will be added to the project tree.
To start working with the components on the page the ToolBox provides you with the
available objects and functions. Chapter 4.3 contains information of the most basic
objects. For further details please refer to the online help in BCS Tools.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
8 (18)
Normal.dotm, 2020-09-09
Basic objects
Label
The ”Label”object is used to visualize static texts, identify buttons, text fields, titles, etc. When
it is entered on the screen, the properties of the object will be displayed on the right side of the
editor. Here you can change properties such as text, font, size, color etc.
Rectangle, Round rectangle, Ellipse
These objects are used as drawing elements, but can also be used to visualize states using colors.
To change the color of an object, use the ”Toggle color”property associated with a Boolean
variable.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
9 (18)
Normal.dotm, 2020-09-09
Lamp
Another object used to visualize a digital state is the ”Lamp”. The condition is linked to a
Boolean variable.
Button
The ”Button”object is used to generate events from operator input. Pressing ”Configure”
connects the desired events to the selected input.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
10 (18)
Normal.dotm, 2020-09-09
Push Switch
Another object that can be used to control a digital variable is the ”Push Switch”object. A
Boolean variable is entered in the ”Variable”property. This will be set high as long as the
button is pressed and reset when the button is released.
Textfield
The ”Textfield”object is used to display and change text or values of variables. The variable is
selected in the ”Text Variable”property. The value can be changed in ”Inputconfiguration”in
the same way as for the ”Button”object.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
11 (18)
Normal.dotm, 2020-09-09
Meter
This is a group of objects used to visualize analog variables. The variable is linked to the
”Value”property. ”Bar display”is also widely used and works in the same way.
Slider
This is an object used to change the value of an analog variable. The variable is connected in the
”Variable”property.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
12 (18)
Normal.dotm, 2020-09-09
Image
This object is used to insert an external image into our screen. For example, a logo. The image files
must be added to the application”s image library before they can be used. See appendix C how to
do this.
The desired image file is selected in the ”Static ID”property.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
13 (18)
Normal.dotm, 2020-09-09
Background templates
By using a template for the pages a lot of time can be saved both in terms of configuration and
changes whi will be reflected by all pages using the same template. Common functions such as
changing image, logo, time and logged in user are examples of suitable functionality in a
template.
To add a template use the ”Frame”object. Adjust the frame to fit the screen and select the
backgrouind by pressing ”Configure”.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
14 (18)
Normal.dotm, 2020-09-09
Import external pictures
To add external images, use the function ”Image Pool”. Right click on ”Application”,
select ”Add Object”and ”Image Pool”.
When you add the files, you can choose whether these should be linked from the original
location or copied into the project. The latter option is the most practical in most cases.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
15 (18)
Normal.dotm, 2020-09-09
Alarms
To enable the alarm function right-click the Application and choose ”Add object”,
”Alarm configuration”.
Error, Info, Warning
Classifications of alarms based on severity
AlarmStorage
Parameters for the historical alarm data.
AlarmManagerTask
Task for updating the alarm function
Next step is to add one or several alarm groups and define alarms for the groups.
In the following example there is one alarm group with three configured alarms. When adding
an alarm group there is a corresponding text list added to the project to enable translation for
multilanguage applications.
Observation type
Type of signal
Details
Variable name and value to trigger the alarm
Deactiviation
Variable to deactiviate the alarm
Class
Alarm class relation
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
16 (18)
Normal.dotm, 2020-09-09
Message
Alarm text, dynamic values can be added using the following
syntax. Some examples:
<DATE>, <TIME>, <CURRENTVALUE>
(More details found in the online help)
Min. pend. time
Minimum time the alarm expression must be TRUE to generate
the alarm.
Latch var
Variable with additional value to be recorded with the alarm
Higher priority
When the alarm is triggered, it can be acknowledged by triggering
another alarm.
Archiving
Option to enable alarm history.
To visualize the alarms the object Alarm table must be inserted. The alarm table can be
customized based on information needed.
The section Control variables contains options like acknowledge alarms, counting alarms etc.
Download or simulate the project according to chapter 4.7. In addition the I/O simulator in
BCS tools can be used to simulate the I/O signals for BCS-XP340.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
17 (18)
Normal.dotm, 2020-09-09
Download
The next step is to compile and download the project. For details of how to download
projects refer to SUEN00392. Another option is to simulate the project, however in
simulation some limitations applies.
Nexto Xpress Compact PLC –Web Visualisation with HTML5
SUEN00396 2020-12
Beijer Electronics AB −a Beijer Electronics Group company
Head Office Subsidiaries
Beijer Electronics AB Click here for details
P.O. Box 426, Stora Varvsgatan 13a
SE-201 24 Malmö, SWEDEN
Telephone +46 40 35 86 00
Reg no. 556701-4328 VAT no SE556701432801 www.beijerelectronics.com info@beijerelectronics.com
18 (18)
Normal.dotm, 2020-07-01
5About Beijer Electronics
Beijer Electronics is a multinational, cross-industry innovator that connects people and
technologies to optimize processes for business-critical applications. Our offer includes operator
communication, automation solutions, digitalization, display solutions and support. As experts in
user-friendly software, hardware
and services for the Industrial Internet of Things, we empower you to meet your challenges
through leading-edge solutions.
Beijer Electronics is a Beijer Group company. Beijer Group has a sale over 1.6 billion SEK in
2019 and is listed on the NASDAQ OMX Nordic Stockholm Small Cap list under the ticker
BELE. www.beijergroup.com
Contact us
Global offices and distributors
China
NORWAY
TAIWAN
Shanghai
Drammen
Taipei
DENMARK
SOUTH KOREA
TURKEY
Roskilde
Seoul
Istanbul
FRANCE
SWEDEN
UNITED KINGDOM
Paris
Göteborg
Malmö
Stockholm
Nottingham
GERMANY
USA
Nürtingen
Salt Lake City
Table of contents
