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.
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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 6
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 9
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 10
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 11
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 12
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Page 16
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
Nexto Xpress Compact PLC – Web Visualisation with HTML5 SUEN00396 2020-12 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.
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.
Need help?
Do you have a question about the Nexto Xpress BCS-XP340 and is the answer not in the manual?
Questions and answers