WEB APPs for the industry

WEB APPs for the industrial HMI tool project

PROCON-WEB can be used as a tool for the creation of WEB APPs. To see them closer to discusses here first on the different types of APP and the relationship between surface of an APP and the almost always necessary Server backend.

What are the types of APPs?

  • Web-APP
    • Pure website
    • Can use only some device properties
    • No installation
    • Platform-neutral creation (all devices)

  • Hybrid APP
    • Interface in HTML platform written
    • Sleeve is platform-specific and can take advantage of device properties
    • Installation of store of the ecosystems (Google, Apple, Microsoft)

  • Native APP
    • Can use all device properties
    • Installation of store of the ecosystems
    (Google, Apple, Microsoft)
    • Best performance


Popular APPs with backend:

These are example of today’s most popular APPs, which should indicate that a very large part of the APPs only as a front end for a more or less complex data storage or Infrastructure represents. It is also in the most industrial APPs. On the Smartphone, you to render the condition of a machine or plant primarily generated via the automation and overlying SCADA functions for logging and analysis of data.

popular apps

  • Weather • SHAZAM • Skype • rail • Google maps • Facebook Messenger

the most apps server

WEB APPs to server as the backend:

What is the system structure PROCON-Web?

APP:apps to server as backend
• Surface based on HTMl5 and CSS3
• JavaScript for dynamic modification/interaction

• HTTP or HTTPS and Websockets for high-speed communication (WSS, WS)
• Binding: JSON

• Windows: C# and SQL Server
• Platform-specific solutions with C, Java…

Industry 4.0 – machine as a WebService

machine as a webService• Machine has up-to-date information and logs/statistics
• Machine can WebService act as
• Enables APPs to Web APPs via the Web server of the machine are made available
• Can use any stationary or mobile device Web APPs

What must a HMI can work as APP Server?

• Surfaces in pure HTML (without PlugIns)h9am app server
• Responsive design to support all devices
• Modern surfaces with gesture support and stylebaren controls
• Good data processing capabilities with data exchange to MES/ERP systems
• Security mechanisms for access and data transfer

Typical system constellation

• Using the design tool are usertypical systemkonstellation interfaces designed and configured the data preparation
• That WebAPP and configuration of the user interface the Web server of the HMI system led to (out, HTML-files)
• Server components as a ‚Backend‘ prepare the data
• The Smartphone/Tablet Gets the site with the browser and represents the interactive surface

How does a WEB APP by HMI?

app via hmi• The configuration tool creates the WebAPP in the form of HTML and JavaScript files
• The app uses the WebService of the HMI server component via HTTP/Websockets and performs the compositing
• Obtain current information by coupling to the PLC the server component and retrieves data from the database

Configuration instead of programming

• The ‚creation‘ of the ‚APP‘ works configuration instead of programminglike a HMI design
• There will be no knowledge about HTML5 or JavaScript required
• Includes any mobile device support for responsive design
• Easy adjustment and maintenance by the Automation Technician
• Delivery directly to the machine, without going through the APP store!

Configure the properties of the display elements

properties display elements• The properties of display elements are configured
• The connection to the process or the database be implemented on data points
• That can display with any style are combined and correspond to the corporate design
• Supports the surface multitouch gestures

Example of a Web APP for a packaging machine

  • example web app 1

  • example web app 2

  • example web app 3

  • • Display of current order progress
    • Display of the material with maturity up roll change
    • Material data with QR-code

  • • Display of the current KPIs to the current order
    • Online calculation of the factors in the HMI

  • • Display maintenance tasks by priority/due-date

Example of a modern interface

example of a modern upper surface

Application example: Evaluation of beacons per Web APP

  • Device-specific display of information about BEACONs
    • Within a production environment are equipped to identify all major components with beacons
    • Phone we recognized at a short distance from the beacon of this and read out
    • Then the component-specific additional information such as status, KPIs, and maintenance information may be issued

  • Implementation

    • Projected CustomControl PROCON-WEB application for the evaluation of the beacons (via Bluetooth)
    • Coupling by PROCON WEB server to the various machines and devices for extracting information

machine + beacon