gojs

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thermometer</title> <meta name="description" content="A thermometer." /> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="../release/go.js"></script> <script src="../assets/js/goSamples.js"></script>  <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don"t need to call this var $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv", { layout: $(go.GridLayout, { isOngoing: false, wrappingColumn: 4 }), "animationManager.isEnabled": false, "undoManager.isEnabled": true }); // ResizingTool customization: add just one handle, instead of eight myDiagram.toolManager.resizingTool.makeAdornment = function(resizeObj) { return $(go.Adornment, "Spot", { locationSpot: go.Spot.Center, category: this.name, adornedObject: resizeObj }, $(go.Placeholder), this.makeHandle(resizeObj, go.Spot.Top) ); } var ORIGINAL_HEIGHT = 400; /* The thermometer node consists of a Spot Panel with 6 children: 0: The BarSpace, which is the main element and 1: The Farenheit scale, on the left 2: The Celsius scale, on the right 3: The shape that represents alcohol or mercury in the thermometer 4: (Cosmetic) The stem that attaches to the bulb 5: (Cosmetic) The bulb The two Graduated Panels use alignmentFocusName to make sure their main Shapes line up with the Spot Panel"s main element, BarSpace. 1|0|2 1|0|2 1|0|2 1|0|2 1|3|2 1|3|2 |4| |5| */ myDiagram.nodeTemplate = $(go.Node, "Spot", { resizable: true, resizeObjectName: "BarSpace", locationObjectName: "Bulb", locationSpot: go.Spot.Center }, $(go.Shape, { name: "BarSpace", width: 25, height: ORIGINAL_HEIGHT, strokeWidth: 0, fill: "rgba(0,0,0,.05)" }, new go.Binding("height").makeTwoWay() ), // Farenheit scale, on the left: $(go.Panel, "Graduated", { background: "white", graduatedMin: -40, graduatedMax: 80, graduatedTickBase: 0, graduatedTickUnit: 1, alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft, alignmentFocusName: "line" }, new go.Binding("graduatedMax", "", function(data) { if (data.type === "scaling") return 80; return (data.height * 0.3) - 40; }), $(go.Shape, { name: "line", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray" }, new go.Binding("height")), $(go.Shape, { alignmentFocus: go.Spot.Bottom, interval: 2, strokeWidth: 1, geometryString: "M0 0 V15" }), $(go.Shape, { alignmentFocus: go.Spot.Bottom, interval: 10, strokeWidth: 2, geometryString: "M0 0 V20" }), $(go.TextBlock, { interval: 20, font: "22px Georgia", alignmentFocus: new go.Spot(1, 0.5, 20, 0) }), // Mark 32 degrees on the farenheit scale: $(go.TextBlock, { interval: 32, graduatedFunction: function(n) { return n === 32 ? "32—" : "" }, font: "bold 12px Georgia", stroke: "red", alignmentFocus: new go.Spot(1, 0.5, 20, 0) }) ), // Mercury/alcohol bar, which represents the values of farenheit and celsius $(go.Shape, { width: 25, strokeWidth: 0, fill: "red", alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom, }, new go.Binding('fill', 'type', function(t) { return t === "scaling" ? "dimgray" : "red" }), // To determine the level, look at both data.farenheit and data.celsius, but prefer celsius new go.Binding("height", "", function(data) { var thermometerHeight = ORIGINAL_HEIGHT; if (data.type === "scaling") thermometerHeight = data.height; if (data.celsius !== undefined) { // (celsius + minimum value) / (total celsius range) * height return Math.max(0, ((data.celsius + 40) / 67) * thermometerHeight); } else if (data.farenheit !== undefined) { // (farenheit + minimum value) / (total farenheit range) * height return Math.max(0, ((data.farenheit + 40) / 120) * thermometerHeight); } else { return 0; } }), new go.Binding("maxSize", "height", function(h) { return new go.Size(NaN, h) }) ), // Celsius scale, on the right: $(go.Panel, "Graduated", { background: "white", // -40 to 27 because we picked -40 to 80 for farenheit, and want them to line up graduatedMin: -40, graduatedMax: 27, graduatedTickBase: 0, graduatedTickUnit: 1, alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight, alignmentFocusName: "line2" }, new go.Binding("graduatedMax", "", function(data) { if (data.type === "scaling") return 27; return (data.height * 0.1675) - 40; }), $(go.Shape, { name: "line2", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray" }, new go.Binding("height")), $(go.Shape, { interval: 2, strokeWidth: 1, geometryString: "M0 0 V15" }), $(go.Shape, { interval: 10, strokeWidth: 2, geometryString: "M0 0 V20" }), $(go.TextBlock, { interval: 20, textAlign: "left", font: "22px Georgia", alignmentFocus: go.Spot.Left, segmentOffset: new go.Point(0, 22) }) ), // Cosmetic: The stem and bulb $(go.Shape, { width: 25, height: 10, strokeWidth: 0, fill: "red", alignment: go.Spot.Bottom }, new go.Binding('fill', 'type', function(t) { return t === "scaling" ? "dimgray" : "red" }) ), $(go.Shape, "Circle", { name: "Bulb", width: 55, height: 55, strokeWidth: 0, fill: "red", alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, }, new go.Binding('fill', 'type', function(t) { return t === "scaling" ? "dimgray" : "red" }) ) ); // end node template myDiagram.model = new go.GraphLinksModel( [ { height: 400, celsius: 20 }, { height: 250, celsius: -10 }, { type: "scaling", height: 400, farenheit: 22 /*, celsius: 0*/ }, { type: "scaling", height: 250, farenheit: 68 /*, celsius: 20*/ }, ]); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width:800px; height:500px"></div> <p> This sample uses <a href="../intro/graduatedPanels.html">Graduated Panels</a> and <code>Panel.alignmentFocusName</code> to line up thermometer scales. </p> <p> The thermometers are resizable, with two types. For the first two (default), resizing the thermometer reduces or increases the range of the values. For the second two (<code>type: "scaling"</code>), resizing the thermometer keeps the range, and scales the thermometer. </p> </div> </body> </html>