Videos – Web HMI

The following videos are a complement to this section on creating Web HMI web pages.

Web Visualization

Use Web HMI to visualize IIoT data using Web HMI to deliver IIoT data directly to ASP.NET,.NET MVC, PHP, Ruby, or raw code to update any HTML element dynamically.

Introducing the Open UI Engine

Quick summary of the Open UI Engine – No-code web application and HMI builder.

  • 00:00 – Introduction (New Major Product Feature-Open UI Engine)
  • 00:08 – What is the Open UI Engine?
  • 00:52 – Customizable Project & Screen Structure
  • 01:20 – Rich Component Library
  • 01:51 – Component Properties/OAS Data Driven
  • 02:40 – Settings/Save and Load Projects/Screens
  • 03:01 – Security Options
  • 03:16 – White Label
  • 03:28 – Media Assets
  • 03:47 – Additional Features
  • 04:06 – Learn More

Web HMI Dashboard

Web HMI Dashboard with no coding required for live and historical visualization, trending, and alarming. Persist user sessions with user login. Extend project code to your own custom visualization.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Web HMI Demonstration

Demonstration of Web HMI for live data using HTML5, CSS, Javascript, JQuery, and JSON.

  • 00:00 – Introduction
  • 00:07 – What’s HMI?
  • 00:54 – Open Standards
  • 01:03 – Web HMI utilizes a direct line of communication
  • 01:23 – What can be built with Web HMI?
  • 02:51 – Setting Up the server
  • 02:57 – First Step – Registering a listener on the server
  • 03:40 – Configure Tags
  • 04:25 – Writing Code
  • 05:47 – Text Editor
  • 06:07 – HTML attributes
  • 14:12 – Develop Same Functionality Programmatically
  • 18:30 – More Information

Web HMI Wizard

How to use the Web HMI Wizard to automatically create HTML code to provide live data.

  • 00:00 – Introduction
  • 00:26 – Methods for Using OAS Web HMI Product
  • 00:32 – Programmatic Method
  • 01:00 – Web HMI Code Wizard
  • 01:26 – What is the Web HMI Code Wizard?
  • 02:09 – Code Wizard closer look
  • 07:38 – HTML Element View
  • 08:59 – HTML Attribute list
  • 09:34 – Tag Text
  • 13:55 – Other HTML Attributes
  • 15:05 – More Information

Web HMI in WordPress

How to add live data interface to existing WordPress site.