Creating Icons for Custom Nodes

Custom nodes, that are the part of package, support icons.

1. Get ID of custom node. Open node with Notepad. Find its ID. It will look something like ID="4cdf5500-fe21-402e-acb7-bb9fc1b5a64b"

2. Open Visual Studio. As a template, choose Visual C# > Class Library. If you have options for which type of class library to use, choose the 'NET Framework' library, and specify framework version 2.0 (later versions of Visual Studio).

3. Create in your solution resx file, named PackageImages.resx. Right click in Solution Explorer, choose Add > New Item.... Scroll down to Resources File.

Note: 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. 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.

3. Add to recently created file your image. Change your image resource name to Custom-node-ID.Small while changing your image file name (Solution Explorer) to Custom-node-ID.Small.png

Note: that if you change your image file names in the Windows Explorer before importing into Visual Studio, you will not have to do this step as VS will take care of it.

4. Change icon persistence to Embedded in .resx

5. Open .csproj file. Use Notepad.
6. Uncomment BeforeBuild part.

7. Write next code:

<Target Name="BeforeBuild">
<GetReferenceAssemblyPaths TargetFrameworkMoniker=".NETFramework, Version=v2.0">
<Output TaskParameter="FullFrameworkReferenceAssemblyPaths" PropertyName="FrameworkAssembliesPath" />
</GetReferenceAssemblyPaths>
<GenerateResource UseSourcePath="true" Sources="$(ProjectDir)PackageImages.resx" 
  OutputResources="$(ProjectDir)PackageImages.resources" 
  References="$(FrameworkAssembliesPath)System.Drawing.dll" />
<AL TargetType="library" EmbedResources="$(ProjectDir)PackageImages.resources"
OutputAssembly="$(OutDir)Package.customization.dll" />
</Target>

If using Visual Studio 2019 or later, use this instead:

  <Target Name="BeforeBuild">
    <GetReferenceAssemblyPaths TargetFrameworkMoniker=".NETFramework, Version=v2.0">
      <Output TaskParameter="FullFrameworkReferenceAssemblyPaths" PropertyName="FrameworkAssembliesPath" />
    </GetReferenceAssemblyPaths>
	<GenerateResource SdkToolsPath="$(TargetFrameworkSDKToolsDirectory)" UseSourcePath="true" Sources="$(ProjectDir)PackageImages.resx" OutputResources="$(ProjectDir)PackageImages.resources" References="$(FrameworkAssembliesPath)System.Drawing.dll" />
    <GenerateResource UseSourcePath="true" Sources="$(ProjectDir)PackageImages.resx" OutputResources="$(ProjectDir)PackageImages.resources" References="$(FrameworkAssembliesPath)System.Drawing.dll" />
    <AL TargetType="library" EmbedResources="$(ProjectDir)PackageImages.resources" OutputAssembly="$(OutDir)Package.customization.dll" />
  </Target>
  <Target Name="AfterBuild">
  </Target>

8. Rebuild your project. Package.customization.dll will be in project's output folder.

9. Add Package.customization.dll to your package.

NB! Default icon

You can add default icon, if you want to use 1 icon for all custom nodes. You have to make all steps, described above. But name of your icon should be DefaultCustomNode.Small

NB! Large icon

You can also add a large icon (used when tool-tip dialog pops up) by following all of the above steps but naming your images/resources with the following name: Custom-node-ID.Large and Custom-node-ID.Large.png

NB! Image size

Small image should be 32x32px while large image works best at 128x128px.

##Extracting a large number of node IDs If your package contains a large number of nodes you can use this script to automatically extract the IDs of all nodes in a given directory: https://github.com/CAAD-RWTH/ClockworkForDynamo/master/workflow_samples/0.7.x/ExtractNodeIDs/ExtractNodeIDs.dyn