Objective & Framework: This project is being developed in co-creation with StR Martin Blank as an extension of a school experiment that uses a self-built spectrometer to identify the elements present in spectral lamps.
The experiment is currently being piloted in upper-level secondary physics classes in Bavaria, and initial feedback from teachers has been very promising.
At present, the Max Planck Society provides a guide for constructing a simple spectrometer using mostly everyday materials and a smartphone:
https://www.ipp.mpg.de/handyspektrometer.
(The only component not typically found in every household is a transmission diffraction grating with 1000 lines/mm, which can be obtained online.)
Building on this guide, my friend Martin developed a complete didactic concept for a teaching unit in upper-level secondary education (’Gymnasiale Oberstufe in Bayern‘). He approached me with the idea of creating an application that would allow students to extract brightness values from photographs of their spectra.
While the Max Planck Society provides a lot of guidelines in terms of hardware, an actual tool to measure the recorded images is missing. Therefore an idea was born: We create one ourselves!
After some discussion and brainstorming, we expanded this idea into a more comprehensive concept for an app that not only extracts intensity values from the images but also automatically generates a visual histogram.
In practice, students are provided with two spectral lamps for testing. The elemental composition of Lamp 1 is known (e.g., helium), while that of Lamp 2 is unknown to them.
They begin by recording the spectrum of Lamp 1, resulting in a histogram in which the x-axis initially represents pixel values. This axis must then be shifted and scaled to correspond to actual wavelengths.
To facilitate this calibration process, the application allows the user to define a remap function (“calibration function”) that maps pixel positions to wavelength values.
This function takes the shape of
λ(x) = m • x + t
where m is the stretching factor and t is the shift of the x-axis.
Once the setup is calibrated, students can measure the spectrum of the unknown Lamp 2, input their calculated remap values and read the resulting wavelength peaks. By comparing these values with standard reference tables, they can determine which element is present in the second spectral lamp.
Application Features
Pedagogically guided assistance (disabled buttons, when a function cannot be used, some guidance how to use the remap-function, etc.) We are still in the learning process here, so we might add/tweak some features in the future.
Image upload and rotation with live preview and grid overlay (most smartphone photos need at least some degrees of rotation, since the placement of the device is rarely ideal)
Manual intensity measurements (brightness values) including coordinate display (this function allows to initially assess the image and to explain the important spikes when teaching/presenting)
Automatic generation of an interactive intensity histogram, featuring:
A remap function (“calibration function”) for scaling and shifting the x-axis, enabling students to infer unknown elements from known spectra
The ability to place markers on the graph for precise value reading
Data export as CSV and image files
Technical Concept
The didactic design follows a hands-on approach, giving students the opportunity to explore and experiment independently.
From a technical perspective, this means the application must function both in a classroom setting – projected by the instructor from a laptop, tablet, or beamer – and on students’ personal devices (such as smartphones, tablets, iPads, etc.).
Requiring teachers or students to install dedicated software (e.g., an app or executable) would be impractical, especially given that most school IT systems restrict external installations. Therefore, as in my previous project Data Plotter, I opted to develop a dedicated web application that runs on a small server.
In keeping with the principle of data minimization, the application is optimized to load as little data from the server as possible – an important factor when school Wi-Fi or mobile data connectivity is weak. In total, only about 325 kB of data is transferred; all image processing, measurements, and visualizations are executed directly on the user’s device.
Given that most students are minors and deserve particular protection, I deliberately avoided any use of tracking, cookies, or externally loaded resources (such as fonts or third-party libraries).
For data visualization, the application uses the d3.js library, which is served directly from the local server rather than via a CDN.
Hands on
The project is currently in active development and testing – therefore there are still some minor bugs and some spaghetti code to sort out but the key functionalities should work just fine. I release the app as Open Educational Resource free of charge under the Creative Commons license CC-BY-SA 4.0.
If you are curious, you can try the app on your own: