Production Line: A Factory Floor in 3D
A diagram outlining the processes of machining and assembling a gearbox. Multiple lines shape and refine parts to be assembled together. Click any machine to open its info card, and drag on the 3D image to spin the part that station produces.
The info card Adornment is defined through the nodes Part.selectionAdornmentTemplate. The 3D view is a shown by a Picture, rendered with the browser's built-in WebGL API. Each part is a small polygon mesh, and the assembled gearbox is just the component meshes merged. Setting GraphObject.isActionable on the Picture lets the ActionTool send mouse drags to rerender the part instead of moving the machine or panning the diagram.
Conveyor belts are drawn using Links stroked by three stacked Shapes in a background layer, kept moving by an infinite Animation of Shape.strokeDashOffset. Each belt also carries its own line's workpieces with Geometry.getPointAlongPath.
GoJS Features in this sample
SCADA Diagrams
SCADA (supervisory control and data acquisition) diagrams are used to display, control, and supervise machines and processes. GoJS is used worldwide to build human-machine interface diagrams in monitoring and control software. GoJS SCADA applications include power plant and refinery monitoring, heavy industry management, building security monitoring, and more.
Animation
GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS learn pages.
Item Arrays
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS learn pages.