Spectra Viewer

Information on the general spectra viewer at fpbase.org/spectra

FPbase Fluorescence Spectra ViewerFPbase

The spectra viewer contains all FP spectra in the database, as well as many organic dyes and spectra for hardware such as fluorescence filters, light source power densities, and camera quantum efficiencies. The database is non-commercial, brand-agnostic, and user-editable (with moderation) and contains products from a range of filter, dye, and camera vendors. While simple at first glance, the spectra viewer contains a lot of functionality for evaluating spectra.

FPbase Spectra Viewer

Interacting with the chart

Hover the mouse over the chart to get precise Y values for every spectrum at the current X position of the mouse:

The default hover behavior can be changed by unchecking "Show Y value for all spectra on hover" in the options, in which case only the values for the spectrum closest to the mouse will be shown in the tooltip.

You can highlight any given item on the chart by hovering over its name in the legend, or hide a single item from the chart (without removing it) by clicking on the item in the legend.

Quick Entry

The fastest way to get started is by using the Quick Entry tool: either hit the big "+" button at the bottom of the app, or hit the spacebar at any time (provided you are not currently editing an input field).

Quick Entry Button

Tip: Keep your hands on the keyboard! Use the spacebar for quick spectrum entry, hit tab or shift-tab to move the focus between different items in the list, press delete to remove the focused item, use the left/right arrow keys to move between tabs. See all keyboard shortcuts below.

Spectrum Lookup

Upon pressing spacebar, the quick entry modal will appear and you can begin typing the name of any spectrum in the database, regardless of type. Hit enter to add the spectrum to the viewer.

The quick entry tool is flexible and allows partial word completions

Optical Configuration Lookup

In addition to individual spectra, the quick entry modal allows you to quickly recall any optical configuration from any microscope at FPbase. So if you have created filter arrangements for multiple microscopes, you can quickly retrieve them in one place. Selecting a configuration will replace all spectra in the viewer (with the exception of fluorophores, if the preserve fluorophores checkbox is checked).

You can also use the optical configuration lookup to load all of the filters from almost any standard filter set offered by Chroma, Semrock, Omega, or Zeiss. Try typing the name of the vendor, followed by the filter set name, for example: "Chroma 89000"

Spectra Viewer Tabs

All

Selectors for spectra added to the viewer will appear in one or more of the five tabs below the graph. In each row, you will see an icon on the left representing spectrum type, the main spectrum selector showing the currently selected spectrum, toggle buttons that enable turning spectrum typers on and off, a blue link button linking to the corresponding page on FPbase or external sites (when available), and a deletebutton that will clear the row and remove the item from the viewer.

The ALL tab shows all spectra currently added to the viewer (with the exception of custom filters and lasers), separated by spectrum type. The empty selector at the bottom of the "ALL" tab will search/browse all spectra in the database, whereas the selectors on the other tabs will only search/browse the corresponding spectrum type.

Fluorescent Proteins and Dyes

All fluorescent proteins and organic dyes can be found on the FLUOROPHORES tab. When available, the extinction coefficient and quantum yield is shown next to the currently selected fluorophores. (If available, you have the option of scaling the excitation or emission spectra by their respective values)

Filters

All filters, regardless of type (emission, excitation, longpass, etc...) can be browsed/searched in the FILTERS tab.

Custom Filters

If there is a filter missing that you would like to see, you can submit a new spectrum to the database. Alternative, you can model a filter by clicking the button. A tool will appear enabling you to choose between longpass, shortpass, and bandpass filters, with a few different parameters.

The custom filter creator

Light Sources

Light sources such as LEDs, mercury and metal halide bulbs appear in the LIGHT SOURCES tab. Laser lines don't typically have dedicated in the spectra but can be modeled by clicking the button.

The custom Laser line selector

Custom Laser Lines and Emission Scaling

In addition being used as a visual aid, custom laser lines can be used to scale the emission spectra of fluorophores to the relative absorbance of their corresponding excitation spectra at a particular (laser) wavelength by clicking on the "Norm em. to this" button to the right of any custom laser line. This can be a useful way to evaluate the relative emission efficacy of a variety of fluorophores for a given laser line on your system

Fluorophore emission scaled to laser excitation efficiciency

This feature obviously requires that a corresponding excitation spectrum be available for the given fluorophore (fluorophores missing that spectrum will either be hidden or appear unscaled).

Note: Emission spectra scaled by laser excitation may also be scaled by quantum yield.

Detectors & Cameras

Cameras and detectors are found in the DETECTORS tab. Again, if a spectrum is missing that you would like to see included, feel free to submit a spectrum.

Collection Efficiency

The EFFICIENCY tab is a special tab for calculating the collection efficiency for every pair of fluorophore emission and filter. (This is sometimes called the "spillover table" in other spectra viewers). The values in the table represent the percentage of total fluorescence emission of a given fluorophore that is predicted to be collected by a given filter. It is calculated as follows:

$$\frac{ \int (filter_{em}(\lambda) \times fluor_{em}(\lambda))}{\int fluor_{em}(\lambda)}$$

where $filter_{em}(\lambda)$ and $fluor_{em}(\lambda)$ are the emission filter and fluorophore emission spectra (respectively) as a function of wavelength.

This tab can be used to evaluate the appropriateness of a given filter for collecting the emission of a given fluorophore (in which case a high collection efficiency is desired), or for evaluating the effectiveness of a given filter for blocking emission from a given fluorophore, thereby preventing bleed-through (in which case a low collection efficiency is desired). The table can be sorted by various columns (click on the column header), or exported as CSV.

Each item in the table is actually a button that you can click to reveal the given spectral overlap on the chart.

Note: High collection efficiency pairs (>50%) are colored in blue. Low collection efficiency (<5%) is colored red. Everything else will be colored gray.

X-axis range, Zoom, and Panning

The default behavior of the chart is to adjust the X (wavelength) range automatically to fit the data currently presented. The X axis range can be modified in two ways:

1. Click and drag on the chart (or pinch on mobile) to zoom in to a specific wavelength range.

2. Click directly on the minimum or maximum X values and they become input fields where you can specify a value (you must hit enter for it to be applied).

Once zoomed in, the chart can be panned by shift-clicking and dragging (or, by a two-finger drag on mobile).

To return the min or max to the default "autoscale" behavior, click the "reset zoom" button that appears at the top right of the graph after clicking to zoom. Or, if you have entered values into the min/max inputs, delete the values to return to the default behavior.

Display Options

Some of the appearance and behavior of the chart can be modified by clicking on the settings icon at the bottom left.

Show axes or grid

By default, the X axis is shown and Y axes are hidden. The visibility of axes can be toggled. Additionally, the "show grid" option will overlay a tick-mark grid on the chart to help visualize X and Y values.

Fill area under curve

Once multiple spectra are added to the viewer, it may become easier to see them without the area under the curve filled in. This setting can be toggled in the display

Scaling by Quantum Yield or Extinction Coefficient

Excitation spectra can be scaled by the extinction coefficient (usually measured at the peak excitation wavelength) and emission spectra can be scaled to quantum yield, when the respective EC or QY values are available in the database for the current FP or dye. When scaling excitation spectra by extinction coefficient, a second Y axis appears on the right showing the absolute EC values (regardless of the "show Y axis" setting). Additionally, when you hover over the chart, spectra that have been scaled to EC or QY will be indicated in the tooltip.

Excluding spectrum subtypes

When adding a new fluorophore to the chart, you may wish to hide some of the spectra types (e.g. excitation, emission, two-photon absorption) by default. This be controlled with the exclude subtypes toggle buttons in the display options. By default, two-photon spectra are not added automatically when adding fluorophores.

Show Optical Density

Click on the "OD" toggle to change between linear scaling on the Y axis, and the optical density (OD) where OD is the negative log of the transmission:

$$OD(λ) = -log T(λ)$$

This setting is usually used to evaluate the attenuation level of filters (though be aware that the negative log scaling is applied to all spectra on the graph).

Show Y value for all spectra on hover

This setting changes the default behavior of the tooltip when hovering the mouse over the chart.

Downloading, Exporting & Sharing

It is possible to save and recover the state of the chart in a few different ways, all of which are accessed by clicking the share icon at the bottom right of the app.

Image Download

You can download the image of the chart at any time in SVG, PNG, or PDF format. SVG vector graphics provide the highest quality scalable image, but may not be compatible with all downstream applications.

CSV data export

You can download the current data in the chart in CSV format by clicking "download data as CSV".

Saving the chart as a URL

The full state of the chart can be encoded with a special URL string. To generate a URL for the current chart, click on the share button at the bottom right then click "Share chart as URL"; you will be presented with a window where you can copy the URL (click the icon on the right side of the URL), or click the email or twitter buttons to share the URL directly in the corresponding application.

Note: Another great way to store any given arrangement of filters, light sources, and detectors is to create an optical configuration in an FPbase microscope. All optical configurations saved in any FPbase microscope can be quickly recalled in the general spectra viewer using the optical configuration lookup in the quick entry modal.

Keyboard Shortcuts

Most of these keyboard shortcuts assume that you are not currently editing an input (like a spectrum selector). Press the escape key at any time to blur the current input and re-enable the shortcuts.

Key	Action
Spacebar	Open quick entry window
→	Go to next tab
←	Go to previous tab
1 - 6	[Number keys] - Go to specified tab
Y	Show/Hide Y axis
X	Show/Hide X axis
G	Show/Hide gridlines
F	Show/Hide area fill
Q	Toggle scaling to quantum yield
E	Toggle scaling to extinction coefficient
T	Toggle chart hover tooltip behavior
Delete	Remove currently focused spectrum
Escape	Blur the current input

Resetting the Chart

If you would like to restore the chart to its initial, empty state without deleting each spectrum individually, you can do so by clicking on the REMOVE ALL SPECTRA button at the bottom right of the options menu:

Adding data

To add a data that is not currently in the database, please submit a spectrum.