@patricksurry/g3
Version:
A flexible Javascript framework for building steam gauge instrument panels that display live external metrics from flight (or other) simulators like XPlane or MS FS2020
68 lines (64 loc) • 2.62 kB
HTML
<html>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@patricksurry/g3/dist/g3-contrib.min.js"></script>
<script>
var g = g3.gauge()
.metric('jaguarRPM').unit('rpm')
.fake(g3.forceSeries(0, 7000))
.measure(d3.scaleLinear().domain([0,6000]).range([-125,125]))
.css(`
text.g3-gauge-label, .g3-axis-labels text {
font-stretch: normal;
font-weight: 600;
fill: #ccc;
}
.g3-gauge-face { fill: #282828 }
`)
.append(
g3.gaugeFace(),
g3.gaugeFace().r(50).style('filter: url(#dropShadow2)'),
g3.axisSector([5000,6000]).inset(50).size(35).style('fill: #800'),
g3.gaugeLabel('SMITHS').y(-45).size(7),
g3.gaugeLabel('8 CYL').y(40).size(7),
// a trick to put a circular path label opposite the 3000RPM top of the gauge
g3.put().rotate(180).append(
g3.axisLabels({3000: 'POSITIVE EARTH'}).orient('counterclockwise').size(3.5).inset(52)
),
g3.gaugeLabel('RPM').y(65).size(12),
g3.gaugeLabel('X 100').y(75).size(8),
g3.gaugeScrew().shape('phillips').r(3).x(-20),
g3.gaugeScrew().shape('phillips').r(3).x(20),
g3.put().scale(0.95).append(
g3.axisSector().style('fill: none; stroke: white'),
g3.axisTicks().step(500).style('stroke-width: 5'),
g3.axisTicks().step(100).size(5),
g3.axisLabels().inset(20).size(15).format(v => v/100),
g3.indicatePointer().clamp([0,6000]).append(
// the full pointer blade
g3.element('path', {d: 'M 3,0 l -1.5,-90 l -1.5,-5 l -1.5,5 l -1.5,90 z'})
.style('fill: #ddd'),
// the bottom half of the pointer, drawn over the full blade
g3.element('path', {d: 'M 3,0 l -0.75,-45 l -4.5,0 l -0.75,45 z'})
.style('fill: #333'),
// a blurred highlight on the blade to give a bit of 3D effect
g3.element('path', {d: 'M -1,0 l 0,-90 l 2,0 z'})
.style('fill: white; filter: url(#gaussianBlur1); opacity: 0.5'),
// the central hub, with a highlight
g3.element('circle', {r: 15}).style('fill: #ccd'),
g3.element('circle', {r: 15}).class('g3-highlight'),
// the central pin
g3.element('circle', {r: 5}).style('fill: #333'),
),
),
);
var p = g3.panel()
.width(640)
.height(640)
.append(
g3.put().x(320).y(320).scale(2).append(g)
);
p('body');
</script>
</body>
</html>