Blazor component for clientIO/joint.
I am using Vs2022 and net 6 SDK.
This Blazor WASM project uses the JointJS library which could be repaid to develop Web visualization and interacts with diagrams and graphs.
BlazorAppJointJS (itridev-blazorapp.azurewebsites.net)
JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.
Please see https://jointjs.com for more information, demos and documentation.
Or check out JointJS mind-map documentation.
This project inspires by the DigitalTwins-CodeFirst-Dotnet Telstra project.
It intends to make a better way for developers to interact with Azure Digital Twins(ADT). Telstra has developed a “code-first” approach which sees it leverage common developer Plain Old Class Objects (POCO) together with Azure Digital Twins and a new Digital Twins library that may be preferred to working with DTDL directly.
https://github.com/telstra/DigitalTwins-CodeFirst-dotnet
This defined as a meta model. we will Implementing all essential models in DTDL was straightforward given the capabilities of DTDL. And it demo with JointJS + telstra/DigitalTwins-CodeFirst-dotnet sample.
check your solution and add those PackageReference in BlazorAppJointJS.csproj.
Twin models can be represented are POCO classes by deriving from the TwinBase
class along with a DigitalTwin
attribute. The model contents are the properties of the class and the schema is determined by the property's attribute. Any additional data can be filled in with the attribute constructor. An example is shown below.
[DigitalTwin(DisplayName = "Sample Twin")]
public class SampleTwin : TwinBase
{
[TwinProperty("testProperty")]
public string Property { get; set; }
[TwinTelemetry]
public bool Flag { get; set; }
[TwinComponent]
public SimpleTwin ComponentTwin { get; set; }
[TwinRelationship(MaxMultiplicity = 1, MinMultiplicity = 2)]
public TwinWithNestedObject TwinRelationship { get; set; }
[TwinProperty]
public List<int> IntArray { get; set; }
[TwinProperty]
public Dictionary<string, string> StringMap { get; set; }
}
The class can then be initialised as an object and used as a digital twin
In order to use serialisation the ModelLibrary class must be initialised and with it a DigitalTwinSerialiser object must be created as shown below
var modelLibrary = new ModelLibrary();
var Serializer = new DigitalTwinSerializer(modelLibrary);
Model serialisation is done with the following two functions
Serializer.SerializeModel<T>()
Serializer.SerializeModel(Type t)
Both functions return the DTDL as a string. The first function takes the class type as a generic and the second takes the class type as a parameter of the Type
class.
Twin serialisation can be done with the following functions
Serializer.SerializeTwin(object twin)
Serializer.SerializeTwin<T>(T twin)
Both functions return the DTDL as a string however the function with the generic is a little faster.
- Create or upload files
- Add files using the command line or push an existing Git repository with the following command:
cd existing_repo
git remote add origin https://gitlab.com/minhaolee/blazorjointjs.git
git branch -M main
git push -uf origin main
The project follows a Feature Branch Workflow. So for each feature or bug a new branch must be created and all changes must be done on that branch. All commits must have a verified signature.
- Clone the project on your local machine
- Create a new feature/bug branch from master
- Push the changes
- Submit a pull request
MIT
This project is based on the Microsoft SDK recommendations outlined at https://azure.github.io/azure-sdk/dotnet_introduction.html.
The specifications for Digital Twins Definition Language version 2 (DTDLv2), are available from Microsoft under a Creative Commons (Attribution) licence at: https://github.com/Azure/opendigitaltwins-dtdl
A diagram of the structure of DTDLv2 is provided in the docs folder docs/pics/DTDLv2-structure.png
Telstra/DigitalTwins-CodeFirst-dotnet at : https://github.com/telstra/DigitalTwins-CodeFirst-dotnet
minhaolee/blazorjointjs at : https://gitlab.com/minhaolee/blazorjointjs