Skip to content

Creating Icons for Custom Nodes

Konrad K Sobon edited this page Aug 14, 2015 · 15 revisions

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.

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

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

  1. Change icon persistence to Embedded in .resx

image

  1. Open .csproj file. Use Notepad.
  2. Uncomment BeforeBuild part.

  1. 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>
  1. Rebuild your project. Package.customization.dll will be in project's output folder.

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

image

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://raw.githubusercontent.com/CAAD-RWTH/ClockworkForDynamo/master/workflow_samples/0.7.x/ExtractNodeIDs/ExtractNodeIDs.dyn

Releases

Roadmap

How To

Dynamo Internals

Contributing

Python3 Upgrade Work

Libraries

FAQs

API and Dynamo Nodes

Clone this wiki locally