Skip to content

Share Icon Sets and Media Files for TwinCAT HMI with NuGet Package Management

The information in this post are usable with:

  • VisualStudio 2017, 2019
  • TE2000-HMI-Engineering 1.12.*.* (Download) and future releases

Do you have a large set of individual icon set you like share easily with other developer or customer? The TwinCAT HMI provides an easy way to fullfil this requirement by use of the powerful NuGet package management already available in Microsoft VisualStudio.

Icon Set NuGet packages are provided in TwinCAT HMI’s Gallery Explorer

You can add any content which is supported by the TwinCAT HMI Gallery Explorer, e.g. images (PNG, JPEG, Bitmap, etc.) and videos (MPEG4, AVI, etc.). For videos a preview poster is generated, but only if FFMPEG is installed.

Create Icon Set…

It is very easy to create an individual icon set for your media libraries.

The TwinCAT HMI setup provides several project templates.
Please select “TwinCAT HMI Framework Project Empty” or “TwinCAT HMI Framework Project”.
Just name the project meaningful and click “Create”.
The initial project looks like this. In case the folder “ImageLibrary\” is not available, please create a new folder and provide some media files.

Open the file “MyFirstIconSet.nuspec” and replace the content by the following code:

<?xml version="1.0"?>
<package xmlns="http://schemas.microsoft.com/packaging/2013/05/nuspec.xsd">
  <metadata>
    <id>MyFirstIconSet</id>
    <version>1.0.0</version>
    <title>MyFirstIconSet</title>
    <authors>Your Name</authors>
    <owners>Your Name</owners>
    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>
    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>
    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>My first individual icon set.</description>
    <releaseNotes>Initial release of my first icon set.</releaseNotes>
    <copyright>MIT</copyright>
    <tags>TwinCAT HMI</tags>
    <dependencies>
      <group targetFramework="native1.12-tchmi">
      </group>
    </dependencies>
  </metadata>
  <files>
    <file src="ImageLibrary\*" target="tools\native1.12-tchmi\{gallery}\"/>
  </files>
</package>

The most interesting line is 23, i.e. “<file … />”.
All media files in the project folder “ImageLibrary\” are added to “tools\native1.12-tchmi\{gallery}\” when NuGet pack [Microsoft Documentation] is called. It is not necessary to call the pack command manually in any command line prompt. The TwinCAT HMI already provides an easy GUI-based way, just click “Create NuGet Package…” in the project node context menu:

Click “Create NuGet Package…” to call NuGet pack easily.

As a result a new NuGet package is generated and stored in “C:\TwinCAT\Functions\TE2000-HMI-Engineering\References”. By using the “NuGet Package Explorer” [Github] the content can be verified, it looks ok:

The new NuGet Package “MyFirstIconSet” provides four media files in “tools\native1.12-tchmi\{gallery}”.

{gallery} has a special meaning in the TwinCAT HMI-environment, when the NuGet package is added to any TwinCAT HMI the individual media files below {gallery} are added as individual tree nodes to the TwinCAT HMI Gallery Explorer and can be used like any other media file. After dropping one or more files to the TwinCAT HMI Designer the files are automatically imported to the related TwinCAT HMI project. After adding any file the NuGet package can be removed without any problem, the files in the TwinCAT HMI project will stay.

As like any other NuGet package, just install your choice to the TwinCAT HMI project. After adding a new tree node will be available in the TwinCAT HMI Gallery Explorer. Any file can be added to your TwinCAT HMI project, the selected media files are automatically imported to the selected project. After finish of your work the NuGet packages can be removed again.

2 Comments

    • One of the best news I got today.
      Thanks mate.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.