Everything above plus the authoring toolbar. Put it on a page where people should be able to describe or correct an observation themselves.
<rr0-sighting-editor></rr0-sighting-editor>
<rr0-sighting-editor src="sighting.json"></rr0-sighting-editor>Its canvas is an editing surface, so enableClickToPlay is off there: a click
selects and drags a shape rather than toggling playback. What the eight groups of its toolbar
do is the editor's own page.
| Member | Kind | What it does |
|---|---|---|
ufoElement | property (read) | Reaches through to the canvas, the timeline and the appearance work |
sightingchange | event | Fires after every edit — the single signal that the recording has changed |
What it fires#
| Event | Fires | Where to listen |
|---|---|---|
sightingchange | After an edit: a field written, an instrument chosen, a time zone derived, a shape moved along the timeline | On this element. It does not bubble, so listen on the <rr0-sighting-editor> itself — then read sightingData back off it |
Putting it in your page#
<script type="module" src="https://ufoathome.org/lib/rr0-sighting-editor.mjs"></script>
<rr0-sighting-editor></rr0-sighting-editor>Or, after npm install @rr0/ufoathome: import "@rr0/ufoathome/editor".
The bundle is 293 KB gzipped and registers the tag itself — nothing else to call.
The hub says what else that involves, and
sharing an observation has the whole example, to try and to copy.