169 lines
5.9 KiB
HTML
169 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Shop Floor Monitor</title>
|
|
<meta name="description" content="A state monitoring diagram." />
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
var $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{ "animationManager.isEnabled": false,
|
|
initialContentAlignment: go.Spot.Center
|
|
});
|
|
|
|
// conversion functions for Bindings in the Node template:
|
|
|
|
function nodeTypeImage(type) {
|
|
switch (type) {
|
|
case "S2": return "images/voice atm switch.jpg";
|
|
case "S3": return "images/server switch.jpg";
|
|
case "P1": return "images/general processor.jpg";
|
|
case "P2": return "images/storage array.jpg";
|
|
case "M4": return "images/iptv broadcast server.jpg";
|
|
case "M5": return "images/content engine.jpg";
|
|
case "I1": return "images/pc.jpg";
|
|
default: return "images/pc.jpg";
|
|
}
|
|
if (type.charAt(0) === "S") return
|
|
if (type.charAt(0) === "P") return "images/general processor.jpg";
|
|
if (type.charAt(0) === "M")
|
|
return "images/pc.jpg";
|
|
}
|
|
|
|
function nodeProblemConverter(msg) {
|
|
if (msg) return "red";
|
|
return null;
|
|
}
|
|
|
|
function nodeOperationConverter(s) {
|
|
if (s >= 2) return "TriangleDown";
|
|
if (s >= 1) return "Rectangle";
|
|
return "Circle";
|
|
}
|
|
|
|
function nodeStatusConverter(s) {
|
|
if (s >= 2) return "red";
|
|
if (s >= 1) return "yellow";
|
|
return "green";
|
|
}
|
|
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Vertical",
|
|
{ locationObjectName: "ICON" },
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
$(go.Panel, "Spot",
|
|
$(go.Panel, "Auto",
|
|
{ name: "ICON" },
|
|
$(go.Shape,
|
|
{ fill: null, stroke: null },
|
|
new go.Binding("background", "problem", nodeProblemConverter)),
|
|
$(go.Picture,
|
|
{ margin: 5 },
|
|
new go.Binding("source", "type", nodeTypeImage))
|
|
), // end Auto Panel
|
|
$(go.Shape, "Circle",
|
|
{ alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft,
|
|
width: 12, height: 12, fill: "orange" },
|
|
new go.Binding("figure", "operation", nodeOperationConverter)),
|
|
$(go.Shape, "Triangle",
|
|
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
|
|
width: 12, height: 12, fill: "blue" },
|
|
new go.Binding("fill", "status", nodeStatusConverter))
|
|
), // end Spot Panel
|
|
$(go.TextBlock,
|
|
new go.Binding("text"))
|
|
); // end Node
|
|
|
|
|
|
// conversion function for Bindings in the Link template:
|
|
|
|
function linkProblemConverter(msg) {
|
|
if (msg) return "red";
|
|
return "gray";
|
|
}
|
|
|
|
myDiagram.linkTemplate =
|
|
$(go.Link, go.Link.AvoidsNodes,
|
|
{ corner: 3 },
|
|
$(go.Shape,
|
|
{ strokeWidth: 2, stroke: "gray" },
|
|
new go.Binding("stroke", "problem", linkProblemConverter))
|
|
);
|
|
|
|
load();
|
|
|
|
|
|
// simulate some real-time problem monitoring, once every two seconds:
|
|
function randomProblems() {
|
|
var model = myDiagram.model;
|
|
// update all nodes
|
|
var arr = model.nodeDataArray;
|
|
for (var i = 0; i < arr.length; i++) {
|
|
data = arr[i];
|
|
data.problem = (Math.random() < 0.8) ? "" : "Power loss due to ...";
|
|
data.status = Math.random() * 3;
|
|
data.operation = Math.random() * 3;
|
|
model.updateTargetBindings(data);
|
|
}
|
|
// and update all links
|
|
arr = model.linkDataArray;
|
|
for (i = 0; i < arr.length; i++) {
|
|
data = arr[i];
|
|
data.problem = (Math.random() < 0.7) ? "" : "No Power";
|
|
model.updateTargetBindings(data);
|
|
}
|
|
}
|
|
function loop() {
|
|
setTimeout(function() { randomProblems(); loop(); }, 2000);
|
|
}
|
|
loop(); // start the simulation
|
|
}
|
|
|
|
function load() {
|
|
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div id="myDiagramDiv" style="border: solid 1px black; width:80%; height:400px"></div>
|
|
<p>
|
|
This monitoring diagram continuously shows the state of a number of stations on an imaginary shop floor.
|
|
Every two seconds it updates the display, showing some random problems via highlighting.
|
|
You can add nodes and links by adding data to the model text below and then clicking "Load".
|
|
</p>
|
|
<button onclick="load()">Load</button>
|
|
<br />
|
|
<textarea id="mySavedModel" style="width:100%;height:300px">
|
|
{ "nodeDataArray": [
|
|
{"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 225"},
|
|
{"key":"2", "text":"Machine 17", "type":"M4", "loc":"183.5 94"},
|
|
{"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 211.5"},
|
|
{"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 225"},
|
|
{"key":"5", "text":"Machine 18", "type":"M5", "loc":"288.5 95"},
|
|
{"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 211"},
|
|
{"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ],
|
|
"linkDataArray": [
|
|
{"from":"1", "to":"2"},
|
|
{"from":"1", "to":"3"},
|
|
{"from":"1", "to":"4"},
|
|
{"from":"4", "to":"5"},
|
|
{"from":"4", "to":"6"},
|
|
{"from":"7", "to":"2"},
|
|
{"from":"7", "to":"3"}
|
|
]}
|
|
</textarea>
|
|
<p>
|
|
For another monitoring example, see the <a href="kittenMonitor.html">Kitten Monitor</a> sample.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |