Skip to main content

Introduction to HTML5 Web Apps

Mango's user interface is a modern HTML5 single-page application (SPA) built on the AngularJS (1.x) framework with Angular Material for UI components. This architecture provides a fast, responsive experience that runs entirely in the browser, communicating with the Mango server through REST APIs and WebSocket connections for real-time data updates.

Architecture Overview​

The Mango UI follows a component-based architecture where each piece of the interface is an encapsulated, reusable building block. At the highest level, the application consists of:

  • AngularJS Framework -- Provides data binding, dependency injection, routing (via UI-Router), and the directive/component system that powers <ma-*> tags.
  • Angular Material -- Supplies Material Design UI components such as buttons, cards, input fields, dialogs, toolbars, and the responsive layout system (layout, flex attributes).
  • Mango Component Library -- A rich set of custom <ma-*> components purpose-built for SCADA and IoT applications. These include chart components, gauge displays, point value displays, watch list selectors, data source editors, and many more.
  • REST API -- All data flows through Mango's RESTful API, which provides endpoints for data points, events, users, data sources, and other system resources.
  • WebSocket -- Real-time point value updates and event notifications are pushed to the browser through WebSocket connections, enabling live dashboards without polling.

The Component Model​

Mango components use the <ma-*> naming convention and follow AngularJS directive patterns. Each component encapsulates its template (HTML), controller logic (JavaScript), and styling (CSS). Components communicate through attributes (bindings) and can be composed together to build complex interfaces.

For example, a simple point value display uses:

<ma-point-value point-xid="my-temperature-sensor" label="Temperature:"></ma-point-value>

This single tag handles fetching the point value from the REST API, subscribing to WebSocket updates, formatting the value, and displaying it with its label. As the data point value changes on the server, the displayed value updates automatically.

Custom Page Development​

There are two primary approaches to building custom pages:

Dashboard Designer​

The Dashboard Designer is a visual drag-and-drop editor that generates HTML code from your layout. You position components on a canvas, set their attributes through property panels, and the designer produces the corresponding HTML markup. This approach is ideal for users who prefer a visual workflow and do not want to write code directly.

Page Editor​

The Page Editor is a code-based environment with a split-pane view showing your HTML markup on the left and a live preview on the right. You write HTML using <ma-*> components, Angular Material layout directives, and standard HTML elements. This approach gives you full control over the page structure and is better suited for complex, responsive layouts.

Both tools produce the same underlying HTML, and you can switch between them. Pages created in the Dashboard Designer can be refined in the Page Editor, and vice versa.

Data Binding​

AngularJS data binding is the core mechanism that makes Mango pages dynamic. When you bind a component to a data point, AngularJS automatically synchronizes the data between the component and the underlying model. For example:

<ma-get-point-value point-xid="my-sensor" point="myPoint"></ma-get-point-value>
<p>Current value: {{myPoint.value}} {{myPoint.textRenderer.suffix}}</p>

The <ma-get-point-value> component fetches and subscribes to updates for the specified point. The myPoint variable on the AngularJS scope is automatically updated whenever the value changes, and any template expressions referencing it re-render immediately.

Getting Started​

To start building custom pages:

  1. Explore the Examples -- Enable the Examples menu section from the Menu Editor and browse the interactive demos.
  2. Read the API Docs -- Access the API Docs section within your Mango instance for a complete reference of all <ma-*> components and their attributes.
  3. Start with a Layout Template -- Use one of the built-in layout templates in the Page Editor as a starting point for your custom pages.
  4. Review the Useful Resources -- Links to AngularJS and Angular Material documentation to deepen your understanding of the underlying framework.
  • Custom Pages — Create custom pages using the code editor and component library
  • UI Overview — Getting started with the Mango user interface
  • Useful Resources — External documentation links for AngularJS and Angular Material
  • UI Development Process — Developer workflow for building Mango UI modules