Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Introduction

FrameworX offers a comprehensive solution for advanced user interfaces, providing:

  • Portable Displays: Seamless operation across Windows and web browsers, using WebAssembly and .NET CodeBehind for top-tier performance, with the same display drawing and configuration shared across both environments.
  • Unified Designer and Runtime Themes: 12 versatile themes with light and dark variations for optimal visibility and comfort.
  • Responsive Dashboards and Process Screens: Adaptive interfaces for desktop and mobile, ensuring consistency across devices. Advanced drawing tool for synoptic and process screens.
  • Smart Symbols Library: Over 2,000 dynamic symbols for efficient SCADA and monitoring applications.
  • Self-aware Dynamic Displays: User interfaces that adapt automatically to the connected data.

On this page:

Table of Contents
maxLevel3
minLevel3


Portable Displays

With unparalleled performance on the Web Pages

WebAssembly and .NET CodeBehind deliver blazing-fast performance for web pages, even with thousands of graphical elements.

Although you can create displays that need to open in only one environment or another, our platform supports the Portable option, where the exact same configuration can be used for both Windows/WPF clients and Web/HTML5 clients.

Users don't need to create two different kinds of screens for Windows and Web clients. Using the Portable option for the rendering engine creates displays that will automatically function in both desktop and web environments.

This feature enabled our users from previous releases to use the screens they created over the years on Windows desktops and open them directly in web browsers with no rework or modifications.


Designer and Runtime Themes

Our platform offers includes a thoughtfully curated collection set of themes, each crafted built-in themes designed to elevate your the user experience—whether you’re working in a bright office, a dark control room, or on a mobile tablet in the field. These themes enhance not only the aesthetics but also the aesthetics, comfort, usability, and visual clarity of your workspace.Our theme engine supports across a wide range of visual styles, from cool grays and ocean blues to warm golds and purples. With over a dozen built-in options and support for custom theming via XAML, there’s a perfect backdrop for any solution.Themes are applied seamlessly across both the Designer (used to build solutions) and the Runtime displays (used by operators). This ensures a cohesive and professional experience, with no extra configuration requiredindustrial environments.

Themes apply consistently across both the design environment and runtime operator displays, ensuring a professional and seamless visual experience with no extra configuration.

We offer a full set of Light and Dark theme pairs, covering cool grays, vibrant blues, elegant purples, and rich earth tones. You can also create your own Light-Dark custom themes using our built-in visual customization tools.



Theme Pair

Description

Light & Dark

Clean white

vs.

and classic dark — optimized for bright or dim environments.

Sky

Platinum &

NavyA fresh, airy light blue paired with a rich, calming navy

Onyx

Subtle gray tones paired with a sharp, modern black style.

Steel & Graphite

Cool grayscale Light and Dark themes with a modern, minimal feel.

Pearl & Indigo

Soft

indigo

lilac-accented light theme

paired

with a bold, rich purple dark variant.

Platinum

Sky &

Quartz

Navy

Airy sky blue matched with a deep, calming navy

Balanced light gray paired with a refined slate-accented dark.

Steel & Graphite

Cool grayscale light and dark with a modern, minimal design

.

Gold & Coffee

Elegant golden

tones matched

hues paired with a warm, earthy brown.

ContrastLight & ContrastDark

Accessibility-first options designed with

strong

maximum visual separation and clarity.




Responsive Dashboards and Process Screens

Responsive Dashboards


Responsive display examples

Allows the easy creation of responsive User Interfaces that adapt automatically to the User's Device, from a Desktop to a Mobile, organizing the display elements. The same dashboard can be used by Desktop or Mobile users, in Windows Clients or Web Browsers.


Process Screens

Process Screens.png

For traditional process diagrams and synoptics, the Drawing tools allow extensive flexibility in layouts and frames, and include new features for customizing resizing: proportionally, using scrollbars, or allowing specific objects to resize or change position according to the client window.



Desktop, Mobile (Portrait and Landscape) and HTML5 preview

Easily customize your layout to work properly in various scenarios, with a centralized configuration and preview feature.





Smart Symbols Library

Smart Symbols

The Drawing tool includes a library of around 2,000 Smart Symbols, graphical elements typically used in industrial applications. Many of these symbols are more than just vector images; they also have dynamic behavior that allows for direct mapping to your Tags and Assets. It also includes a set of Industrial Icons, specially designed for typical visuals on process displays.

High-Performance HMI

The well-known book High Performance HMI proposed a set of standards for HMI design. Our platform fully supports the creation of solutions that adhere to these standards, including High-Performance Graphical (HPG) palettes in its themes and hundreds of ready-to-use symbols created according to those specifications.

Advanced Components and Controls

For advanced graphical interfaces, such as Gantt and Trend Charts, DataGrids, PdfViewer, and others, a set of graphical components for both WPF and Web is included. Additionally, third-party controls can be easily integrated into the solution.


Self-Aware Dynamic Displays

Data-centric applications can have their User Interface created automatically based on the assets found in the Data Model. Typically, these applications are organized around a Unified Namespace, MQTT Broker, or OPC UA servers. FrameworX establishes a dynamic connection with these servers, selecting the best UI elements according to the data found on the connected servers.



In this section...

Page Tree
root@parent
spaces93DRAF