@labirthermal

Appearance

thermal-file-app ​

Tag
<thermal-file-app>
Category
Application

A self-contained viewer and editor of one thermal file loaded from a URL. It creates its own manager, registry, group and file context, so no provider elements are needed around it.

The application contains a palette dropdown, thermal range form and slider, histogram, opacity slider, download and file info buttons, the analysis tool bar, the thermal canvas with a timeline and the analysis table with a graph.

Attributes ​

Only public HTML attributes are listed here. Controllers, loaded objects and the reflected is-loading state are internal and are not meant to be set from HTML.

Each example shows plain HTML first, followed by a live preview. The previews use VitePress withBase() to resolve asset URLs under the documentation base path; in your own HTML, use URLs pointing to your files.

thermal​

Type: string

URL of the thermal file (LRC) to display. The file is loaded whenever this attribute is set or changed; setting a new URL replaces the previously loaded file. Without thermal, the application stays empty.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/soustruh.lrc"
></thermal-file-app>

visible​

Type: string

URL of a visible (optical) image of the same scene. The image is placed below the thermogram. Use opacity or the opacity slider in the application bar to blend between the thermal and the visible image.

The visible image is read together with the thermal file, so set visible before or together with thermal. Changing only visible later does not reload the file.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/les_thermal.lrc"
    visible="/files/les_visual.png"
    opacity="0.5"
></thermal-file-app>

opacity​

Type: numberDefault: 1

Initial opacity of the thermogram, from 0 (fully transparent) to 1 (fully opaque). Values outside this range are clamped; an invalid number falls back to 1. The thermogram becomes transparent only when the file has a visible image; without it, the opacity has no visible effect.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/les_thermal.lrc"
    visible="/files/les_visual.png"
    opacity="0.2"
></thermal-file-app>

label​

Type: string

Title of the application displayed in the application bar. When omitted, no title is displayed. See also author and license.

html
<thermal-file-app
    style="width: 100%"
    thermal="/files/klokan.lrc"
    label="Kangaroo"
></thermal-file-app>

author​

Type: string

Author credit displayed in the application bar next to the label. Optional; omitted text is not displayed.

html
<thermal-file-app
    style="width: 100%"
    thermal="/files/klokan.lrc"
    label="Kangaroo"
    author="LabIR Team"
></thermal-file-app>

license​

Type: string

License credit displayed in the application bar next to the label and author. Optional; omitted text is not displayed.

html
<thermal-file-app
    style="width: 100%"
    thermal="/files/klokan.lrc"
    label="Kangaroo"
    author="LabIR Team"
    license="CC BY 4.0"
></thermal-file-app>

palette​

Type: 'iron' | 'jet' | 'white_hot' | 'black_hot' | 'lava' | 'arctic' | 'rainbow' | 'rainbow_hc'Default: jet

Sets the initial palette. Empty or invalid values fall back to jet. See Thermal palette for the available choices.

html
<thermal-file-app thermal="/files/makak.lrc" palette="lava"></thermal-file-app>

advanced-palettes​

Type: booleanDefault: false

(if advanced-palettes is present, its value is true. If it is missing, its value is false. More info.)

Boolean attribute HTML examples
<!-- advanced-palettes is true in all of these cases: -->
<thermal-file-app advanced-palettes>Example</thermal-file-app>
<thermal-file-app advanced-palettes="">Example</thermal-file-app>
<thermal-file-app advanced-palettes="true">Example</thermal-file-app>
<thermal-file-app advanced-palettes="false">Example</thermal-file-app>
<thermal-file-app advanced-palettes="anything">Example</thermal-file-app>

<!-- advanced-palettes is false only when the attribute is missing: -->
<thermal-file-app>Example</thermal-file-app>

When advanced-palettes is present, the palette dropdown offers the extended palette choices. Set it when palette is one of the advanced choices.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/makak.lrc"
    palette="lava"
    advanced-palettes
></thermal-file-app>

unit​

Type: 'C' | 'F' | 'K'Default: C

Selects the temperature unit used for displayed values and user-entered temperatures. Values are case-insensitive. On initial connection, an unrecognized value is treated like an omitted attribute: a new manager starts in Celsius, while a reused manager keeps its current unit. Internal temperatures remain in Celsius.

When applications share a manager through manager-slug, an explicit valid unit sets the shared unit. If unit is omitted, the application uses the manager's current unit; a new manager starts in Celsius. The application bar also includes a unit switch.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/makak.lrc"
    unit="F"
></thermal-file-app>

from​

Type: number

Sets the lower endpoint of the initial thermal range in the current unit selected by unit. The range is applied only when both from and to are set; if either is missing, the full range of the file is used. The internal range remains in Celsius. The user can change the range later with the range form, slider or histogram. See Thermal range.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/klokan.lrc"
    unit="F"
    from="68"
    to="86"
></thermal-file-app>

to​

Type: number

Sets the upper endpoint of the initial thermal range in the current unit selected by unit. The range is applied only when both from and to are set; if either is missing, the full range of the file is used. The internal range remains in Celsius. The user can change the range later with the range form, slider or histogram. See Thermal range.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/klokan.lrc"
    unit="F"
    from="68"
    to="86"
></thermal-file-app>

tool​

Type: 'inspect' | 'add-point' | 'add-rect' | 'add-ellipsis' | 'edit'Default: inspect

Initially selected analysis tool in the tool bar. An unsupported value falls back to inspect.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/husy.lrc"
    tool="add-rect"
></thermal-file-app>

analysis1 … analysis7​

Type: string

Up to seven analyses created on the loaded file. Each attribute holds one serialized analysis: semicolon-separated segments starting with the name and the type, followed by the parameters:

  • type rectangle or ellipsis: top, left, width, height in pixels of the thermal image;
  • type point: top and left;
  • color:<CSS colour> sets the colour;
  • the flags avg, min and max (area) or avg (point) turn the corresponding curve on in the graph.

The attributes are synchronised in both directions: editing, adding or removing an analysis in the application updates the attributes, and changing an attribute updates the analysis. Removing the attribute removes the analysis.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/klokan.lrc"
    analysis1="Body;rectangle;color:Blue;top:153;left:200;width:431;height:179;avg;max"
    analysis2="Head;ellipsis;color:Red;top:212;left:439;width:352;height:222;max"
    analysis3="Spot;point;color:Lime;top:100;left:100;avg"
></thermal-file-app>

interactive-analysis​

Type: booleanDefault: true

Enables selecting, editing and removing analyses in the analysis table. The default is true, so the table is interactive out of the box.

Non-standard boolean

This attribute does not follow the boolean attribute standard yet. Its default is true and any present value — including interactive-analysis="false" — also means true, so it cannot be turned off from HTML. To display the analyses read-only, set the JavaScript property interactiveAnalysis to false:

html
<thermal-file-app
    id="read-only-example"
    label="Example"
    style="width: 100%"
    thermal="/files/klokan.lrc"
    analysis1="Body;rectangle;color:Blue;top:153;left:200;width:431;height:179;avg"
></thermal-file-app>
<script>
    customElements.whenDefined('thermal-file-app').then(() => {
        document.getElementById('read-only-example').interactiveAnalysis = false;
    });
</script>

ms​

Type: numberDefault: 0

Initial position in a sequence (a file with more frames) in milliseconds. The value is clamped to the duration of the sequence and is updated while the sequence plays. It has no effect on single-frame images. See also speed.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/sequence.lrc"
    ms="2000"
></thermal-file-app>

speed​

Type: 0.5 | 1 | 2 | 3 | 5 | 10Default: 1

Initial playback speed multiplier of a sequence. It has no effect on single-frame images. See also ms.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/sequence.lrc"
    speed="2"
></thermal-file-app>

smooth-thermograms​

Type: booleanDefault: false

(if smooth-thermograms is present, its value is true. If it is missing, its value is false. More info.)

Boolean attribute HTML examples
<!-- smooth-thermograms is true in all of these cases: -->
<thermal-file-app smooth-thermograms>Example</thermal-file-app>
<thermal-file-app smooth-thermograms="">Example</thermal-file-app>
<thermal-file-app smooth-thermograms="true">Example</thermal-file-app>
<thermal-file-app smooth-thermograms="false">Example</thermal-file-app>
<thermal-file-app smooth-thermograms="anything">Example</thermal-file-app>

<!-- smooth-thermograms is false only when the attribute is missing: -->
<thermal-file-app>Example</thermal-file-app>

When smooth-thermograms is present, the thermal image starts in the smoothed rendering mode. See also smooth-graph.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/husy.lrc"
    smooth-thermograms
></thermal-file-app>

smooth-graph​

Type: booleanDefault: false

(if smooth-graph is present, its value is true. If it is missing, its value is false. More info.)

Boolean attribute HTML examples
<!-- smooth-graph is true in all of these cases: -->
<thermal-file-app smooth-graph>Example</thermal-file-app>
<thermal-file-app smooth-graph="">Example</thermal-file-app>
<thermal-file-app smooth-graph="true">Example</thermal-file-app>
<thermal-file-app smooth-graph="false">Example</thermal-file-app>
<thermal-file-app smooth-graph="anything">Example</thermal-file-app>

<!-- smooth-graph is false only when the attribute is missing: -->
<thermal-file-app>Example</thermal-file-app>

When smooth-graph is present, the lines of the analysis graph start in the smoothed rendering mode. See also smooth-thermograms.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/husy.lrc"
    smooth-graph
    analysis1="Body;rectangle;color:Blue;top:54;left:64;width:64;height:47;avg"
></thermal-file-app>

autohighlight​

Type: booleanDefault: false

(if autohighlight is present, its value is true. If it is missing, its value is false. More info.)

Boolean attribute HTML examples
<!-- autohighlight is true in all of these cases: -->
<thermal-file-app autohighlight>Example</thermal-file-app>
<thermal-file-app autohighlight="">Example</thermal-file-app>
<thermal-file-app autohighlight="true">Example</thermal-file-app>
<thermal-file-app autohighlight="false">Example</thermal-file-app>
<thermal-file-app autohighlight="anything">Example</thermal-file-app>

<!-- autohighlight is false only when the attribute is missing: -->
<thermal-file-app>Example</thermal-file-app>

When autohighlight is present, the temperature range of the loaded file is highlighted on the histogram and range slider.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/makak.lrc"
    autohighlight
></thermal-file-app>

manager-slug + registry-slug + group-slug​

Identifiers of the internal manager, registry and group. If omitted, the generic slug attribute is used; without either of them, a unique identifier is generated, so every application is independent by default.

Two applications with the same manager-slug share the palette, temperature unit, tool and smoothing settings. Applications sharing a manager and the same registry-slug also share the thermal range and opacity. See Context providers and consumers.

Because slug is used as a fallback by all three identifiers, setting only slug on two applications makes them share everything, including the group.

html
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/makak.lrc"
    manager-slug="shared-file-apps"
></thermal-file-app>
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/klokan.lrc"
    manager-slug="shared-file-apps"
></thermal-file-app>

Examples ​

Thermal image with a visible image ​

The visible image is displayed below the thermogram. Drag the opacity slider in the application bar to blend the two images.

html
<thermal-file-app
    style="width: 100%"
    label="Forest"
    thermal="/files/les_thermal.lrc"
    visible="/files/les_visual.png"
    opacity="0.6"
    palette="iron"
    analysis1="Trunk;rectangle;color:Red;top:30;left:60;width:30;height:60;avg;max"
></thermal-file-app>

Replace the displayed file ​

Changing the thermal attribute loads another file into the same application.

html
<thermal-btn onclick="this.parentElement.querySelector('thermal-file-app').setAttribute('thermal', '/files/makak.lrc')">
    Show macaque
</thermal-btn>
<thermal-btn onclick="this.parentElement.querySelector('thermal-file-app').setAttribute('thermal', '/files/klokan.lrc')">
    Show kangaroo
</thermal-btn>
<thermal-file-app
    label="Example"
    style="width: 100%"
    thermal="/files/makak.lrc"
></thermal-file-app>
Show macaque Show kangaroo

Complete HTML document ​

This document loads the webcomponents IIFE bundle and prints the analysis whenever the user edits it in the application. Place the bundle (labirthermal.iife.js) and your files next to the HTML file, or adjust the URLs.

The setup script deliberately appears before the application:

  1. DOMContentLoaded waits until the application and the output exist in the DOM. It also waits for the deferred bundle in the document head.
  2. customElements.whenDefined('thermal-file-app') waits for the webcomponent to be registered.
  3. Only then does the script observe the application.

Neither wait means that the file is loaded; the file is fetched asynchronously afterwards. The analysis1 attribute is updated by the application itself, so a MutationObserver reports the changes.

html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Thermal file application</title>
    <script defer src="./lib/labirthermal.iife.js"></script>
</head>
<body>
    <script>
        function showAnalysis(app) {
            document.getElementById('analysis-result').textContent =
                app.getAttribute('analysis1') ?? 'The analysis was removed.';
        }

        document.addEventListener('DOMContentLoaded', async () => {
            await customElements.whenDefined('thermal-file-app');

            const app = document.getElementById('example-app');
            const observer = new MutationObserver(() => showAnalysis(app));
            observer.observe(app, { attributes: true, attributeFilter: ['analysis1'] });
            showAnalysis(app);
        });
    </script>

    <thermal-file-app
        id="example-app"
        label="Forest"
        thermal="./files/les_thermal.lrc"
        visible="./files/les_visual.png"
        opacity="0.6"
        analysis1="Trunk;rectangle;color:Red;top:30;left:60;width:30;height:60;avg"
    ></thermal-file-app>
    <output id="analysis-result" aria-live="polite"></output>
</body>
</html>

Move or resize the rectangle on the image to see the serialized analysis change. This is a complete standalone document: copy it into your own HTML file and serve it over HTTP (files loaded from file:// URLs are blocked by browsers).