Live Camera Feeds
Event Log

This sample shows what a security dashboard might look like with GoJS. Nodes are used to represent the doors and cameras. When hovering over the camera a Tooltip will show its status (Live/Offline). You can make new cameras by dragging one into the Diagram from the Palette. Then it can be rotated, resized, and have the field of view changed using the Sector Reshaping Tool.

When a door is opened or camera detects motion Animations start to show the door opening along with a popup showing which user opened the door. This information is also logged below the Diagram in the "Event Log".

{ "class": "GraphLinksModel", "nodeDataArray": [ {"category":"door","loc":"535 610.5","ang":270,"width":57,"height":10,"key":"sub office 1"}, {"category":"door","loc":"616.5 665","width":51,"height":10,"key":"office 1"}, {"category":"door","loc":"746 738","key":"bath 1","width":44,"height":10}, {"category":"door","loc":"971 664","key":"office 2","width":52,"height":10}, {"category":"door","loc":"451.5 942","key":"main entrance","width":91,"height":10}, {"loc":"715 1094","category":"door","key":"lounge 1","ang":270,"width":57,"height":10}, {"loc":"752 1007","category":"door","key":"storage 1","width":56,"height":10}, {"loc":"1149.5 738","category":"door","key":"meeting 1","width":55,"height":10}, {"loc":"1638 407","category":"door","key":"meeting 2","width":56,"height":10}, {"loc":"2133 702","category":"door","key":"office 3","ang":90,"width":56,"height":10}, {"loc":"2310 701","category":"door","key":"second entrance","ang":90,"width":57,"height":10}, {"loc":"2026.5 407","category":"door","key":"lounge 2","width":55,"height":10}, {"loc":"1833.5 561","category":"door","key":"bath 2","width":45,"height":10}, {"loc":"1924 561","category":"door","key":"bath 3","width":46,"height":10}, {"loc":"2310 978.5","category":"door","key":"sub office 4","ang":90,"width":57,"height":10}, {"loc":"2133 904","category":"door","key":"sub office 2","ang":270,"width":57,"height":10}, {"loc":"2133 980","category":"door","key":"sub office 3","ang":90,"width":56,"height":10}, {"loc":"2255 1018","category":"door","key":"sub office 5","width":56,"height":10,"ang":180}, {"loc":"2310 599","category":"door","key":"office 4","width":55,"height":10,"ang":90}, {"loc":"2310 483","category":"door","key":"storage 2","ang":90,"width":58,"height":10}, {"loc":"2310 341","category":"door","key":"meeting 3","ang":270,"width":55,"height":10}, {"status":"live","loc":"546 675","category":"camera","sweep":90,"radius":160,"key":1}, {"status":"Live","loc":"704 1194","category":"camera","sweep":90,"radius":280,"key":2,"angle":180}, {"status":"Live","loc":"1937 683","category":"camera","sweep":92,"radius":111,"key":3,"angle":179}, {"status":"Live","loc":"2460 663","category":"camera","sweep":90,"radius":128,"key":4,"angle":90}, {"status":"Live","loc":"524 674","category":"camera","sweep":90,"radius":162,"key":5,"angle":90}, {"category":"camera","sweep":90,"radius":430,"angle":180,"status":"Live","key":-27,"loc":"2117 1167"}, {"category":"camera","sweep":90,"radius":475,"angle":90,"status":"Live","key":-28,"loc":"1577 142"}, {"category":"camera","sweep":90,"radius":430,"angle":90,"status":"Live","key":-29,"loc":"867 150"}, {"category":"camera","sweep":90,"radius":225,"angle":180,"status":"Live","key":-30,"loc":"1236 998"}, {"category":"camera","sweep":90,"radius":270,"angle":90,"status":"Live","key":-31,"loc":"1937 118"}, {"category":"camera","sweep":90,"radius":210,"angle":270,"status":"Live","key":-32,"loc":"1968 370"}, {"category":"camera","sweep":90,"radius":282,"angle":360,"status":"Live","key":-33,"loc":"2328 120"}, {"category":"camera","sweep":90,"radius":145,"angle":270,"status":"Live","key":-34,"loc":"1970 643"} ], "linkDataArray": []}

### GoJS Features in this sample

#### 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 Intro.

Related samples

#### Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples

#### Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

#### ToolTips

A tooltip is an Adornment that is shown when the mouse hovers over an object that has its GraphObject.toolTip set. The tooltip part is bound to the same data as the part itself.

It is typical to implement a tooltip as a "ToolTip" Panel holding a TextBlock or a Panel of TextBlocks and other objects. Each "ToolTip" is just an "Auto" Panel Adornment that is shadowed, and where the border is a rectangular Shape with a light gray fill. However you can implement the tooltip as any arbitrarily complicated Adornment.

More information can be found in the GoJS Intro.

Related samples

#### 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.

Related samples