PowerShell is an efficient method of conducting all these common tasks in quick succession and providing a repeatable methodology that can be reused for each new virtual machine.

Note: The following commands are tested for Windows10 virtual machines using an admin-privileged PowerShell. I recommend creating a restore point of your virtual machine using a feature such as VMWare Workstation’s Snapshot.

Renaming the Virtual Machine PC and Local User Account

When distributing virtual machines across many employees, it is a best practice to rename the employee’s virtual machine so that it can be easily identified when working on large collaborative projects. The computer and local usernames can both be renamed using the following PowerShell commands:

 # Renames the computer - be sure to replace the sample name

Rename-Computer -NewName "SampleName"

# Renames the local user - be sure to replace the company and sample name

Rename-LocalUser -Name "SampleCompanyName" -NewName "SampleName"

 # Renames the computer - be sure to replace the sample name

Rename-Computer -NewName "SampleName"

# Renames the local user - be sure to replace the company and sample name

Rename-LocalUser -Name "SampleCompanyName" -NewName "SampleName"

If the name of the current Local User is unknown, it can be viewed by searching for Computer Management using the start menu and navigating to “Local Users and Groups > Users”.

Figure 1: Location of the Local User within Computer Management

When changing the sample names to the appropriate fields for your needs, make sure there is no white space before or after the field. Using “ SampleName “ instead of “SampleName” may cause problems with password acceptance after a restart, locking you out of your virtual machine.

Performance Improvements

When working with limited computing resources, performance improvements can become vital on Windows virtual machines that run intensive programs. Two notable PowerShell commands are setting the Power Plan to High Performance and the removal of native Windows applications, which may bloat the system.

# Sets the Windows Power Plan setting to High Performance

powercfg.exe -SETACTIVE 8c5e7fda-e8bf-4a96-9a85-a6e23a8c635c

# Removes all default Windows application packages

Get-AppxPackage -AllUsers | Remove-AppxPackage

# Sets the Windows Power Plan setting to High Performance

powercfg.exe -SETACTIVE 8c5e7fda-e8bf-4a96-9a85-a6e23a8c635c

# Removes all default Windows application packages

Get-AppxPackage -AllUsers | Remove-AppxPackage

This first command will set your virtual machine’s Power Plan setting to High Performance. The second command fetches all app packages (applications with a .msix or .appx file extension) for default Windows applications and removes them. This may take a while, as it will remove all applications such as the default calculator, photo viewer, Cortana, Xbox features, and more. System-crucial programs such as the File Explorer are untouched.

On some Windows11 and Windows10 host machines, virtual machine software such as VMWare Workstation experiences significant performance inhibitions due to the default program power throttling settings. If you experience this, you can disable power throttling for the application with the following command (executed in your host machine instead of the virtual machine):

# Disables power throttling for VMWare Workstation

powercfg /powerthrottling disable /path "C:\Program Files (x86)\VMware\VMware Workstation\x64\vmware-vmx.exe"

# Disables power throttling for VMWare Workstation

powercfg /powerthrottling disable /path "C:\Program Files (x86)\VMware\VMware Workstation\x64\vmware-vmx.exe"

Quality of Life Improvements

For companies with many regional or international offices, employees in various time zones can quickly update the displayed time of their virtual machine by executing the following:

# Displays the current time zone

Get-TimeZone

# Lists all available time zones

Get-TimeZone -ListAvailable

# Set the time zone to the desired time zone name – be sure to replace the name with the appropriate time zone

Set-TimeZone "Sample Time Zone"

# Displays the current time zone

Get-TimeZone

# Lists all available time zones

Get-TimeZone -ListAvailable

# Set the time zone to the desired time zone name – be sure to replace the name with the appropriate time zone

Set-TimeZone "Sample Time Zone"

Common options for time zone names can be seen below. Replacing “Standard” with “Daylight” will correct the time to Daylight Savings Time.

Set-TimeZone "Eastern Standard Time"

Set-TimeZone "Pacific Standard Time"

Set-TimeZone "US Mountain Standard Time"

Set-TimeZone "Central Standard Time"

Set-TimeZone "Eastern Standard Time"

Set-TimeZone "Pacific Standard Time"

Set-TimeZone "US Mountain Standard Time"

Set-TimeZone "Central Standard Time"

Disabling automatic Windows updates can save a significant amount of time during virtual machine system restarts and potentially save a virtual machine from incompatibility crashes after an unwanted feature update. To do this, run the following commands:

# Stop the automatic Windows update service

sc.exe stop wuauserv

# Disable the automatic Windows update service

sc.exe config wuauserv start=disabled

# Stop the automatic Windows update service

sc.exe stop wuauserv

# Disable the automatic Windows update service

sc.exe config wuauserv start=disabled

Single-Line Execution

Copying each line one-by-one is inefficient, so why not run all the commands at once? You can execute all of these changes in a single line by copying and pasting the text below. Adjust the fields, such as your name and time zone, before executing. When finished, your virtual machine will restart and apply the changes to your computer name and local username.

# Executes all commands in a single line

Rename-Computer -NewName "SampleName"; Rename-LocalUser -Name "SampleCompanyName" -NewName "SampleName"; Get-AppxPackage -AllUsers | Remove-AppxPackage; powercfg.exe -SETACTIVE 8c5e7fda-e8bf-4a96-9a85-a6e23a8c635c; Set-TimeZone "Sample Time Zone"; sc.exe stop wuauserv; sc.exe config wuauserv start=disabled; Restart-Computer

# Executes all commands in a single line

Rename-Computer -NewName "SampleName"; Rename-LocalUser -Name "SampleCompanyName" -NewName "SampleName"; Get-AppxPackage -AllUsers | Remove-AppxPackage; powercfg.exe -SETACTIVE 8c5e7fda-e8bf-4a96-9a85-a6e23a8c635c; Set-TimeZone "Sample Time Zone"; sc.exe stop wuauserv; sc.exe config wuauserv start=disabled; Restart-Computer

Figure 2: An example virtual machine PowerShell tweak to a new DMC virtual machine

Learn more about our Manufacturing Automation services and contact us for your next project.

The post Windows Virtual Machine PowerShell Tweaks appeared first on DMC, Inc..

This article demonstrates a holistic approach to establishing a connection between two Beckhoff IPCs.

IPC Configuration:

All PLCs mentioned are the BECKHOFF C6017 model.

In order to “discover” another PLC, the Beckhoff IPC will need to have its network and port configured to be visible across an ethernet or network connection. In this example I will be using a PLC that is networked to an internal server with 20 to 40 other Beckhoff IPCs.

Process:

1. Connect the Beckhoff IPC to a monitor and peripherals to control the system. This specific model calls for a Display Port (DP) connection and any USB integrated keyboard and mouse.

2. Sign into the IPC. If no configuration has been set, this will be Beckhoff’s default login:
   1. Username: ADMINISTRATOR
   2. Password: 1

3. If this is your first time accessing the PLC, click HERE for a step-by-step setup process.
   1. IMPORTANT: make sure to follow step 8 for the appropriate firewall settings.

4. Like step 6 in the linked article, we need to install the Beckhoff Real-Time Ethernet Driver for our networked port.
   1. Regardless of whether you use direct or networked ethernet communication, this driver will need to be installed on the appropriate ethernet port.

5. Navigate to C:\TwinCAT\3.1\System and run TcRteInstall.exe:

6. Install the driver onto the Networked port. For a networked connection, the IPv4 properties found in step 2 of the linked article will need to include an appropriate IP address, subnet mask, and gateway to the local server.

Note: if you as a user also have access to this internal network through local access or a VPN, you can program the PLC from this networked port and no longer need a physical connection to the IPC.

7. With the correct configuration of your IPv4 network properties, you should be able to discover other devices on the server.

8. Next, we need to set the AMS NetId to partner with the expected service. This step will ensure that there are no conflicting communication paths between PLCs. At DMC these are typically set to the PLC IP address and extended with a .1.1, as seen below, to match the expected 6-byte TwinCAT network ID.

TwinCAT XAE Configuration:

We can now migrate to the TwinCAT XAE environment and begin creating EAP masters through the networked ports on the IPC, as shown above or by using the EL-6601 or EL-6614 hardware options, which extend the IPCs available ethernet ports.

Note: the EL-6652 supports Ethernet/IP communication to other PLC platforms and will be covered in a future blog.    

TwinCAT XAE EtherCAT Automation Protocol (EAP) Setup:

For this tutorial, we will be using the EAP Master that is linked to an internal IPC network port.

1. Begin by right-clicking on Devices in the IO tree here:

       2. Then, select the EAP Master:

Once instantiated, the box is ready to set up publishers and subscribers. Publishers can “publish” or send data out across an EAP connection while subscribers will “subscribe” and listen for that data. These can be instantiated by right-clicking on the EAP master and adding a new device.

Publishers:

There are a few ways to set up the communication bridge. At DMC, the two most common are the UDP/IP Unicast and the RT-Ethernet Unicast with the AMS NetId. Unless you are using multicast, it will be one box per PLC to PLC connection.

1. To publish with UDP, specify the Unicast destination which is the Networked IP address of the desired IPC and the default gateway hosting the server traffic.

2. To publish with RT-Ethernet, set the AMS NetId of the subscriber. This requires the two networked IPCs to be on the same server and discoverable by one another.

3. Regardless of your chosen method, you can now instantiate networked variables to publish from your boxes. To do this, right click on the publisher box and select 'add new item'. Then, configure the data you need to send.

4.Next, link the instantiated publisher variable data to the PLC variable you wish to send out within the outputs sub-selection on the publisher box:

5.Continue this process for all the variables you wish to use in EAP communication, and then activate the configuration to change the memory space.

Subscribers:

1.Similar to publishers on an EAP Master, add a new item and select Network Variable Subscriber.

2. There are a couple of options for adding subscriber variables. The easiest is to browse for computers. This requires the RT-Ethernet setup on the publisher. To do so, right click on the subscriber box and select 'add new item'. Then, select 'browse for computer.'

3. Add the appropriate dialog route for your search, and establish the connection.

4. After establishing a connection, the published variables will populate to the network variables list.

5. Select the variables you wish to subscribe to, and link them to subscriber IPC inputs to use in logic. Note that the quality tag can be used as a heartbeat monitor and that a value of 0 is a successful connection. Activate the configuration and check to see if the connection is present.

6. For the UDP Unicast Publisher, set up the subscriber to receive from any publisher because the publisher is providing the IPC pointing. Then, instead of browsing for a computer, use 'create a new variable,' and give it the definition the publisher is providing whether that be INT, BOOL, or any other data type.

7. Next, in the subscribe tab of the new variable, provide the expected publisher variable ID and link like in step 5. This will also come with a quality check for the connection state.

Now that the publisher and subscriber have achieved a connection, the networked variables and connection quality are available to the subscriber PLC to use in any desired logic.

Learn more about DMC's Beckhoff and TwinCAT Programming expertise and contact us for your next project. 

The post Beckhoff PLC to PLC Communication Using EAP – A Starter Guide appeared first on DMC, Inc..

We know how difficult it can be to do something as simple as sending an email from a PLC, especially when considering all the different issues that can arise. If you are having trouble sending emails, do not give up. This blog is going to fill you in on what you can do with a Siemens 1200 PLC for sending emails, and hopefully give you insight into additional troubleshooting techniques for getting them working correctly.

Starting from the beginning, let’s make sure that you have everything set up accordingly.

Hardware

When using a PLC to send out emails you must know what type of emails you are sending out. If you are sending emails through a secure protocol (SSL or TLS), then you are going to need additional hardware for either the S7 1500 or the S7 1200 Siemens PLCs.

These secure protocols typically communicate using ports 465, and 587. Port 465 if you are using SSL, and port 587 if you are using TLS. For the PLC to communicate through either of these ports, then you will need the addition of a communications processing module. This is typically done when trying to send emails through a public SMTP server like Gmail, or Yahoo.

If you are looking to send emails to a local SMTP server, then you can use port 25 for SMTP relay and you do not need an additional communications processing module. Note, this must be done behind a firewall because most firewalls block any traffic on port 25. The configuration for sending emails using port 25 can be more difficult, due to the lower security protocols.

For our example, we sent emails to a Gmail account and used a CP1243-1 communications processor (CP) with an S7 1214c PLC. The CP1243-1 can be configured to any of the S7 1200 PLCs. These are configured as follows.

Connect the CP module to the PLC via the terminals on the side of the PLC. There is no need to connect them to each other through their ethernet ports as they can communicate through their back-plane connection. Connect the CP module to the router/modem via a short ethernet cable. Finally, connect the computer that is being used to access the PLC through one of the ports available on the PLC, and it should all be good to go.

Hardware Troubleshooting

Verify that the CP module and the PLC are set up in the TIA portal with the same version that matches the physical hardware. Without doing this the CP module and PLC will not compile correctly. Typical troubleshooting for this is straight forward, and there are many different online resources available to help.

Software

Refer to the previous blog (Sending Emails with a Siemens 1500 PLC) for information on how to set up the TMAIL_C function block, Gmail application settings, obtain trusted certifications, and enable security clearance.

The entire process is the same for setting up an S7 1500 PLC and an S7 1200 PLC except for the address parameter input.

For the address parameters in the TMAIL_C function block, you will be using a TMAIL_QDN_SEC system data type instead of the TMAIL_V4_SEC system data type. The QDN stands for Qualified Domain Name, which allows you to use domain name servers instead of IP addresses. The settings for the Address_Parameters can be set up as seen below.

It is important to note that sometimes the TMail_QDN_SEC will not autofill as you type out the data type. Typically, if you type it correctly, all the additional parameters will appear after pressing the enter key.

One thing that may differ is the TLSServerCertRef. The TLSServerCertRef refers to the index at which your encryption certification resides and can be changed accordingly. In our example, we had our encryption certification in index 4.

Troubleshooting

Status Codes

Be sure to latch any of the status codes you have for diagnostic purposes. Here is an example of how we latched our statuses and sent them to another variable for diagnostics purposes.

Error Code #8420

When trying to send an email with a PLC you may get the error code #8420 (SMTP error code 420). This is a timeout connection error which typically results in there being a problem with the firewall, an issue with the PLC and CP modules onboard time, or an issue with the router or modem.

Time Synchronization

Be sure that the time on both the CP module and the PLC are up to date. Without doing this you will likely get a timeout error. To change the time of your PLC and CP module you need to first go online with the PLC and CP module. Once online with the PLC and CP module, go to the Online and Diagnostics settings for each device. First, check that the time is in sync for the PLC, the CP module uses the PLC to update its time.

For the PLC, go to Online and Diagnostics>Functions> Set time. Select the checkbox for “Take from PG/PC” and then hit apply. From here you can check the time on your CP module and see if it synced up or not.

To access the time for the CP module, go to the online and diagnostics for the CP module located at the bottom of the project tree under local modules. As you can see below, the time on the CP module did not sync up accordingly. This is common when setting the time for the first time on the PLC and will require a full power cycle of the PLC and CP while connected.

Be sure to select “Enable time-of-day synchronization” if it has not already been selected for the CP module.

Afterward, the CP modules time should update with a full power cycle if the CP module and PLC remain connected upon booting up.

Router/Modem Configuration

Be sure to look through the router and modem configuration settings. Most of the time you will be able to connect to the router/modem via ethernet and access the settings by typing in the gateway IP in your web browser. Try other web browsers if the first one does not work. Verify that the IP address of the gateway in the PLC properties is consistent with that of your gateway. If your computer is on the same network as the PLC, you can determine what the IP address of your router/modem is by doing an IP configuration in your command prompt.

Command prompt command ipconfig will pull up all the connections associated with your computer.

This is an example of a default gateway that you are trying to search for in IP configuration. It is common for this IP address to be configured as 192.168.1.1, especially if the PLC you are using is operating with its own router/modem.

In our example, the gateway that my computer was using was different than the gateway of the PLC. Be sure to troubleshoot the settings in the appropriate gateway. Below is an example of accessing the settings to our router/modem.

Be sure that there are no limitations on the trusted IP or edit the limitations to allow for the IP address of your CP module. As seen here, outbound port filtering settings can be configured to limit the access of your PLC from sending emails effectively.

DNS Configuration

Sometimes your DNS configuration may be the cause of a potential error. Especially if you are trying to use the qualified domain name for your emailing server. A typical fix for this could be to switch your DNS server to the basic google DNS server. In the CP modules, general properties adjust the DNS configuration as follows.

Device Configuration

Your device configuration needs to match your physical hardware. Double-check all the firmware as well as model numbers on every device such that they match the physical hardware. You can check this by going online with the PLC and going to Online Diagnostics> Diagnostics> General> Firmware.

Once you verify the version of the PLC or CP module are different you can change them accordingly in the Device View by right-clicking the PLC/CP module and selecting Change Device.

Error Code #8530

Error code #8530 (SMTP error code 530) typically indicates an authentication problem. Solutions to this error code typically involve your Address Parameters. Verify that these are correct to your specific setup. Make sure you acquired the correct encryption certificate.

Also, verify that the Email Configuration settings for the CP module match the settings in the TMAIL_C function block. These settings can be found in the Device Configuration> Properties> General> E-mail Configuration.

Lastly, check your Gmail/email server settings. Sometimes whenever you think you have done everything correctly; you will get one last error. Be sure to check your email account settings. You will likely get a notification asking for verification about suspicious activity on your account. If you got this notification, then you should be one step away from success.

Status Code #7002

This is not an error, you did it! Today is a glorious day! It is time to celebrate! You successfully sent an email with a PLC and a CP module. People told you that it couldn’t be done but you proved them wrong. Time to kick back and enjoy this moment.

Learn more about DMC's PLC Programming expertise and contact us with project inquiries or questions.

The post Sending Emails with a Siemens 1200 PLC appeared first on DMC, Inc..

• Part 1: Creating and Opening a Project
• Part 2: Folder Structure and Gedi Layout
• Part 3: Panels | The Basics
• Part 4: Panel Scripting Environments and QuickTest
• Part 5: Scripting Syntax
• Part 6: Para Overview and Datapoint Creation
• Part 7: Interacting with Datapoints via Scripting
• Part 8: Libraries
• Part 9: Color Database & High Performance Best Practices

Way back in Part 3 of “Getting Started with WinCC OA”, we investigated the basics of panel creation and development by adding objects and configuring their properties. In Part 10, we’ll dive back into the world of panels by looking at panel nesting and the mechanism with which we pass information from one panel to its nested counterpart: $-Parameters.

Panel References/Embedded Panels

Panel references are used to insert or nest existing panels (reference panels) into other panels (parent panels). This is useful for creating commonly repeated objects like valves or motors and utilizing them in larger systems. If changes are made to the original panel, all references will similarly update within their parent panel.

To create a panel reference, simply drag a panel from the Project View tree onto the working space of another panel.

$-Parameters

Often, developers will want a reference panel to receive specific properties from its parent panel (including, but not limited to, colors, types, and text); This is done via $-Parameters(dollar parameters). $-Parameters are defined in reference panel scripting simply by placing a “$” in front of a variable name. Whenever a reference panel is added to a parent panel, a “Reference Defining” popup will appear and the user can configure $-Parameters as they choose. $-Parameters can be later changed by either:

1. Double-clicking the panel reference to bring up the “Reference Defining” popup
2. Changing the $-Parameters directly in the panel properties

Example

To continue with our evolving example panel from prior “Getting Started with WinCC OA” installments, let’s now assume that we now have three motors that we want to use with our TestPanel. With two additional motors, we must first add additional datapoints in Para to represent the new motors’ PLC tags. Simply add two new datapoints (“myMotor2” and “myMotor3”) underneath our “myDatapointType” datapoint type.

Now that we have our additional motors configured in Para, we’ll want to create three references of TestPanel in another parent panel. However, our current TestPanel is configured to work only with the “myMotor” datapoint.

To utilize our TestPanel as a re-usable reference, we must first incorporate flexibility and allow the panel to use a variety of datapoints, not just “myMotor”. How might we do this? With $-Parameters.

To implement a $-Parameter within our TestPanel script, we’ll assign the $-Parameter “$motorDpe” to the internal string variable “motorDpe” and then replace every occurrence of the text “myMotor” with the variable “motorDpe.” With this modification, we may pass in “myMotor”, “myMotor2”, and “myMotor3” into the TestPanel to substitute for the string “motorDpe.”

#uses "OpenLibrary/Enums/MotorStatusType"
#uses "ColorConst"

string motorDpe = $motorDpe;

//=============================== Panel initialization =========================================
initializePanel()
{
  //Whenever rSpeed or rMaxSpeed changes, call the function "onSpeedChange"
  dpConnect("onSpeedChange", motorDpe + ".rSpeed", motorDpe + ".rMaxSpeed");

  //Whenever iStatus changes, call the function "onStatusChange"
  dpConnect("onStatusChange", motorDpe + ".iStatus");

  //Set rectangle's label text to its motor dpe
  setValue("motorLabel", "text", motorDpe);
}


//=============================== Text Field Command =========================================
//Textbox is selected and user keys "Enter"
void textboxCmd()
{
  //Assign the textbox's text value to rMaxSpeed
  dpSet(motorDpe + ".rMaxSpeed", maxSpeedTextbox.text);
}


//=============================== On Speed / Max Speed Value Change =================================
void onSpeedChange(string speedDp, float speedValue, string maxSpeedDp, float maxSpeedValue)
{
  //Define the variable whose value will be assigned to iStatus
  int iStatusValue;

  //Determine what value to assign iStatusValue (and subsequently "myMotor.iStatus")
  switch (speedValue)
  {
    //If "myMotor.rSpeed" is 0, set iStatusValue to 0
    case 0:
      iStatusValue = (int)MotorStatusType::Stopped;
      break;

    //Otherwise, if "myMotor.rSpeed" > "myMotor.rMaxSpeed", set iStatusValue to Estop status int
    //           if not, set iStatusValue to Forward status int
    default:
      iStatusValue = ((speedValue >= maxSpeedValue) ? (int)MotorStatusType::Estop : (int)MotorStatusType::Forward);
      break;
  }

  //Assign iStatusValue's value to "myMotor.iStatus"
  dpSet(motorDpe + ".iStatus", iStatusValue);

  //Set the maxSpeedTextbox and speedTextbox's test to their respective values
  //NOTE: dpValToString ensures the units we assigned earlier in the series are displayed.
  //      Simply using <Textbox>.text = <speedValue> will work, but will not display appropriate units
  maxSpeedTextbox.text = dpValToString(motorDpe + ".rMaxSpeed", maxSpeedValue, true);
  speedTextbox.text = dpValToString(motorDpe + ".rSpeed", speedValue, true);
}

//=============================== On Status Change =========================================
void onStatusChange(string statusDp, int statusValue)
{
  //Define the variable whose value will be assigned to the rectangle's color property
  string rectangleColor;

  //Determine color to assign to rectangle based off iStatus
  if (statusValue == (int)MotorStatusType::Stopped)
  {
    rectangleColor = STOPPED_COLOR;
  }

  if (statusValue == (int)MotorStatusType::Estop)
  {
    rectangleColor = ESTOPPED_COLOR;
  }

  if (statusValue == (int)MotorStatusType::Forward)
  {
    rectangleColor = FORWARD_COLOR;
  }

  //Assign selected color to rectangle
  setValue("rectangle", "backCol", rectangleColor);
}

#uses "OpenLibrary/Enums/MotorStatusType"
#uses "ColorConst"

string motorDpe = $motorDpe;

//=============================== Panel initialization =========================================
initializePanel()
{
  //Whenever rSpeed or rMaxSpeed changes, call the function "onSpeedChange"
  dpConnect("onSpeedChange", motorDpe + ".rSpeed", motorDpe + ".rMaxSpeed");

  //Whenever iStatus changes, call the function "onStatusChange"
  dpConnect("onStatusChange", motorDpe + ".iStatus");

  //Set rectangle's label text to its motor dpe
  setValue("motorLabel", "text", motorDpe);
}


//=============================== Text Field Command =========================================
//Textbox is selected and user keys "Enter"
void textboxCmd()
{
  //Assign the textbox's text value to rMaxSpeed
  dpSet(motorDpe + ".rMaxSpeed", maxSpeedTextbox.text);
}


//=============================== On Speed / Max Speed Value Change =================================
void onSpeedChange(string speedDp, float speedValue, string maxSpeedDp, float maxSpeedValue)
{
  //Define the variable whose value will be assigned to iStatus
  int iStatusValue;

  //Determine what value to assign iStatusValue (and subsequently "myMotor.iStatus")
  switch (speedValue)
  {
    //If "myMotor.rSpeed" is 0, set iStatusValue to 0
    case 0:
      iStatusValue = (int)MotorStatusType::Stopped;
      break;

    //Otherwise, if "myMotor.rSpeed" > "myMotor.rMaxSpeed", set iStatusValue to Estop status int
    //           if not, set iStatusValue to Forward status int
    default:
      iStatusValue = ((speedValue >= maxSpeedValue) ? (int)MotorStatusType::Estop : (int)MotorStatusType::Forward);
      break;
  }

  //Assign iStatusValue's value to "myMotor.iStatus"
  dpSet(motorDpe + ".iStatus", iStatusValue);

  //Set the maxSpeedTextbox and speedTextbox's test to their respective values
  //NOTE: dpValToString ensures the units we assigned earlier in the series are displayed.
  //      Simply using <Textbox>.text = <speedValue> will work, but will not display appropriate units
  maxSpeedTextbox.text = dpValToString(motorDpe + ".rMaxSpeed", maxSpeedValue, true);
  speedTextbox.text = dpValToString(motorDpe + ".rSpeed", speedValue, true);
}

//=============================== On Status Change =========================================
void onStatusChange(string statusDp, int statusValue)
{
  //Define the variable whose value will be assigned to the rectangle's color property
  string rectangleColor;

  //Determine color to assign to rectangle based off iStatus
  if (statusValue == (int)MotorStatusType::Stopped)
  {
    rectangleColor = STOPPED_COLOR;
  }

  if (statusValue == (int)MotorStatusType::Estop)
  {
    rectangleColor = ESTOPPED_COLOR;
  }

  if (statusValue == (int)MotorStatusType::Forward)
  {
    rectangleColor = FORWARD_COLOR;
  }

  //Assign selected color to rectangle
  setValue("rectangle", "backCol", rectangleColor);
}

NOTE: $-Parameters can be interspersed throughout our code; wherever a $-Parameter is referenced, the value passed in from the parent panel will take its place. DMC’s best practices, however, entail using a $-Parameter only once by assigning an internal variable to the $-Parameter and then using said variable within the panel’s script. In the case a $-Parameter needs to have its name changed, the modification only needs to be made once in the panel code.

Now that our TestPanel is configured to accept a variety of datapoints (of type “myDatapointType”), we may now begin creating panel references.

1. Create a parent panel called “ParentPanel.”
2. Drag a “TestPanel” into the “ParentPanel” working space
3. Add the datapoint “myMotor” to the “$motorDpe” value field
   • This can be done in the reference panel’s “Reference defining” popup
   • Or in the reference panel’s Property editor
4. Repeat steps 2 and 3 for the datapoints “myMotor2” and “myMotor3.”

Or

Congratulations! You’ve created a parent panel with three reference panels. If any changes are made to TestPanel, those changes would propagate into the parent panels’ references. Let’s test this.

Since it’s not evident which panel reference refers to which motor, we’ll make a couple of modifications within TestPanel. We’ll first add a primitive text object over our rectangle (name ‘motorLabel’, set Foreground Color to ‘Base_White’, change the text to ‘Motor Dpe’, and center the text over the ‘rectangle’ object) to serve as a label.

Additionally, we’ll add a setValue command to the panel initialization in Scope Lib to populate the label with the correct motor dpe.

Upon opening ParentPanel (if ParentPanel is already open, close it so that the working space’s reference panels can be updated) and running QuickTest, you’ll notice the new panel titles are now labeled “myMotor”, “myMotor2”, and “myMotor3.”

Furthermore, you’ll notice that changing rSpeed and rMaxSpeed in each of the datapoints (myMotor, myMotor2, and myMotor3) all reflect on their appropriate panels.

Additional $-Parameter Features

Optional parameters

By default, $-Parameters are required to be passed down from parent panel to reference panel. When a reference panel is created, its dollar parameters will, by default, be self-defined.

If no alternative $-Parameter is provided, the panel in runtime will generate an error (assuming the parent panel does not become a reference panel itself).

However, if an underscore is placed directly after the “$”, the parameter then becomes optional. When a reference panel is created, its optional dollar parameters are not automatically defined.

Optional parameters are accessible in the “Reference defining” popup under the “optional” tab or along with other $-Parameters in the Property Editor.

Specifying $-Parameter Data Types

$-Parameters can be designated to have specific data types according to their names’ prefixes:

Specifying $-Parameter Parameter Types

Fun Fact of the Day: Clicking the ellipsis in the reference defining panel calls a popup that assists the user in a $-Parameter selection. This is only done, however, if a $-Parameter does not adhere to a data-type-specifying convention (and is therefore labeled as “[unknown]”). From this “Menu” popup, one can choose to open the “DP-Selector”, “DPE-Selector”, “Color-Selector”, “Panel-Selector”, “Font-Selector”, or “Keyword-Selector” (if applicable).

NOTE: The “DP-Selector” only allows the user to select the highest level of a datapoint structure while the “DPE-Selector” allows the user to select the datapoint or any of its respective elements.

Reference Defining Panel

DP-Selector

DPE-Selector

Color-Selector

Panel-Selector

Font-Selector

Similar to how the naming convention allows $-Parameters to be defined as specific datatypes, the naming convention also allows users to specify $-Parameters’ parameter types. If a $-Parameter contains the name “dp”, “dpe”, “color”, “panel”, or “font”, the ellipses click will bypass the “Menu” panel and navigate directly to the appropriate selector.

NOTE: If a user were to specify a data type and a parameter type for a specific $-Parameter, the parameter type would take precedence and the $-Parameter would be considered an “[unknown]” data type.

For example, “$sMyDpe” would be considered an unknown (as opposed to a string) and open the DPE-Selector.

NOTE 2: If a user has a lack of foresight and includes multiple parameter types in their $-Parameter name, then a selector will open in the following priority:
Dpe > dp > panel > color > font

For example, “$myColorDpe” would open the DPE-Selector as opposed to the Color-Selector.

Now that we’ve reviewed the wonders of panel embedding and started learning the magic of $-Parameters, it’s time to further our knowledge of panels. In the next edition of “Getting Started with WinCC OA”, we’ll dive into another form of panel references, Child Panels (i.e. Popups), and how $-Parameters are used in that context.

Topics to look forward to in this series: 

• Part 11: Panels | Child Panels (Popups)
• Part 12: Modules & Embedded Modules

Contact DMC to get started on your next WinCC project and learn more about our Siemens SIMATIC WinCC Programming as well as our WinCC Open Architecture Development.

The post Getting Started with WinCC OA: Part 10 – Panel Nesting and $-Parameters appeared first on DMC, Inc..

For this tutorial, we will be leveraging the use of LINQ to make sorting quite painless, and optionally Material-UI for styling the table. At the very end, I will also briefly describe a way of implementing this table without using LINQ and only using base React.

Tools Used in this Blog:

• LINQ 
• Material-UI (Optional)
• Basic React hooks
• Functional React

Setup

First, we need some data. For the purposes of this example, I just created some dummy data that we can sort. I also defined an interface for the data type and an enum for departments that a person can belong to.

 const dataList=[
    {name: 'Ryan H.',   hours: 30, startDate: new Date('2019-01-14'), department: Department.Marketing},
    {name: 'Ariel P.',  hours: 22, startDate: new Date('2017-03-12'), department: Department.Sales},
    {name: 'Ryan Y.',   hours: 31, startDate: new Date('2015-09-12'), department: Department.Marketing},
    {name: 'Ed T.',     hours: 22, startDate: new Date('2017-03-12'), department: Department.Engineering},
    {name: 'Matt G.',   hours: 30, startDate: new Date('2017-03-12'), department: Department.Marketing},
    {name: 'Olivia H.', hours: 32, startDate: new Date('2018-05-10'), department: Department.Engineering}] as TableData[];

 const dataList=[
    {name: 'Ryan H.',   hours: 30, startDate: new Date('2019-01-14'), department: Department.Marketing},
    {name: 'Ariel P.',  hours: 22, startDate: new Date('2017-03-12'), department: Department.Sales},
    {name: 'Ryan Y.',   hours: 31, startDate: new Date('2015-09-12'), department: Department.Marketing},
    {name: 'Ed T.',     hours: 22, startDate: new Date('2017-03-12'), department: Department.Engineering},
    {name: 'Matt G.',   hours: 30, startDate: new Date('2017-03-12'), department: Department.Marketing},
    {name: 'Olivia H.', hours: 32, startDate: new Date('2018-05-10'), department: Department.Engineering}] as TableData[];

Our interface is TableData. We have an enum called Departments which lists the available department’s people may be in:

interface TableData{
    name: String,
    hours: number,
    startDate: Date,
    department: Department
}

enum Department{
    Marketing = 'Marketing',
    Sales = 'Sales',
    Engineering = 'Engineering',
}

interface TableData{
    name: String,
    hours: number,
    startDate: Date,
    department: Department
}

enum Department{
    Marketing = 'Marketing',
    Sales = 'Sales',
    Engineering = 'Engineering',
}

It’s important to note that this interface and enum is solely for structuring our table, and not for sorting. We will eventually add another interface and enum for sorting.

For the case of simulation, I’ll be placing the data into another file and returning it from a function call called fetchData.

export const fetchData = () => { return dataList;}

export const fetchData = () => { return dataList;}

For the table, we’ll be using Material-UI, but this method will absolutely work with just a regular table. If you don’t want to use Material-UI tables, just replace the tags with the corresponding ones below. Everything but TableBody has a corresponding tag which just contains a collection of <tr> tags.

Now we pull our data from the other file by calling fetchData, set up the appropriate table headers, and map our data to the corresponding table cells. For the sake of keeping clean code, I moved the sortable table headers to another component, so our code should look somewhat like this:

import React from "react";
import {Table, TableRow, TableCell, TableBody } from '@material-ui/core';
import { fetchData, TableData } from "./fetchData";
import { SortableHeader } from "./sortableTableHeader";

export const TableExample = () => {
    const dataList = fetchData();
    return(
        <div>
            <Table>
                <SortableHeader/>
                <TableBody>
                    {dataList.map((data) => { return(
                        <TableRow>
                            <TableCell>
                                {data.name}
                            </TableCell>
                            <TableCell>
                                {data.hours}
                            </TableCell>
                            <TableCell>
                                {data.startDate.toDateString()}
                            </TableCell>
                            <TableCell>
                                {data.department}
                            </TableCell>
                        </TableRow>
                        )})}
                </TableBody>
            </Table>
        </div>
    )
}

import React from "react";
import {Table, TableRow, TableCell, TableBody } from '@material-ui/core';
import { fetchData, TableData } from "./fetchData";
import { SortableHeader } from "./sortableTableHeader";

export const TableExample = () => {
    const dataList = fetchData();
    return(
        <div>
            <Table>
                <SortableHeader/>
                <TableBody>
                    {dataList.map((data) => { return(
                        <TableRow>
                            <TableCell>
                                {data.name}
                            </TableCell>
                            <TableCell>
                                {data.hours}
                            </TableCell>
                            <TableCell>
                                {data.startDate.toDateString()}
                            </TableCell>
                            <TableCell>
                                {data.department}
                            </TableCell>
                        </TableRow>
                        )})}
                </TableBody>
            </Table>
        </div>
    )
}

import React from "react";
import { TableHead, TableRow, TableCell } from "@material-ui/core";

export const SortableHeader = () => {
    return (
        <TableHead>
            <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Hours</TableCell>
                <TableCell>Date</TableCell>
                <TableCell>Department</TableCell>
            </TableRow>
        </TableHead>
    );
};

import React from "react";
import { TableHead, TableRow, TableCell } from "@material-ui/core";

export const SortableHeader = () => {
    return (
        <TableHead>
            <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Hours</TableCell>
                <TableCell>Date</TableCell>
                <TableCell>Department</TableCell>
            </TableRow>
        </TableHead>
    );
};

Which outputs something like this:

Implementation

Our overall goal is to create an ordered queue of sorting configurations that will apply each sorting in order through the use of LINQ to our data. We will then update our data list which will be re-rendered and displayed in the desired sorting configuration.

Step 1: Define a Sorting configuration

A sorting configuration is essentially an object that has two things. The property/column of the list that we’re trying to sort, and the sorting type such as ascending or descending. Since our rows are all the same object type: TableData, we can use keyof TableData to get all the properties/columns of our table. The only thing we’d have to do is make an enum of the different sorting types that we need, in this case we’ll stick with the standard ascending/descending.

interface SortingConfiguration{
    propertyName: keyof TableData,
    sortType: SortingType,
}

enum SortingType{
    Ascending,
    Descending,

interface SortingConfiguration{
    propertyName: keyof TableData,
    sortType: SortingType,
}

enum SortingType{
    Ascending,
    Descending,

Step 2: Utilize useState to Maintain a List of our Sorting Configurations

If you’ve never used useState, it’s a React hook that returns an array of two things: the first being the state of an object that is being maintained. The second is basically a function/dispatch that you can call to change the state. Here we’re initializing our list of sorting configurations to be an empty list since we want to start off with an unsorted table.

Note: If you do want a table column to be sorted by default, all you would need to do is add a SortConfiguration object in between the square brackets

  const [sortConfig, updateSortConfig] = useState<SortingConfiguration[]>([]);
    //Below is an example of sorting columns by name by default.
    const [initializedSortConfig, updateInitSortConfig] = useState<SortingConfiguration[]>([
        {propertyName: 'name', sortConfig: SortingType.Descending}
    ]);

  const [sortConfig, updateSortConfig] = useState<SortingConfiguration[]>([]);
    //Below is an example of sorting columns by name by default.
    const [initializedSortConfig, updateInitSortConfig] = useState<SortingConfiguration[]>([
        {propertyName: 'name', sortConfig: SortingType.Descending}
    ]);

Step 3: Create a Function That Adds, Modifies, and Removes Our Sorting Configurations

Most sortable headers are clickable headers that switch between a cycle of unsorted -> descending -> ascending -> unsorted -> etc, but there are many different orders or ways in which you may wish to set this up. You should be able to create your own custom function that edits the sorting configuration given three basic criteria:

1. Add a sorting configuration to a column when there is not an existing configuration
2. Modify a sorting configuration when there is an existing configuration
   • For example, going from descending to ascending, or vice versa
3. Provide a way to remove a sorting configuration
   • This can be a part of criteria #2, but it is important enough to warrant its own criteria

We’ll be following a cycle of unsorted -> descending -> ascending -> unsorted -> etc… for the purposes of this guide.

We will be making a function called sortBy that will take in a key of TableData. Basically, whenever we call sortBy on a given property/column, it should automatically fulfill our three criteria: add a new configuration when we don’t have one, alter a configuration if we do, and remove a configuration when we need to. We wrap it in a useCallback because, in the next step, we will pass this function down to a prop.

So our basic structure looks like this:

 const sortBy = useCallback(
        (propertyName: keyof TableData) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => 
       						config.propertyName === 	propertyName)
            if(index > -1){
                // Existing configuration
            } else {
                // No existing configuration
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

 const sortBy = useCallback(
        (propertyName: keyof TableData) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => 
       						config.propertyName === 	propertyName)
            if(index > -1){
                // Existing configuration
            } else {
                // No existing configuration
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

We use the spread operator to make a copy of the sortConfiguration. Then we use findIndex to search our copied list and see if there is an existing configuration that’s in our list. We’ll be using a lot of the spread operator, so if you aren’t experienced with using it, you can see more examples in this blog by Jacob Bruce. Now that we have the basic structure laid out, let’s address the first criteria. This one is relatively simple since all we’re doing is adding a sorting configuration given the propertyName that was passed in:

  if(index > -1){
                // Existing configuration
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending },
                ];
            }

  if(index > -1){
                // Existing configuration
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending },
                ];
            }

Here we use the spread operator to push a new sorting configuration to the end of the queue.

Now we have to handle our second and third criteria which you can only do on an existing configuration. We can remove extra code if instead of modifying we save the existing sort direction, remove the current configuration and lastly, add in a new configuration if it’s necessary to ‘modify’. Technically, our modification is removing a configuration of a property and adding in the same property back, but with a different sortType, but doing it this way makes it so we don’t have to write two similar code branches.

In short, we use our index we found to store the existing sort type. We then remove that configuration using splice. Lastly, we use our saved sorting type to determine if we needed to add a new configuration. In this example, we check if it’s Descending, and if that’s the case, we change that sortType to Ascending. Note how, if the sorting type is Ascending, we do not ‘modify’ our sorting configuration list, but rather just let the code remove the configuration.

Put together we have:

 const sortBy = useCallback(
        (propertyName: keyof TableData) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => 
                                    config.propertyName === propertyName)
            if(index > -1){
                //Save the sortType
                var currentSortType = pendingChange[index].sortType;
                //Remove existing config
                pendingChange.splice(index, 1);
                //check if the sort type we saved is descending
                if (currentSortType === SortingType.Descending) {
                    pendingChange = [
                        ...pendingChange,
                        { propertyName: propertyName, sortType: SortingType.Ascending },
                    ];
                }
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending },
                ];
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

 const sortBy = useCallback(
        (propertyName: keyof TableData) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => 
                                    config.propertyName === propertyName)
            if(index > -1){
                //Save the sortType
                var currentSortType = pendingChange[index].sortType;
                //Remove existing config
                pendingChange.splice(index, 1);
                //check if the sort type we saved is descending
                if (currentSortType === SortingType.Descending) {
                    pendingChange = [
                        ...pendingChange,
                        { propertyName: propertyName, sortType: SortingType.Ascending },
                    ];
                }
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending },
                ];
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

Now the loop of unsorted -> descending -> ascending -> unsorted -> etc… is complete.

Step 4: Attach Our Function to the Table Headers

Now that we created our function, we need to attach it to table headers and make them something we can click. Since we’re passing down our props to our SortableTableHeader don’t forget to export our interfaces and enums to avoid errors. We’ll need to pass two things to our SortableTableHeader the first is our newly created sortBy function, and the second is our current sortConfig which will be used for arrow indicators to show what direction we’re sorting.

<Table>
    <SortableHeader 
          sortBy={sortBy} 
          sortConfig={sortConfig}
          />
      <TableBody>
		………
</Table>
</TableBody>
</pre>

<pre class="brush:js">
interface SortableHeaderProps{
    sortBy: (string: keyof TableData) => void;
    sortConfig: SortingConfiguration[];
}

export const SortableHeader = ({sortBy, sortConfig}:SortableHeaderProps) => {
    return (
        <TableHead>
            <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Hours</TableCell>
                <TableCell>Date</TableCell>
                <TableCell>Department</TableCell>
            </TableRow>
        </TableHead>
    );
};

<Table>
    <SortableHeader 
          sortBy={sortBy} 
          sortConfig={sortConfig}
          />
      <TableBody>
		………
</Table>
</TableBody>
</pre>

<pre class="brush:js">
interface SortableHeaderProps{
    sortBy: (string: keyof TableData) => void;
    sortConfig: SortingConfiguration[];
}

export const SortableHeader = ({sortBy, sortConfig}:SortableHeaderProps) => {
    return (
        <TableHead>
            <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Hours</TableCell>
                <TableCell>Date</TableCell>
                <TableCell>Department</TableCell>
            </TableRow>
        </TableHead>
    );
};

To keep code DRY, I’ll be making a list of the columns that we want, and the TableData property they correspond to. This way, we can map over the function without copy/pasting TableCell four times.

const tableColumn = [
        {label:'Name', property:'name'},
        {label:'Hours', property:'hours'},
        {label:'Date', property:'startDate'},
        {label:'Department', property:'department'}
        ] as TableColumn[];

const tableColumn = [
        {label:'Name', property:'name'},
        {label:'Hours', property:'hours'},
        {label:'Date', property:'startDate'},
        {label:'Department', property:'department'}
        ] as TableColumn[];

Now, we can attach our function to the tablecell by adding the onClick prop to the TableCell, and pass in the corresponding property for the column being mapped. We can also apply our CSS stylings to the table cells at this point. Here I use Material UI’s styling solution, but the key point when doing this is setting the CSS property cursor: ‘pointer’.

 <TableHead>
            <TableRow>
                {tableColumn.map((column, index) => {
                    return(
                        <TableCell key={index} 
                            className={headerCell}
                            onClick={()=>sortBy(column.property)}
                        >
                            {column.label}
                        </TableCell>
                    )
                })}
            </TableRow>
        </TableHead>

 <TableHead>
            <TableRow>
                {tableColumn.map((column, index) => {
                    return(
                        <TableCell key={index} 
                            className={headerCell}
                            onClick={()=>sortBy(column.property)}
                        >
                            {column.label}
                        </TableCell>
                    )
                })}
            </TableRow>
        </TableHead>

Lastly, we’ll add an indicator arrow through conditional rendering to show the current sort direction. To do this, we have two conditionals to check what we render. The first is checking if there is an existing sorting configuration, and the second is checking if the sortType is ascending/descending. To make this easier, we can write a simple function that gets us the current sortType from the sorting configuration and returns an appropriate icon.

 const getSortDirection = (property:keyof TableData) => {
        var config = sortConfig.find((sortConfig) => sortConfig.propertyName === property)
        if(config){
            if(config.sortType === SortingType.Descending){
                return <ArrowDownwardIcon/>
            }
            else {
                return <ArrowUpwardIcon/>
            }
        }
        return null;
    }

 const getSortDirection = (property:keyof TableData) => {
        var config = sortConfig.find((sortConfig) => sortConfig.propertyName === property)
        if(config){
            if(config.sortType === SortingType.Descending){
                return <ArrowDownwardIcon/>
            }
            else {
                return <ArrowUpwardIcon/>
            }
        }
        return null;
    }

Our SortableTableHeader code should now look like this, with the appropriate CSS stylings applied in place of headerCell and sortLabel, if you aren’t using Material-UI.

export const SortableHeader = ({sortBy, sortConfig}:SortableHeaderProps) => {

    const {headerCell, sortLabel} = useStyles();

    const tableColumn = [
        {label:'Name', property:'name'},
        {label:'Hours', property:'hours'},
        {label:'Date', property:'startDate'},
        {label:'Department', property:'department'}
        ] as TableColumn[];

    const getSortDirection = (property:keyof TableData) => {
        var config = sortConfig.find((sortConfig) => sortConfig.propertyName === property)
        return config ?
            config.sortType === SortingType.Descending ?
                <ArrowDownwardIcon/>
                :<ArrowUpwardIcon/>
            :null
    }

    return (
        <TableHead>
            <TableRow>
                {tableColumn.map((column, index) => {
                    return(
                        <TableCell key={index} 
                            className={headerCell}
                            onClick={()=>sortBy(column.property)}
                        >
                            <span className={sortLabel}>
                                {column.label}
                                {getSortDirection(column.property)}
                            </span>
                        </TableCell>
                    )
                })}
            </TableRow>
        </TableHead>
    );
};

export const SortableHeader = ({sortBy, sortConfig}:SortableHeaderProps) => {

    const {headerCell, sortLabel} = useStyles();

    const tableColumn = [
        {label:'Name', property:'name'},
        {label:'Hours', property:'hours'},
        {label:'Date', property:'startDate'},
        {label:'Department', property:'department'}
        ] as TableColumn[];

    const getSortDirection = (property:keyof TableData) => {
        var config = sortConfig.find((sortConfig) => sortConfig.propertyName === property)
        return config ?
            config.sortType === SortingType.Descending ?
                <ArrowDownwardIcon/>
                :<ArrowUpwardIcon/>
            :null
    }

    return (
        <TableHead>
            <TableRow>
                {tableColumn.map((column, index) => {
                    return(
                        <TableCell key={index} 
                            className={headerCell}
                            onClick={()=>sortBy(column.property)}
                        >
                            <span className={sortLabel}>
                                {column.label}
                                {getSortDirection(column.property)}
                            </span>
                        </TableCell>
                    )
                })}
            </TableRow>
        </TableHead>
    );
};

If everything went correctly, you should now see table headers with arrows showing the corresponding sort directions on them.

Step 5: Applying the Sort Configuration with LINQ

The last step is to finally apply the sorting in order.

We’ll be defining our variable, ‘sortedRows’ by a useMemo function, with a dependency on sortConfig and dataList, so that we re-render our sortedRows whenever our sort configuration changes, or whenever our data list changes.

Next, we can turn our standard list of items into a LINQ list by putting it in a LINQ.from call. Now, in order to leverage LINQ’s sorting functionality, our list of values has to be an IOrderedEnumerable object. We can get this by applying a basic orderBy function to our LINQ and passing it a lambda that just returns one, which basically says sort this by the key ‘nothing’, and return ‘1’ in all cases to avoid doing any comparison. This returns us our list in an unmodified order, but as an IOrderedEnumerable type.

 //Set up default ordering
        let sorted = linq.from(dataList).orderBy(() => 1);

 //Set up default ordering
        let sorted = linq.from(dataList).orderBy(() => 1);

The reason why we want to do this is so we can apply multiple sorts on top of this which is possible by using the thenBy and thenyByDescending functions from LINQ and using those requires an IOrderedEnumerable. Now that that’s established, we can loop through each of the sorting configurations in order and check which sort type we’re applying.

let sorted = linq.from(dataList).orderBy(() => 1);
        //Loop through the queue
        sortConfig.forEach((sortConfig) => {
            if (sortConfig.sortType === SortingType.Ascending) {
                //Ascending sorting
            } else {
                //Descending sorting
            }
        });

let sorted = linq.from(dataList).orderBy(() => 1);
        //Loop through the queue
        sortConfig.forEach((sortConfig) => {
            if (sortConfig.sortType === SortingType.Ascending) {
                //Ascending sorting
            } else {
                //Descending sorting
            }
        });

Our last step in sorting is to apply the thenBy conditional on the corresponding property, and LINQ will handle the complicated sorting for us, including comparing integers, strings, and dates. You can read more on LINQ functions, and even pass in your own comparable which is useful for handling sorting between more complex types, but in the case of this guide, we’ll just stick to basic sorting since we’re handling primitive types. If it’s descending, we can use thenByDescending which makes things easier.

 if (sortConfig.sortType === SortingType.Ascending) {
                sorted = sorted
                    .thenBy((dataRow) => dataRow[sortConfig.propertyName]);
            } else {
                sorted = sorted
                    .thenByDescending((dataRow) => dataRow[sortConfig.propertyName]);
            }

 if (sortConfig.sortType === SortingType.Ascending) {
                sorted = sorted
                    .thenBy((dataRow) => dataRow[sortConfig.propertyName]);
            } else {
                sorted = sorted
                    .thenByDescending((dataRow) => dataRow[sortConfig.propertyName]);
            }

In the code above, you see that the arguments for the lambda are an element of the sortedList. In this case, I named it dataRow because each item in the sorted is a LINQ from our dataList so we can think of it as one row. It then selects a corresponding key via the propertyName of our sortConfig, which as you recall is either “name”, “hours”, “startDate’, and “department”. In short, this is us targeting that specific column.

Now, if you have null data, Javascript will run into the null comparison issue, which will mess up the sorting. A quick workaround I do is to sort all the data that is null on the bottom, but prefacing this thenBy with another thenBy that basically checks if the property is null.

Here we return -1 when the data is null which means the object is ‘less than’ an object which does have data, and is sorted lower on the list.

The last thing we need to do is to turn our LINQ into an array by calling .toArray(), and returning that value so that our sortedRows has an array of a sorted dataList. Putting it all together, we have this:

const sortedRows = useMemo(() => {
        //Set up default ordering
        let sorted = linq.from(dataList).orderBy(() => 1);
        //Loop through the queue
        sortConfig.forEach((sortConfig) => {
            if (sortConfig.sortType === SortingType.Ascending) {
                sorted = sorted
                    .thenBy((dataRow) => (dataRow[sortConfig.propertyName] === null ? -1 : 1))
                    .thenBy((dataRow) => dataRow[sortConfig.propertyName]);
            } else {
                sorted = sorted
                    .thenByDescending((dataRow) =>
                    dataRow[sortConfig.propertyName] === null ? -1 : 1
                    )
                    .thenByDescending((dataRow) => dataRow[sortConfig.propertyName]);
            }
        });
        return sorted.toArray();
    }, [sortConfig, dataList]);

const sortedRows = useMemo(() => {
        //Set up default ordering
        let sorted = linq.from(dataList).orderBy(() => 1);
        //Loop through the queue
        sortConfig.forEach((sortConfig) => {
            if (sortConfig.sortType === SortingType.Ascending) {
                sorted = sorted
                    .thenBy((dataRow) => (dataRow[sortConfig.propertyName] === null ? -1 : 1))
                    .thenBy((dataRow) => dataRow[sortConfig.propertyName]);
            } else {
                sorted = sorted
                    .thenByDescending((dataRow) =>
                    dataRow[sortConfig.propertyName] === null ? -1 : 1
                    )
                    .thenByDescending((dataRow) => dataRow[sortConfig.propertyName]);
            }
        });
        return sorted.toArray();
    }, [sortConfig, dataList]);

You should now have a functioning table with multiple sortable headers! A key thing to note is that you can pass a comparable to the thenBy function instead of just selecting by key. If for some reason things are not sorting as they should, that should be the first point of debugging.

Bonus: Sorting without LINQ

If you’ve made it this far, or just skipped ahead to this section, we’ll be going over the basics of sorting rows based on multiple headers by just using basic comparators.

Comparators are just functions that take in two objects and return a number depending on how they relate to one another. A zero means they’re equal, positive numbers are greater, and negative numbers are less. Now let’s work on converting our sorting function to one that doesn’t use LINQ at all.

Sorting multiple columns may seem complex, but in practice, it’s not really that difficult. Given a list of sorting configurations in the desired order, all you have to check is if the first comparator results in an equality, use the next comparator in order. If we have a list of {a ,1 }, {a , 2}, and {b, 1}. Sorting by the first column results in the equality of a’s. All we’d need to do is check our second column’s comparator to determine what order they should go in.

In this guide, we’ve already implemented a function that can order our sort configurations for us. All we need to do is add a comparators to our SortConfiguration so we can keep track of which compare function we need to use.

export interface SortingConfiguration{
    propertyName: keyof TableData,
    sortType: SortingType,
    compareFunction: TableDataComparable
}

export type TableDataComparable = ((a: TableData, b:TableData) => number);

export interface SortingConfiguration{
    propertyName: keyof TableData,
    sortType: SortingType,
    compareFunction: TableDataComparable
}

export type TableDataComparable = ((a: TableData, b:TableData) => number);

Next, we add that field to our sortBy function:

const sortBy = useCallback(
        (propertyName: keyof TableData, compareFunction: TableDataComparable) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => config.propertyName === propertyName)
            if(index > -1){
                //Save the sortType
                var currentSortType = pendingChange[index].sortType;
                //Remove existing config
                pendingChange.splice(index, 1);
                //check if the sort type we saved is descending
                if (currentSortType === SortingType.Descending) {
                    pendingChange = [
                        ...pendingChange,
                        { propertyName: propertyName, sortType: SortingType.Ascending , compareFunction: compareFunction},
                    ];
                }
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending, compareFunction: compareFunction },
                ];
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

const sortBy = useCallback(
        (propertyName: keyof TableData, compareFunction: TableDataComparable) => {
            let pendingChange = [...sortConfig];
            const index = pendingChange.findIndex((config) => config.propertyName === propertyName)
            if(index > -1){
                //Save the sortType
                var currentSortType = pendingChange[index].sortType;
                //Remove existing config
                pendingChange.splice(index, 1);
                //check if the sort type we saved is descending
                if (currentSortType === SortingType.Descending) {
                    pendingChange = [
                        ...pendingChange,
                        { propertyName: propertyName, sortType: SortingType.Ascending , compareFunction: compareFunction},
                    ];
                }
            } else {
                pendingChange = [
                    ...pendingChange,
                    { propertyName: propertyName, sortType: SortingType.Descending, compareFunction: compareFunction },
                ];
            }
            updateSortConfig([...pendingChange]);
        },
        [sortConfig]
    )

Next, we update our interfaces and define comparators for each of our table columns.

interface SortableHeaderProps {
    sortBy: (string: keyof TableData, compareFunction: TableDataComparable) => void;
    sortConfig: SortingConfiguration[];
}
...
const CompareByEquality = (column: keyof TableData) => (a: TableData, b: TableData) => {
        if(a[column] === b[column]){
            return 0
        } else{
            if (a[column] > b[column]){
                return 1;
            }
            return -1;
        }
    }

    const tableColumn = [
        {   label: 'Name', 
            property: 'name', 
            compareFunction: 
            (a: TableData, b: TableData) => {
                 return a['name'].localeCompare(b['name'] as string) 
            } 
        },
        {
            label: 'Hours', 
            property: 'hours',
            compareFunction: CompareByEquality('hours')
        },
        {   label: 'Date', 
            property: 'startDate', 
            compareFunction: CompareByEquality('startDate') 
        },
        {   label: 'Department',
            property: 'department', 
            compareFunction: CompareByEquality('department') }
    ] as TableColumn[];

interface SortableHeaderProps {
    sortBy: (string: keyof TableData, compareFunction: TableDataComparable) => void;
    sortConfig: SortingConfiguration[];
}
...
const CompareByEquality = (column: keyof TableData) => (a: TableData, b: TableData) => {
        if(a[column] === b[column]){
            return 0
        } else{
            if (a[column] > b[column]){
                return 1;
            }
            return -1;
        }
    }

    const tableColumn = [
        {   label: 'Name', 
            property: 'name', 
            compareFunction: 
            (a: TableData, b: TableData) => {
                 return a['name'].localeCompare(b['name'] as string) 
            } 
        },
        {
            label: 'Hours', 
            property: 'hours',
            compareFunction: CompareByEquality('hours')
        },
        {   label: 'Date', 
            property: 'startDate', 
            compareFunction: CompareByEquality('startDate') 
        },
        {   label: 'Department',
            property: 'department', 
            compareFunction: CompareByEquality('department') }
    ] as TableColumn[];

Here, I just use equality for returning the values, but for more complex objects, you can define your own comparator function. As for the name, I used string’s localCompare as an example of an in-line lambda comparator.

After that, we just add the compareFunction into our onClick, so that our sortBy function has all the correct parameters.

<TableCell key={index}
    		className={headerCell}
   	 	onClick={() => sortBy(column.property, column.compareFunction)}
>
<TableCell key={index}
    		className={headerCell}
   	 	onClick={() => sortBy(column.property, column.compareFunction)}
>

<TableCell key={index}
    		className={headerCell}
   	 	onClick={() => sortBy(column.property, column.compareFunction)}
>
<TableCell key={index}
    		className={headerCell}
   	 	onClick={() => sortBy(column.property, column.compareFunction)}
>

Lastly, we need to change our definition for sortedRows:

const sortedRows = useMemo(() => {
        if(sortConfig.length === 0){
            return [...dataList];
        }
        let sorted = [...dataList].sort(
            (a: TableData, b:TableData) =>{
                 for(const config of sortConfig){
                    const result = (config.compareFunction(a,b))
                    if(result !== 0){
                        if(config.sortType === SortingType.Ascending){
                            return result;
                        }
                        else{
                            return -result;
                        }
                    }
                }
                return 0;
            }
        )
        return(sorted)
    }, [sortConfig, dataList]);

const sortedRows = useMemo(() => {
        if(sortConfig.length === 0){
            return [...dataList];
        }
        let sorted = [...dataList].sort(
            (a: TableData, b:TableData) =>{
                 for(const config of sortConfig){
                    const result = (config.compareFunction(a,b))
                    if(result !== 0){
                        if(config.sortType === SortingType.Ascending){
                            return result;
                        }
                        else{
                            return -result;
                        }
                    }
                }
                return 0;
            }
        )
        return(sorted)
    }, [sortConfig, dataList]);

First, we check if there’s a sort configuration and if there isn’t we want to go back to our unsorted state by returning a copy of the data list.

If there is a sort configuration, we make a copy of dataList using the spread operator and sort with a lambda function that goes over our loop of sortConfigs. It then tests each a, and b, TableData against the compareFunction in the sortConfig. If we have an equal match, we try to and apply the subsequent sort config until we have a result that isn’t 0. Next, we check if it’s ascending or descending, and so we flip the result to its opposite value with a negative sign. Lastly, we finish going through our sort configuration and find that all matches, then we know both rows are equal.

That about does it for sorting multiple columns in React.

Learn more about DMC’s Application Development expertise.

The post Sorting Multiple Columns in a Table with React appeared first on DMC, Inc..

Luckily there is a way to preserve a computer without having to keep the physical hardware in solid running condition forever. VMware offers a free tool called VMware vCenter Converter that allows the user to take a physical machine and create a virtual version of it while it is powered on and running!

Virtualize a Physical Machine

In VMware workstation you can find an option to virtualize a physical machine:

This will prompt you to download the latest version of VMware vCenter Converter Standalone.

You can create a free account and download the software on VMware’s website.

You will have to create a FREE account to do this, accept the end-user license agreement, then the software download will begin.

When the download is complete you should have a .exe file available in your downloads folder. Run this executable and the software install will begin. For this example, I have installed the standard installation of the software on the local machine. The software can then be run on the host machine from either the shortcut created on the desktop or through the newly added program path where it was installed.

Once the application opens you will see a Convert Machine button near the top left corner, which will prompt with a wizard to start the conversion. You can also start this from File -> New -> Convert Machine, or simply pressing Ctrl+M.

The first page in the wizard is where you pick the source computer. In this example, we want to use the host machine to clone so we leave the drop-down as local machine and select the radio button for ‘Powered On’. Click Next.

The next screen is Destination System. Here you can select the Destination type, which affects the other options available. For a ‘VMware Workstation or other VMware virtual Machine’, you can select which software/version you will be using after the VM is created.

The VM details allow you to change the computer name for the VM and the destination path for where the application will save the files. Depending on the size of the host being used, this could be quite large, so make sure you have a destination that has plenty of storage.

For instance, my local machine has several virtual machines already saved on the hard drive which can take up a very significant amount of storage, so it is recommended to save files on external drives or networks then move them back to the VM later if needed using the shared folders options in VMware Workstation.

Configuring The VM

As a better example, I will go through the process using a bare-bones Windows machine that has very little stored on the hard drive.

You can see the destination was set to use a removable disk mounted on the F drive. The next page has several options the user can choose from. These options include the size of the virtual hard drive, memory allocated for the processor, number of cores for the CPU, etc.

The size of the hard drive has multiple options: Maintain Size (keeps the full size of the physical hard drive), Min Size (uses the minimum amount possible), or type in size (any value above the Min Size requirement). Depending on how much you plan on adding to the VM after creation, select your size accordingly. Also, the size of the hard drive will affect the size of the VM file so make sure your destination storage device can handle this.

Memory allocation and Number of processors can be adjusted in the VM settings later in VMware using the VM -> Settings. Then, navigate to the hardware tab and select the Memory and Processors to change their values.

Adding the VMware Tools Option

A useful tool that is recommended for install is VMware Tools. This install is great for using the auto fit and adjustment for the guest operating system so it will match the screen resolution to better fit the environment it is running in. The option to install VMware Tools on the VM can be found here:

Clicking to the next page will bring you to the summary. Here you can review all the options selected from the wizard and if anything looks wrong you can navigate back to change the options.

Creating the VM

Clicking finish in the bottom right corner will start the conversion process. If you choose not to do this, you can install VMware tools later in VMware Workstation through the top menu bar VM -> Install VMware Tools… selection.

Depending on the size and specs of the host computer, the conversion process can take a while. The conversion screen will give you estimated time and total percentage complete while it is running, so you will have good feedback on where it is at in the process.

Once the process is complete. You will see the status change to ‘Completed’ and you now have the VM file that you can start in VMware.

Opening the VM

In the destination folder selected in the Wizard, you will find the ‘.vmx’ and ‘.vdmk’ files created from the converter application. The ‘.vmx’ file is what you select to power up the machine in the VMware workstation. In the picture below you can see the two files generated from the conversion process.

Before opening the VM, it is best practice to save a copy of the files on the host machine’s hard drive. A good idea is to make a Virtual PC folder on the C:\ drive to store all the VMs. As you can see below here is the location where this example VM will be stored.

In VMware Workstation, click the ‘Open a Virtual Machine’ button, and navigate to the path where the VM is saved. Select the .vmx file and click ‘Open’.

Now you can run the VM by opening the .vmx file in VMware, and if the VM is backed up it can live forever, even with a failure in the VM or the host computer. Make sure to save your VM in a safe place in case of something tragic happening!

If you chose not to install VMware tools earlier, you can still install it using VMware Workstation. It will prompt on screen how to start the installation. It may require a manual start from the start menu.

Once the installation is complete the VM will need to restart. Now you can run the VM with auto size adjustment for the monitor connected to the host machine, plus more seamless transitions from VM to host windows if working with multiple monitors.

With this short procedure, you can now enjoy the same machine running in a virtual environment!

Contact DMC with any questions and learn more about our Manufacturing Automation services. 

The post Creating a Virtual Machine from a Physical Computer appeared first on DMC, Inc..

• Part 1: Creating and Opening a Project
• Part 2: Folder Structure and Gedi Layout
• Part 3: Panels | The Basics
• Part 4: Panel Scripting Environments and QuickTest
• Part 5: Scripting Syntax
• Part 6: Para Overview and Datapoint Creation
• Part 7: Interacting with Datapoints via Scripting
• Part 8: Libraries

In Part 9 of “Getting Started with WinCC OA,” we’ll look at the Color Database and the implementation of color-based concepts presented in “The High Performance HMI Handbook” by Bill R. Hollifield, Dana Oliver, Eddie Habibi, and Ian Nimmo.

What is a Color Database?

The color database is where project colors are defined and stored. Project colors can be separated into and organized via different databases. Recall the OA folder structure and panel view tree outlined in Part 2: Folder Structure and Gedi Layout, color databases are stored within the ColorDB folder and can be accessed in Gedi via the Color Database element in the Project View tree.

Creating a Database

To create a color database, simply right click the “Color Database” Project View tree element and select “Add New Color Database.” For our example, we’ll call this color database “Project Base.”

Creating a Color Database Color

To add a color, right-click the color database that will house said color and select “Add New Color.” For our example, we’ll create the following colors within the “Project Base” database:

If following along, feel free to adjust the colors’ RGB values as you see fit.

Creating Color Database Aliases

Programmers use aliases to identify color database colors under different names. Using aliases helps maintain color consistency throughout a project, makes code more readable, and prevents cluttering within color databases

DMC’s best practices involve creating a color database of base colors to serve as a project color foundation. All other color databases will consist of aliases of these base colors.

Before creating an alias, we’ll first create a new color database called “Device Status.” Within the “Devices Status” color database, we’ll create an alias called DeviceStatus_Estopped and assign it Base_Red.

In addition, we’ll create DeviceStatus_Stopped as Base_Blue and DeviceStatus_Running as Base_Green.

Now that we’ve created new device status colors let’s apply them to our example from Parts 7 and 8. In Part 7 – Interacting with Datapoints via Scripting, we created a simple rectangle (represents a motor device) and assigned it a “Red” background-color within its project properties. Now that we have designated status colors, let’s give it a DeviceStatus_Stopped default color.

In reality, this color will only be visible while editing in Gedi as the example code automatically assigns the rectangle a new color in runtime. Regardless, we’ll still apply the color.

Recall that in Part 08 – Libraries, we created a control file that defined a variety of color constants. Instead of defining the constants as primary OA colors “red,” “blue,” and “green,” we can re-define them as our newly created aliases in the “ColorConst.ctl” file.

The High Performance HMI

The High Performance HMI is a concept presented in “The High Performance HMI Handbook” by Bill R. Hollifield, Dana Oliver, Eddie Habibi, and Ian Nimmo. The book focuses on developing human-machine interfaces in a way that maximizes operators’ situational awareness and increases HMI functionality and efficiency. Though topics in the book stretch from ideal screen topology to control room distractions, I found it worthwhile to highlight some basic ideas on color selection in this blog post.

According to “The High Performance HMI Handbook”

• Color should be used to draw the operators’ attention and highlight abnormal situations
• Color blindness is a prevalent condition that must be taken into account when selecting colors. For those that are color blind, color combinations such as green + red and blue + purple are often hard to differentiate.

For example, consider the following color schemes in device objects in DMC’s WinCC OA Open Library:

The standard color scheme is generally what those unfamiliar with High Performance HMI concepts might consider ideal and preferable. However, note what the same layout looks like when passed through a color-blind simulator application:

Note that the standard “Active” and “Fault” states are nearly indistinguishable to those with deuteranopia (green-blindness). All High Performance HMI colors are easily differentiable. Also, the High Performance scheme uses color to draw an operator’s attention to a faulted state and leaves normal operation in greyscale colors.

Creating Alternative Color Schemes

Color schemes allow users to overwrite color definitions and allows for color transitioning. This can be helpful when shifting between “day” and “night” modes, for example. For the purposes of this tutorial, we’ll create a High Performance color scheme that that overwrites our DeviceStatus_Stopped and DeviceStatus_Forward aliases with alternative high performance colors.

To create a color scheme, right-click the Color Databases element and select “Add New Color Scheme Folder.” We’ll name this color scheme, “High Performance Colors.”

Within a color scheme folder, you can define colors and their respective color databases. Within the “High Performance Colors” color scheme folder, we’ll create a color database titled “DeviceStatus” and define aliases DeviceStatus_Stopped as Base_DarkGrey and DeviceStatus_Forward as Base_White.

Everything under the Color Databases element and not in a color scheme folder is considered the default color/database. When a color scheme is “Active,” any conflicting colors within the color scheme folder will overwrite its default color counterpart.

Since DeviceStatus_Running and DeviceStatus_Stopped are defined within the High Performance Colors, the Base_White and Base_DarkGrey will represent those color aliases respectively when the “High Performance Colors” are active. Base_Red will continue to represent the Device_Status_Estopped since there is no definition within the “High Performance Colors” scheme.

Activating Color Schemes

There are several ways of activating color schemes within a project:

Activate in Gedi
To activate a color scheme in Gedi, simply right click its respective folder and select “Activate Color Scheme.” To activate the default scheme, simply perform the same action but right-clicking on a default color. This is a good way of testing different color schemes during development.

Activate via Scripting

Color schemes can be altered during runtime by using the function

colorSetActiveScheme(<Color Scheme>)Show more lines

colorSetActiveScheme(<Color Scheme>)Show more lines

Where <Color Scheme> is a string of the folder name. To activate the default color scheme, simply use empty quotes. Enabling color schemes via scripting is ideal for switching between color schemes during runtime.

Activate via Config File

The config file will be covered more in-depth in subsequent “Getting Started with WinCC OA” installments. However, it’s important to note that a color scheme can be activated by implementing the following line within the [ui] section of the config file:

activeColorScheme = <Color Scheme>

activeColorScheme = <Color Scheme>

Where <Color Scheme> is a string of the folder name. Like activating color schemes via scripting, the default color scheme is represented with empty quotes. With that said, it is not necessary to activate the default color scheme via the config file since, as the default, it’s already active upon startup.

Activating color schemes via the config file is ideal if a project will use only one non-default color scheme.

Example Project Colors

Going back to the example project, we can run a quick test of our panel to view our new default colors. Since we’re working primarily in Gedi, we can activate the High Performance color scheme by right-clicking the “High Performance Colors” folder and activating the color scheme. Here’s how our rectangle’s color has changed over time:

_dpdoesnotexist

WinCC OA comes with an array of accessible and usable colors that can be found within the base OA project. While most colors aren’t important enough to know, the “_dpdoesnotexist” color bears heavy significance in the development and debugging. In default OA objects (and ideally any other user-generated content like DMC’s WinCC OA Open Library), the “_dpdoesnotexist” color will display if the object’s user-specified datapoint or datapoint element does not exist within the project.

Native OA Object in GEDINative OA Object with Invalid DPE in QuickTest

Now that we’ve covered colors and color databases, let’s jump back to panel development. In the next edition of “Getting Started with WinCC OA,” we’ll cover panel nesting and passing parameters from panel to reference panel using $-parameters.

Topics to look forward to in this series: 

• Part 10: Panels | Panel Nesting and $-Parameters
• Part 11: Panels | Child Panels (Popups)
• Part 12: Modules & Embedded Modules

Contact DMC to get started on your next WinCC project and learn more about our Siemens SIMATIC WinCC Programming as well as our WinCC Open Architecture Development.

The post Getting Started with WinCC OA: Part 9 – Color Database and High Performance Best Practices appeared first on DMC, Inc..

The key to this is digital signatures. A digital signature essentially lets the user know who the developer is, but for this information to be trustworthy, it has to come from a certificate authority, such as Digicert. A certificate authority sells code signing certificates and performs identity verification before sending them out, providing 3rd party proof that you are who you are claiming to be.

It is possible to digitally sign an application without purchasing a certificate from an authority. Though, since this signature has not been verified, it does not increase the validity of your application.

In this post, I will go over the process of applying a digital signature to a LabVIEW application.

Step 1: Purchase a Signing Certificate

The first step is to purchase a signing certificate from a certificate authority. When you do, you will usually have some options. Code signing certificates can come in two formats: Extended Validation (EV) and normal.

An EV certificate is more expensive and has a more extensive verification process, but this option comes with instant verification. The non-EV certificate does not have instant verification. So, an application signed in this manner will still have to gain a positive reputation before it passes Microsoft’s Smart Screen filters. The reputation will grow based on the number of installations of the application across the world.

When purchasing the code signing certificate, you will likely be asked to select a Platform. We want to choose Microsoft Authenticode because that’s what LabVIEW executables use.

This guide follows the non-EV certificate. If you purchase an EV certificate, you are mailed a USB that contains the key and further instructions.

See here for more information on this step.

Step 2: Install the Certificate

Once your certificate is verified, you will receive an email with a link for installing your certificate. Install your certificate in the Personal Certificate store of the browser that you open this link in. The guides from my Certificate Authority used Internet Explorer, so I followed their example.

Installing your certificate is a straightforward process. Here’s some more information.

Step 3: Extracting the Certificate

Now that you have installed the Certificate to your build machine, you must extract it to a format that LabVIEW supports. There are several different formats available; National Instruments supports the PFX format for signing LabVIEW executables, so this guide will assume you’re using that format.

Follow this tutorial to extract your certificate in the proper format. Be sure to name the certificate as something relevant to your company or application and save it to a location that is easy to find.

Step 4: Apply the Certificate to the Application

Now, we can apply the signature to our LabVIEW application. In the Properties for the Build Specification that you are trying to sign, navigate to the Windows Security category and check the box for Apply digital signature. You should now be able to find your digital signature in the Personal store certificates dropdown.

Next, we need to provide a timestamp URL. The timestamp URL is the URL of the timestamp server from the certificate authority that you worked with. This URL allows the signed software to get the current date associated with it when it is downloaded. This is important to ensure that the digital signature is still valid at the time that the user is installing it. In our example, the timestamp URL was timestamp.digicert.com

Be sure to sign both your executable and your installer, or any other build specification that you are distributing. Once we complete this step, we can check the properties of our new application and see the signature applied to it.

And we’re done! The application will now gain a reputation with each install and will pass Microsoft Smart Screen soon enough.

Learn more about DMC’s LabVIEW programming expertise and contact us with any project inquiries!

The post Digitally Signing a LabVIEW Installer appeared first on DMC, Inc..

• Part 1: Creating and Opening a Project
• Part 2: Folder Structure and Gedi Layout
• Part 3: Panels | The Basics
• Part 4: Panel Scripting Environments and QuickTest
• Part 5: Scripting Syntax
• Part 6: Para Overview and Datapoint Creation
• Part 7: Interacting with Datapoints via Scripting

Now that we have a basic understanding of scripting and how to interact with datapoints, we’re ready to move beyond panel scripting environments and create globally accessible code. In Part 8 of “Getting Started with WinCC OA,” we’ll explore how we can use libraries to create globally accessible functions, enumerations, constants, etc.

What are Libraries?

Control libraries are files that hold code that may be accessed by other scripts within a project. Simply put, they hold globally usable code. One may ask, “Why would we want to use libraries?”

Libraries prevent developers from having to rewrite or copy/paste existing code, allow changes to be made quickly and efficiently, and ensure consistency within a project. Let’s jump back quickly to the example used in “Part 7: Interacting with Datapoints via Scripting.” Say we used the same enumeration “StatusType” in several panels in addition to the one we created.

Without libraries, we’d need to copy and paste this enumeration in all of our panels’ ScopeLibs for further use. If we wanted to alter the enumeration to:

We’d need to remember every instance of where this function was used, go back in the code, and modify StatusType appropriately. When the number of places we use StatusType increases, the more re-work would be needed to make the change.

How are Libraries Made?

To create a control library, simply right click “Libraries” in the project view tree and select “Add New CTRL Library.”

Anything created in the resulting .ctl file can be appropriately referenced throughout the program. To continue from Part 7’s example, we’ll generate two .ctl files: one for a global StatusType and another for device colors.

StatusType.ctl should contain:

ColorConst.ctl should have:

None of these libraries do anything, however, if they’re not implemented within a program.

How is Library Content Implemented?

Libraries are not initially accessible from a program’s script. The control library file must first be loaded into a project for it to be usable. To do so, you must implement the following line:

	#uses <.ctl file>

Once a control file is specified, a script may use any and all items within said .ctl file. To implement our control libraries within our example, we’ll modify our ScopeLib’s code as follows:

#uses "StatusType"
#uses "ColorConst"

//=============================== Panel initialization =========================================
initializePanel()
{
  //Whenever rSpeed or rMaxSpeed changes, call the function "onSpeedChange"
  dpConnect("onSpeedChange", "myMotor.rSpeed", "myMotor.rMaxSpeed");

  //Whenever iStatus changes, call the function "onStatusChange"
  dpConnect("onStatusChange", "myMotor.iStatus");
}


//=============================== Text Field Command =========================================
//Textbox is selected and user keys "Enter"
void textboxCmd()
{
  //Assign the textbox's text value to rMaxSpeed
  dpSet("myMotor.rMaxSpeed", maxSpeedTextbox.text);
}


//=============================== On Speed / Max Speed Value Change =================================
void onSpeedChange(string speedDp, float speedValue, string maxSpeedDp, float maxSpeedValue)
{
  //Define the variable whose value will be assigned to iStatus
  int iStatusValue;

  //Determine what value to assign iStatusValue (and subsequently "myMotor.iStatus")
  switch (speedValue)
  {
    //If "myMotor.rSpeed" is 0, set iStatusValue to 0
    case 0:
      iStatusValue = (int)StatusType::Stopped;
      break;

    //Otherwise, if "myMotor.rSpeed" > "myMotor.rMaxSpeed", set iStatusValue to Estop status int
    //           if not, set iStatusValue to Forward status int
    default:
      iStatusValue = (speedValue >= maxSpeedValue) ? (int)StatusType::Estop : (int)StatusType::Forward;
      break;
  }

  //Assign iStatusValue's value to "myMotor.iStatus"
  dpSet("myMotor.iStatus", iStatusValue);

  //Set the maxSpeedTextbox and speedTextbox's test to their respective values
  //NOTE: dpValToString ensures the units we assigned earlier in the series are displayed.
  //      Simply using <Textbox>.text = <speedValue> will work, but will not display appropriate units
  maxSpeedTextbox.text = dpValToString("myMotor.rMaxSpeed", maxSpeedValue, true);
  speedTextbox.text = dpValToString("myMotor.rSpeed", speedValue, true);
}

//=============================== On Status Change =========================================
void onStatusChange(string statusDp, int statusValue)
{
  //Define the variable whose value will be assigned to the rectangle's color property
  string rectangleColor;

  //Determine color to assign to rectangle based off iStatus
  if (statusValue == (int)StatusType::Stopped)
  {
    rectangleColor = STOPPED_COLOR;
  }

  if (statusValue == (int)StatusType::Estop)
  {
    rectangleColor = ESTOPPED_COLOR;
  }

  if (statusValue == (int)StatusType::Forward)
  {
    rectangleColor = FORWARD_COLOR;
  }

  //Assign selected color to rectangle
  setValue("rectangle", "backCol", rectangleColor);
}

#uses "StatusType"
#uses "ColorConst"

//=============================== Panel initialization =========================================
initializePanel()
{
  //Whenever rSpeed or rMaxSpeed changes, call the function "onSpeedChange"
  dpConnect("onSpeedChange", "myMotor.rSpeed", "myMotor.rMaxSpeed");

  //Whenever iStatus changes, call the function "onStatusChange"
  dpConnect("onStatusChange", "myMotor.iStatus");
}


//=============================== Text Field Command =========================================
//Textbox is selected and user keys "Enter"
void textboxCmd()
{
  //Assign the textbox's text value to rMaxSpeed
  dpSet("myMotor.rMaxSpeed", maxSpeedTextbox.text);
}


//=============================== On Speed / Max Speed Value Change =================================
void onSpeedChange(string speedDp, float speedValue, string maxSpeedDp, float maxSpeedValue)
{
  //Define the variable whose value will be assigned to iStatus
  int iStatusValue;

  //Determine what value to assign iStatusValue (and subsequently "myMotor.iStatus")
  switch (speedValue)
  {
    //If "myMotor.rSpeed" is 0, set iStatusValue to 0
    case 0:
      iStatusValue = (int)StatusType::Stopped;
      break;

    //Otherwise, if "myMotor.rSpeed" > "myMotor.rMaxSpeed", set iStatusValue to Estop status int
    //           if not, set iStatusValue to Forward status int
    default:
      iStatusValue = (speedValue >= maxSpeedValue) ? (int)StatusType::Estop : (int)StatusType::Forward;
      break;
  }

  //Assign iStatusValue's value to "myMotor.iStatus"
  dpSet("myMotor.iStatus", iStatusValue);

  //Set the maxSpeedTextbox and speedTextbox's test to their respective values
  //NOTE: dpValToString ensures the units we assigned earlier in the series are displayed.
  //      Simply using <Textbox>.text = <speedValue> will work, but will not display appropriate units
  maxSpeedTextbox.text = dpValToString("myMotor.rMaxSpeed", maxSpeedValue, true);
  speedTextbox.text = dpValToString("myMotor.rSpeed", speedValue, true);
}

//=============================== On Status Change =========================================
void onStatusChange(string statusDp, int statusValue)
{
  //Define the variable whose value will be assigned to the rectangle's color property
  string rectangleColor;

  //Determine color to assign to rectangle based off iStatus
  if (statusValue == (int)StatusType::Stopped)
  {
    rectangleColor = STOPPED_COLOR;
  }

  if (statusValue == (int)StatusType::Estop)
  {
    rectangleColor = ESTOPPED_COLOR;
  }

  if (statusValue == (int)StatusType::Forward)
  {
    rectangleColor = FORWARD_COLOR;
  }

  //Assign selected color to rectangle
  setValue("rectangle", "backCol", rectangleColor);
}

Note that:

• I added the #uses prompts
• I removed StatusType enum definition from ScopeLib (since it’s applied via library)
• I added color constants (also applied via library)

With the color constants and StatusType enum defined in libraries, other panels and scripts may use them at will.

Now that we have a solid understanding of how to make and implement control libraries, we’ll continue in our OA exploration by investigating color databases and learning how we can use them to create and use custom colors.

Topics to look forward to in this series: 

• Part 9: Color Database & High-Performance Best Practices
• Part 10: Panels | Panel Nesting and $-Parameters
• Part 11: Panels | Child Panels (Popups)
• Part 12: Modules & Embedded Modules

Contact DMC to get started on your next WinCC project and learn more about our Siemens SIMATIC WinCC Programming as well as our WinCC Open Architecture Development.

The post Getting Started with WinCC OA: Part 8 – Libraries appeared first on DMC, Inc..

The ease of implementation of USB largely depends on the hardware and software infrastructure that the microcontroller manufacturer provides. As of release 5.12.0, ARM Mbed OS began supporting USB device for several targets. This provides a nice layer of abstraction between the various manufacturers’ USB implementations and the USB class code. There are a variety of USB classes that are supported by default: USB MSD, USB HID, and USB Audio.

In this blog, I’m going to try out this new USB device support and create a USB Mouse out of an old joystick.

Setting up the Project

I want to test out the USB HID class which will allow the device to interface with the PC as a USB mouse. I am going to start by creating a basic ARM Mbed OS project. If you have never done that before, take a look at this guide.

For this project, I am using a NUCLEO_F429ZI development board which is one of the supported targets for using mbed’s USB device. I set the target in my project by using the command “mbed target NUCLEO_F429ZI”. Make sure that your compiler is also set correctly according to the compiler that you have installed.

For the test, I am going to copy-and-paste the example main from the file mbed/usb/device/USBHID/USBMouse.h.

#include "mbed.h"
#include "USBMouse.h" 

USBMouse mouse;

int main(void)
{
  while (1)
  {
      mouse.move(20, 0);
      wait(0.5);
  }
}

#include "mbed.h"
#include "USBMouse.h" 

USBMouse mouse;

int main(void)
{
  while (1)
  {
      mouse.move(20, 0);
      wait(0.5);
  }
}

Try and compile the project by running “mbed compile.” If you successfully build this project, then you are ready for the next steps. If not, make sure the target you are using is supported by ARM Mbed OS’s new USB device.

Note, not all of the targets with hardware USB support Mbed’s USB device abstraction! Also, make sure you have the latest version of ARM Mbed OS in your project.

Running a Quick Test

Load the compiled program onto your target development kit. I am using a NUCLEO which has a STLINK on-board, so the development kit shows up as a drive when I plug it in. Just drag-and-drop the compiled “_your_project_name_.bin” onto the drive to program.

To test the USB HID device, plug in the User USB port to the PC in addition to the debugging port which is needed for power. On your PC, you should see that a new USB device is detected. Once setup, your PC’s cursor should slowly move across your screen in 0.5-second steps.

We are now ready to bring in the retro hardware to complete our USB device!

Adding Some More Hardware

I have an old Apple Joystick IIe that I want to use as a USB joystick; so I need a custom USB adapter. The joystick electronics are very simple. There are two pushbuttons with pull-down resistors and two variable resistors, one for each axis, with one side tied to V+.

To interface to the joystick, I connect 3.3 V on the NUCLEO to the V+, connect the GND on the NUCLEO to the joystick ground, connect the push-button outputs to digital inputs on the NUCLEO, and connect each axis output to a NUCLEO analog input with a 100 K ohm resistor to ground.

I pulled all of this together quickly with a small prototyping board. The connector itself is just half of an RS232 serial cable.

Now, with a bit of firmware, we can get this retro joystick to operate with any modern OS.

The code below is what I quickly put together to read the analog inputs of the joystick, read the button presses, and send corresponding USB Mouse events. When using one of the various supported USB device classes, Mbed can substantially decrease the required development time.

#include "mbed.h"
#include "USBMouse.h"

USBMouse mouse;

AnalogIn ainx(A0);
AnalogIn ainy(A1);

DigitalIn right_button(D6);
DigitalIn left_button(D7);

int main()
{
	float x = 0;
	float y = 0;

	bool prev_right_button = true;
	bool prev_left_button = true;
	
	const float mid_x = ainx.read() * 100.0;
	const float mid_y = ainy.read() * 100.0;
	
	while (1)
	{
		// Update the X, Y position
		y = ainy.read() * 100.0;
		x = ainx.read() * 100.0;

		float x_move = x - mid_x;
		float y_move = y - mid_y;

		if (x_move < 0)
			x_move = 2 * x_move;
		if (y_move < 0)
			y_move = 2 * y_move;

		if ((abs(x_move) > 4.0) || (abs(y_move) > 4.0))
		{
			mouse.move(-1 * x_move, -1 * y_move);
		}

		// Update the button presses
		bool current_right_button = right_button;
		bool current_left_button = left_button;

		if (prev_right_button != current_right_button)
		{
			if (current_right_button)
			{
				mouse.press(MOUSE_RIGHT);
			}
			else
			{
				mouse.release(MOUSE_RIGHT);
			}
			prev_right_button = current_right_button;
		}

		if (prev_left_button != current_left_button)
		{
			if (current_left_button)
			{
				mouse.press(MOUSE_LEFT);
			}
			else
			{
				mouse.release(MOUSE_LEFT);
			}
			prev_left_button = current_left_button;
		}

		wait_ms(10);
	}
}

#include "mbed.h"
#include "USBMouse.h"

USBMouse mouse;

AnalogIn ainx(A0);
AnalogIn ainy(A1);

DigitalIn right_button(D6);
DigitalIn left_button(D7);

int main()
{
	float x = 0;
	float y = 0;

	bool prev_right_button = true;
	bool prev_left_button = true;
	
	const float mid_x = ainx.read() * 100.0;
	const float mid_y = ainy.read() * 100.0;
	
	while (1)
	{
		// Update the X, Y position
		y = ainy.read() * 100.0;
		x = ainx.read() * 100.0;

		float x_move = x - mid_x;
		float y_move = y - mid_y;

		if (x_move < 0)
			x_move = 2 * x_move;
		if (y_move < 0)
			y_move = 2 * y_move;

		if ((abs(x_move) > 4.0) || (abs(y_move) > 4.0))
		{
			mouse.move(-1 * x_move, -1 * y_move);
		}

		// Update the button presses
		bool current_right_button = right_button;
		bool current_left_button = left_button;

		if (prev_right_button != current_right_button)
		{
			if (current_right_button)
			{
				mouse.press(MOUSE_RIGHT);
			}
			else
			{
				mouse.release(MOUSE_RIGHT);
			}
			prev_right_button = current_right_button;
		}

		if (prev_left_button != current_left_button)
		{
			if (current_left_button)
			{
				mouse.press(MOUSE_LEFT);
			}
			else
			{
				mouse.release(MOUSE_LEFT);
			}
			prev_left_button = current_left_button;
		}

		wait_ms(10);
	}
}

Testing it Out

Plug it into the PC and try out this retro joystick working with a modern machine!

This is a great way to get a simple USB device going, but often a product will require more customization or non-supported USB class. If this is the case for you, come talk to our embedded development and programming group to see what solution makes sense for you!

The post Trying Out ARM Mbed OS’s New Support for USB Device with Some Retro Hardware appeared first on DMC, Inc..