Alternate way to do grasshopper icons with Rider

Grasshopper Developer
1

I finally figured out how to insert an icon when using Rider as the IDE. Then I realized that this post already existed (whoops).

So I guess this post will now be about an alternate way to specify the icon for a component.

Before I go further, this is basically my first crack at anything C# (my background is Python with a small amount of Java), so let me know if I’m laying down bad information.

First thing is make sure the project has the System.Resources.Extensions assembly installed (hopefully that’s the appropriate term).

Next is to make sure the following is in the <PropertyGroup> tag in the csproj file:

<GenerateResourceUsePreserializedResources>true<GenerateResourceUsePreserializedResources>

So it should look something like this:

    <PropertyGroup>
        <TargetFramework>net48</TargetFramework>
        <Version>1.0</Version>
        <Title>CirclePortalIn</Title>
        <Description>Description of CirclePortalIn</Description>
        <TargetExt>.gha</TargetExt>
        <GenerateResourceUsePreserializedResources>true</GenerateResourceUsePreserializedResources>
    </PropertyGroup>

If you don’t have a Resources.resx file, get that created:

image
image717×513 64.8 KB

image

Once that’s created, get a base encoding of the image you want to use for an Icon. This will go in the <Value> tag. The entire entry should look something like this:

<data name="Icon" type="System.Drawing.Bitmap, System.Drawing,
    Version=1.0.5000.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
        mimetype="application/x-microsoft.net.object.bytearray.base64">
    <value>
      iVBORw0KGgoAAAANSUhEUgAAABgAAAAYEAYAAACw5+G7AAAFwGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDYtMjNUMTI6MTk6MzktMDQwMCIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDYtMjNUMTM6MjM6MTAtMDQ6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDYtMjNUMTM6MjM6MTAtMDQ6MDAiCiAgIHBob3Rvc2hvcDpEYXRlQ3JlYXRlZD0iMjAyNC0wNi0yM1QxMjoxOTozOS0wNDAwIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIyNCIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjI0IgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMjQiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjI0IgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI3Mi8xIgogICB0aWZmOllSZXNvbHV0aW9uPSI3Mi8xIj4KICAgPGRjOnRpdGxlPgogICAgPHJkZjpBbHQ+CiAgICAgPHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij5PcmFuZ2UgQ2lyY2xlIE91dGxpbmU8L3JkZjpsaT4KICAgIDwvcmRmOkFsdD4KICAgPC9kYzp0aXRsZT4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0icHJvZHVjZWQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFmZmluaXR5IERlc2lnbmVyIDIgMi41LjIiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDYtMjNUMTM6MjM6MTAtMDQ6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PsUz6vIAAAAEY0lDUAkSAAFOp/eQAAAACXBIWXMAAAsTAAALEwEAmpwYAAACWklEQVRYhe2XzStEYRSHkRojSbG10Eg+U0hsTEpZkEz8FWSmNFla2PnI58hekqWFzMJKkvJVM5MaNrOQshAShhIWj9N07/TOvTPzMhu/zdNp3jnnd977ce6bl/ev3CpfV6Kp+GBV7XVpKVFLC2xrM646PYXn55PO7Vi08ukp27oZN4Dhnh6i+XnocsFQCJ6dwa8v2NoKm5thLAbHx2loby9dH7YbwHBJCdH0NBwYgCMjMBjEyMdH6jyFhUS9vXBtDe7swIkJ8jw/Z90ABYuLiY6Poeysz0ehx0erPKnzl5URLSzA9nYh+V9eMs3/U2BpCW5sZJworXrr63BlxWp9QepEbjfR8DD0evXYtJLPBz0efHR3q1YqG0AzM9Dr5VLe3+uyqBJ1Hh6Ixsbg7KxqfVIDdFxURNTUBHd39dq0q2AQ1tfjy+k0r1BcATF+dcWOxOO/ZVEl6r69EUWjUF6/CSkakAEkb5tcS3yYB6Oygc9PmK9tUmcn8SEDMSFFA+qOcyPxcXJi/kXRQCQCq6uNg+zvZHxoa2pgOGxel9QAD8/7O5F80/T3/45NK/X1wUjE+FAnZDEH/H64uMiOVFTotmgWdcrLiZaXjT6SpWyAjg8PiTY34eqqHptWCgTg1hY+Dg5UK21+zMm9eHQELy/h6CgF7u4ytWrccTHe0AA7Osj/+qr6v8UtJFdCBllnJ7y5geEwBoaGoMNhz7DDAT0eyQNvb+0aF2V5oOnqIpqbg42NUCannMDk/S2vw7o6eHEB/X4M7++n60PzkVJuNRn5qiNlKJSrT5R/6dY3R7Ibw5tFHHsAAAAASUVORK5CYII=
    </value>
  </data>

Feel free to change the name attribute to whatever you want, but that’s what will be referenced.

Now in the cs file for your component:

        /// <summary>
        /// Provides an Icon for every component that will be visible in the User Interface.
        /// Icons need to be 24x24 pixels.
        /// You can add image files to your project resources and access them like this:
        /// return Resources.IconForThisComponent;
        /// </summary>
        // protected override System.Drawing.Bitmap Icon => null;
        protected override System.Drawing.Bitmap Icon
        {
            get
            {
                return Resources.Icon;
            }
        }

And that should be it!
image

Hopefully this is useful to someone.

3 Likes