• 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..

• 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

Now that we have a solid understanding of datapoints and basic scripting, it’s time to combine the two! In Part 7 of the “Getting Started with WinCC OA,” we’ll investigate utilizing and manipulating datapoints within our OA scripts.

Referencing A Datapoint Element

A datapoint element is referenced by: <parent dp(s)>.<dpe>

For example, the elements of the dp “myMotor” are given by:

• “myMotor.iStatus”
• “myMotor.rSpeed”
• “myMotor.rMaxSpeed”

Using Datapoint Values within Scripts

Using scripts, we can link items in our panels to the datapoints that live in the db folder. The fundamental functions utilized in datapoint-scripting interaction include:

• dpGet()
• dpSet()
• dpConnect()

dpGet()

dpGet() is used to assign a datapoint element’s value to an existing script variable and takes the form: dpGet(<dpe>, <variable>);

With this dpGet, the variable iStatus will take on the value of myMotor.iStatus.

dpSet()

dpSet() is used to assign a value or a script variable’s value to a datapoint value and takes the form: dpSet(<dpe>, <value>);

With this dpSet, the dpe value of myMotor.iStatus will be set to 1.

dpConnect()

dpConnect() is used to call a function whenever a specified dp value changes. It takes the form:
dpConnect(string <callback function>, string <dpe>)

The callback function of a dpConnect must be defined in a specific manner:
<returnType> <callbackFunction>(string <dpe>, <type> <dpeValue>)

With this dpConnect, the function “onStatusChange” will execute when the value of myMotor. iStatus changes. When “onStatusChange” executes, the function will have the string “myMotor.iStatus” (given by the variable statusDp) and the value of myMotor. iStatus (given by the variable statusValue) at its disposal.

Example

Setting Up the Panel

Let’s revisit our lovely red/green square example and pair it with our newly-created datapoints! Our example will include the following three main objects and their respective behavioral objectives:

• Rectangle (i.e. our motor device icon)
  • Color is blue (stopped color) when rSpeed is 0
  • Color is green (forward color) when 0 < rSpeed < rMaxSpeed
  • Color is red (errored color) when rSpeed > rMaxSpeed
• Speed textbox
  • Displays rSpeed
• Max speed textbox
  • Displays rMaxSpeed
  • User can set rMaxSpeed value

We’ll start out by removing the previously-used buttons and adding in some primitive text, a label (used for value display), and text field (used for value display and modification).

Writing the Script

1. Ensure the panel’s “Initialize” event still has the following code:

   
   	main()
   {
     initializePanel();
   }
   

2. Insert the following code within maxSpeedTextbox’s “Command” event:

   
   	main()
   {
     textboxCmd();
   }
   

3. Add the following script to the panel’s “ScopeLib”:

   
   enum StatusType
   {
     Stopped = 0,
     Estop   = 1,
     Forward = 2
   };
   
   //=============================== 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 1
       //           if not, set iStatusValue to 2
       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 = "blue";
     }
   
     if (statusValue == (int)StatusType::Estop)
     {
       rectangleColor = "red";
     }
   
     if (statusValue == (int)StatusType::Forward)
     {
       rectangleColor = "green";
     }
   
     //Assign selected color to rectangle
     setValue("rectangle", "backCol", rectangleColor);
   }
   

4. Be sure to review and understand the example script

Running the Example Code

Run the panel in QuickTest Module and open/view the “myMotor” datapoint in Para. Upon modifying the Motor Speed Limit textbox and pressing 'Enter' on the keyboard, we can see the rMaxSpeed value change in Para.

Upon modifying rSpeed in Para (simulating a linked PLC tag change), we can see the rectangle’s color change from green as 0 < rSpeed < rMaxSpeed and then to red as rSpeed > rMaxSpeed:

Now that we have a basic understanding of scripting and how to interact with datapoints, we’re ready to expand our horizons beyond the boundaries of panel scripting environments and write code that is accessible globally in our OA program.

Topics to look forward to in this series: 

• Part 8: Libraries
• 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
• 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 7 – Interacting with Datapoints via Scripting 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

In Part 5 of the “Getting Started with WinCC OA,” we’ll investigate the basics of OA’s scripting syntax. Once scripting syntax is understood, we can begin programming and adding functionality to our panels.

The Basics

• Every executable statement must end with a semicolon;
• // Use two forward slashes to comment out the remaining portion of a line
• Ctrl + D will comment out a line of code
• Ctrl + Shift + D will un-comment out a line of code
• Ctrl + E will open all of a selected panel’s scripts

Variables

OA supports many types of variables. The most used of which are:

Variable definitions take the form of:

<Type> <variableName>;

<Type> <variableName>;

Variables can be given initial values:

<Type> <variableName> = <intialValue>;

<Type> <variableName> = <intialValue>;

Multiple variables can be defined for a single type:

<Type> <variable1Name>, <variable2Name>, …;

<Type> <variable1Name>, <variable2Name>, …;

Variables must be defined before use, but can be so:

• At the beginning of a script
• Within a function
• Within a statement
• Within a function’s parameter structure

Best practice tip: Variable names should utilize camelCase or PascalCase and clearly indicate the variable’s function.

Casting
Casting is a way of interpreting a variable or value as an alternate type. This is done simply by preceding the target variable with “(<target type>)”. Casting is especially helpful with enumerations (which will be discussed later in this blog post).

Constants
Constants are defined in a manner similar to that of variables. However, by designating something as a constant, OA ensures that the value cannot be modified within a script. To designate a variable as a constant, simply place “const” before the type name.

Note: DMC’s best practice standards include capitalizing all constants.

Functions

Functions take the following form:

<returnType> <functionName>(<parameterType> <parameter>, ...)
{
    // Function content

    return <returnedItem>;
    // Required unless the return type is "void"
}

<returnType> <functionName>(<parameterType> <parameter>, ...)
{
    // Function content

    return <returnedItem>;
    // Required unless the return type is "void"
}

Note: returnType takes the form of any variable type or is “void”

Logic Operators
The following operators can be used in WinCC OA scripting:

Statements

WinCC utilizes the traditional of IF, ELSE, FOR, WHILE, and SWITCH statements as follows:

IF and ELSE statements:

 if(<Boolean condition>)
{
    <code>;
}
else
{
    <code>;
}

 if(<Boolean condition>)
{
    <code>;
}
else
{
    <code>;
}

FOR Loop:

for(<initialization of condition>; <Boolean testing condition>; <target variable modification>)
{
    <code>;
}

for(<initialization of condition>; <Boolean testing condition>; <target variable modification>)
{
    <code>;
}

WHILE Loop:

while(<Boolean condition>)
{
    <code>;
}

while(<Boolean condition>)
{
    <code>;
}

SWITCH Statement

switch(<target variable>)
{
    case <value 1>:
        <code>
        break;
    •••
    case <value n>:
        <code>
        break;
}

switch(<target variable>)
{
    case <value 1>:
        <code>
        break;
    •••
    case <value n>:
        <code>
        break;
}

Bonus Round: Ternary Statements

Ternary statements are condensed ways of writing simple if-else statements. They take the form:

<conditional statement> ? <value returned if true> : <value returned if false> 

<conditional statement> ? <value returned if true> : <value returned if false> 

Enumerations
Enumerations should be used to make code easier to interpret. For example, say there exists an integer variable, called iStatus, that indicates the condition of a motor where:

• 0 = stopped
• 1 = Error
• 2 = Running Forward

Say we want the rectangle from our prior example (representing the motor) to change color based on the iStatus variable. A series of IF statements could be written:

The program will work as expected, setting the rectangle’s background color to either grey, red, or white depending on the iStatus value. But someone troubleshooting or reviewing the code may be slowed as the code isn’t explicit as to what each iStatus case represents. This is where enumerations come in.

The enumeration “StatusType” has been implemented to make the code more explicit. Note that the enumeration has been cast as an integer to ensure that iStatus is given an integer to which it can compare.

Even further, constants have also been utilized for redundant clarity and (for reasons we’ll discuss later in this series) consistency.

What would even improve the code further? If you guessed “switch statement”, you’d be correct. While, in theory, this would be true, an unfortunate “feature” of WinCC OA is that its switch statements can’t handle casting. So while the following code would be optimal, saving and implementing it is not possible.

Now that the basics of scripting syntax have been covered, we’re ready to progress to the next aspect of scripting in WinCC OA: Para. In the next installment of “Getting Started with WinCC OA”, we’ll investigate the Para tool, OA tags, and how to interact with said tags.

Topics to look forward to in this series: 

• 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
• 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 5 – Scripting Syntax appeared first on DMC, Inc..

Well then, I have a solution for you!

The Good Solution

Sure, you can disable global color scheme (and while we’re at it, global shadow) on each object by selecting that object on the screen, selecting “Effects” under the Properties tab, and changing the global color scheme and global shadow to “No.” Now, you can change the properties of that object all you want.

The Better Solution

Now, if you’re doing any serious development and adding many items to screens, then this individualized property changing gets old pretty quickly. Well, luckily, you can create default properties for items before they are placed on the screen. Select the object you’re going to put on the screen in the item navigator pane. Then, before you place the item, go to “Effects” again, and disable the global color scheme and global shadow.

Now, you can place as many circles as you like without having to change those properties each time.

This change persists after you close the project and restart your computer, so the project default settings will be there for you the next time you’re ready to continue development.

The Best Solution

The above step is nice and easy, but it suffers from some drawbacks. First, you have to do this for every object type that you’ll be adding (circles, rectangles, I/O Fields, etc.). Second, this setting only applies to the project you’re working on.

So, if you have several projects that you are working on – say if you’re a developer or you have one engineering station for multiple or distributed projects in your plant – then you would need to do this every time you open a different project. If you are ready to be rid of the global color scheme for all projects on your computer, let me introduce you to VBA in WinCC 7.

VBA can be used within WinCC 7 for automatic configuration of the Graphics Designer (create and edit pictures, objects, menus, and dynamics) and other editors (Tag Management, Alarm Logging, etc.). By modifying the Global Template, we can perform a check when an object is created, or a picture is opened to disable the global color scheme and shadow properties.

To open the VBA editor, open Graphics Designer. Then under Tools > Macros, select Visual Basic Editor (or hit Alt + F11).

Once the Visual Basic Editor opens, we will select the Global Template to make our modifications.

To disable the global color scheme and global shadow for objects, add the following code to the Global Template.

Private Sub Document_HMIObjectAdded( _
    ByVal ThisObject As IHMIObject, _
    CancelForwarding As Boolean)

    ' Any errors received are likely because a device
    ' (for example, a faceplate) does not have these properties.
    ' Continue execution if an error occurs.
    On Error Resume Next

    ' Disable the global color scheme
    ThisObject.GlobalColorScheme.Value = False

    ' Disable the global shadow effect
    ThisObject.GlobalShadow.Value = False

End Sub

Private Sub Document_HMIObjectAdded( _
    ByVal ThisObject As IHMIObject, _
    CancelForwarding As Boolean)

    ' Any errors received are likely because a device
    ' (for example, a faceplate) does not have these properties.
    ' Continue execution if an error occurs.
    On Error Resume Next

    ' Disable the global color scheme
    ThisObject.GlobalColorScheme.Value = False

    ' Disable the global shadow effect
    ThisObject.GlobalShadow.Value = False

End Sub

To disable the global color scheme for pictures, add the following code to the Global Template.

Private Sub Document_Activated(CancelForwarding As Boolean)

    ' The faceplate editor does not support the GlobalColorScheme property.
    ' Ignore any errors that occur while attempting to disable it.
    On Error Resume Next

    ' Disable the global color scheme for the active document
    Application.ActiveDocument.GlobalColorScheme.Value = False

End Sub

Private Sub Document_Activated(CancelForwarding As Boolean)

    ' The faceplate editor does not support the GlobalColorScheme property.
    ' Ignore any errors that occur while attempting to disable it.
    On Error Resume Next

    ' Disable the global color scheme for the active document
    Application.ActiveDocument.GlobalColorScheme.Value = False

End Sub

Save the Global Template, and you are all finished! You can now open/add pictures and add objects to those pictures to test out your additions.

Note: if you only want to make these changes on the project level rather than for your computer, you can add the above code to the Project Template file instead.

From the WinCC 7 Manual: (Working with WinCC/VBA for Automated Configuration/Introduction: Using VBA in WinCC/Organizing VBA Code in a WinCC Project)

You can reference the help files for more details about what you can do with VBA in WinCC 7.

Learn more about DMC’s WinCC Expertise and contact us today to get started on your next project!

The post WinCC 7: Disable Global Color Scheme & Global Shadow appeared first on DMC, Inc..

It is important to note that this implementation will not work with basic panels!

Exporting and Importing Files

Siemens HMI’s have built-in functions for importing and exporting files that are relatively easy to implement. Both functions are triggered by events that are named ExportDataRecords and ImportDataRecords, which are built-in Siemens functions. The events can trigger on a large variety of actions, but for this example, I had them trigger on HMI button presses. 

These events can be set by going to a component’s properties and clicking on the events tab (shown below). 

Component Properties on the HMI interface

Sample Configuration for ExportDataRecords

Sample Configuration for ImportDataRecords

For both importing and exporting data records, the input that specifies the desired pathing is the filename input. This parameter is the system path to the file in the form of a string. The string containing the import variable, and the string containing the export variable can be set using the same built-in HMI event function called OpenFileBrowser. Note that for this implementation, the export path and the import will need to be held in separate variables.

Sample Configuration for OpenFileBrowser

This event lets the user navigate to a desired folder/file and save the computer pathing of that file to the tag passed into the Path input. In this application, a specific file is used for importing recipes, and a folder is specified for exporting recipes. To do this, toggle the file input of the open file browser event.

When this parameter is set to true, the file browser will return a path to a file, when it is false it will return the path to a folder. When this field is set to true, you can also mask the browser to only show specific file extensions such as .csv or .ap by using the mask field. This can be useful for ignoring irrelevant files.

The event that exports recipes needs a file pathing to export, and since our file browsing event is grabbing a folder pathing, some basic scripting is needed to create an export file path we can use. The script below concatenates the folder pathing we got from the file browser with a name tag I created for the current recipe. This script should be triggered on the value change of either the folder path or the recipe name.

Sub ExportPathing()

    HmiRuntime.SmartTags("sExportPath") = _
        HmiRuntime.SmartTags("sExportPathFolder") & _
        HmiRuntime.SmartTags("dbRecipes_udtCurrentRecipe_sRecipeName") & _
        ".csv"

End Sub

Sub ExportPathing()

    HmiRuntime.SmartTags("sExportPath") = _
        HmiRuntime.SmartTags("sExportPathFolder") & _
        HmiRuntime.SmartTags("dbRecipes_udtCurrentRecipe_sRecipeName") & _
        ".csv"

End Sub

Once the correct path is specified for importing and exporting, the import and export event are ready to be triggered. By using the tips outlined for importing and exporting recipes, you should be able to specify computer locations for importing and exporting recipes easily. I hope this will help in your future endeavors.

Learn more about DMC’s HMI and SCADA Expertise and our partnership with Siemens.

The post Dynamically Specifying the Folder for Importing & Exporting Siemens HMI Recipes appeared first on DMC, Inc..

• Set up your Raspberry Pi with the latest version of Raspbian by burning the image to an SD card.
• Connect the camera and power on the Pi. Connect to your Wi-Fi or wired network, and open a terminal session, either via SSH or directly on the Pi.
• (Optional) Set up a static IP address. This will let you find your server in the same place every time. If you’re feeling fancy, you can even set up a DNS server to resolve a URL (e.g. myraspitimelapse.local) to this IP address.
• Install libav, which contains avconv. This is the tool we will use to create a video from the captured stills:

sudo apt-get install libav-tools

sudo apt-get install libav-tools

• Install lighttpd. This will let you view your time-lapse video via a web browser:

sudo apt-get install lighttpd

sudo apt-get install lighttpd

• Create a basic web page containing the time-lapse video and save it in the directory where lighttpd will know to serve it. The most straightforward way is to use the built-in text editor nano:

sudo nano /var/www/html/index.html

sudo nano /var/www/html/index.html

• Then copy in the following HTML, which tells the browser to automatically play the video on loop (the muted attribute is required for some browsers to autoplay):

<!DOCTYPE html>
<html>
<head>
    <title>My Timelapse</title>
</head>
<body>

    <video autoplay loop muted>
        <source src="timelapse.mp4" type="video/mpt support the video tag.
    </video>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Timelapse</title>
</head>
<body>

    <video autoplay loop muted>
        <source src="timelapse.mp4" type="video/mpt support the video tag.
    </video>

</body>
</html>

• To create the video, we’ll use a simple shell script. Open a new file using nano as before:

   sudo nano /home/pi/timelapse/timelapse.sh

  and paste in the following script, which saves a new still photo and generates a video file from all the existing stills every time it runs. It takes an input argument that specifies the number of seconds for the video duration.
• Next, change the file permissions so that the script can be executed:

   sudo chmod +x /home/pi/timelapse/timelapse.sh

  You should now be able to run your script as:

   /home/pi/timelapse/timelapse.sh 5

  and see the timelapse.mp4 file get created in the directory. Enter the Pi’s IP address into your browser, and you should be able to play the 5-second long video. For now, it won’t be too exciting, since it will just be a single frame.
• Finally, set up the cron job that will trigger shell script. Open the cron table file:

   crontab -e

  Add the following line to the end of the file:

   0 * * * * /home/pi/timelapse/timelapse.sh 30 > /home/pi/timelapse/timelapse.log

  This runs the shell script once per minute, and the input argument of 30 means that the video will be 30 seconds long. The > symbol redirects any errors to the specified log file. You can, of course, use other time intervals as well, and this handy website helps explain the syntax, which can be a little confusing.
• And that’s it! You can change all the parameters as needed, and you can even try making some tweaks to the script. For example, maybe you want the time-lapse video to show each frame for a set amount of time rather than keeping a fixed duration for the whole video, in which case you can get rid of the input argument and simply set the framerate to a constant.

Learn more about DMC’s embedded design expertise. 

The post How To Make a Simple Time-lapse IP Web Camera Using a Raspberry Pi appeared first on DMC, Inc..

Installation

1. Download and install the BLE SDK and the BLE Update Tool using the default location and agree to licenses. 

   These installs provide the complier and some example code as well as the download tool to push the compiled code to the Bluetooth chip. Wait to restart your system until you have completed the next step of installing Visual Studio Code.

   

2. Download and install Visual Studio Code using the default location and agree to licenses. 

   I recommend selecting Add “Open with Code” action to Windows Explorer file context menu and Add “Open with Code” action to Windows Explorer directory context menu from the list of Additional Tasks. This will provide quick right-click functionality to open our BGScript project later.

   

3. Restart your system now so that the BLE SDK, the BLE Update Tool, and Visual Studio Code can finish their installations. 

Configure Tools

Now that all our tools are installed, let’s configure VScode so that we can compile and download our BGScript code straight from the editor. 

1. Open Windows explorer, and navigate to: 

   C:\Bluegiga\ble-1.4.2-130\example\<your device>\bgdemo 

   If you didn’t use the default location for the BLE SDK, or if the version of the SDK has been updated, your path will be different. I’m using the BLE113, so my path is:

   C:\Bluegiga\ble-1.4.2-130\example\dkble113\bgdemo

2. Right click in the window and select Open with Code. This will open all of the files in the folder in a new instance of VScode. 

   

3. In VScode, type the hot key Ctrl+Shift+P to open the Command Palette, and then type Task to bring up the options with the keyword “Task”.

   

4. Select Tasks: Configure Task Runner. This opens some of the defaults tasks in VSCode, but we want to create a custom one, so select Others. This will create a .vscode folder in our working directory with a tasks.json file. 

   

   The task.json defines all the parameters and functionality of the task. It is configured by default to print “Hello World” to the terminal in VScode.

   

5. Type Ctrl+Shift+B. This will run our new task, and you should see the terminal open in VScode and display “Hello World”

   We’ll update this task to compile our BGScript software instead of the default functionality when we type Ctrl+Shift+B. Since we’ll also need a task to download the compiled hex file to the Bluetooth module, we’ll need to modify this single task to handle multiple tasks. 

6. Download the attached task.json file and replace your current tasks.json file. With this new file, instead of calling the ‘echo’ command, we’ll call the Windows ‘cmd’ command and pass it different executables and files based on which task we want to run. 

Running Tasks

For the top level ‘args’, we use /C as a placeholder for the actual arguments we’ll pass based on the task we want to run. Each task inside the main task has an arbitrary name and arguments to pass back to the cmd command. 

1. Pass the first task, defined as Build

   The “isBuildCommand”: true tells VScode that if we type Ctrl+Shift+B, it should run this specific task. There are a few other hot key tasks, but this is the only one we’ll use. 

2. Pass the next task, defined as Download. This task will download the compiled code to the module. 
3. Remember to change the path if you didn’t keep the default installation directory. 

   Looking back at the args for the Build command, we can see that it will call the bgbuild executable that was installed with the SDK.

4. Make sure you don’t have multiple BGScript projects in a single directory. 

When the bgbuild.exe is called, it expects a bgproj file that it will compile. The *.bgproj gets the first bgproj file from the working directory.

Download Task

The args for the Download task are in the command line update tool (bleupdate-cli.exe), which was part of the SDK installation. 

The bleupdate-cli.exe takes a command, (list, update, get, set) as its first argument. Since we want to update the module, we’ll pass ‘update’ as the command and pass the compiled hex file which was created from our Build task. 

Again, make sure there is only a single .hex file in the working directory to ensure we’re downloading the correct hex file. 

Viewing the Output

The last task combines both features into a single task that will build the project and then immediately download it to the Bluetooth module.

Now, if you type Ctrl+Shift+B, you should see the output of bgbuild.exe for the demo application that we’re working with. 

1. Type Ctrl+Shift+P to download the hex file so we can run the task from the command palette, then type Tasks: Run Task and click Enter. You’ll then see a list of the three tasks that we have defined. 
2. Select Download to download the already compiled hex file, or select Build & Download to recompile the project before downloading. 

Keybinding Shortcut

Now we can quickly compile our BGScript project with Ctrl+Shift+B, but it’s quite a bit of typing to run the other tasks, so let’s create a quick key binding shortcut so that when we press the F6 key, we’ll immediately be presented with our available tasks, and then we can select the one we want.

1. Open the command palette again with Ctrl+Shift+P and type Keyboard. The only option should be Preferences: Open Keyboard Shortcuts. Select it, and two files should open next to each other.

   

2. In the keybindings.json file on the right, enter {“key”: “f6”, “command”: “workbench.action.tasks.runTask”} inside the square brackets.
3. Save the keybindings.json and close it. Close the Default Keyboard Shortcuts file as well.

Pressing F6 will now open the command palette with our available tasks available to select.

Now that VScode functions more like an IDE rather than a basic text editor, in the next blog I’ll go through setting up text highlighting to make development easier.

Learn more about DMC’s Custom Software and Hardware Services.

The post BlueGecko BGScript Development with VScode appeared first on DMC, Inc..

“UGH, these Windows system sounds are so bland”

And then wished you could change them to something better, and do it to all your company computers, but didn’t want to go through the hassle of clicking through Windows system settings while explaining to your coworkers what you’re doing to their computer?

ME TOO!

That’s why I made an executable that does all this with a double click. Below is how you can do it, too:

1. Find the sound clips you want to use for system sounds, and convert them to a .wav file format. There are a bunch of free sites online that do this for you.
2. Trim down the sound clips using any audio editor. I used Audacity. I recommend sounds clips no longer than 3 seconds, but there’s nothing stopping you from having the full Kanye album play whenever you open a file/get an email/empty the recycle bin.
3. Create a text file in the same folder that has your sound clips. Give it whatever name you want, but change the file extension to .bat. If you can’t see the file extension, you’ll have to enable viewing system file extensions.
4. Open a text editor and open this file in the text editor. I like to use Notepad++.
5. What you have now is a .bat file that you can write code in and it will execute that code whenever it’s double clicked, we’ll put in some code that changes system sounds.
6. Copy and paste the code below into your bat file, and change the file names to items that you have.

REM The line of code below plays a sound whenever this script runs. Not necessary, but I like it
Start powershell -WindowStyle hidden -c (New-Object Media.SoundPlayer “aheh.wav”).PlaySync();
REM    Start powershell                Starts a powershell window that will run an audio player, just 
REM -WindowStyle hidden             Makes the window that this code runs in hidden from view
REM -c                                
REM (New-Object Media.SoundPlayer     Creates a new object that’s a sound player 
REM “aheh.wav”).PlaySync();            Specifies the sound clip “aheh.wav” and tell our sound player to play it

REM The line of code below makes a file path to store the sounds in, only if it doesn’t already exist
if not exist “C:\WindowsKanyeSounds” mkdir “C:\WindowsKanyeSounds” 
REM if not exist “C:\WindowsKanyeSounds”            Checks if the file location exists
REM This copies the local .exe files to the new file path in the music folder.

REM The next few lines of code copy local files “uh.wav” and “oo.wav” to the new file path we made on earlier line
echo f | xcopy /f “%~dp0\uh.wav” “C:\WindowsKanyeSounds”
echo f | xcopy /f “%~dp0\oo.wav” “C:\WindowsKanyeSounds” 
REM echo f         This bypasses having a user answer yes/no/all if asked to overwrite existing files
REM xcopy          Copies files and directories, including subdirectories.
REM /f             displays full source and destination file names when copying
REM “%~dp0        This gets the file path of the folder the file is running in

REM This changes the system sounds to the new files
REM It gets into the registry, adds a new scheme, and changes two of the sounds to the sounds we just made
@reg add “HKEY_CURRENT_USER\AppEvents\Schemes”                                             /t REG_SZ /d “.KanyeTest”  /f
@reg add “HKEY_CURRENT_USER\AppEvents\Schemes\Apps\.Default\.Default\.Current”             /t REG_SZ /d “”       /f
@reg add “HKEY_CURRENT_USER\AppEvents\Schemes\Apps\.Default\DeviceConnect\.Current”        /t REG_SZ /d “C:\WindowsKanyeSounds\uh.wav”       /f
@reg add “HKEY_CURRENT_USER\AppEvents\Schemes\Apps\.Default\DeviceDisconnect\.Current”      /t REG_SZ /d “C:\WindowsKanyeSounds\oo.wav”       /f
REM @reg add “item”        this goes to the item in the registry 
REM /t                     this parameter specifies the type for the registry entry
REM REG_SZ                this the registry type, a null-terminated string
REM /d                  this parameter specifies the data for the new registry entry        
REM /f                    this adds the registry entry without prompting for confirmation.

REM waits for 3sec so Kanye laughs when the code completes
REM this was a quick fix for something I didn’t want to troubleshoot
TIMEOUT 3

7. Save the file and double click to run it.

You’re free to drag & drop all these files onto a USB stick and run whenever you want. BUT. You can streamline the process even more by converting this .bat file into an .exe file. I used this free .bat to .exe file converter and had the settings so it ran as an invisible application in a temporary directory and deleted temporary files at exit. I had to also click the “include” tab and include the sound files I was using. 

If you want to change system sound settings back to defaults, type “change system sounds” in the Windows search bar, and change the Sound Scheme from (modified) to Windows Default.

The post Automatically Change Windows System Sounds appeared first on DMC, Inc..

A simpler solution is to use Javascript & jQuery, and the following code outlines how to hide any field on your SharePoint form. If you are unfamiliar with Javascript, no problem! Just edit the fieldsToHide line with whatever fields you wish to hide. Separate fields using commas, and surround each field with quotations.

If you would like to understand how the code works in detail, read the following section. If not, skip to Adding the Code to Your SharePoint Site.

The Code

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
	function HideFields() {
		//Enter the fields you would like to hide here.
		fieldsToHide = ["Enter", "Field Names", "Here"];
	
		//Get all SharePoint fields
		var formFieldTitles = $(".ms-formtable td.ms-formlabel h3.ms-standardheader");

		//Iterate over each row in the form
		formFieldTitles.each(function () {
			//Get the text of the field title
			var textToMatch = $(this).text();
			//Get the table row associated with this title
			var currentRow = $(this).closest('tr');

			//Iterate over our list of fields we wish to hide
			for (var i = 0; i < fieldsToHide.length; i++){
				var field = fieldsToHide[i];
				//Match the SharePoint field name to our field name
				if (textToMatch.toLowerCase().replace("*", "").trim() === field.toLowerCase().replace("*", "").trim()){
					//Hide this field
					$(currentRow).hide();
				}
			}
		});
	}

	function AddToBodyOnLoad(){
		//Ensure that our function is called last by pushing it again
		_spBodyOnLoadFunctionNames.push("HideFields");
	}

	//Add our function to the array of onload functions
	_spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");
</script>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
	function HideFields() {
		//Enter the fields you would like to hide here.
		fieldsToHide = ["Enter", "Field Names", "Here"];
	
		//Get all SharePoint fields
		var formFieldTitles = $(".ms-formtable td.ms-formlabel h3.ms-standardheader");

		//Iterate over each row in the form
		formFieldTitles.each(function () {
			//Get the text of the field title
			var textToMatch = $(this).text();
			//Get the table row associated with this title
			var currentRow = $(this).closest('tr');

			//Iterate over our list of fields we wish to hide
			for (var i = 0; i < fieldsToHide.length; i++){
				var field = fieldsToHide[i];
				//Match the SharePoint field name to our field name
				if (textToMatch.toLowerCase().replace("*", "").trim() === field.toLowerCase().replace("*", "").trim()){
					//Hide this field
					$(currentRow).hide();
				}
			}
		});
	}

	function AddToBodyOnLoad(){
		//Ensure that our function is called last by pushing it again
		_spBodyOnLoadFunctionNames.push("HideFields");
	}

	//Add our function to the array of onload functions
	_spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");
</script>

The first line imports the jQuery library, which makes it easier to select and hide elements on a page. To learn more about jQuery, visit their official website.

The first line in HideFields() defines which fields we are going to hide. This is the line that you should change to match the fields on your form, and add additional fields if desired.

The AddToBodyOnLoad() function forces our function to be loaded last on the page. This ensures that the fields have been created and are viewable in the DOM.

The HideFields() function iterates over each field on the form, then iterates over each field in our list of fields we want to hide. If there’s a match, the entire row is hidden from view. Unfortunately, we cannot remove this row from the DOM, since there will be unintended side-effects, and SharePoint will not be able to save the list item.

Adding the Code to Your SharePoint Site

SharePoint 2013 & Office 365

1. Navigate to your SharePoint list.
2. In your browser url, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
3. Click the Gear icon in the top right, then “Edit Page”.
4. Click “Add a Web Part”.
5. Under “Categories”, select “Media and Content”.
6. Under “Parts”, select “Script Editor”.
7. On the new Web part, click “Edit Snippet”.
8. Copy the code from above, and paste the contents into the dialog.
9. Edit the 5^th line with the fields you want to hide on this form.
10. Click “Insert”.
11. In the top left, click “Page”, then “Stop Editing”.
12. Your fields should now be hidden from view.

SharePoint 2010

1. Navigate to your SharePoint list.
2. In your browser URL, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
3. Click the “Site Actions” in the top left, then “Edit Page”.
4. Click “Add a Web Part”.
5. Under “Categories”, select “Media and Content”.
6. Under “Parts”, select “Content Editor”.
7. On the new Web part, click “Click here to add new content”.
8. In the “Editing Tools” ribbon section, click “Format Text”.
9. In the “Markup” section, click “HTML”, then click “Edit HTML Source”.
10. Copy the code from above, and paste the contents into the dialog.
11. Edit the 5^th line with the fields you want to hide on this form.
12. Click “OK”.
13. In the top left, click “Page”, then “Stop Editing”.
14. Your fields should now be hidden from view.

Learn more about DMC’s SharePoint services.

Contact us for SharePoint consulting.

The post How to Hide Fields on a SharePoint Form appeared first on DMC, Inc..

Tools

• Ruby
• Sass (or Less)
• Node.js
• npm
• Bower
• Grunt or gulp

Ruby

We won’t be using Ruby as a programming language, but we will be needing it to install SASS.

If you’re on Windows, download the latest version of Ruby

If you’re on Linux or OS X, there are instructions you can follow

Or, after installing cURL, run this in a terminal window:

\curl -sSL https://get.rvm.io/ | bash

\curl -sSL https://get.rvm.io/ | bash

Once Ruby has finished installing, no matter what platform you’re on, open a terminal window and run

ruby -v

ruby -v

to ensure it has installed properly.

Sass (Syntactically Awesome Style Sheets) or Less

Sass is basically CSS with a ton of awesome features layered on top. Using Sass, which compiles to clean and efficient CSS, one can make use of extended abilities like variables, mixing, inline imports, and more.

There is another CSS extension called Less, which is an alternative to Sass. I prefer Sass, but you could definitely adapt this tutorial to work with Less as well.

Anyhow, now that Ruby is installed and ready to go, installing Sass is easy.

In a terminal window, type

gem install sass

gem install sass

Once that is finished, run

sass -v

sass -v

to ensure it has installed properly.

Node.js

Node.js is tool that allows one to write simple JavaScript programs that create powerful applications.

We’ll be using Node.js to power npm (node package manager), Bower, and Grunt.

Grab the proper download for your platform

To install Node.js on Windows or OS X, simply run the installers.

On Linux, you can build Node.js by using these steps:

Extract the downloaded archive and open a terminal window

1. Navigate to where you extracted the archive

2. Run

./configure

./configure

3. Run and wait patiently

make

make

4. Run

sudo make install

sudo make install

And you’ll be all set with Node.js.

npm

npm is the official package manager for Node.js. What this means is that using npm, one can install hundreds of different applications and tools that are built with Node.js.

We’ll be using npm to install Bower and Grunt.

npm comes installed with Node.js, so there are no additional steps required to install it.

Bower

Bower, much like npm, is a package manager. However, npm only deals with Node.js packages while Bower titles itself “a package manager for the web.” Using Bower, one can run a simple terminal command to download and install many different web libraries or frameworks, such as jQuery, Bootstrap, FontAwesome, and more.

To install Bower, open a terminal window and type:

npm install -g bower

npm install -g bower

(The -g flag is to install bower globally, so we can call it from the command line anywhere)

Grunt or gulp

Grunt is a task runner that performs the time-consuming, repetitive tasks that come along with website development like minification, SASS compilation, and more. 

Thanks to npm, Grunt is just as easy to install as Bower:

npm install -g grunt-cli

npm install -g grunt-cli

gulp (don’t you ever capitalize that g) is a similar tool that should provide better performance than Grunt because it uses Node.js’s streams.

npm comes in handy once again. Install gulp with:

npm install -g gulp

npm install -g gulp

Beginning Automation

Now that we have all of the tools we need to begin, we can finally start creating an automated build system.

There are tasks associated with web development that quickly become repetitive and mundane. Thankfully, we will no longer have to do these manually!

The tasks that we can now automate are (in no particular order):

• Sass (or Less) compilation (converting our Sass or Less to standard CSS)
• Concatenation (combining multiple files into one)
• Minification (smushing text together to reduce the size, making it load faster)
• Linting (automatically checking code for errors)
• Copying of files (like fonts)
• Adding vendor-specific prefixes to our CSS (ensuring compatibility across browsers)
• Detecting features that we require a user’s browser to have
• More that I can’t think of!

And best of all, the build system will be smart enough to understand when a particular file changes to prevent rebuilding the entire thing.

Stay tuned for the next article! For now, you can always take a look at DMC’s Web Application Development services, where we can harness the technologies outlined above for your needs.

The post Automating Web Development – Tools appeared first on DMC, Inc..