@labirthermal/web
Open-source thermal imaging library (2024)
Loading thermal viewer...
1<!-- Load the locally hosted IIFE build once. -->
2<script src="/lib/labirthermal.iife.js"></script>
3
4<thermal-file-app
5 thermal="/labir/flir_02.jpg"
6 label="FLIR JPEG"
7 advanced-palettes
8 from="24"
9 to="30"
10 palette="lava"
11 analysis1="Analysis A;rectangle;color:Blue;top:100;left:80;width:420;height:250"
12 analysis2="Analysis B;ellipsis;color:Green;top:280;left:600;width:280;height:360"
13></thermal-file-app>Change the palette or analyses in the demo — the code attributes update live.
Supported file formats
- LabIR Recording (.lrc)
Single images and sequences from TIMI Edu cameras and IRT measurement systems at the University of West Bohemia. - FLIR JPEG (.jpg, .jpeg)
Images from FLIR and compatible cameras, including DJI Zenmuse XT / XT2.
Automatic format detection based on file contents.
Package structure
@labirthermal/web is an open-source monorepo built on a shared foundation:
- @labirthermal/core
File reading, temperature data, analysis and measurement management in TypeScript. - @labirthermal/webcomponents
Ready-to-use Lit-based apps and UI elements for HTML, React and Vue. - @labirthermal/react
Typed components for React apps.
Key features
- Local processing in the browser with Web Workers.
- Sequence playback and frame-by-frame navigation.
- Colour palettes
Histogram and adjustable temperature range. - Point, rectangle and ellipse analyses with tables and time-series charts.
- Temperature units: °C, °F and K.
- Multi-file comparison and image, data and video export.
Advanced features
A sequence with a timeline, two analysis regions and a chart of average and maximum temperatures.
The rainbow palette, advanced palette selection, a 68–82.5 °F range and 2× playback. Switch units to °C or K.
1<thermal-file-app
2 thermal="/labir/sekvence.lrc"
3 label="Thermal sequence with analyses"
4 palette="rainbow"
5 advanced-palettes
6 unit="F"
7 from="68"
8 to="82.5"
9 speed="2"
10 analysis1="Region A;rectangle;color:Blue;top:14;left:8;width:65;height:31;avg;max"
11 analysis2="Region B;ellipsis;color:Green;top:34;left:102;width:34;height:47;avg;max"
12></thermal-file-app>Loading thermal viewer...
Group module
Compare images with a shared palette and temperature range.
An adjustable grid, a summary table and a detailed view of each measurement.
1<thermal-group-app
2 label="File group"
3 palette="iron"
4 group-files="thermal~/labir/snimek.lrc;thermal~/labir/snimek_2.lrc;thermal~/labir/snimek_3.lrc;thermal~/labir/snimek_4.lrc"
5></thermal-group-app>Loading thermal viewer...
Your own files: drop-in
Drag in your thermal images or select them from disk. Analysis and comparison run locally in your browser.
1<thermal-dropin-app
2 label="Try your own thermal image"
3 palette="iron"
4 advanced-palettes
5></thermal-dropin-app>Loading thermal viewer...
Build custom interfaces
Combine standalone webcomponents with your own HTML to build any interface.
Four still images, shared palette and range controls, and a scoped Solarized theme. Providers connect the controls and images through a shared context.
View HTML & CSS
1<div class="labir-solarized" skin="solarized">
2 <manager-provider palette="iron">
3 <header>
4 <h3>Inspection desk</h3>
5 <p>Four recordings. One shared palette and temperature range.</p>
6 </header>
7 <div class="controls">
8 <manager-palette-dropdown></manager-palette-dropdown>
9 <manager-unit-switch></manager-unit-switch>
10 </div>
11 <registry-provider>
12 <div class="controls">
13 <registry-range-display></registry-range-display>
14 <registry-range-full-button></registry-range-full-button>
15 </div>
16 <registry-histogram></registry-histogram>
17 <registry-range-slider></registry-range-slider>
18 <group-provider>
19 <div class="image-grid">
20 <article>
21 <h4>Inspection 01</h4>
22 <p>FLIR JPEG</p>
23 <file-provider thermal="/labir/flir_02.jpg">
24 <file-canvas></file-canvas>
25 <footer>
26 <file-info-button></file-info-button>
27 <file-download-png></file-download-png>
28 </footer>
29 </file-provider>
30 </article>
31 <article>
32 <h4>Inspection 02</h4>
33 <p>LRC image</p>
34 <file-provider thermal="/labir/snimek.lrc">
35 <file-canvas></file-canvas>
36 <footer>
37 <file-info-button></file-info-button>
38 <file-download-png></file-download-png>
39 </footer>
40 </file-provider>
41 </article>
42 <article>
43 <h4>Inspection 03</h4>
44 <p>LRC image</p>
45 <file-provider thermal="/labir/snimek_2.lrc">
46 <file-canvas></file-canvas>
47 <footer>
48 <file-info-button></file-info-button>
49 <file-download-png></file-download-png>
50 </footer>
51 </file-provider>
52 </article>
53 <article>
54 <h4>Inspection 04</h4>
55 <p>LRC image</p>
56 <file-provider thermal="/labir/snimek_3.lrc">
57 <file-canvas></file-canvas>
58 <footer>
59 <file-info-button></file-info-button>
60 <file-download-png></file-download-png>
61 </footer>
62 </file-provider>
63 </article>
64 </div>
65 </group-provider>
66 </registry-provider>
67 </manager-provider>
68</div>Loading inspection desk...
App integration
HTML / IIFE
The locally hosted IIFE build registers the components for use anywhere in HTML.
1<script src="/lib/labirthermal.iife.js"></script>
2
3<thermal-file-app
4 thermal="/labir/flir_02.jpg"
5 palette="iron"
6></thermal-file-app>React
The provider initializes the runtime and makes the typed components available.
1import {
2 LabirthermalProvider,
3 ThermalFileApp,
4} from "@labirthermal/react";
5
6export default function ThermalViewer() {
7 return (
8 <LabirthermalProvider fallback={<p>Loading…</p>}>
9 <ThermalFileApp
10 thermal="/labir/flir_02.jpg"
11 palette="iron"
12 />
13 </LabirthermalProvider>
14 );
15}