Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
192 lines (185 loc) · 10 KB
/
Copy pathindex.html
File metadata and controls
192 lines (185 loc) · 10 KB
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spectrometer — Free Browser-Based DIY Spectrometer Software</title>
<meta
name="description"
content="Free, open-source spectrometer software that runs in your browser. Turn a webcam and a diffraction grating into a real spectrometer: live spectrum analysis, wavelength calibration with fluorescent lamps, peak detection, and CSV export. All processing happens locally in your browser — no data is uploaded. Works on Linux, macOS and Windows with any Chromium-based browser (Chrome, Edge, Opera…)."
/>
<meta
name="keywords"
content="spectrometer, DIY spectrometer, web spectrometer, spectroscopy, webcam spectrometer, diffraction grating, spectrum analysis, wavelength calibration, emission spectrum, open source, Theremino alternative"
/>
<meta name="author" content="Spectrometer contributors" />
<link rel="canonical" href="https://spectrometer-web.vercel.app/" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Spectrometer" />
<meta property="og:title" content="Spectrometer — Free Browser-Based DIY Spectrometer Software" />
<meta
property="og:description"
content="Turn a webcam and a diffraction grating into a real spectrometer, right in your browser. Live spectrum analysis, wavelength calibration, peak detection, CSV export. Free, open source, and 100% local — no data leaves your browser."
/>
<meta property="og:url" content="https://spectrometer-web.vercel.app/" />
<meta property="og:image" content="https://spectrometer-web.vercel.app/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Spectrometer showing a calibrated fluorescent lamp emission spectrum with labeled mercury peaks" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Spectrometer — Free Browser-Based DIY Spectrometer Software" />
<meta
name="twitter:description"
content="Turn a webcam and a diffraction grating into a real spectrometer, right in your browser. Free and open source."
/>
<meta name="twitter:image" content="https://spectrometer-web.vercel.app/og-image.png" />
<meta name="twitter:creator" content="@jayden_sudo" />
<meta name="theme-color" content="#fff5d2" />
<link rel="manifest" href="/manifest.webmanifest" />
<!-- Same icon as the Windows app (Theremino Spectrometer's Colors.ico) -->
<link rel="icon" href="/favicon.ico" sizes="16x16 24x24 32x32 48x48" />
<link rel="apple-touch-icon" href="/icon-192.png" />
<!-- Structured data for search engines and AI agents -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Web Spectrometer",
"url": "https://spectrometer-web.vercel.app/",
"description": "Free, open-source spectrometer software that runs in the browser. It converts the spectral image captured by a webcam (or a TCD1304/TCD1254 linear sensor over Web Serial) into a live spectrum curve, with multi-point wavelength calibration, peak/dip detection, filtering, irradiance correction and CSV/TXT export compatible with Theremino Spectrometer files. All image processing happens locally in the browser; no video or spectrum data is ever uploaded. This is an AI-assisted implementation created by Jayden with reference to Theremino Spectrometer.",
"author": {
"@type": "Person",
"name": "Jayden",
"url": "https://github.com/jayden-sudo",
"sameAs": ["https://x.com/jayden_sudo", "https://github.com/jayden-sudo"]
},
"sameAs": ["https://github.com/jayden-sudo/WebSpectrometer"],
"isBasedOn": "https://www.theremino.com/en/downloads/automation#spectrometer",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Any (requires a Chromium-based browser)",
"browserRequirements": "Requires a Chromium-based browser (Chrome, Edge, Opera, Brave…); Firefox and Safari are not supported (no Web Serial). Camera access requires HTTPS",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"license": "https://www.gnu.org/licenses/gpl-3.0.html",
"screenshot": "https://spectrometer-web.vercel.app/og-image.png",
"inLanguage": ["en", "zh-CN", "zh-TW", "it", "fr", "pt"],
"featureList": [
"Live spectrum analysis from a webcam",
"Multi-point wavelength calibration (Trim points) with fluorescent lamp mercury lines 436/546 nm",
"Peak and dip detection with wavelength labels",
"Real-time filtering: averaging, rising/falling speed, spatial averaging, reference and background subtraction",
"Wavelength-colored spectrum rendering and logarithmic scale",
"Irradiance coefficient correction",
"CSV/TXT data export compatible with Theremino Spectrometer",
"TCD1304/TCD1254 linear sensor support via Web Serial",
"6-language interface",
"100% local processing — no data is uploaded"
]
}
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T0818KE0F3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-T0818KE0F3');
</script>
</head>
<body>
<div id="root">
<!-- Static pre-render content: visible to crawlers and AI agents that do not execute
JavaScript, and shown briefly to users while the app bundle loads; replaced by the
app on mount. Styled inline to match the app's look without external resources. -->
<style>
@keyframes ws-scan {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
</style>
<div
style="
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(240, 248, 255);
font-family: Tahoma, 'Segoe UI', sans-serif;
color: rgb(40, 40, 40);
padding: 24px 16px;
box-sizing: border-box;
"
>
<main
style="
max-width: 640px;
width: 100%;
background: rgb(255, 245, 210);
border: 1px solid rgb(190, 180, 150);
border-radius: 8px;
box-shadow: 0 8px 30px rgba(120, 100, 40, 0.18);
padding: 32px 36px 26px;
box-sizing: border-box;
"
>
<h1 style="margin: 0 0 4px; font-size: 26px; letter-spacing: 0.5px">Web Spectrometer</h1>
<!-- spectrum accent bar with a moving scan highlight = loading indicator -->
<div style="position: relative; height: 10px; border-radius: 5px; overflow: hidden; margin: 10px 0 18px">
<div
style="
position: absolute;
inset: 0;
background: linear-gradient(
to right,
#1a001a, #4b0082, #0000e0, #00a0ff, #00c800,
#b8e000, #ffd000, #ff7000, #e00000, #400000
);
"
></div>
<div
style="
position: absolute;
top: 0;
bottom: 0;
width: 25%;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75), transparent);
animation: ws-scan 1.6s linear infinite;
"
></div>
</div>
<p style="margin: 0 0 14px; line-height: 1.55">
A free, open-source DIY spectrometer that runs entirely in your browser. Point a webcam at a diffraction
grating and get a live, calibrated emission spectrum — no installation required.
</p>
<ul style="margin: 0 0 14px; padding-left: 20px; line-height: 1.65">
<li>Analyze light sources: emission lines of fluorescent lamps, LEDs and lasers in real time</li>
<li>Multi-point wavelength calibration against the 436/546 nm mercury lines</li>
<li>Automatic peak/dip detection, CSV/TXT export compatible with Theremino Spectrometer</li>
<li>TCD1304/TCD1254 linear CCD sensors supported via Web Serial</li>
</ul>
<p style="margin: 0 0 14px; line-height: 1.55; font-weight: bold">
🔒 Your privacy: all image processing happens locally in your browser — no data is ever uploaded.
</p>
<p style="margin: 0 0 18px; font-size: 12px; color: rgb(110, 100, 70); line-height: 1.5">
Runs in Chromium-based browsers (Chrome, Edge, Opera…); Firefox and Safari are not supported (no Web
Serial) · Works on Linux, macOS and Windows · GNU GPL v3. An AI-assisted implementation by Jayden,
created with reference to Theremino Spectrometer.
</p>
<p style="margin: 0; font-size: 12px; border-top: 1px solid rgb(220, 205, 160); padding-top: 12px">
<span style="color: rgb(110, 100, 70)">Loading the application…</span>
<noscript><strong>JavaScript is required — please enable it to run the app.</strong></noscript>
<span style="float: right">
<a href="https://github.com/jayden-sudo/WebSpectrometer" style="color: rgb(140, 90, 0)">GitHub</a>
·
<a href="https://x.com/jayden_sudo" style="color: rgb(140, 90, 0)">@jayden_sudo</a>
·
<a href="https://www.theremino.com" style="color: rgb(140, 90, 0)">theremino.com</a>
</span>
</p>
</main>
</div>
</div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>