Wi-Fi Coverage Planner with a Signal Heat Map
This sample simulates planning Wi-Fi coverage for an office, demonstrating the HeatMap extension. Right-click the floor plan to install an access point or repeater at that spot, using buttons in the Diagram.contextMenu that add a node at ContextMenuTool.mouseDownPoint. The heat map draws each unit's signal strength as a circular gradient on the heat map.
Because wireless coverage is circular, the heat map's metric is set to
HeatMapMetric.Euclidean, with a chamferSize of 5 to keep
large areas round. Its spreadUnits is set to
HeatMapSpreadUnits.Document so that the coverage areas stay fixed to
the floor plan at every zoom level. The getTemperature function returns
each unit's transmit power, which determines how far into the color gradient its
signal starts and therefore how far it reaches.
Selecting a unit shows its Part.selectionAdornmentTemplate, holding the model name, the current power, and a slider for adjusting it. The slider handle sets GraphObject.isActionable so that the ActionTool calls its GraphObject.actionMove handler, which commits the new power to the model. Each committed transaction re-renders the heat map, so the coverage follows the slider.
Repeaters are not wired to the network, so one only operates when it is within the coverage of a wired access point or of another operating repeater. After every change the sample recomputes which repeaters have signal.
See HeatMap.ts for the TypeScript source of the extension.
GoJS Features in this sample
Context Menus
A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.
It is typical to implement a context menu as a "ContextMenu" Panel containing
"ContextMenuButton"s, as you can see in the code below in the assignment of the Node's
GraphObject.contextMenu
and
Diagram.contextMenu
properties. Each "ContextMenu" is just a "Vertical" Panel
Adornment that is shadowed.
Each "ContextMenuButton" is a Panel on which you can set the
GraphObject.click event
handler. In the event handler obj.part will be the whole context menu
Adornment. obj.part.adornedPart will be the adorned Node or Link. The bound
data is obj.part.data, which will be the same as
obj.part.adornedPart.data.
More information can be found in the GoJS learn pages.
Extensions
GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.
In addition to our samples, GoJS provides an
extensions gallery, showcasing the creation of custom tools and layouts. Those classes and samples are
written in TypeScript, available at ../extensionsJSM/, as
ECMAScript/JavaScript modules -- these use the
../release/go-module.js library. We recommend that you copy the files that
you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging
procedures.
More information can be found in the GoJS learn pages.
HTML Interaction
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS learn pages.