ZeroTouch Nodeを使ってDynamoをカスタマイズしよう8_総集編

皆様こんにちは。
AMDlabの秋山です。

前回は、第7弾として「ボタン付きノード」を作成し、
ModelとViewを分離したカスタムUIノードの基本を紹介しました。

今回はその応用編・総集編として、次の3つのUIを持つノードを作っていきます。

スライダー付きノード
トグルスイッチ付きノード
スライダー＋トグルの複合UIノード

ポイントは、「ModelとViewの連携方法を拡張する」こと。
つまり、ボタンだけでなく、ユーザーの操作値をDynamo内に反映させることを目指します。

1. スライダー付きノード

ButtonNodeとの違い

ボタンは「イベントトリガー」でしたが、スライダーは「値の変化」を扱います。
そのため、View側でスライダーの値が変わるたびに、Modelへ通知して出力を更新します。

SliderNodeModel.cs

using Dynamo.Graph.Nodes;
using ProtoCore.AST.AssociativeAST;
using Newtonsoft.Json;
using System.Collections.Generic;

namespace MyLibrary.UI
{
[NodeName("Slider Node")]
[NodeDescription("スライダー付きのカスタムノード")]
[IsDesignScriptCompatible]
public class SliderNodeModel : NodeModel
{
private double _sliderValue = 0;

[JsonConstructor]
public SliderNodeModel() { }

public double SliderValue
{
get => _sliderValue;
set
{
_sliderValue = value;
OnNodeModified(true);
}
}

public override IEnumerable<AssociativeNode> BuildOutputAst(List<AssociativeNode> inputAstNodes)
{
var result = AstFactory.BuildDoubleNode(_sliderValue);
return new[] { AstFactory.BuildAssignment(GetAstIdentifierForOutputIndex(0), result) };
}
}
}

using Dynamo.Graph.Nodes;

using ProtoCore.AST.AssociativeAST;

using Newtonsoft.Json;

using System.Collections.Generic;

namespace MyLibrary.UI

{

[NodeName("Slider Node")]

[NodeDescription("スライダー付きのカスタムノード")]

[IsDesignScriptCompatible]

public class SliderNodeModel : NodeModel

{

private double _sliderValue = 0;

[JsonConstructor]

public SliderNodeModel() { }

public double SliderValue

{

get => _sliderValue;

set

{

_sliderValue = value;

OnNodeModified(true);

}

public override IEnumerable<AssociativeNode> BuildOutputAst(List<AssociativeNode> inputAstNodes)

{

var result = AstFactory.BuildDoubleNode(_sliderValue);

return new[] { AstFactory.BuildAssignment(GetAstIdentifierForOutputIndex(0), result) };

}

SliderNodeView.cs

using System.Windows.Controls;
using Dynamo.Controls;
using Dynamo.Wpf;

namespace MyLibrary.UI
{
public class SliderNodeView : INodeViewCustomization<SliderNodeModel>
{
public void CustomizeView(SliderNodeModel model, NodeView nodeView)
{
var slider = new Slider
{
Minimum = 0,
Maximum = 100,
Value = model.SliderValue,
Margin = new System.Windows.Thickness(5)
};

slider.ValueChanged += (s, e) =>
{
model.SliderValue = slider.Value;
};

nodeView.inputGrid.Children.Add(slider);
}

public void Dispose() { }
}
}

using System.Windows.Controls;

using Dynamo.Controls;

using Dynamo.Wpf;

namespace MyLibrary.UI

{

public class SliderNodeView : INodeViewCustomization<SliderNodeModel>

{

public void CustomizeView(SliderNodeModel model, NodeView nodeView)

{

var slider = new Slider

{

Minimum = 0,

Maximum = 100,

Value = model.SliderValue,

Margin = new System.Windows.Thickness(5)

};

slider.ValueChanged += (s, e) =>

{

model.SliderValue = slider.Value;

};

nodeView.inputGrid.Children.Add(slider);

}

public void Dispose() { }

}

2. トグルスイッチ付きノード

ToggleNodeModel.cs

using Dynamo.Graph.Nodes;
using ProtoCore.AST.AssociativeAST;
using Newtonsoft.Json;
using System.Collections.Generic;

namespace MyLibrary.UI
{
[NodeName("Toggle Node")]
[NodeDescription("トグルスイッチ付きノード")]
[IsDesignScriptCompatible]
public class ToggleNodeModel : NodeModel
{
private bool _isOn = false;

[JsonConstructor]
public ToggleNodeModel() { }

public bool IsOn
{
get => _isOn;
set
{
_isOn = value;
OnNodeModified(true);
}
}

public override IEnumerable<AssociativeNode> BuildOutputAst(List<AssociativeNode> inputAstNodes)
{
var result = AstFactory.BuildBooleanNode(_isOn);
return new[] { AstFactory.BuildAssignment(GetAstIdentifierForOutputIndex(0), result) };
}
}
}

using Dynamo.Graph.Nodes;

using ProtoCore.AST.AssociativeAST;

using Newtonsoft.Json;

using System.Collections.Generic;

namespace MyLibrary.UI

{

[NodeName("Toggle Node")]

[NodeDescription("トグルスイッチ付きノード")]

[IsDesignScriptCompatible]

public class ToggleNodeModel : NodeModel

{

private bool _isOn = false;

[JsonConstructor]

public ToggleNodeModel() { }

public bool IsOn

{

get => _isOn;

set

{

_isOn = value;

OnNodeModified(true);

}

public override IEnumerable<AssociativeNode> BuildOutputAst(List<AssociativeNode> inputAstNodes)

{

var result = AstFactory.BuildBooleanNode(_isOn);

return new[] { AstFactory.BuildAssignment(GetAstIdentifierForOutputIndex(0), result) };

}

💻 ToggleNodeView.cs

using System.Windows.Controls;
using Dynamo.Controls;
using Dynamo.Wpf;

namespace MyLibrary.UI
{
public class ToggleNodeView : INodeViewCustomization<ToggleNodeModel>
{
public void CustomizeView(ToggleNodeModel model, NodeView nodeView)
{
var toggle = new CheckBox
{
Content = "ON / OFF",
IsChecked = model.IsOn,
Margin = new System.Windows.Thickness(5)
};

toggle.Checked += (s, e) => model.IsOn = true;
toggle.Unchecked += (s, e) => model.IsOn = false;

nodeView.inputGrid.Children.Add(toggle);
}

public void Dispose() { }
}
}

using System.Windows.Controls;

using Dynamo.Controls;

using Dynamo.Wpf;

namespace MyLibrary.UI

{

public class ToggleNodeView : INodeViewCustomization<ToggleNodeModel>

{

public void CustomizeView(ToggleNodeModel model, NodeView nodeView)

{

var toggle = new CheckBox

{

Content = "ON / OFF",

IsChecked = model.IsOn,

Margin = new System.Windows.Thickness(5)

};

toggle.Checked += (s, e) => model.IsOn = true;

toggle.Unchecked += (s, e) => model.IsOn = false;

nodeView.inputGrid.Children.Add(toggle);

}

public void Dispose() { }

}

3. 複合UIノード（スライダー＋トグル）

最後に、スライダーとトグルを組み合わせたUIノードを作ります。
複合UIの実装では、複数の要素を同時にModelへ反映させる点がポイントです。

CompositeNodeView.cs

public void CustomizeView(CompositeNodeModel model, NodeView nodeView)
{
var stack = new StackPanel();

var slider = new Slider { Minimum = 0, Maximum = 10, Value = model.SliderValue };
var toggle = new CheckBox { Content = "有効化", IsChecked = model.IsEnabled };

slider.ValueChanged += (s, e) => model.SliderValue = slider.Value;
toggle.Checked += (s, e) => model.IsEnabled = true;
toggle.Unchecked += (s, e) => model.IsEnabled = false;

stack.Children.Add(slider);
stack.Children.Add(toggle);

nodeView.inputGrid.Children.Add(stack);
}

public void CustomizeView(CompositeNodeModel model, NodeView nodeView)

{

var stack = new StackPanel();

var slider = new Slider { Minimum = 0, Maximum = 10, Value = model.SliderValue };

var toggle = new CheckBox { Content = "有効化", IsChecked = model.IsEnabled };

slider.ValueChanged += (s, e) => model.SliderValue = slider.Value;

toggle.Checked += (s, e) => model.IsEnabled = true;

toggle.Unchecked += (s, e) => model.IsEnabled = false;

stack.Children.Add(slider);

stack.Children.Add(toggle);

nodeView.inputGrid.Children.Add(stack);

}

コーディングが完了したら、Visual Studioでプロジェクトをビルドします。ビルドが成功すると、指定したプロジェクトフォルダ内の「bin\Debug」または「bin\Release」ディレクトリにDLLファイルが生成されます。今回は、「extra」フォルダを作成して、フォルダ内にXMLデータを格納します。

Dynamoを開き、[ファイル] タブから「ライブラリを読み込む」を選択し、生成したDLLファイルを選択してインポートします。
インポート後、新しいノード（カスタムノード）としてそれぞれのノードの配置が利用可能になりましたので、配置してみます。

これまで全8回にわたって、ZeroTouch Nodeを通して「C#でDynamoノードを自作する」方法を解説してきました。
最初はシンプルな入力ノードから始まり、今回はボタン・スライダー・トグルなど、UIを持つインタラクティブなノードまで到達しました。

ZeroTouch Nodeの魅力は、Dynamoの可能性を自分のアイデア次第で拡張できることです。
自分でノードを作れるようになると、日々の設計業務やBIMフローの中で
「もう少しこうしたい」という思いを、形にして実現できるようになります。

これからもAMDlabでは、BIM・Dynamo・プログラミングを組み合わせた
“設計を拡張する技術”をテーマに、さまざまな実験や知見を発信していきます。

ぜひ皆さんも、自分だけのノード作りに挑戦してみてください。

AMDlabでは、開発に力を貸していただけるエンジニアさんを大募集しております。少しでもご興味をお持ちいただけましたら、カジュアルにお話するだけでも大丈夫ですのでお気軽にご連絡ください！
中途求人ページ: https://www.amd-lab.com/recruit-list/mid-career

カジュアル面談がエントリーフォームからできるようになりました。
採用種別を「カジュアル面談（オンライン）」にして必要事項を記載の上送信してください！
エントリーフォーム: https://www.amd-lab.com/entry

AMDlabのSNSアカウントです！ぜひフォローお願いします✨

■ X（旧Twitter）：https://x.com/amdlabinc
■ Instagram：https://www.instagram.com/amdlabinc/
■ Facebook：https://www.facebook.com/amdlab.lnc/

BIM: Dynamo Revit
Tech: C#

最適化を理解する：考え方とツールの紹介前の記事

建築を中心として、3Dモデリング、IoT、デジタルファブリケーション、Webなどの様々なテクノロジーに関する記事を提供しています。