Versions Compared

Key

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

Using the Designer for Solution Configuration

There are various ways to work with the Designer, you can configure the Modules in order that is suitable to you. In this first tutorial, we will follow this outline:

  1. Recap on how to create solutions
  2. Use the Data Explorer and the MQTT Broker and Simulator.
  3. Automatically create Tags and Device Connections 
  4. Learn more about mapping tag to Field Devices
  5. Create a screen with SmartSymbols
  6. Create Alarm conditions and visualize on the screen 
  7. Execute your Solution

Bonus - Extra steps on Expanders.

  1. Review the Unified Namespace Data Templates
  2. Learn more about SmartSymbols

On this page:

Table of Contents
maxLevel2


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.

Expand
titleClick here if you want to Customize Themes or the Navigation UI...

In 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 DataExplorer to Runtime. Those basic features are explored 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 own built-in MQTT Broker.

Out platform also offers a MQTT Publisher Simulator, that 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 does an auto-connect, but anytime is necessary, you can manually Connect and Disconnect, using the Play and Stop buttons.

Once you've done so, click Connect to see 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 TagsProvider Connections.

In this Getting Started, as you can see on the RootTags folder, the Export of the DataExplorer created already a Tag Device01.

You can go ahead to review the Devices configuration, or explore a bit more functionalities on Unified Namespace:

Expand
titleClick here to see the Data Templates configuration

When building a new solution, a good practice is 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 from csv or other libraries.


Expand
titleClick here to see the Tags table...

Once you have your Data Model, the next step would be to create tags and map it to a Device. This was already done automatically, but once again, you can do it manually if you wish. Here, you'll find the tag DeviceD1 has already been created, with the type "DataModel1", that contains all of 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
Devices
Devices
Field Communication, Industrial Protocols

The Wizard from Data Explorer created automatically 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.

The use of those communication protocols is a straight forward process:

  1. Create a Channel, which is an instance of the Protocol with optional configuration settings
  2. Create a Node within that Channel, which specifies the location of that Device in your network, using the PrimaryStation Field
  3. Map a Tag in your application to an Address in the Device Node.

The Export Wizard we used on the DataExplorer did those 3 steps automatically to you. 

Expand
titleClick here to see the Device configuration created...

In this case, since we mapped the MQTT Simulator to the solution, creating a Channel using the MQTT SparkPlugB protocol 


As an Exercise you can create one more Tag and its mapping.

Expand
titleClick here to see how to create and map a Tag...

 Simply click to create a new Tag1 in the upper menu of the Points section and create a new Tag1 as a "SolarPanel" type.


Once you do that, add it to Points table and map it to a specific Address. You can either type or browse the available data. A 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.


Tip

On Asset Tree, in the Unified Namespace module, you can change the hierarchy of the tags, by creating or importing folders and dragging and dropping tags as necessary. By default, new tags are added to BaseTags.




Creating a Simple Display with Symbols

Let's start by exploring the Draw Environment. To access, go to Displays → Draw, or simply click the Draw button at 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 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 steps:

  1. Navigate the tree to Symbols / Library / HMI, and select the red button, by clicking on it. 
  2. Go to the position on the screen you want to place it and do a left-mouse click to insert it on the display.
  3. Double-Click in top of Symbol to open its configuration popup, where you can map the component's properties to your tags.
  4. In this example, there is only exposed property, IsPressed, map that property to Tag.Device01.State. Either by using Intelisense when typing, or using the button (...) to open a Tag Selection dialog. 


That is all you have to do! The value of Tag is now connected to drive the visual of the Select Symbol.

Optional exercices:

Expand
titleYou can also Insert Tags on Displays, using Drag Drop, or Paste. Click here to see that example...

Another way of creating 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 automatically create a text output, but you can also map them to specific symbols to create those automatically.

To do that, select the tag (or the whole 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'll automatically create a symbol. In this example, I already added a CircularGauge to my library to showcase the device temperature.


Expand
titleClick Here to see how you modify and customize Symbols....

Another unique feature of our platform is the ability to customize any symbol with a great number 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 the available properties. For this example, I created a simple expression to change the fill color depending on the value with 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 that, first break apart the button symbol and then select all parts and select "Create New Symbols with Select Elements". This gives you more flexibility to use our library as a base to create custom symbols that fit your industrial application.


As you make changes, make sure to save your display by clicking on the button on 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, limit, select a group (there will be a few available as default) and a message to showcase when that limit is reached.

In

the Draw Environment, search for AlarmWindow and drag it into the display.On Draw, using the left panel, navigate to pickup the component Module > AlamViewer.  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 on the top of the page for a quick shortcut). In this page, you'll find information regarding the solution, including redundancy settings and command lines and URL for the clients.

To run your solution, simply click "Run Startup". 


Warning

The first time you Open and Run solutions after a new installation, Windows Firewall may request you authorize its use. Just press OK if a User Authorization request, or firewall message, is prompted. 


Tip

Click on the HTML5 Client URL to see your solution running also as a Web Client!



In this section:

Page Tree
root@parent
spacesV10