WebSocket Front Panel

The Ethersmart Wildcard allows you to monitor and control the Mosaic Industries PDQ Board from a web browser. Mosaic has recently added new capabilities to the Ethernet WiFi Device Driver Library, along with an asynchronous messaging library, and together they are called the WebSocket Front Panel. This upgrade allows the PDQ Board to use a new Internet communications protocol called "WebSocket". WebSocket connections allow a server and browser to maintain a continuous connection, removing the latency associated opening and closing connections with HTTP and allowing a standardized method for implementing web applications to display data and controls using a web browser while implementing process control on an embedded server.

The WebSocket Front Panel provides a way to implement a human-machine interface (HMI) in a browser using a standard TCP/IP connection with the PDQ Board. This provides numerous benefits in functionality, flexibility, and development time versus traditional keypad/display or integrated-touchscreen interfaces.

1. It lets the browser do the heavy lifting required when rendering graphics. It's difficult to design an embedded system with deterministic timing that is also capable of rendering rich graphic displays.
2. Everyone has experience with web interfaces, and the WebSocket Front Panel provides a familiar environment for a human-machine interface. It even supports mobile browsers, which opens up the option of using pocket or tablet sized touchscreens.
3. It is also easy to find engineers with web design skills. Using HTML, CSS, and JavaScript to create your user interface avoids the need for an engineer to spend time building product-specific knowledge.
4. It provides interchangeable parts; different browsers can be switched in to control the same application. This allows for redundancy as well as the ability to customize a final product with different screen sizes for different uses.
5. It separates the interface from the controller, with the link between the two implemented with a simple and well-defined protocol. You can completely change the look and feel of your application ("skin" it) without changing any code that is running on the embedded controller.

This guide describes the WebSocket Front Panel software from a "Top Down" and "Bottom Up" perspective. The best place to start is the "Top Down" summary of steps in building a human-machine interface (HMI) in a web browser:

• How to Design Your WebSocket Front Panel Application

Once you have an understanding of how your application's workflow can be implemented in a browser HMI, you can familiarize yourself with "Bottom Up" descriptions of the WebSocket messaging library that provides the link between the HMI and the Mosaic PDQ Board implementing real-time control and monitoring:

• WebSocket Messaging Library Users' Guide

If you would like to see a list of all available functions and their arguments, see the glossaries:

• C Function Glossary
• JavaScript Function Glossary

The Web Front Panel also has a fully functional demonstration program. The demo can be accessed by opening Mosaic IDE Plus and clicking "Project→ New Project".