ov-reticle

src/ov-reticle.js

A STILL OF demo/reticle.html

Attributes

Properties

None that can be set. See the read-only properties below.

READ-ONLY PROPERTIES

hold

The names in bold are also attributes. Assigning one as a prop throws, so set them in markup.

Events

None.

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-field>
</ov-field>
<ov-reticle
  source="doc-targets"
  hold="3600000"
>
</ov-reticle>
<script type="module">
  import '../src/ov-source.js';
  /* Constant tracks, one without a score, and one that reports for its first
     second and then goes quiet, so the still always shows a bracket held at
     its last fix and marked lost. The feed starts once the reticle is defined
     and subscribed, so it cannot miss that second. */
  customElements.whenDefined('ov-reticle').then(() => {
    window.Overscan.source('doc-targets', (t) => {
      const out = [
        { id: 't1', label: 'vehicle', x: 22, y: 30, w: 18, h: 14, confidence: 0.91 },
        { id: 't2', label: 'contact', x: 50, y: 56, w: 12, h: 12, confidence: 0.42 },
        { id: 't3', label: 'unknown', x: 18, y: 72, w: 10, h: 10 },
      ];
      if (t
  < 1) out.push({ id: 't4', label: 'drone', x: 58, y: 16, w: 9, h: 9, confidence: 0.77 });
      return out;
    }, { hz: 10 });
  });
</script>

import { OvReticle } from 'overscan/react'

<OvReticle
  source="doc-targets"
  hold="3600000"
/>

import { OvReticle } from 'overscan/vue'

<OvReticle
  source="doc-targets"
  hold="3600000"
/>

import OvReticle from 'overscan/svelte/OvReticle.svelte'

<OvReticle
  source="doc-targets"
  hold="3600000"
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 77 getter-only properties across 43 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.