create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
326 lines (289 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="A visual monitor of the position of kittens in a house." />
<meta itemprop="description" content="A visual monitor of the position of kittens in a house." />
<meta property="og:description" content="A visual monitor of the position of kittens in a house." />
<meta name="twitter:description" content="A visual monitor of the position of kittens in a house." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Kitten Monitor Using Background Image" />
<meta property="og:title" content="Kitten Monitor Using Background Image" />
<meta name="twitter:title" content="Kitten Monitor Using Background Image" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/kittenMonitor.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/kittenMonitor.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Kitten Monitor Using Background Image | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
const INTERVAL = 2000; // this constant parameter cannot be set later
myDiagram = new go.Diagram('myDiagramDiv', {
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
scaleComputation: (d, newsc) => {
// only allow scales that are a multiple of 0.1
var oldsc = Math.round(d.scale * 10);
var sc = oldsc + (newsc * 10 > oldsc ? 1 : -1);
if (sc < 1) sc = 1; // but disallow zero or negative!
return sc / 10;
},
'toolManager.hoverDelay': 100 // how quickly tooltips are shown
});
// the background image, a floor plan
myDiagram.add(
new go.Part({ // this Part is not bound to any model data
width: 840,
height: 570,
layerName: 'Background',
position: new go.Point(0, 0),
selectable: false,
pickable: false
})
.add(
new go.Picture('https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg')
)
);
// the template for each kitten, for now just a colored circle
myDiagram.nodeTemplate =
new go.Node({ locationSpot: go.Spot.Center })
.bind('location', 'loc') // specified by data
.add(
new go.Shape('Circle', {
width: 15, height: 15,
strokeWidth: 3,
// this tooltip shows the name and picture of the kitten
toolTip:
go.GraphObject.build('ToolTip')
.add(
new go.Panel('Vertical')
.add(
new go.Picture({ margin: 3 })
.bind('source', 'src', s => 'images/' + s + '.png'),
new go.TextBlock({ margin: 3 })
.bind('text', 'key')
)
)
})
.bind('fill', 'color', makeFill)
.bind('stroke', 'color', makeStroke)
);
if (INTERVAL > 20) { // don't animate if INTERVAL is <= 20 milliseconds
myDiagram.nodeTemplate.trigger('position', { duration: INTERVAL, easing: go.Animation.EaseLinear })
};
// pretend there are four kittens
myDiagram.model.nodeDataArray = [
{ key: 'Alonzo', src: '50x40', loc: new go.Point(220, 130), color: 2 },
{ key: 'Coricopat', src: '55x55', loc: new go.Point(420, 250), color: 4 },
{ key: 'Garfield', src: '60x90', loc: new go.Point(640, 450), color: 6 },
{ key: 'Demeter', src: '80x50', loc: new go.Point(140, 350), color: 8 }
];
// simulate some real-time position monitoring, once every INTERVAL milliseconds
function randomMovement() {
var model = myDiagram.model;
model.startTransaction('update locations');
var arr = model.nodeDataArray;
var picture = myDiagram.parts.first();
for (var i = 0; i < arr.length; i++) {
var data = arr[i];
// determine the new random location
var pt = data.loc;
var x = pt.x + 25 * (Math.random() - 0.5);
var y = pt.y + 25 * (Math.random() - 0.5);
// make sure the kittens stay inside the house
var b = picture.actualBounds;
if (x < b.x + 40 || x > b.right - 80) x = pt.x;
if (y < b.y + 40 || y > b.bottom - 40) y = pt.y;
model.set(data, 'loc', new go.Point(x, y));
}
model.commitTransaction('update locations');
}
function loop() {
setTimeout(() => {
randomMovement();
loop();
}, INTERVAL);
}
loop(); // start the simulation
// generate some colors based on hue value
function makeFill(number) {
return HSVtoRGB(0.1 * number, 0.5, 0.7);
}
function makeStroke(number) {
return HSVtoRGB(0.1 * number, 0.5, 0.5); // same color but darker (less V in HSV)
}
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0:
(r = v), (g = t), (b = p);
break;
case 1:
(r = q), (g = v), (b = p);
break;
case 2:
(r = p), (g = v), (b = t);
break;
case 3:
(r = p), (g = q), (b = v);
break;
case 4:
(r = t), (g = p), (b = v);
break;
case 5:
(r = v), (g = p), (b = q);
break;
}
return 'rgb(' + Math.floor(r * 255) + ',' + Math.floor(g * 255) + ',' + Math.floor(b * 255) + ')';
}
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 600px"></div>
<p>This diagram displays a monitored floor plan with several nodes (representing kittens) to view in real-time.</p>
<p>Every two seconds the kitten positions are updated</p>
<p>The <a href="../intro/tooltips.html">Tooltip</a> for each kitten shows its name and photo.</p>
<p>There is a custom <a>Diagram.scaleComputation</a> that limits the <a>Diagram.scale</a> values to multiples of 0.1.
</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>ToolTips</h4>
<p>
A tooltip is an <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shown when the mouse hovers over an object that has its <a href="../api/symbols/GraphObject.html#toolTip" target="api">GraphObject.toolTip</a> set.
The tooltip part is bound to the same data as the part itself.
</p>
<p>
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a href="../api/symbols/TextBlock.html" target="api">TextBlock</a> or a Panel of TextBlocks and other objects.
Each "ToolTip" is just an "Auto" Panel <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shadowed, and where the border is a rectangular <a href="../api/symbols/Shape.html" target="api">Shape</a> with a light gray fill.
However you can implement the tooltip as any arbitrarily complicated Adornment.
</p>
<p>
More information can be found in the <a href="../intro/tooltips.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tooltips">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Animation</h4>
<p>
<b>GoJS</b> offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
</p>
<p>
The <a href="../api/symbols/Diagram.html#animationManager" target="api">Diagram.animationManager</a> handles animations within a <a href="../api/symbols/Diagram.html" target="api">Diagram</a>.
The <a href="../api/symbols/AnimationManager.html" target="api">AnimationManager</a> automatically sets up and dispatches default animations, and has properties to customize and disable them.
Custom animations are possible by creating instances of <a href="../api/symbols/Animation.html" target="api">Animation</a> or <a href="../api/symbols/AnimationTrigger.html" target="api">AnimationTrigger</a>.
More information can be found in the <a href="../intro/animation.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#animation">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>