Default demo installed with FrameworX Update 1c.
| Info | ||
|---|---|---|
| ||
Download the Demo Solution here: Demo.dbsln |
- Solution Name: Demo v10
- Software Version: v10 Update 1c
- Keywords: UNS, Unified Namespace, Responsive UI, TagProviders, Layouts, Mobile, HTTPS
On this page:
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Summary
Technical Information
This Demo demo showcases, among othersother features, the following features:
- Create a local UNS , with tags and templates.
- Map an external TagProvider (MQTT in this case) for dynamic assets.
- Organize the displays for Desktop, Tablet, and Mobile while sharing the displayssame layouts.
- Manage the display navigation according based on the selected asset and User user context.
- Integrate Dashboard dashboard pages with Canvas (process diagram pages) with for a fully responsive User user experience.
- Create an Area display that automatically will expand expands to show all Lines found in lines within that area (UNS children).
- Create Build a display using Reference Tags , to to automatically map automatically to the selected Local Taglocal tag.
- Create a display using the
Asset()syntax , to dynamically map automatically to a dynamic an external asset. - Allow Enable connections from Windows Native Graphics (WPF), HTTP, and HTTPS from on the same server.
- Leveraging Leverage Execution Profiles to allow the same application to run from the Cloud Server on both a cloud server and locally with the proper appropriate settings.
- Use of Utilize client-side Tags tags and Scripts scripts for advanced UI. In this case managing SolarPanel UI—managing Solar Panel and Production assets , and while simplifying the UI development.
- Implement server-Use of Server side scripts for data calculations (in this case, simulationsimulations, similar though the same concept applies to analytics).
Organizing Displays Layouts
A good start starting point for solutions that will deploy User Interfaces ir deploying user interfaces is to organize the main layouts.
The Layout layout used on at startup is defined in Displays-ClientSettings, and for this solution, we named it "Startup."
We defined configured the Startup Layout with a Header, a left-side Menu, and the a main contents contentarea.
- The Header Edit was set to Stretch,
- ensuring it
- spans the entire width of the display
- .
- The left-side Menu is positioned below the Header and is resizable.
- These settings are configured under DisplaysLayouts within the Panels section.
Next, Then we defined which pages will would be used for the Header, Menu, menu and initial pagescontent.
The Layout feature can automatically detect whether The Layout features is able to automatically recognize if the client is opening in on a Portrait portrait or Landscape landscape mobile device. That allows to customize the page used in , allowing customized page selection for each context. If the If no customization is left emptyspecified, the display listed in the PAGE column will be used.
To disable a if you want to prevent the use of that panel, add the character an "_" in character in the corresponding cell. In this solution, we used that to avoid having a left applied this to remove the left-side Menu when opening for in Portrait Mobile mode.
When starting a RichClient, SmartClient
a, or WebPage
inon a desktop computer, the "Page" column is used.
When a client opens a web connection to the server,
thereplacements
will be applied according it a Mobile (portrait mode) or a Mobile Landscapeare applied based on whether the device is in Mobile Portrait Mode or Mobile Landscape Mode (Tablet or Pad).
| Tip | ||
|---|---|---|
| ||
Only one layout can is needed to define the initial page for Desktop, Tablets, and Mobile, windows native whether using Windows Native (WPF) or HTML5. There is no need to create one a separate layout to for each device type of device. In this Demodemo, we created the additional 3 layouts, Desktopthree additional layouts—Desktop, Pad, and Mobile, just Mobile—to allow the desktop to emulate other devices , and for didactical reasonsinstructional purposes. |
In this solution, all displays are shared
byacross all devices.
We customized onlyThe only customization was applied to the header pages
for betterto enhance the navigation experience.
Defining the UNS (Unified Namespace)
As a general rule, the definition of defining the UNS is the best way to start a solution. That This definition includes, :
- Determining which data sources will be used
- .
- Specifying which
- tags will be created locally
- .
- Defining which assets will
- use external dynamic TagProviders.
For this Demodemo, we defined two sets of data:
LocalTags for ProductionLines,- Local Tags for Production Lines
- External TagProvider for
- Solar Panels
Local Tags and DataTemplates
In order to easily create To streamline the creation of a data model, we defied defined the DataTemplates OEE and Operation, respectively with the OEE information and :
- OEE – containing OEE information.
- Operation – storing the operation status for
- a production line.
- LINE DataTemplate – including both OEE and Operation members.
That allows to just create one single Tag, likeThis approach allows for the creation of a single tag—for example, Press103 of type LINE, and it will have all the —which will automatically include all attributes used in this demo.
The MyLine tag is used on in the OEEDashboard and LineDashboard displays, pointing to the selected asset.
The UI tag is a common good best practice when creating solutions, as it holds all internal variables used to manage the User Interface. The PlaceHolder is just a pre-defined predefined client tag useful for temporary data and teststesting.
Dynamic External TagProviders
This Solution solution also uses assetassets, which whose definition and count , is are dynamically queries queried from an external data source. In this case, we use a an MQTT broker, .
When the application starts (at the Script ServerStartup), our built-in MQTT broker and the built-in MQTTspB simulator are put in executionexecuted.
The solution will connect with connects to the Broker, and all discovered assets found are place placed under the SolarPanels node SolarPanels in the UNS.
Data Transformation using Scripts
| Info | ||
|---|---|---|
| ||
Everything that you could accomplish can be accomplished using Microsoft Visual Studio and the .NET programming langue's, we can do languages can also be done within FrameworX. |
In fact, in a it’s even easier way, as you can also add Python code as well, and the programming to define Server . The platform natively supports server-side scripts with multi-tasking , and Client client-side scripts activated according the displays open is native to the platformthat activate based on the open displays.
Server-The server side scripts are defined in Scripts-Tasks, they . They use only tags and objects of domain Server, and they are available to used by server-domain objects and are available for all remote clients.
In this solution, the Server Tags are represent the Production Lines Assets (Press103 and so on...Line assets (e.g., Press103), and Server server-side scripts runs run a simulation on that data.
The Client-side Scripts scripts are embedded on in the opened open displays. Additional In addition to the display open on loaded in the Layout, the displays can have ChildWindows, all the . All code from all loaded displays are executed executes on the client side (whatever is , whether in Windows or a Browser)browser.
In this Solutionsolution, the CodeBehind of the MenuTree display MenuTree handles the automation of the navigation according navigation automation based on the selected Assetasset.
The display SITES, is composed by two ChidDisplays: the SitesMap, and another one that is dynamically changed according SITES display consists of two ChildDisplays:
- SitesMap
- Another display that dynamically changes based on the selected site.
When changing switching Displays , and ChildDisplays, you are in fact allow dynamically loading which the scripts that should be executed on the client side.
Excellence in User Interface
This Solution shows some of solution demonstrates features that allow to deliver the best possible experience possible for the Users and Operators of your solution.
Allusers and operators.
Fully Responsive, Including Canvas
It is very popular that Dashboards can common for dashboards to be responsive. In a Dashboard you layout dashboard, the display is layout consists of cells, and as you resize which automatically adjust when resizing the client area , or open in other device, the cells are organized or opening on a different device to best fit the available araspace.
FrameworX has the ability to create responsive dashboards, but gave a step beyond, allow you to create Canvas (Process Diagrams) that are also responsive, and create not only enables the creation of responsive dashboards but takes it a step further by allowing you to build responsive Canvas-based process diagrams, enabling advanced user interfaces with both dashboards and drawing containers.
Here are some examples of responsive displays in this solution, created with Responsive Canvas, which using Responsive Canvas—something that would be quite time-consuming to try to do in Dashboards, and certainly it would not mimic achieve with dashboards alone, and wouldn't replicate the same user experience.:
- SiteDallas, SiteMaps, Network, and Features
Even some displays that "look like a dashboard" in some cases are resemble dashboards are sometimes easier to create in free using freeform drawing tools. For example, the OEEDashboard page , is composed by TWO CANVAS drawing, the OEELeft and OEERight. consists of two Canvas drawings:
- OEELeft
- OEERight
An example of traditional Dashboard with cells is at the page LineDashboarda traditional cell-based dashboard can be found on the LineDashboard page.
Themes, with
no extra programmingNo Extra Programming
By keeping your solution consistent with The creeping your solution, using the default colors for graphical elements, and when selecting new ones , using from the Themes palette, makes you can make your solution theme-ready with zero programming required.
Performance with Milliseconds Update.
The combination of FrameworX internal 's proprietary optimizations, with WebAssembly technology, and .NET for code behind, deliver CodeBehind delivers the best possible experience,performance.
For exampleJust to show case, the Home Page of the this solution has includes two animations using the property Client.Millisecond property to showcase real-time updates.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|