Overview
The Solution Configuration tutorial introduces the Designer tool and guides users through creating and managing solutions. It covers creating a new solution, configuring data connections using DataExplorer, working with MQTT brokers and simulators, mapping tags to devices, and building displays with symbols. The tutorial also explains how to define alarms, test solutions, and run them across different environments, including web clients, using built-in platform features.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Using the Designer for Solution Configuration
There are various ways to work with
the Designer, allowing you
to configure the
modules in
a way that suits you. In this first tutorial, we will follow this outline:
- Recap on how to create solutions
- Using the
- DataExplorer and the MQTT Broker and Simulator.
- Automatically create Tags and Device
- Connections.
- Learn more about mapping tag to
- field Devices.
- Create a screen with SmartSymbols.
- Create Alarm conditions and visualize them on the
- screen.
- Execute your
- solution.
Bonus - Extra steps on Expanders.
- Review the Unified Namespace
- DataTemplates.
- Learn more about SmartSymbols
On this page:
- .
Creating a New Solution
If you want to create your own solution, simply click "New" in the Solution Manager and follow the Wizard steps.
Once the loading is complete, you'll see the Designer Home Page, that contains all of the basic information for this solution.
To create a new solution, open the Solutions Manager, click New, and follow the wizard.
Once the solution is loaded, the Designer opens and displays the Designer homepage, the main user interface for editing your solutions.
| Expand | ||
|---|---|---|
| ||
In On the homepage, you can change the Theme theme you'll be using: we . We offer five different options (LightDark, DarkSteel, IndigoSky, Blue and Livemore). By default, Light will be selected. On the right side of the screen, you'll find the common steps to start exploring our platform, from DataExplorer to Runtime. Those These basic features are explored covered in the Designer Tutorial. I By default, our Solution Explorer Navigation solution explorer navigation is filtered by All Modules and Features. If you wish to work with a simplified version of the platform, simply change the filter in the first box. See Filter Options for more information.
|
Data Explorer DataExplorer and MQTT Tools
The DataExplorer tools allow you to easily perform data mining and monitoring from various data sources, including MQTT Brokersbrokers, OPC-UA, PLCs, and SQL databases. Here, let's see how you can connect to our MQTT Simulator to browse its data.
Go to Data Explorer → DataExplorer / MQTT Tools to start. You can connect to your own broker , or use own our built-in MQTT Brokerbroker.
Out Our platform also offers a an MQTT Publisher Simulator, that which has customizable data being published. Simply click both of the green "startStart" buttons to start the Broker broker and Simulatorsimulator.
When first starting the MQTT Brokerbroker, it does an auto-connectconnects, but anytime is necessary, you can manually Connect connect and Disconnect, disconnect anytime using the Play and Stop buttons.
Once you've done sothis, click "Connect" to see view and browse the generated data.
Creating Tags and Device PointsDevicePoints
We'll be using this simulated data to make it easier to build a simple solution. Select DeviceD1, "Panel1" from the list of simulated data , and click Export "Map to the Solution". This will create a new Data Model with the device properties. In this example, we named the new Data Template DataTemplate "SolarPanel." In the Module option, we'll leave the first option selected, which represents the traditional behavior of mapping tags to external devices.
| Tip |
|---|
The platform also has the TagProviders functionality, which allows consuming directly data from other sources , without having to create tags. |
Unified Namespace and Tags
In the Unified Namespace section, you'll be able to define the data models you'll use in the solution.
The AssetsTree Asset Tree is the central point , where you can manage Asset Foldersasset folders, Create create and Edit Tagsedit tags, and link data from TagsProvider ConnectionsTagProvider connections.
In this Getting Started guide, as you can see on in the RootTags folder, the Export of the DataExplorer export has already created already a Tag Device01.a tag "Panel_1"
You can go ahead to review the Devices configuration, or explore a bit more functionalities on in the Unified Namespace:.
| Expand | ||
|---|---|---|
| ||
When building a new solution, it's a good practice is to start by creating Data TemplatesDataTemplates. In this case, the SolarPanel data template DataTemplate will have already been created , since we exported it from the MQTT Simulator. You can also create your data templates DataTemplates manually or import them from csv CSV files or other libraries.
|
| Expand | ||
|---|---|---|
| ||
Once you have your Data Modeldata model, the next step would be is to create tags and map it them to a Devicedevice. This was has already been done automatically, but once again, you can do it manually if you wish. Here, you'll find that the tag DeviceD1 "Panel_1" has already been created , with the type "DataModel1", that contains all of SolarPanel," containing all the properties of the device from the MQTT Simulator.
To create a New Tagnew tag, simply click the "New Item" option in the Tags menu.
|
| Anchor | ||||
|---|---|---|---|---|
|
The Wizard wizard from Data Explorer automatically created automatically a connection with the MQTT Brokerbroker, but it's important to understand what happened behind the scenes.
In addition to MQTT, OPC, Rockwell PLCs and Codesys devices, we offer 70+ native industrial communication protocols.
The use of those Using these communication protocols is a straight forward straightforward process:
Create a
ChannelDeviceChannel,
which isan instance of the
Protocolprotocol with optional configuration settings.
Create a
NodeDeviceNode within that
ChannelDeviceChannel,
which specifiesspecifying the device's location
of that Devicein your network
,using the PrimaryStation
Fieldfield.
Map a
Tagtag in your application to an
Addressaddress in the
Device NodeDeviceNode.
The Export Wizard we used on the DataExplorer did those 3 in DataExplorer completed these three steps automatically to for you.
| Expand | ||
|---|---|---|
| ||
In this case, since we mapped the MQTT Simulator to the solution, creating a Channel was created using the MQTT SparkPlugB protocol protocol.
|
As an Exercise exercise you can create one more Tag tag and its mapping.
| Expand | |||
|---|---|---|---|
| |||
Simply click on the main toolbar to create a new Tag1 in the upper menu of the Points section and create tag on top of the page. Create a new Tag1 as a "SolarPanel" type.
Once you do that, add it to the Points table and map it to a specific Addressaddress. You can either type in the address or browse the available data. A An important thing to consider is that you only need to map at the device level, as the system will automatically read all of the properties associated with that device.
 |
Creating a Simple Display with Symbols
Let's start by exploring the Draw Environmentenvironment. To access it, go to Displays → / Draw, or simply click the Draw button at in the top menu.
This opens the main Draw Environment. By default, the first page created will be the MainPage, where your main content should go.
On the left side of the screen, you'll find all of the components you can use to build your display. They're categorized by different types of graphical components, such as icons, charts, navigation, and symbols (incluindo including high-performance graphics). You can also search for something specific in our library using the search input.
In this example, add a button from the Symbol Library . Follow the by following these steps:
Navigate the tree to Symbols / Library / HMI
,and select the red button
,by clicking on it.
Go to the position on the screen where you want to place it, and do a left-
mouseclick to insert it on the display.
Double-
Click in top of Symbolclick on the symbol to open its configuration popup, where you can map the component's properties to your tags.
In this example, there is only one exposed property,
IsPressed, mapState. Map that property to Tag.Device01.State
. Eithereither by using
IntelisenseIntelliSense when typing
,or by using the button (...) to open a Tag Selection dialog.
That is That’s all you have to do! The value of Tag the tag is now connected to drive the visual of the Select Symbolselected symbol.
Optional exercicesexercises:
| Expand | ||
|---|---|---|
| ||
Another way of creating to create your UI is by dragging tags directly into the display. On the right side of the screen, you'll find all of your tags - — if you drag them into the display, it 'll will automatically create a text output, but you can also map them to specific symbols to create those automatically. To do thatthis, select the tag (or the whole entire Device) you'd like to map and click "Map to Symbol". You'll then be able to select symbols you've created to display your data. Once that's done, if you drag the tag into the Displaydisplay, it 'll will automatically create a symbol. In this example, I've already added a CircularGauge to my library to showcase the device temperature.
|
| Expand | ||
|---|---|---|
| ||
Another unique feature of our platform is the ability to customize any symbol with a great number wide range of dynamic properties. Those include custom Actions, Scripts, Visibility, Rotation, and more. For this example, add a simple rectangle to the display and double-click it to look at explore the available properties. For this example, I created a simple expression to change the fill color depending based on the value with using a simulation tag in the expression.
You can create a new symbol combining those two components and save it into your Symbol Library. To do thatthis, first, break apart the button symbol and , then select all the parts and select choose "Create New Symbols Symbol with Select Selected Elements." . This gives you more flexibility to use our library as a base to create for creating custom symbols that fit your industrial application.
As you make changes, make be sure to save your display by clicking on the save button on at the top of the page.
|
Create a Real-Time Alarm
To test out the Alarming alarming functionalities in the platform, let's create an alarmAlarm.
On Alarms → / Items, simply type on the first line of the table to create a new Alarm. Type "DeviceD1Panel_1." and you'll see the available properties associated with that Device - for Node. For this example, establish a condition, set a limit, select a group (there will be a few are available as by default), and add a message to showcase display when that limit is reached.
On Draw, using the left panel, navigate to pickup the component Module > AlamViewer/ AlarmViewer. AlternativelyAlternatively, you can use the Search Box to find the component. See AlarmViewer Control for more information.
Running your Solution
It's time to run your solution by clicking on the Runtime module (or selecting the play icon on at the top of the page for a quick shortcut). In On this page, you'll find information regarding the solution, including redundancy settings and , command lines, and URL URLs for the clients.
To run your solution, simply click "Run Startup".
| Warning |
|---|
The first time you Open edit and Run run solutions after a new installation, Windows Firewall may request you authorize its useauthorization. Just press OK if a User Authorization user authorization request , or firewall message , is prompted. |
| Tip |
|---|
Click on the Play button for HTML5 Client URL to see your solution running also as a Web Client! |
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|