Overscan segment

demo/segment.html, from this page

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

<ov-segment
  value="318.4"
  digits="5"
  unit="K"
></ov-segment>

import { OvSegment } from 'overscan/react'

<OvSegment
  value="318.4"
  digits="5"
  unit="K"
/>

import { OvSegment } from 'overscan/vue'

<OvSegment
  value="318.4"
  digits="5"
  unit="K"
/>

import OvSegment from 'overscan/svelte/OvSegment.svelte'

<OvSegment
  value="318.4"
  digits="5"
  unit="K"
/>

SEVEN SEGMENT

A readout refuses to invent. Two kinds of state, and the split is the useful part: a refusal withholds the number, because showing one would be a lie, and comes back as dashes with the reason stated. A qualifier shows the number and says what is true about it, because withholding would also be a lie. The accessible name carries the reason, never the value being withheld.

318.4

a value it can draw

1.5

the case retro-react gets wrong: it renders 15

-12.5

negative, and the minus costs a cell

99999

more digits than the display has

1e+21

exponent notation, no glyph for e or +

nominal

letters seven segments cannot form

(empty)

no reading has ever arrived

842.1

outside the declared range

318.4

older than its validity window

318.4

reading, but never calibrated

500.0

limited upstream, before the display saw it

318.4

two sources disagree, and picking one is not the display's call

variation: value="1.5" digits="4"

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

<ov-segment
  value="1.5"
  digits="4"
></ov-segment>

import { OvSegment } from 'overscan/react'

<OvSegment
  value="1.5"
  digits="4"
/>

import { OvSegment } from 'overscan/vue'

<OvSegment
  value="1.5"
  digits="4"
/>

import OvSegment from 'overscan/svelte/OvSegment.svelte'

<OvSegment
  value="1.5"
  digits="4"
/>

variation: value="-12.5"

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

<ov-segment
  value="-12.5"
  digits="5"
></ov-segment>

import { OvSegment } from 'overscan/react'

<OvSegment
  value="-12.5"
  digits="5"
/>

import { OvSegment } from 'overscan/vue'

<OvSegment
  value="-12.5"
  digits="5"
/>

import OvSegment from 'overscan/svelte/OvSegment.svelte'

<OvSegment
  value="-12.5"
  digits="5"
/>

variation: value="99999" digits="4"

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

<ov-segment
  value="99999"
  digits="4"
></ov-segment>

import { OvSegment } from 'overscan/react'

<OvSegment
  value="99999"
  digits="4"
/>

import { OvSegment } from 'overscan/vue'

<OvSegment
  value="99999"
  digits="4"
/>

import OvSegment from 'overscan/svelte/OvSegment.svelte'

<OvSegment
  value="99999"
  digits="4"
/>

FOURTEEN SEGMENT

The same element with segments="14". Fourteen segments can form the Latin alphabet, so a string that is unrepresentable on seven is often drawable here. That makes the refusal a property of the display rather than of the value, which is the honest way round: the value was never wrong.

NOMINAL

refuses on seven segments, draws on fourteen

PURGE

the alphabet fourteen segments can form

SECTOR 4

a space is a glyph, not a gap

318.4

digits still work

%$#

still refuses what it cannot form