lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
44 lines (42 loc) • 1.53 kB
HTML
<head>
<title>Lightview:Sensor Demo</title>
<link href="../../components/gauge-repl.html" rel="module">
<script src="../../../lightview.js?as=x-body"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
</head>
<body>
<div style="width:100%;text-align:center">
<div style="display:inline-block">
<l-gauge id="sensor1" type="Gauge" label="Sensor One" value="50"></l-gauge>
</div>
<div style="display:inline-block">
<l-gauge id="sensor2" type="Gauge" label="Sensor Two" value="50"></l-gauge>
</div>
</div>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
const {remote} = await import("../../../types.js");
self.variables({sensor1: "number"}, {
remote: remote({
ttl: 5000,
path: "https://lightview.dev/sensors/sensor1"
})
});
self.variables({sensor2: "number"}, {
remote: remote({
ttl: 7500,
path: "https://lightview.dev/sensors/sensor2"
})
});
await sensor1;
await sensor2;
addEventListener("change", ({variableName, value}) => {
const sensor = document.body.getElementById(variableName);
sensor.setValue(value);
});
}
</script>
</body>
</html>