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 Data Explorer 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 Data Templates.
- Learn more about SmartSymbols.
On this page:
| Table of Contents | ||
|---|---|---|
|
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 loading is complete, you'll see the Designer homepage, the main UI for editing your solutions.
| Expand | ||
|---|---|---|
| ||
On the homepage, you can change the theme you'll be using; we offer five different options (Light, Dark, Indigo, Blue, and Live). 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 Data Explorer to Runtime. These basic features are covered in the Designer Tutorial. I By default, our 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.
|
Data Explorer and MQTT Tools
The DataExplorer tools allow you to easily perform data mining and monitoring from various data sources, including MQTT brokers, 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 → MQTT Tools to start. You can connect to your own broker or use our built-in MQTT broker.
Our platform also offers an MQTT Publisher Simulator, which has customizable data being published. Simply click both of the green "Start" buttons to start the broker and simulator.
When first starting the MQTT broker, it auto-connects, but you can manually connect and disconnect anytime using the Play and Stop buttons.
Once you've done this, click "Connect" to view and browse the generated data.
Creating Tags and Device Points
We'll be using this simulated data to make it easier to build a simple solution. Select "DeviceD1" from the list of simulated data and click "Export to Solution." This will create a new Data Model with the device properties. In this example, we named the new Data Template "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 is the central point where you can manage asset folders, create and edit tags, and link data from TagProvider connections.
In this Getting Started guide, as you can see in the RootTags folder, the DataExplorer export has already created a tag "Device01."
You can go ahead to review the Devices configuration, or explore more functionalities in the Unified Namespace.
| Expand | ||
|---|---|---|
| ||
When building a new solution, it's a good practice to start by creating data templates. In this case, the SolarPanel data template will have already been created since we exported it from the MQTT Simulator. You can also create your data templates manually or import them from CSV files or other libraries.
|
| Expand | ||
|---|---|---|
| ||
Once you have your data model, the next step is to create tags and map them to a device. This has already been done automatically, but you can do it manually if you wish. Here, you'll find that the tag "DeviceD1" has already been created with the type "DataModel1," containing all the properties of the device from the MQTT Simulator.
To create a new tag, simply click the "New Item" option in the Tags menu.
|
| Anchor | ||||
|---|---|---|---|---|
|
The wizard from Data Explorer automatically created a connection with the MQTT broker, 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.
Using these communication protocols is a straightforward process:
- Create a Channel, an instance of the protocol with optional configuration settings.
- Create a Node within that Channel, specifying the device's location in your network using the PrimaryStation field.
- Map a tag in your application to an address in the Device Node.
The Export Wizard in Data Explorer completed these three steps automatically for you.
| Expand | ||
|---|---|---|
| ||
In this case, since we mapped the MQTT Simulator to the solution, a Channel was created using the MQTT SparkPlugB protocol.
|
As an exercise you can create one more tag and its mapping.
| Expand | ||
|---|---|---|
| ||
Simply click on the main toolbar to create a new 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 address. You can either type in the address or browse the available data. 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 environment. To access it, go to Displays → Draw, or simply click the Draw button 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 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 (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 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-click to insert it on the display.
- Double-click 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. Map that property to Tag.Device01.State either by using IntelliSense when typing or by using the button (...) to open a Tag Selection dialog.
That’s all you have to do! The value of the tag is now connected to drive the visual of the selected symbol.
Optional exercices:
| Expand | ||
|---|---|---|
| ||
Another way to create your UI is by dragging tags directly into the display. On the right side of the screen, you'll find all your tags—if you drag them into the display, it will automatically create a text output, but you can also map them to specific symbols to create those automatically. To do this, select the tag (or the 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 display, it 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 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 explore the available properties. I created a simple expression to change the fill color based on the value 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 this, first, break apart the button symbol, then select all the parts and choose "Create New Symbol with Selected Elements." This gives you more flexibility to use our library as a base for creating custom symbols that fit your industrial application.
As you make changes, be sure to save your display by clicking the save button at the top of the page.
|
Create a Real-Time Alarm
To test out the alarming functionalities in the platform, let's create an Alarm.
On Alarms → Items, simply type on the first line of the table to create a new Alarm. Type "DeviceD1." and you'll see the available properties associated with that Device. For this example, establish a condition, set a limit, select a group (a few are available by default), and add a message to display when that limit is reached.
On Draw, using the left panel, navigate to pickup the component Module > AlarmViewer. Alternatively, you can use the Search Box to find the component.
Running your Solution
It's time to run your solution by clicking on the Runtime module (or selecting the play icon at the top of the page for a quick shortcut). On this page, you'll find information regarding the solution, including redundancy settings, command lines, and URLs for the clients.
To run your solution, simply click "Run Startup."
| Warning |
|---|
The first time you edit and run solutions after a new installation, Windows Firewall may request authorization. Just press OK if a 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 | ||||
|---|---|---|---|---|
|