thermal-group-app
A self-contained viewer of a group of thermal files loaded from URLs. It creates its own manager, registry, group and file context, so no provider elements are needed around it.
The files are displayed as cards ordered by the time of acquisition (oldest first). Each card shows the thermogram, its timeline, a compact analysis table with a graph and buttons to download the file, to apply the file's range to the whole group and to open the file in a detail. The application bar contains the analysis tool bar, a palette dropdown, the thermal range form, histogram and slider, a switch between grid and table layout and a slider for the number of columns. All files share one palette and one thermal range.
The detail view shows one file with the full analysis table and graph. The Back button returns to the list; the group itself is not changed by opening or closing a detail. Users cannot add or remove files in this application – use thermal-dropin-app for that.
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.
group-files
The list of files to display. The value is a compact string without JSON:
- files are separated by
;, - the parts of one file are separated by
|, - each part is a
key~valuepair.
| Key | Required | Meaning |
|---|---|---|
thermal | yes | URL of the thermal file (LRC). Records without it are ignored. |
visible | no | URL of a visible (optical) image of the same scene, displayed below the thermogram. |
label | no | Label of the file. |
thermal~<url>[|visible~<url>][|label~<text>];thermal~<url>[|label~<text>]All files are loaded in parallel whenever the attribute is set or changed; a new value replaces the whole group. Removing the attribute or setting it to an empty value removes all files and displays a short message that the group is empty. Files that fail to load are reported as alerts above the list; the remaining files are displayed normally. Changes made inside the application are not written back to the attribute.
Because ;, | and ~ are separators, they cannot appear in URLs or labels.
<thermal-group-app
label="Animals"
style="width: 100%"
group-files="thermal~/files/makak.lrc|label~Macaque;thermal~/files/klokan.lrc|label~Kangaroo;thermal~/files/husy.lrc|label~Geese"
></thermal-group-app>label
Title displayed in the application bar. When omitted, LabIR Web Analyser is displayed. See also author and license.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
></thermal-group-app>author
Author credit displayed in the application bar next to the label. Optional; omitted text is not displayed.
<thermal-group-app
label="Rhinoceros"
author="LabIR Team"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
></thermal-group-app>license
License credit displayed in the application bar next to the label and author. Optional; omitted text is not displayed.
<thermal-group-app
label="Rhinoceros"
author="LabIR Team"
license="CC BY 4.0"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
></thermal-group-app>show-fullscreen
(if show-fullscreen is present, its value is true. If it is missing, its value is false. More info.)
Boolean attribute HTML examples
<!-- show-fullscreen is true in all of these cases: -->
<thermal-group-app show-fullscreen>Example</thermal-group-app>
<thermal-group-app show-fullscreen="">Example</thermal-group-app>
<thermal-group-app show-fullscreen="true">Example</thermal-group-app>
<thermal-group-app show-fullscreen="false">Example</thermal-group-app>
<thermal-group-app show-fullscreen="anything">Example</thermal-group-app>
<!-- show-fullscreen is false only when the attribute is missing: -->
<thermal-group-app>Example</thermal-group-app>When show-fullscreen is present, the fullscreen toggle is shown in the application bar.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
show-fullscreen
></thermal-group-app>palette
Sets the initial palette of all files. Empty or invalid values fall back to jet. See Thermal palette for the available choices.
<thermal-group-app
label="Animals"
group-files="thermal~/files/makak.lrc"
palette="lava"
></thermal-group-app>advanced-palettes
(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-group-app advanced-palettes>Example</thermal-group-app>
<thermal-group-app advanced-palettes="">Example</thermal-group-app>
<thermal-group-app advanced-palettes="true">Example</thermal-group-app>
<thermal-group-app advanced-palettes="false">Example</thermal-group-app>
<thermal-group-app advanced-palettes="anything">Example</thermal-group-app>
<!-- advanced-palettes is false only when the attribute is missing: -->
<thermal-group-app>Example</thermal-group-app>When advanced-palettes is present, the palette dropdown offers the extended palette choices. Set it when palette is one of the advanced choices.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
palette="lava"
advanced-palettes="true"
></thermal-group-app>unit
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.
<thermal-group-app
label="Animals"
style="width: 100%"
group-files="thermal~/files/makak.lrc|label~Macaque;thermal~/files/klokan.lrc|label~Kangaroo"
unit="F"
></thermal-group-app>tool
Initially selected analysis tool in the tool bar. The tool applies to all files, so analyses can be drawn directly on the cards as well as in the detail. An unsupported value falls back to inspect.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
tool="add-rect"
></thermal-group-app>opacity
Opacity of all thermograms, 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 for files with a visible image in group-files. This application has no opacity slider, so the value can be changed only through the attribute.
<thermal-group-app
label="Forest"
style="width: 100%"
group-files="thermal~/files/les_thermal.lrc|visible~/files/les_visual.png|label~Forest"
opacity="0.3"
></thermal-group-app>from
Sets the lower endpoint of the initial thermal range in the current unit selected by unit. The internal range remains in Celsius.
Limitation
After the files from group-files are loaded, the application sets the range to the full range of all loaded files. An initial from and to is therefore overwritten. Use the range form, slider, histogram or the range button on a card to change the range afterwards. See Thermal range.
<thermal-group-app
group-files="thermal~/files/makak.lrc"
unit="F"
from="68"
to="86"
></thermal-group-app>to
Sets the upper endpoint of the initial thermal range in the current unit selected by unit. The internal range remains in Celsius.
Limitation
After the files from group-files are loaded, the application sets the range to the full range of all loaded files. An initial from and to is therefore overwritten. Use the range form, slider, histogram or the range button on a card to change the range afterwards. See Thermal range.
<thermal-group-app
group-files="thermal~/files/makak.lrc"
unit="F"
from="68"
to="86"
></thermal-group-app>smooth-thermograms
(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-group-app smooth-thermograms>Example</thermal-group-app>
<thermal-group-app smooth-thermograms="">Example</thermal-group-app>
<thermal-group-app smooth-thermograms="true">Example</thermal-group-app>
<thermal-group-app smooth-thermograms="false">Example</thermal-group-app>
<thermal-group-app smooth-thermograms="anything">Example</thermal-group-app>
<!-- smooth-thermograms is false only when the attribute is missing: -->
<thermal-group-app>Example</thermal-group-app>When smooth-thermograms is present, the thermal images start in the smoothed rendering mode. See also smooth-graph.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
smooth-thermograms
></thermal-group-app>smooth-graph
(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-group-app smooth-graph>Example</thermal-group-app>
<thermal-group-app smooth-graph="">Example</thermal-group-app>
<thermal-group-app smooth-graph="true">Example</thermal-group-app>
<thermal-group-app smooth-graph="false">Example</thermal-group-app>
<thermal-group-app smooth-graph="anything">Example</thermal-group-app>
<!-- smooth-graph is false only when the attribute is missing: -->
<thermal-group-app>Example</thermal-group-app>When smooth-graph is present, the lines of the analysis graphs start in the smoothed rendering mode. See also smooth-thermograms.
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
smooth-graph
></thermal-group-app>analysis1 … analysis7
Serialized analyses of the file opened in the detail, in the same format as in thermal-file-app. These attributes are not initial settings for the group: opening a detail overwrites them with the analyses of the opened file. While a detail is open, they are synchronised in both directions: editing an analysis updates the attribute and setting an attribute updates the analysis of the opened file.
After returning to the list, the attributes keep the last values of the detail, and the analyses stay on the file.
ms
Current position of the sequence opened in the detail, in milliseconds. Like analysis1 … analysis7, this is not an initial setting for the group: opening a detail overwrites the attribute with the current time of the opened file. See also speed.
speed
Playback speed of the sequence opened in the detail. Like ms, this is not an initial setting for the group: opening a detail overwrites the attribute with the playback speed of the opened file.
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 – and both would then load their group-files into the same group.
<thermal-group-app
label="Animals"
style="width: 100%"
group-files="thermal~/files/makak.lrc|label~Macaque;thermal~/files/klokan.lrc|label~Kangaroo;thermal~/files/husy.lrc|label~Geese"
manager-slug="shared-group-apps"
></thermal-group-app>
<thermal-group-app
label="Rhinoceros"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
manager-slug="shared-group-apps"
></thermal-group-app>Other attributes
autohighlightis inherited from the file context but has no effect in this application. Hovering a card always highlights the file's range on the histogram and range slider.- The order of the files cannot be set from HTML; files are always ordered by the time of acquisition, oldest first.
Examples
Replace the displayed group
Changing the group-files attribute loads another set of files into the same application.
<thermal-btn onclick="this.parentElement.querySelector('thermal-group-app').setAttribute('group-files', 'thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc')">
Show rhinoceros
</thermal-btn>
<thermal-btn onclick="this.parentElement.querySelector('thermal-group-app').setAttribute('group-files', 'thermal~/files/klokan.lrc|label~Kangaroo')">
Show kangaroo
</thermal-btn>
<thermal-group-app
label="Example"
style="width: 100%"
group-files="thermal~/files/nosorozec_01.lrc;thermal~/files/nosorozec_02.lrc"
></thermal-group-app>Complete HTML document
This document loads the webcomponents IIFE bundle and lets the user switch between two groups of files. 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:
DOMContentLoadedwaits until the buttons, the application and the output exist in the DOM. It also waits for the deferred bundle in the document head.customElements.whenDefined('thermal-group-app')waits for the webcomponent to be registered.- Only then does the script register the click listeners.
Neither wait means that the files are loaded; they are fetched asynchronously after group-files is set.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thermal group application</title>
<script defer src="./lib/labirthermal.iife.js"></script>
</head>
<body>
<script>
const groups = {
rhinos: 'thermal~./files/nosorozec_01.lrc|label~Rhino 1;thermal~./files/nosorozec_02.lrc|label~Rhino 2',
animals: 'thermal~./files/makak.lrc|label~Macaque;thermal~./files/klokan.lrc|label~Kangaroo'
};
function showGroup(event) {
const name = event.currentTarget.dataset.group;
document.getElementById('example-app').setAttribute('group-files', groups[name]);
document.getElementById('group-result').textContent = `Displaying: ${name}`;
}
document.addEventListener('DOMContentLoaded', async () => {
await customElements.whenDefined('thermal-group-app');
document.querySelectorAll('button[data-group]').forEach(button => {
button.addEventListener('click', showGroup);
});
});
</script>
<button type="button" data-group="rhinos">Rhinoceros</button>
<button type="button" data-group="animals">Animals</button>
<output id="group-result" aria-live="polite">Displaying: rhinos</output>
<thermal-group-app
id="example-app"
label="Zoo"
palette="iron"
group-files="thermal~./files/nosorozec_01.lrc|label~Rhino 1;thermal~./files/nosorozec_02.lrc|label~Rhino 2"
></thermal-group-app>
</body>
</html>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).