Hello everyone, I am a wolf at the end of the desert. Today I introduce a WPF open source project-NodeNetwork, which can help us quickly build and customize network topology maps.
1. Preface
In modern software development, data visualization and interactivity are receiving increasing attention. To achieve this, you usually need to use various charts, tables, network topology diagrams and other controls. However, for some special scenarios, these controls may not meet the needs, and at this time we need a customized way to display and process data. NodeNetwork is one such customization method. It is an open source project based on C#WPF that helps us quickly build and customize network topology maps.
The code for NodeNetwork is hosted on GitHub and is created and maintained by Wouterdek, a developer in the Netherlands. In this article, we will introduce and analyze NodeNetwork. We hope that readers can understand the core concepts, application scenarios and usage methods of NodeNetwork through this article, and also master some skills and experience in developing NodeNetwork.
Warehouse address: github.com/Wouterdek/NodeNetwork
Warehouse screenshot:
Warehouse source code structure:
2. Examples
1. Calculator Example
This example allows users to create mathematical expressions using the Node Editor. When a node is modified, the resulting values are automatically calculated and updated. This application includes node verification, custom node subclasses, value input/output, custom input editor, node list,...
下面是计算器示例应用程序的演示：
2. Code generator example
In this example, the user can create LUA code. Similar to the blueprints in Unreal Engine, the editor has an execution flow and a data flow. Custom input/output ports and node editors provide a more intuitive experience.
下面是代码生成器应用程序的截图：
3. Shader Editor Example
A more useful example of this library might be the shader editor.
下面是使用 NodeNetwork 制作的着色器编辑器示例的演示：
这些示例应用程序可在此处下载，其源代码包含在存储库中，库的二进制版本在 NuGet 上可用。
3. Characteristics
- Built specifically for. NET Framework 4.7.2 and. NET Core 3.1 or later.
- 开放、宽松的许可证-Apache-2.0 license。
- Interactive, reliable controls built with modern reactive MVVM code.
- Smooth pan and zoom controls.
- Automatic layout system.
- Highly customizable, but easy to use by default.
- Strong node and connection verification support.
- A large number of unit tests are supported.
- ...
4. The core concept of NodeNetwork
以下内容可参考仓库组件说明页。
1. Node
Nodes are the most basic elements in a NodeNetwork and can represent any data source or processing unit. Each node can contain one or more input and output ports, which represent the data received and output by the node, respectively. There are several commonly used node types built into NodeNetwork, such as constant nodes, calculation nodes, input and output nodes, etc., and custom node types are also supported.
2. Connection
Connection is a core concept in NodeNetwork and is used to represent the data transmission relationship between nodes. Each connection has a source port and a destination port. The source port represents the source of the data and the destination port represents the destination of the data. The connection can also carry some metadata to describe some additional information about the connection, such as color, line width, etc.
3. Port (Port)
A port is the input or output endpoint of a node and is used to connect to other nodes. Each port has a type that represents the type of data that the port can receive or output. Ports can also have some other attributes, such as labels, descriptions, etc., to describe the functions and roles of the port.
4. Graphical Interface (GUI)
NodeNetwork is implemented based on the WPF framework, so it has a powerful graphical interface (GUI) system. In NodeNetwork, each node and connection can be displayed as a graphical element, and users can manipulate these elements by dragging, zooming, etc.
5. Layout
Layout is another important concept in NodeNetwork and is used to control the location and size of nodes and connections. NodeNetwork provides a variety of different layout methods, such as free layout, grid layout, force-oriented layout, etc. Users can choose different layout methods according to specific needs, and can customize and adjust the layout through code or graphical interface.
6. Serialization and deserialization
In actual applications, we need to save nodes and connections in a file or database, or read nodes and connections from a file or database. To achieve this, NodeNetwork provides serialization and deserialization capabilities. Serialization is the process of transforming nodes and connections into a data stream, and deserialization is the process of transforming a data stream into nodes and connections. NodeNetwork supports a variety of different serialization formats, such as XML, JSON, binary, etc. Users can choose different formats according to their specific needs.
5. Application scenarios of NodeNetwork
NodeNetwork has a wide range of application scenarios, some of which are introduced below:
1. data processing and analysis
NodeNetwork can help us quickly build tools for data processing and analysis. For example, we can create a graphical workflow that connects different data processing nodes to achieve data preprocessing, transformation, and analysis.
2. graphical editor
NodeNetwork can help us quickly build graphical editors. For example, we can create a graphical interface for editing and configuring certain parameters or options that can be interacted and passed through nodes and connections.
3. Visualization and interactive displays
NodeNetwork can help us quickly build visual and interactive presentation tools. For example, we can create a graphical network topology diagram to show the connection relationship and status of certain devices or systems. Users can interact and control through nodes and connections, such as adding, deleting, and modifying nodes and connections.
6. How to use NodeNetwork
NodeNetwork的使用方法非常简单，下面介绍其中的几个步骤(参考不到30行代码的Hello world)。
首先，使用 Dotnet 8创建WPF项目，项目命名为NodeNetworkTest，您可以使用 .NET Framework 4.7.2 以上或 .NET CORE 3.x 以上，站长使用 .NET 8只是8预览版2刚出来试试而已。
1. Install NodeNetwork
NodeNetwork can be installed through NuGet Package Manager. In Visual Studio, open the Package Manager Console and enter the following command to install NodeNetwork:
Install-Package NodeNetwork
2. Register for NodeNetwork view
MVVM在整个NodeNetwork库中都在贯彻使用。有关MVVM的介绍请点击这里查看。使用库中的元素，您需要创建合适的视图，并为其提供相应的ViewModel实例。
在使用库之前，请在App.xaml.cs文件的OnStartup方法内使用NNViewRegistrar.RegisterSplat()方法将NodeNetwork的视图和相应的ViewModel进行注册关联。
using System.Windows;
using NodeNetwork;
namespace NodeNetworkTest;
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
NNViewRegistrar.RegisterSplat();
}
}
3. create a view
打开MainWindow.xaml，添加NodeNetwork命名空间xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"，并添加NetworkView视图<nodenetwork:NetworkView x:Name="networkView" />，NetworkView表示整个网络拓扑图：
<Window x:Class="NodeNetworkTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<nodenetwork:NetworkView x:Name="networkView" />
</Grid>
</Window>
4. Create nodes and connections
In NodeNetwork, creating nodes and connections is very simple. First, we need to create a NetworkViewModel, which is the ViewModel of the NetworkView view and can be created using the following code:
var network = new NetworkViewModel();
networkView.ViewModel = network;
Then create the first node with the following code:
var node1 = new NodeViewModel();
node1.Name = "节点1";
network.Nodes.Add(node1);
And create an input port for the first node:
var node1Input = new NodeInputViewModel();
node1Input.Name = "节点1输入";
node1.Inputs.Add(node1Input);
Create the second node and create an output port for this node in the same way:
var node2 = new NodeViewModel();
node2.Name = "节点2";
network.Nodes.Add(node2);
var node2Output = new NodeOutputViewModel();
node2Output.Name = "节点2输出";
node2.Outputs.Add(node2Output);
Finally, we can connect the input port of Node 1 and the output port of Node 2 together using the following code:
var connection = new ConnectionViewModel(network, node1Input, node2Output);
network.Connections.Add(connection);
The complete code is as follows:
using DynamicData;
using NodeNetwork.ViewModels;
using System.Windows;
namespace NodeNetworkTest;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 创建NetworkView视图的ViewModel实例
var network = new NetworkViewModel();
// 给视图(networkView)赋值viewmodel(network)
networkView.ViewModel = network;
// 创建第一个节点ViewModel，设置它的名称并将此节点加入到network
var node1 = new NodeViewModel();
node1.Name = "节点1";
network.Nodes.Add(node1);
// 创建第一个节点的输入端口ViewModel，设置它的名称并加入第一个节点
var node1Input = new NodeInputViewModel();
node1Input.Name = "节点1输入";
node1.Inputs.Add(node1Input);
// 创建第二个节点ViewModel，设置它的名称并将此节点加入到network, 并以同样的方式给此节点添加一个输出Create the second node viewmodel, set its name, add it to the network and add an output in a similar fashion.
var node2 = new NodeViewModel();
node2.Name = "节点2";
network.Nodes.Add(node2);
var node2Output = new NodeOutputViewModel();
node2Output.Name = "节点2输出";
node2.Outputs.Add(node2Output);
// 将节点1的输入端口和节点2的输出端口连接到一起
var connection = new ConnectionViewModel(network, node1Input, node2Output);
network.Connections.Add(connection);
}
}
Run the program to see the effect:
示例代码已经全部给了，你也可以戳这克隆。
5. layout
In NodeNetwork, layout is very flexible and free. We can layout it through code or a graphical interface. For example, we can place nodes in specified locations with the following code:
node.Position = new Point(100, 100);
通过以下代码调整整个网络拓扑图的布局(参考布局文档)：
ForceDirectedLayouter layouter = new ForceDirectedLayouter();
var config = new Configuration
{
Network = yourNetwork,
};
layouter.Layout(config, 10000);
6. serialization and deserialization
In NodeNetwork, serialization and deserialization are very simple. We can serialize nodes and connections into XML format using the following code:
var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var writer = new StringWriter();
serializer.Serialize(writer, nodeNetwork);
We can then save the XML string to a file or database. Desoralization is also very simple. We can deserialize nodes and connections from XML strings with the following code:
var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var reader = new StringReader(xmlString);
var nodeNetwork = (NodeNetworkViewModel)serializer.Deserialize(reader);
VII. Summary
NodeNetwork is a very practical and flexible C#WPF open source project. It can help us quickly build a graphical network topology diagram to realize the interaction and transfer of nodes and connections. NodeNetwork provides rich functions and features, such as customization, layout and adjustment, serialization and deserialization of nodes and connections, etc., which can meet various application requirements. NodeNetwork has a wide range of application scenarios, such as data processing and analysis, graphical editors, visualization and interactive displays, etc. The use of NodeNetwork is very simple. We only need to install NodeNetwork, create nodes and connections, lay out and adjust, serialize and deserialize.
- Start Guide
有关使用此库的简单快速入门指南，请参阅此页面上的说明书章节。 该文档包括设置信息、说明书章节、示例和 API 参考。
- license
该库在 Apache 许可证 2.0 下获得许可。（见 choosealicense.com/licenses/apache-2.0 简要介绍）此许可证的副本包含在 LICENSE 下的存储库中。
- document
文档可在此处获得。如果要对文档进行更改，可以通过向 gh-pages 分支发出拉取请求来实现。
- contribution
These operations are very popular on GitHub pages: error reporting, patches, feature requests, pull requests...
- WeChat technical exchange group: Add WeChat (codewf) comment "Join the group"
- QQ technical exchange group: 771992300.