Page History

Image Added

Using the Displays List

Creating New Displays

You can create a display in two sections of the software: Displays → List and Displays → Draw. These interfaces enable the creation and management of new displays.

To create a display on List:

1. Navigate to Displays → List.
2. Click the Image Added button at the top to open the 'New Display' popup window.

2. Define the Name and Description of the display.
3. Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
4. Choose a Template for the display. If you do not select a template, a blank page will be created by default. Two types of templates must be highlighted:
   1. The Canvas option allows for manual positioning and sizing of elements.
   2. The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments.
5. Finally, press the OK button to finish the display creation and close the popup window.

To create a display on Draw:

1. Navigate to Displays → Draw.
2. Click the Image Added button at the top to open the 'New Display' popup window.
3. Follow the same procedure as for Displays → List.

The Drawing the User Interface section of the Users covers the information about the drawing tools and CodeBehind editing. 

Displays Configuration Key Fields

Anchor
AutomaticConversion AutomaticConversion

Engine

The Engine field will specify if the displays is intend for WPF, HTML5 or Portable. 

When selecting WPF or HTML5, the Drawing and CodeBehind, will compile to that specific platform only. This Field Column is editable. 

Understanding Displays List

Purpose

The purpose of Display List is to provide a systematic way for users to view and access multiple displays. They support the organization and quick retrieval of different screens, simplifying the process of interface management. This list enables users to add, arrange, and remove displays. The user can also categorize displays, often offering features like sorting and filtering to help users find and select specific interfaces efficiently.

Operation

Display List operates through user interaction, responding to commands to add, delete, or reorder displays. They update dynamically to reflect the current configuration of displays and allow users to maintain an overview of the system's interfaces.

Application

List find use in environments where managing a multitude of displays is necessary. This includes applications with multiple user interfaces, such as dashboard suites, content management systems, and complex software solutions that require navigation between different operational screens.

Usage

Using Display List involves engaging with the configuration interface to manage the application's displays. Go to Displays → List. To manipulate the list of displays, users utilize options like add, rename, remove or sort displays ensuring efficient management of the application's interfaces.

Displays Configuration

The Portable option allows the automatic conversion between WPF and HTML5 technologies. The user does not need to create two different kinds of screens for Windows and Web clients. Use the Portable option for the rendering engine to create the displays, and will automatically create them in both HTML5 and WPF.  It enables running on the web browser all the displays you created for Windows/WPF.

Anchor
DisplayModes DisplayModes

DisplayMode

The DisplayMode is a ReadOnly column, in oder to modify it, you go to Draw, and change that in Properties Sidebar, under Displays Settings. 

Pages, Popups, and Dialogs are different display modes. They share some similarities, but each has a specific particular or behavior. They are commonly used in application development to build intuitive and dynamic user interfaces.

Page

A Page is a display that always remains open or opens, replacing the previous display, constituting an independent unit of information or functionality within an application. In summary, it is a screen that allows users to perform a specific action, in which access to the page is given from a navigation menu or through other links within the application.

Popup

A Popup is a window display that overlays the main application window. It is triggered by an action, like clicking a button or link, or can appear automatically under certain conditions. Its purpose is to provide information or functionality without leaving the current page. It operates independently, with its border, but does not obstruct interaction with the underlying page.There are two types of popups: modal and non-modal. A modal popup demands interaction before the User can return to the main application, pausing other activities. In contrast, a non-modal popup allows the User to continue interacting with the main application while the popup is open. These popups contain forms, menus, or other components designed to provide access to functions or information for only a short timeopens over the displays, remaining on top, but the User can still interact with the other pages (it's called a non-modal interface). A variation, available only for WPF, is the PopupWindow, which opens  a completely independent Window, with its own border, to show the display.

Dialog

A Dialog is a small window display that opens on in top of all other displays, and stays open , blocking the use of other displays until the User closes it . The dialog window appears on top of the main application window and requires user input before dismissal. Typically, it prompts users for confirmation or additional information before proceeding with an action. Dialogs can be modal, meaning the User cannot interact with the main application window until the dialog is closed(It is called a Modal interface).

PopupWindow

A PopupWindow opens a completely independent Window, with its own border, to show the display.

Anchor
OnResizeOptions OnResizeOptions

On Resize options

The dropdown menu options specify the settings for resizing an image or element to fit a designated display area.

StretchFill

This option stretches the image to fill the display area, potentially altering its aspect ratio. Distortion can occur if the display area's proportions differ from the image's original aspect ratio.

StretchUniform

This option will scale the image to fit the display area while maintaining its aspect ratio. If the aspect ratios don't match, the image will be scaled until it touches the edges of the container from within, potentially leaving some space in the display area.

Responsive

This option allows the image or element to adjust its size in response to the size of the display area. It's less clear without specific context, but typically, 'responsive' means that the element will scale sensibly to different screen sizes, often maintaining its aspect ratio without distortion.

NoAction

This option displays the image in its original size, regardless of the display area's size, which might lead to cropping or overflow if the image is larger than the display area.

The

Display

List Columns

List properties

The table below provides a reference for the Display List properties:

In this section: