German :de:

SHMI

WIP - not suitable for productive use.

Overview

A small, web-based (HTML, JavaScript and SVG) visualization for PLC or other small devices

With minimal effort, values from a controller (or another program) can be visualized. No HTML, CSS or JavaScript knowledge is required.

In the simplest version only about 700 KB in size!

As CDN version only about 150 KB!

It is currently a pure display of values. A control of data is not yet possible.

Start

Demo (static data)

Features

A Web server must be present on the automation device.

A local installation is also possible.

Browser

Tested with:

Browser settings for local data source

… if no web server is installed.

Installation

Copy the contents of the SHMI directory to the web server and configure it appropriately.

Or install it locally ( see also Prerequisites )

Configuration of SHMI

Data points

DI/DO may take the following values.

LIVE-BIT (Format: 1/0)
Must toggle with each new record: Display in the status bar
TIMESTAMP (format: UNIX timestamp in seconds)
Time stamp from device or application : Here the difference to the system time is calculated and displayed in the status bar.
WARN (not yet in use)
number of the warning message - or text
ALARM (not yet in use)
number of the alarm message - or text
MESSAGE (not yet in use)
number of the message - or string
DIn (Format: Integer 0-9)
digital input
DOn (Format: Integer 0-9)
digital output
AIn (format: float or integer)
Analog input in %
AOn (format: float or integer)
Analog output in %
AIn_SP (Format: Float or Integer)
Analog input setpoint in %
AOn_SP (format: float or integer)
Analog output setpoint in %

Interface

A corresponding file must be generated by the controller: data/data.json in which the values are entered.

The structure of the file is self-explanatory.

As an example:

{
"LIVE-BIT":0,
"TIMESTAMP":1580716216,
"WARN":-1,
"ALARM":-1,
"MESSAGE":-1,
"DI0":1,
"DI1":1,
"DI2":0,
"DI4":0,
"DI7":1,
"DO0":0,
"DO1":0,
"DO2":1,
"DO8":1,
"DO9":0,
"DO10":1,
"DO14":1,
"AI0":14,
"AI1":97.07,
"AI2":44.96,
"AI3":87.43,
"AI0_SP":50,
"AI1_SP":67,
"AO0":4.77,
"AO1":8.85,
"AO1_SP":60
}

The first time the page is called up, this file is read out and the page is built up. Then only the values from the file are queried.

Interface Siemens S7-1500

Example interface for the output of CPU variables:

{
"DI0":":="webdata".DI[0]:"
"DI1":":="webdata".DI[1]:"
"DI2":":="webdata".DI[2]:"
"DI4":":="webdata".DI[4]:"
"DI7":":="webdata".DI[7]:"
"DO0":":="webdata".DO[0]:"
"DO1":":="webdata".DO[1]:"
"DO2":":="webdata".DO[2]:"
"DO9":":="webdata".DO[8]:"
"DO10":":="webdata".DO[9]:"
"DO10":":="webdata".DO[10]:"
"DO14":":="webdata".DO[14]:"
"AI0":":="webdata".AI[0]:"
"AI1":":="webdata".AI[1]:"
"AI2":":="webdata".AI[2]:"
"AI3":":="webdata".AI[3]:"
"AO0":":="webdata".AO[0]:"
"AO1":":="webdata".AO[1]:"
}

The values are located in a correspondingly structured data block “webdata”.

See also Siemens: Creating and using own web pages for S7-1200 / S7-1500.

Labeling of the data points

The texts for labeling the data points are in the file: lng/en_dp.json and are also read in the first time the page is called up.

Example:

{
"DI0": "Control voltage",
"DI1": "Lamp test",
"DI2": "Acknowledge fault",
"DI4": "Flow measurement",
"DI7": "Compressed air monitoring",
"DO0": "Control voltage",
"DO1": "Fault:",
"DO2": "Engine 1",
"DO8": "Engine 1",
"DO9": "Control valve 1",
"DO10": "Control valve 2",
"DO14": "Control valve 3",
"AI0": "Temperature 1",
"AI1": "Level 1",
"AI2": "Level 2",
"AI3": "Flow rate",
"AO0": "Control valve 1",
"AO1": "Control valve 2",
"AO2": "Control valve 3"
}

Recorder

:warning: Since everything is recorded in the browser, no other tabs may be open in the browser during recording. Also the browser window must not be minimized. In both cases there will be dropouts in the measured values. This can be compensated by a correspondingly high update interval.

Flowchart

The image itself is loaded as background image. It must have the same name as the HTML file, but with the suffix “svg”. Alternatively a PNG image can be loaded.

Only SVG images can be animated directly!

Priority when loading:

All available data points can be inserted into the image as small displays (widgets; design not yet finished). Currently available:

Start

To do this, select the corresponding data points in the settings, with the corresponding display type. This inserts the corresponding display at the top right of the screen. Then you can drag it to the appropriate place in the image and change its width if necessary.

For an easier positioning, a “Snap to Grid” option is built in. This is set to 10px by default.

Start

The following display options (mini-panels) are currently available

Save / load / delete the mini-panels

Save

It is not necessary to save the elements.

As soon as they are positioned or resized, the position and size of the ads are saved in the local storage of the browser. A corresponding entry is saved for each element.

Load

When the page is loaded, the elements are automatically displayed again.

Delete

To delete an element, deselect it in the settings.

Direct animation in the image (SVG only):

Currently only DI/DO and Analog as value

Give the element a corresponding ID (for Inkscape: “Kennung”). Scheme: SHMI_Dxx_D Dxx = Digital data point

Output as color:

Scheme: SHMI_Axx_A Axx = Analog data point

Is output as text.

Start

Operating result:

Start

Design and colours are not yet fixed!

Labelling of the surface

The texts for labelling the surface are in the file: lng/en.json

The interface is not yet fully translated.

{
"DI": "Digital inputs",
"DO": "Digital Outputs",
"AI": "Analogue inputs",
"AO": "Analog outputs",
"Prefs": "Settings"
}

Replace the file pict/logo.svg with your own SVG image.

Design of the interface

Replace the file css/bootstrap.min.css with the corresponding theme file.

:warning: This may cause the displays in the flowchart to shift

For a different design, rename the file css/_SGMI_glow.css to css/SGMI_glow.css

Start

Icons

…

Discussion / suggestions

ToDo

Order does not correspond to priority:

General

Dashboard

Analog
Digital

Recorder

Curves (not yet available)

Flow charts

Used libraries

Author

Thorsten Willert

Homepage

License

The whole thing is under the MIT license.

Other