Notice

Azure IoT Rocks digital twin project repository is moved to a seperate repostiory

Azure Digital Twin UI Application

Azure digital twin service can be used in implementing IoT digital twin solutions. Though It works mainly as part of the backend service, there is need to have a convinient UI for models/twins creation. This software is for that purpose. It can be used in real-world scenerio by supporting large scale digital twins management.

Getting Started

For out-of-the-box usage, directly install node library and run

1. CD to folder ./ADTUIOriginal
2. Run "npm install"
3. Executed "az login" if you have not
4. run "npm start"

- NOTE: if you want to specify the azure subscription id, please use command as below 
- (fill in your preferred azure subscription id)
- node .\backendSourceCode\server.js --subscription c7b211ba-6f34-45b8-8764-079581e882ea

It will pop up a browser window with initial dialog to choose which ADT service instance you want to operate.

For developer's usage, there are additional npm run options (inside folder ./ADTUIOriginal) to use

1. npm run preparedev - This should be run one time if you want to program your own code. It will install watchify, browserify and uglify.
2. npm run dev - It will monitor change in frontend code (such as javascript files in ./portalSourceCode) and refresh browser window automatically
3. npm run production - It will minify the frontend code and put the code to folder portalProduction

Prerequisites

• An Azure Digital Twin service subscription in any of your Azure subscriptions

- NOTE: You must go to access control page of your Azure digital twin service, 
- and assign role "Azure Digital Twin Data Owner" to the account you use to sign in with azure cli. 
- It might take a few minutes to take effect after your assign the role.

• Azure CLI
• Nodejs

Highlight Features

1. Full support of ADT editing functionalites, including relationship level properties editing
2. Create multiple customized layout of your twins for your purpose like in CAD tool. It is important for practical tasks.
3. Adopt heavily parallel asynchronize ADT service calls. It achieves a satisfying responding time for operation.
4. A flexible data selection feature at the start so you do not need to wait a long loading time when there are many twins.
5. Customizable twin and relationship visualization style, including importing image as twin's avarta

How To Use Tips

1. Start with a set of twins data

   • You can create a filter in start screen to query a subset of twins to start, instead of "ALL" filter
   • You can always append another filter (that queries another subset of twins) to the current workspace in "Source"
   • You can choose twins, and use "query inbound/outbound" button to expand the twins set in your workspace

2. You can multi-select twins and connections in topology view by pressing shift key

3. You can define color and icon image for twins and connections in "Models"

4. You can save the location of twins in topology view to layouts. You can call back twins' location by selecting a stored layout.

5. You can edit the connections line by inserting bend points or control points. You will create segmented edge line or bezier curve edge line.

6. There is a text search box above the twins list tree view. You can use it to search twins by typing substring and press enter till you find the twin you are looking for.

7. Double click the twin name in the twins list tree view will center to the twin in topology view.

Development

Plan

Azure IoT Rocks

New Feature update

• Mouse over twin or connection line will flah information
• ADT DTDL model can be created with GUI in application
• Rehaul UI to be align with the coming cloud host platform version
• Ehance editing functionality so you can easily creat right angle edge segments (like 90 degree) and align nodes in horizontal or vertial level
• Support edge shape editing (segment lines or bezier curve), thanks to Cytoscape edge editing plugin
• CAD enhancement

Purpose

• A convinient application to use together with ADT cloud service
• Demonstrate how ADT SDK can be used in your product development

Built With

• JQuery
• Cytoscape.js (Note: customization code is added to fulfill project requirement)
• Cytoscape Edge Editing extension (Note: customization code is added to fulfill project requirement)
• Azure Digital Twin Javascript SDK
• Azure Identity Javascript SDK
• W3.CSS
• JQuery UI Layout

Authors

Leo Lu

License

MIT