オリジナルのGrasshopperコンポーネントの開発についてやさしく解説する－続編(2つ目以降のコンポーネント・アイコン設定)

前回の記事でオリジナルのGrasshopperコンポーネントの開発方法について、環境整備からコンポーネントとしてとりあえず動くところまで解説しました。
今回は、続編です。

同じアドインの中に2つ目以降のコンポーネントを作成する方法

新規プロジェクトを作成したときの最初の設定画面ですが、実はここには『First component』と書いてました。

1つ目のコンポーネントの名前その他どうしましょうか？ということですね。
では、2つ目以降は？？を解説していきます。
コンポーネントの内容がどこに書かれていたのかを確認します。

public class DackelComponent_Addition : GH_Component
   {
       /// <summary>
       /// Each implementation of GH_Component must provide a public 
       /// constructor without any arguments.
       /// Category represents the Tab in which the component will appear, 
       /// Subcategory the panel. If you use non-existing tab or panel names, 
       /// new tabs/panels will automatically be created.
       /// </summary>
       public DackelComponent_Addition()
         : base("Addition", "v1+v2",
           "Description",
           "Dackel", "Math")
       {
       }

上のコードは抜粋ですが、『public class』のブロックに書かれてましたね。
と、いうことは、クラスごとに１つのコンポーネントとなっているということっぽいですね。

では、クラスを追加してみましょう。
クラスの追加は、プロジェクト>クラスの追加 で追加できます。

追加すると、またまたテンプレートを選択することができるので、『grasshopper』と検索し、Grasshopperテンプレートをベースにクラスを追加します。

ここまでくれば、後は同じですね。インプット・アウトプットを設定し、中身のロジックをプログラム化すればいいですね。

コンポーネントにアイコンを設定する方法

次に、コンポーネントの見栄えの話ですが、使用する際の選択のしやすさに関ってくるので、コンポーネントにアイコンを設定する方法を解説します。

アイコンは設定していなくてもコンポーネントとしては機能するので、とりあえず動けばいいやという自己開発の場合は、優先度低めです。

まずは、初期値を確認します。

/// <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
{
    get
    {
        // You can add image files to your project resources and access them like this:
        //return Resources.IconForThisComponent;
        return null;
    }
}

nullとなっていて何もないことになってますね。
ここを書き換えていくことになりますが、まずは、アイコン画像の用意と設定からです。

アイコン画像は24x24pixelsのサイズでpngの画像ファイルで用意します。
画像ファイルの作成はIllustratorでもPhotoshopでも何でもOKです。自由に使いやすいソフトで作成してみてください。

アイコンがデザインできれば、png形式で以下に保存します。

C:\Users\<ユーザー名>\source\repos\Dackel\Resources

『Resources』フォルダがない場合は作ってあげましょう。
では、プロジェクトにアイコン画像を設定していきましょう。
まずは、VisualStudio画面右側のにあるソリューションエクスプローラーの『Properties』をダブルクリックします。

遷移した画面でリソースにある『アセンブリ リソースを作成する/開く』をクリックします。

このとき、アプリケーションにも紛らわしく『リソース』があるのですが、ここは少し注意。

次に、作成しておいたアイコン画像を追加していきます。
リソースの追加>既存のファイルの追加 で画像ファイルを指定していきます。『Resources』フォルダに保存しておいたpng画像を選択します。

次は、コードの方で紐付けていきます。

/// <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
{
    get
    {
        // You can add image files to your project resources and access them like this:
        //return Resources.IconForThisComponent;
        return Dackel.Properties.Resources.CreateSetPoint;
    }
}

protected override System.Drawing.Bitmap Icon 内でnullになっていた箇所を書き換えていきます。
やることはここまでです。

これで再度ビルドすれば、アイコンが設定されてることを確認できます。

上はアイコン設定してみたコンポーネント、下はアイコン未設定のコンポーネントです。

関連記事

オリジナルコンポーネント開発の基本の基本から解説した記事やその続編として様々なインプットの仕方について解説した関連記事もありますのでぜひ。

オリジナルのGrasshopperコンポーネントの開発についてやさしく解説する－基本編
オリジナルのGrasshopperコンポーネントの開発についてやさしく解説する－続編(インプットの方法)