@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
79 lines (74 loc) • 2.65 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="material-speed-32.png">
<style>
div.header {
text-align: center;
font-size: 250%;
margin: 15px 0;
}
svg {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<script>
window.process = {
env: {
NODE_ENV: 'development'
}
}
</script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script type='module'>
import * as g3 from './g3-contrib.js';
var g = g3.gauge()
.metric('speed').unit('mph').fake(g3.forceSeries(9, 160))
.measure(d3.scaleLinear().domain([0,160]).range([-120,120]))
.append(
g3.gaugeFace(),
g3.axisSector([-3,163]).size(1).inset(-1).class('g3-axis-line'),
g3.axisSector([-3,163]).inset(2).size(5).style('fill: #333'),
g3.axisTicks().step(10).inset(2).size(5),
g3.axisLabels().step(20).size(14).inset(20).format(v => v.toString().padEnd(3, '\u00A0')),
g3.axisLabels({'-3': 'mph'}).inset(24).size(6),
g3.gauge().metric('speed').unit('kph')
.measure(d3.scaleLinear().domain([0,1.60934*160]).range([-120,120]))
.r(66)
.append(
g3.axisTicks(d3.range(0,261,10)).step(10).size(3),
g3.axisLabels(d3.range(0,261,20)).size(8).inset(12).format(v => v.toString().padEnd(3, '\u00A0')),
g3.axisLabels({'-5': '\u00A0km/h'}).inset(16).size(5),
),
g3.indicatePointer(),
g3.gauge().metric('range').unit('mi').fake(g3.forceSeries(0, 500))
.measure(d3.scaleLinear().domain([-100,600]).range([240,120]))
.r(90)
.append(
g3.axisSector([-50,550]).size(1).inset(-3).class('g3-axis-line'),
g3.axisTicks(d3.range(0,500,10)).style('stroke: #800').size(5),
g3.axisLabels(d3.range(0,500,200)).size(10).inset(15),
g3.indicateSector().size(5).style('fill: red'),
g3.axisTicks(d3.range(0,501,100)).size(8).style('stroke-width: 2'),
g3.axisLabels({500: 'miles'}).orient('counterclockwise').size(6).inset(-7),
),
g3.gauge().metric('destination').unit('mi').fake(g3.forceSeries(0, 500))
.measure(d3.scaleLinear().domain([-100,600]).range([240,120]))
.append(
g3.indicatePointer().append(g3.element('circle', {cy: -85, r: 4})).style('fill: white; stroke: black; filter: none;')
),
);
var panel = g3.panel()
.width(640)
.height(640)
.append(
g3.put().x(320).y(320).append(g)
);
panel('body');
</script>
</body>
</html>