Add Icons for a Zero Touch Assembly or NodeModel assembly

In this article we describe how to add icons to a Zero Touch node library.

This article is based on the PeriodicUpdateExample class in the Dynamo Samples repository.

1. In Visual Studio, add a resource file by right clicking on the project name, selecting Add->New Item->Visual C# Items->Resources file. I've named the new resources file SampleLibraryZeroTouchImages.resx where SampleLibraryZeroTouch is the name of my assembly.

For best results name the .resx <AssemblyName>Images.resx The .resx file name cannot contain any special character, including periods. So if your AssemblyName has any you should remove them, for instance instead of Company.MyPackageImages.resx use CompanyMyPackageImages.resx

2. Add a Resources folder to your project directory. This folder will contain the images to be imported as resources into our project.

• Add two images to the resources folder:
  • SampleLibraryZeroTouch.Examples.PeriodicUpdateExample.PointField.Small.png is a 32px x 32px image which will be the icon used in the library view.
  • SampleLibraryZeroTouch.Examples.PeriodicUpdateExample.PointField.Large.png is a 128px x 128px image which will be used in the help bubble.
  • NOTE: Image names must mirror the full name of the class, including the namespace.
  • NOTE2: Depending on your setup, you may need to avoid adding the assembly name on your file names: Examples.PeriodicUpdateExample.PointField.Small.png

3. Before adding the images to our resources file, we need to disable the "strong typing" in our Resource file, because it will change our resource images names if we leave it on, causing our efforts to fail without warning.

• With your .resx file selected, go to the Properties panel and clear the "Custom Tool" field.
• NOTE: Failing to clear the "Custom Tool" field will result in Visual Studio converting periods to underscores in your resource names. Please verify before Building that your resource names have periods separating class names rather than underscores.

4. In Visual Studio, double click your .resx file to enter the resources designer.

5. Drag and drop your image files into the resources designer .resx file.

6. For each image now in the .resx file, right click on the image in the .resx. In the Properties palate, change the "Persistence" property from "Linked at compile time" to "Embedded in .rsx"

7. For the next step, you'll need to edit the .csproj file that outputs your assembly. Right click on the project in the Solution Explorer and select "Unload Project". Once the project is unloaded, right click on the project in the Solution Explorer and select "Edit ...csproj".

8. Add the following in the "AfterBuild" section:

<Target Name="AfterBuild">
  <!-- Get System.Drawing.dll -->
  <GetReferenceAssemblyPaths TargetFrameworkMoniker=".NETFramework, Version=v4.7">
    <Output TaskParameter="FullFrameworkReferenceAssemblyPaths" PropertyName="FrameworkAssembliesPath" />
  </GetReferenceAssemblyPaths>
  <!-- Get assembly -->
  <GetAssemblyIdentity AssemblyFiles="$(OutDir)$(TargetName).dll">
    <Output TaskParameter="Assemblies" ItemName="AssemblyInfo" />
  </GetAssemblyIdentity>
  <!-- Generate customization dll -->
  <GenerateResource  SdkToolsPath="$(TargetFrameworkSDKToolsDirectory)" UseSourcePath="true" Sources="$(ProjectDir)\Resources\SampleLibraryZeroTouchImages.resx" OutputResources="$(ProjectDir)\Resources\SampleLibraryZeroTouchImages.resources" References="$(FrameworkAssembliesPath)System.Drawing.dll" />
  <AL SdkToolsPath="$(TargetFrameworkSDKToolsDirectory)"  TargetType="library" EmbedResources="$(ProjectDir)\Resources\SampleLibraryZeroTouchImages.resources" OutputAssembly="$(OutDir)SampleLibraryZeroTouch.customization.dll" Version="%(AssemblyInfo.Version)" />
</Target>

It's important that the intermediate resources file is named with <AssemblyName>Images.resources To get to the resources in your .resx, Dynamo will look for <AssemblyName>Images as the root key for your icons.

This code will compile the .customization.dll file that will be required for Dynamo to find your images. NOTE: Replace references in the above xml to SampleLibraryZeroTouch with the name of your assembly.

You may also need to update the .NETFramework version to your current version.

If an AfterBuild section is not yet available in the .csproj, copy the above code and place just before the closing </Project> tag. Also, operate using the above using the .csproj and not the Post-Build event command line available in the Project Properties > Build Events.

9. Rebuild your solution. In output folder you should have a .customization.dll assembly which matches the names of your assembly. For this example it's SampleLibraryZeroTouch.customization.dll.

10. Distribute the .customization.dll file in the same folder as your assembly. For a package, this would be in the packages<Your Package Name>\bin folder.

11. When running Dynamo, you should now find that your functionality has an icon for both the node in the library and the help bubble.