DataHub™ WebView™ HMI
Prev   Next

DataHub™ WebView™ HMI

Version 2.0

January 16, 2026

A powerful HMI application fully integrated with Cogent DataHub™ software.

Table of Contents
1. Introduction
1.1. Run Locally
1.2. Web Launch
1.3. User Interface
1.4. DataHub Configuration
1.5. DataHub Security
1.6. Advanced Launch Options
2. Working With the WebView Application
2.1. Quick Start
2.1.1. Start the WebView Application
2.1.2. Add and Modify a Control
2.1.3. Bind a Control to a Data Point
2.1.4. Save and View a Page
2.1.5. Add a Symbol
2.1.6. Bind a Control to another Control
2.1.7. Set Symbol States
2.2. Pages
2.2.1. Create, Open, Save, and Delete Pages
2.2.2. View: Size, Grid, Zoom, Elements
2.2.3. Multiple pages
2.2.4. Solutions
2.2.5. Page Elements
2.2.6. Page Viewer Control
2.2.7. Design and Run Modes
2.3. Controls
2.3.1. Add and Manipulate Controls
2.3.2. Grouping Controls
2.3.3. Control Properties
2.3.4. Multiple control editing
2.3.5. Properties Editor
2.3.6. Format Strings
2.3.7. Controls Listed by Category
2.4. Property Binding
2.4.1. DataHub Point Binding
2.4.2. Point Attribute Selection
2.4.3. Simple Binding - Property Picker
2.4.4. Simple Binding - Copy and Paste
2.5. Managing Files
2.5.1. Browsing the Server
2.5.2. File Locations
2.5.3. Editing WebView XML Files
3. WebView Scripting
3.1. Pre-Loaded and Sample Scripts
3.2. Script Editor
3.3. Example Slide Show Script
4. Dynamic Binding
4.1. Dynamic Point Binding
4.1.1. Combo Box control
4.1.2. List Box control
4.2. Dynamic Control and Symbol Binding
4.2.1. Control Binding
4.2.2. Symbol Binding
4.3. Creating a Template Page
5. Customizing the WebView Application
5.1. Simple Branding
5.2. Initialization Parameters
5.2.1. Specifying Parameters
5.2.2. Parameter List
5.3. Adding Controls
6. WebView Controls
Advanced Check Box — toggles between two states, each with advanced properties.
Alarm List — a table that displays alarms and events.
Boolean Converter — a program block that selects between two states.
Calendar — displays a calendar.
Circular Gauge 1 — simple circular gauge.
Circular Gauge 2 — circular gauge with varying value ranges and an indicator light.
Color Selector — a palette used to store specific colors and to access application theme colors.
Color Selector — a program block that uses ARGB values to produce a color.
ComboBox — a simple dropdown list used for item selection.
Comparator — a program block that compares two values and outputs the results.
Condition Selector — a program block used to select among five different states.
Control Panel — supports Run mode option changes.
Date Picker — allows a user to select a date.
Filtered Data Table — row/column results from a database query.
Hi/Low Indicator — changes color to indicate high and low values.
Horizontal Linear Gauge — a linear horizontal gauge with a slider,
Hyperlink Button — acts as a hyperlink to another page or a URL.
Hyperlink Image — acts as a hyperlink to another page or a URL.
Hyperlink Text — acts as a hyperlink to another page or a URL.
Image — an image file container.
Left 90 Degree Gauge — a quarter-circle gauge.
Line and Arrows — creates line segments with optional arrowheads.
List Box — a simple list used for item selection.
Media Player — plays audio and videos.
One Input Calculator — a program block that performs calculations on a single input value.
Page Viewer — supports multiple page displays.
Point Data Table — a table consisting of all available data points.
Polynomial Calculator — a program block that calculates the result of a polynomial expression.
Progress Bar — an expanding/shrinking progress bar.
QR Code Generator — generates QR code images of text strings.
Radio Button — a button that offers a choice of mutually exclusive options.
Range Mapper — a program block that maps an input to an output, using ranges.
Rising/Falling Indicator — a display that changes according to the rise or fall of a value.
Semi-circular Gauge — a semi-circular gauge.
Series Chart — displays data in chart format - bars, lines, pie, etc.
Shining Light — an indicator light that can flash and change color.
Simple Button — a simple, clickable button.
Simple Check Box — toggles between two states.
Simple Ellipse — a simple ellipse with editable appearance and properties.
Simple Path — a path that can create any shape.
Simple Rectangle — a simple rectangle with editable appearance and properties.
Slider — a scale with an adjustable slider to control or view values.
Symbol — a container for over 4000 symbols.
System Information — a program block that can access system, user, and page information.
Text Entry Field — a simple textbox used for data entry.
Text Label — a textual display with no entry field.
Three Point Slider — a horizontal gauge that shows up to three data points on a slider.
Time Picker — allows a user to select a time.
Timer — a program block executes that provides timer and counter behavior.
Toggle Button — a push button with an optional two-state toggle.
Top Sweep Gauge — a horizontal curved gauge.
Trend — two chart controls can track up to 3 or 8 data points.
Two Input Calculator — a program block that performs calculations on two input values.
Vertical Linear Gauge — a linear vertical gauge with a slider.
Prev   Next
2.3. Log Home Chapter 1. Introduction