rp2040-sen5x-air-quality-webui-monitor/docs/index.html at master · mk-fg/rp2040-sen5x-air-quality-webui-monitor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<head>
<meta charset=utf-8>

<style>
:root { --c-fg: #d2f3ff; --c-bg: #09373b; }
body { margin: 0 auto; padding: 1em;
	max-width: 960px; color: var(--c-fg); background: var(--c-bg); }
h3, ul { margin-block-end: 0; }
a, a:visited { color: #5dcef5; }
svg g { color: #d2f3ff; }
svg text { font: 1rem 'Liberation Sans', 'Luxi Sans', sans-serif; }
svg .axis { opacity: 0.5; } .axis.fg { opacity: 1; } .axis text { fill: currentColor; }
svg .grid line { stroke: #275259; } .grid .domain { stroke: none; }
svg .line { fill: none; } .overlay { fill: none; pointer-events: all; }
svg .focus line { fill: none; stroke: #81b0da; }
svg .focus tspan { paint-order: stroke; stroke: #0008; stroke-width: .7rem; }
svg .focus tspan.hl { stroke: #025fb3; }
svg .marks line { stroke-width: 2; }
#exports { float: left; } #actions { float: right; }
#errors, #graph, #marks { clear: both; }
#errors { width: 40rem; list-style: none; padding: 0; }
#errors li { background: #9b2220; font-weight: bold;
	margin: .5rem; padding: .5rem 1rem; border-radius: .4rem; }
#errors li::before { content: '⚠️'; margin-right: .4rem; }
#marks {
	display: flex; align-items: stretch; position: relative;
	min-height: 10rem; width: 90%; margin: 1rem auto; }
#marks.hide { display: none; }
#marks button {
	position: absolute; top: .4rem; right: 1rem;
	border: var(--c-fg) outset 1px; border-radius: .5rem;
	padding: .4rem 1rem; cursor: pointer; color: var(--c-fg); background: #5dcef520; }
#marks button:disabled { color: #5dcef580; cursor: not-allowed; }
#marks div, #marks textarea {
	flex-grow: 0; margin: 0; padding: .6rem 0;
	border: var(--c-bg) inset 1px; line-height: 1.5rem;
	font: 1rem 'Liberation Mono', 'Luxi Mono', monospace; }
#marks div { position: relative; min-width: 2rem; white-space: nowrap; text-align: center; }
#marks textarea { flex-grow: 1; color: currentColor;
	padding: .6rem; border-color: var(--c-fg); background: var(--c-bg); }
</style>

<title>RP2040 SEN5x Air Quality Monitor</title>
<body><h3>RP2040 SEN5x Air Quality Monitor</h3>

<ul id=exports>
	<li><a href='samples.csv'>Data export in CSV</a>
	<li><a href='samples.8Bms_16Bsen5x_tuples.bin'>Data export in binary format</a>
</ul>

<ul id=actions>
	<!-- <li><a href='fan-clean'>Run fan cleaning</a> (at least every week) -->
</ul>

<ul id=errors>
	<!-- <li>Some test error message from sensor -->
	<!-- <li>Some other error -->
</ul>

<div id=graph><svg></svg></div>
<div id=marks class=hide>
	<div></div>
	<textarea></textarea>
	<button>Save</button>
</div>

<script>
window.aqm_opts = {
	// time_now: 1688932287,
	// marks_disable: true,
	d3_api: 7,
	d3_try_local: 1,
	d3_from_cdn: 1,
	marks_bs_max: 512 }
window.aqm_urls = {
	data: 'samples.8Bms_16Bsen5x_tuples.bin',
	marks: 'marks.bin',
	d3: 'd3.v7.min.js' }
</script>

<script src='../webui.js'></script>