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.
Please use the address [email protected] for feedback about our Quick Start
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.