Le osservazioni

Parte tecnica: il file di osservazione#

Quanto segue è per chi scrive questi file a mano, li genera o li legge nel codice. Nell'editor non serve conoscerne nulla.

Una registrazione è un semplice file JSON. Niente al suo interno è un blob binario, un identificativo in un database o un riferimento a questo sito — puoi scriverne una a mano, generarla dal tuo archivio, o confrontarne due in una revisione del codice.

Ogni estratto qui sotto è in sola lettura, e ognuno conosce il formato: metti il cursore dentro un oggetto e premi Ctrl+Spazio (⌥+I su Mac) per elencare tutte le chiavi che potrebbero stare lì, con ciò che il modello dice di ciascuna.

L'osservazione#

Più osservatori: il caso#

Ogni osservatore ha una registrazione propria, e una registrazione non dice a quale caso appartiene: un resoconto sta in piedi da solo. Ciò che li mostra insieme è il caso, che li nomina: il case.json di un fascicolo RR0, che indica il titolo, la data e la classificazione del caso, ed elenca tutto ciò che vi è accaduto come events. I suoi eventi di tipo sighting sono i suoi resoconti, ciascuno dei quali punta alla registrazione di un osservatore:

{
  "id": "ChilesWhitted",
  "title": "Chiles et Whitted",
  "time": "1948-07-24 02:45",
  "events": [
    { "type": "event", "eventType": "sighting", "url": "observer-chiles.json" },
    { "type": "event", "eventType": "sighting", "url": "observer-whitted.json" }
  ]
}

Dallo a <rr0-sighting src> o al lettore, e ogni osservatore potrà essere scelto da un elenco. Una registrazione può essere data direttamente, senza caso, ma un caso con un solo avvistamento funziona allo stesso modo e nomina ciò che mostra. Provalo con case-chiles-whitted.json (riproducilo).

Dirlo in più di una lingua#

Una registrazione passa da un lettore all'altro, quindi ogni campo scritto da un autore può contenere una stringa per lingua invece di una sola: description, il title di una forma o di un elemento dello scenario, e il label e la note di una tappa.

{
  "description": {
    "fr": "Tout le compte rendu de Lonnie Zamora, d'un seul tenant…",
    "en": "Lonnie Zamora's whole account, of a piece…"
  }
}

Le chiavi sono etichette di lingua come le fornisce un browser (fr, en, pt-BR), e nessuna è obbligatoria. Una stringa semplice resta perfettamente valida e significa “nella lingua in cui è stata scritta” — come ogni registrazione fatta prima di questo. Un lettore le cui lingue non sono nessuna di quelle presenti riceve ciò che il file HA invece di un campo vuoto: una traduzione mancante non deve mai trasformare qualcosa che l'osservatore ha detto in qualcosa che non ha detto.

La lingua che riceve un lettore è quella del suo browser, a meno che la pagina non dica altrimenti: un lang sull'elemento stesso, o su qualsiasi cosa intorno a esso, viene preso per primo — un articolo che dichiara la propria lingua ha già detto in quale lingua il suo lettore lo sta leggendo. L'elenco del browser viene dopo, quindi dichiararne una impone una scelta senza scartare le altre.

L'editor mostra una sola lingua, quella del lettore, e scrivendo tocca solo quella — quindi aprire un file nell'altra lingua e scrivere è il modo in cui si aggiunge una traduzione, e un autore non può cancellare quella di un altro.

Ciò che è stato visto#

timeline.keyframes è un elenco di { t, shapes }, con t in millisecondi dall'inizio. Ogni forma porta un sourceId — più forme possono condividere una linea temporale (il fenomeno, una fiamma che lo segue, una seconda luce) — e una shape:

{
  "kind": "oval",
  "bounds": { "x": 0, "y": 0, "width": 0, "height": 0 },
  "color": "#39ff14",
  "angle": 0,
  "transparency": 0,
  "haloScale": 1.5,
  "brightness": 0,
  "blur": 0,
  "selected": false,
  "title": "il fenomeno",
  "angular": { "widthDeg": 1.2, "heightDeg": 0.4 },
  "aim": { "azimuthDeg": 353.6, "altitudeDeg": 0.6 }
}

aim lo colloca, angular lo dimensiona. bounds è la proiezione di entrambi sulla tela fissa di 640×360 con la direzione e il campo visivo della posa, attraverso lo strumento della registrazione stessa; viene ricavato di nuovo al caricamento, così un file sopravvive a un cambiamento di tela, di campo visivo, di strumento, o di dove guardava l'osservatore. Se i pixel e gli angoli dovessero divergere, vincono gli angoli: spostare bounds in un file non ha effetto finché c'è aim. Un file scritto a mano può omettere bounds del tutto.

timeline.order è l'ordine di disegno da dietro in avanti, timeline.groups gli identificativi di sorgente raggruppati. Entrambi facoltativi.

Tutto ciò che c'è intorno#

Un elemento dello scenario si esprime in metri, come tutto ciò che non è il fenomeno:

Che cos'era: le interpretazioni#

Una registrazione esprime angoli, e un corpo in metri non fa mai parte di ciò che è stato visto. È un'affermazione su di esso, e la si mette alla prova collocandola nella scena e guardandola da dove si trovava l'osservatore: proietta la sua ombra, il suolo può nasconderla, e il suo contorno viene misurato in ogni istante rispetto a ciò che l'osservatore ha detto. Un'interpretazione viene mostrata da sola, come il mondo che afferma; se si chiede il confronto (il pulsante ◌, o compare-account su <rr0-sighting>), il lettore disegna accanto tutto ciò che l'osservatore ha visto come contorni tratteggiati e indica di quanto si discosta la direzione e quante volte più largo e più alto appare ciascun corpo, in rosso quando un osservatore non avrebbe potuto sbagliarsi di tanto.

La lettura dell'osservatore stesso va nella registrazione, come interpretation. Quella di un altro non è nel resoconto: è un'altra osservazione, elencata nel caso (vedi sotto). Un resoconto il cui osservatore ha detto che cosa fosse viene disegnato a tutto tondo, come l'ha detto; uno che non dice nulla in metri viene disegnato come gli angoli che esprime. Il lettore lo propone, insieme all'interpretazione di ciascun analista, una alla volta.

{
  "interpretation": {
    "title": "Un velivolo posato sulle sue zampe",
    "bodies": [{
      "id": "craft",
      "explains": ["ufo-1"],
      "model": { "id": "ellipsoid" },
      "track": [
        { "t": 52000, "eastM": -571.6, "northM": -965.5, "onGround": true,
          "sizeM": { "widthM": 3.36, "lengthM": 3.36, "heightM": 1.73 },
          "appearance": { "color": "#e8e6df", "albedo": 0.7 } },
        { "t": 83000, "azimuthDeg": 195.9, "altitudeDeg": 4.1, "distanceM": 44 }
      ]
    }]
  }
}

Eventi del cielo#

Ciò che è accaduto nel cielo durante la registrazione, come fatti: un tiro laser, un lancio di razzo, un rientro. Ciascuno è avvenuto che qualcuno l'abbia visto o no: non è quindi l'interpretazione, che legge il resoconto, né lo scenario, che dura più dell'osservazione (una casa, un albero). Sono dichiarati sotto skyEvents, al primo livello della registrazione; una registrazione che li metteva nella sua interpretation, come facevano le versioni precedenti, viene ancora letta.

{
  "skyEvents": {
    "beams": [{
      "id": "meudon-paris",
      "path": [
        { "lat": 48.805055, "lng": 2.231171, "altitudeM": 172.5 },
        { "lat": 48.83632, "lng": 2.33702, "altitudeM": 88 }
      ],
      "wavelengthNm": 532,
      "powerW": 10
    }]
  }
}

Un'altra lettura: un'interpretazione è un'altra osservazione#

La lettura che un altro fa di un resoconto (quella di un analista, di un investigatore, un confronto fatto per metterla alla prova) non fa parte del resoconto: è un'altra osservazione, quella che c'è stata come la sostiene il suo autore. Perciò è elencata nel caso come l'originale, come evento di tipo sighting, contrassegnato come lettura da interpretationOf, e ha una registrazione propria a url:

{
  "id": "McMinnville1950",
  "events": [
    { "type": "event", "eventType": "sighting", "id": "trent", "title": "Paul Trent", "url": "observer-mcminnville.json" },
    { "type": "event", "eventType": "sighting",
      "interpretationOf": "trent",
      "time": "2013-06",
      "by": [{ "people": "CousynAntoine" }, { "people": "LouangeFrancois" }],
      "title": "A model on a thread under the line",
      "url": "interpretation-mcminnville-2.json" }
  ]
}

La registrazione a url è una registrazione come le altre. Condivide il luogo, l'ora e la posa dell'osservatore del resoconto che legge, così che un corpo collocato dall'osservatore, o in metri da dove si trovava, significa la stessa cosa in entrambe; non disegna alcuna forma (una timeline vuota); e tiene i corpi nella propria interpretation, descritta sopra. L'explains di un corpo designa le forme del resoconto.

{
  "version": 1,
  "id": "1950-05-11-TrentPaul-interpretation-2",
  "time": { "year": 1950, "month": 5, "day": 11, "hour": 19, "minute": 45 },
  "utcOffsetHours": -7,
  "place": [{ "value": { "lat": 45.104167, "lng": -123.330556 } }],
  "observerTrack": { "keyframes": [{ "t": 0, "pose": { "lat": 45.104167, "lng": -123.330556, "headingDeg": 41.3, "pitchDeg": 14.85, "fovDeg": 33.4 } }] },
  "tags": ["interpretation"],
  "timeline": { "keyframes": [], "order": [], "groups": [] },
  "interpretation": {
    "title": "A model on a thread under the line",
    "bodies": [{
      "id": "model",
      "explains": ["ufo-1"],
      "model": { "id": "disc" },
      "track": [
        { "t": 0, "eastM": -52, "northM": 118, "altitudeAboveGroundM": 7.5,
          "sizeM": { "widthM": 0.3, "lengthM": 0.3, "heightM": 0.1 } }
      ]
    }]
  }
}

Il lettore elenca gli osservatori del caso dagli eventi senza interpretationOf e propone ogni lettura accanto al resoconto che designa, una alla volta (il pulsante ◌ la misura contro il resoconto). Una registrazione da sola non ha altra lettura che la propria interpretation. La forma più vecchia, un evento di tipo interpretation che designa la registrazione in sighting con i corpi in linea o in un file a url, si legge ancora. L'editor apre un caso: il suo selettore sopra il rendering elenca i resoconti e le letture, ciascuno aprendosi come la registrazione che è, con un pulsante per aggiungere una lettura (una nuova registrazione che condivide luogo, ora e posa del resoconto, e un evento per essa), uno per eliminarla, e uno per esportare il caso e ogni registrazione aggiunta o modificata in uno zip. Provalo con case-mcminnville.json (riprodurlo, modificarlo).

Il meteo, e le sue nuvole#

Un fotogramma chiave weather esprime le condizioni del cielo in un momento dell'orologio della registrazione; fra due fotogrammi chiave ogni numero viene interpolato, mentre il tipo di precipitazione e il temporale vengono mantenuti. Contiene:

Ogni strato di cloudLayers è una coltre di nuvole a un'altezza reale, e resta sé stesso da un fotogramma chiave al successivo:

Una nuvola singola in instances è una nuvola del suo strato che il file colloca con esattezza, perché il resoconto lo ha fatto: quella dietro cui è passato il fenomeno, quella che era lì e da nessun'altra parte. Viene disegnata come una delle altre del suo strato — la stessa texture, la stessa soglia —, distinta dalle vicine soltanto da dove si trova e da quanto è grande, ed è presente anche quando la coverage dello strato è nulla. Segue il vento dello strato come le altre, e nasconde un fenomeno davanti al quale passa.

{
  "weather": {
    "cloudLayers": [
      {
        "id": "low", "type": "cumulus",
        "baseM": 1500, "thicknessM": 800,
        "coverage": 0.55, "sizeM": 1400, "density": 1, "darkness": 0.15,
        "instances": [
          { "id": "the-one", "eastM": 0, "northM": 4200,
            "baseM": 1500, "thicknessM": 800,
            "widthM": 1900, "depthM": 1300, "rotationDeg": 12, "density": 1 }
        ]
      },
      { "id": "high", "type": "cirrus", "baseM": 8000, "thicknessM": 400,
        "coverage": 0.2, "sizeM": 2200, "density": 0.35, "iceCrystalAlignment": 0.65 }
    ],
    "precipitationType": "none", "precipitationIntensity": 0,
    "windDirectionDeg": 90, "windSpeed": 5, "storm": false
  }
}

Una registrazione il cui meteo è stato consultato (ha un weatherSource) contiene la risposta del dato, non un link a esso: ERA5 fornisce le fasce bassa, media e alta come tre strati chiamati record-low, record-mid e record-high, la base bassa stimata dallo scarto fra temperatura e punto di rugiada, le altre due a 3 500 m e 8 000 m. Il loro tipo è unknown (cirro per quello alto), la loro dimensione e la loro densità sono ipotesi di disegno: una rianalisi sa quanta parte di ogni fascia era coperta, non che aspetto avessero le nuvole. Richiedi il dato dall'editor e gli strati vengono riscritti; modifica uno strato a mano e la registrazione diventa dell'autore, con la fonte rimossa.

Da dove viene ogni valore#

Qualsiasi valore di una registrazione può essere scritto così com'è, o avvolto con la sua provenienza:

{
  "durationSeconds": {
    "value": 15,
    "basis": "derived",
    "rationale": "Da 13 a 18 s nella sintesi dell'inquirente; preso il valore medio"
  }
}

basis è stated (l'ha detto l'osservatore, ed è ciò che significa un valore semplice), derived (ricavato da ciò che ha detto più qualcosa di verificabile: la larghezza di una strada, una mappa, un disegno misurato; rationale dà il ragionamento) o assumed (scelto perché la ricostruzione abbia comunque un valore, senza basarsi su nulla di ciò che l'osservatore ha detto). L'elenco dei valori assumed è l'elenco di ciò per cui tornare dall'osservatore o al fascicolo, ed è per questo che vale la pena scriverlo anche quando non si scrive nient'altro.

Verificare un file#

Il formato è pubblicato anche come JSON Schema, generato dagli stessi tipi del lettore: ogni chiave che conosce, ciò che ciascuna può contenere, e le parole che accetta un elenco chiuso. Una chiave scritta male o un valore sconosciuto non lo superano. Non dice nulla di ciò che si può omettere, che è una questione di senso a cui risponde questa pagina. Per vedere il risultato, apri il file nel lettore, da un link, o dal tuo disco con le immagini e i modelli che nomina. Il lettore lo verifica allo stesso modo al caricamento, e indica dietro un ⚠ sull'immagine ciò che non ha potuto riprodurre così come è scritto: una chiave che nulla legge, una parola fuori dal suo elenco, e ciò che ha dovuto inventare perché il primo fotogramma chiave di una forma lo ometteva (un campo mantenuto dal fotogramma chiave precedente è la regola di cui sopra, non un problema).

Un file completo#

La registrazione più piccola che esprima ancora qualcosa — un ovale silenzioso che attraversa il cielo in dodici secondi, in una data reale e in un luogo reale. Tutto il resto del formato è facoltativo, e tutto ciò che segue ha una funzione:

{
  "version": 1,
  "description": "The smallest recording that still states something: one silent orange oval, a degree and a half wide, crossing the south-western sky from left to right over twelve seconds.",
  "time": { "year": 2024, "month": 8, "day": 12, "hour": 22, "minute": 30 },
  "durationSeconds": 12,
  "utcOffsetHours": 2,
  "place": [{ "lat": 45.19, "lng": 5.72, "name": "Grenoble, Isère, France" }],
  "timeline": {
    "keyframes": [
      {
        "t": 0,
        "shapes": [
          {
            "sourceId": "ufo-1",
            "shape": {
              "kind": "oval",
              "bounds": { "x": 150, "y": 150, "width": 10, "height": 3 },
              "angular": { "widthDeg": 1.6, "heightDeg": 0.5 },
              "color": "#ff8c1a",
              "angle": 0,
              "transparency": 0,
              "haloScale": 1.2,
              "selected": false
            }
          }
        ]
      },
      {
        "t": 12000,
        "shapes": [
          {
            "sourceId": "ufo-1",
            "shape": {
              "kind": "oval",
              "bounds": { "x": 480, "y": 130, "width": 10, "height": 3 },
              "angular": { "widthDeg": 1.6, "heightDeg": 0.5 },
              "color": "#ff8c1a",
              "angle": 0,
              "transparency": 0,
              "haloScale": 1.2,
              "selected": false
            }
          }
        ]
      }
    ]
  },
  "observerTrack": {
    "keyframes": [
      {
        "t": 0,
        "pose": { "lat": 45.19, "lng": 5.72, "elevationM": 0, "headingDeg": 215, "pitchDeg": 20, "fovDeg": 60 }
      }
    ]
  },
  "soundTrack": { "keyframes": [{ "t": 0, "sound": { "kind": "none", "volume": 0, "pitchHz": 100 } }] }
}

Per modificarlo e vederlo riprodotto, incollalo nell'editor, che completa ogni chiave del formato, propone le parole che ciascuna accetta, e dice ciò che il modello ne dice.

È /demo-data/example-minimal.json su questo sito, quindi puoi scaricarlo, e riprodurlo prima di cambiare qualsiasi cosa. Nota che compaiono sia angular sia bounds: l'angolo è ciò che il file SIGNIFICA, e i pixel ne vengono ricavati di nuovo al caricamento — scrivi l'angolo, e lascia che una stima errata dei pixel venga corretta per te.

Altri più grandi da leggere#

Ogni demo di questo sito è un semplice file che puoi aprire. Questi quattro sono quelli che vale la pena leggere per vedere come è costruita una registrazione reale:

Quattro regole che decidono che cosa significa un file#

• I campi discreti vengono mantenuti, quelli continui interpolati. Una forma omessa in un fotogramma chiave successivo resta com'era, e così qualsiasi campo che un fotogramma chiave omette in una forma che invece indica di nuovo: un fotogramma chiave che dà solo un nuovo aim sposta la forma e mantiene tutto il resto (indicare di nuovo bounds senza aim né angular viene inteso come spostarla tramite i suoi pixel); una il cui primo fotogramma chiave è a cinque secondi è già dipinta, in quello stato, da zero. Per fare in modo che qualcosa smetta di essere visibile, dagli un fotogramma chiave con transparency: 1.
• Solo angoli. Nessuna dimensione reale e nessuna distanza reale sono memorizzate da nessuna parte. I metri vengono ricavati, come disuguaglianze, da ciò dietro o davanti a cui si è detto che il fenomeno passava (decor[].occludesSourceIds).
• Il dichiarato prevale sul dedotto. occludesSourceIds registra affermazioni dell'osservatore. Niente in questo formato può dedurle: descrive un aspetto in un campo visivo, non una posizione nello spazio.
• Assente non è zero. Nessuna traccia sonora significa che nessuno l'ha chiesto; kind: "none" significa che l'osservatore ha riferito di non aver sentito nulla. La stessa distinzione attraversa il meteo e la nube di ghiaccio.

Questa pagina è il riferimento del formato. Il ragionamento dietro ogni campo si trova nei commenti di documentazione del suo tipo, con cui si completano gli estratti qui sopra, e nel codice sorgente.

I componenti#

Tre degli elementi standard riguardano un'osservazione: la scena in cui viene riprodotta, il lettore che la mostra e l'editor che la descrive. L'editor di casi e l'editor di interviste hanno le loro sezioni, nelle pagine che ne parlano.

Standard, ed è questo tutto il progetto#

Sono cinque Web Component — lo standard del browser stesso per un elemento personalizzato, non un componente del framework di qualcuno. Ciò che ne consegue merita di essere detto, perché è ciò che permette di metterti in mano lo strumento:

• Funzionano in qualsiasi pagina. Un sito statico, WordPress, un'applicazione React o Vue, un wiki, un file HTML scritto a mano. Sono elementi: una pagina che può contenere un <video> può contenere anche questi.
• Niente da compilare. Nessun bundler, nessuna fase di compilazione, nessuna configurazione nel tuo progetto. Il modulo registra il suo elemento all'importazione e il browser fa il resto.
• Niente da inseguire. Non c'è una versione di framework a cui adeguarsi, quindi la nuova major release di qualcun altro non può renderli obsoleti.
• Il loro interno è affar loro. Ognuno porta il proprio markup e i propri stili in uno shadow root, quindi il CSS della tua pagina non può romperli e loro non possono rompere la tua pagina.

Si compongono in una riga: sia <rr0-sighting> sia <rr0-sighting-editor> contengono un <rr0-scene>, e la scena contiene lo strato di riproduzione — la linea temporale, i controlli, il canvas del puntatore. Quindi tutto ciò a cui risponde la scena è disponibile in tutti e tre — tramite .scene e .scene.ufoElement dal più esterno, poiché la composizione vive in uno shadow root.

A cosa serve ciascuno#

• <rr0-scene> — il fenomeno nel mondo che lo circonda. La forma disegnata da un osservatore, il suo colore, il suo alone e il suo movimento, collocata nel cielo, nell'orizzonte, nel meteo e nel suolo reali di una data, un'ora e un luogo dichiarati — nascosta da ciò che stava davanti. Utile anche da sola, per un cielo in cui non c'è niente.
• <rr0-sighting> — il resoconto, da guardare. Una scena più chi testimonia, i metadati dell'osservazione, i suoi crediti e le righe che permettono a un lettore di portarlo altrove. È così che appare un avvistamento pubblicato.
• <rr0-sighting-editor> — il resoconto, da ricostruire. Tutto quanto sopra più la barra degli strumenti di redazione: descrivere un'osservazione, o correggerne una.
• <rr0-case-editor> — un caso, da assemblare. Contiene un <rr0-sighting-editor> e gli presenta una registrazione di un case.json alla volta: i resoconti degli osservatori e le letture che se ne fanno. Li aggiunge, li seleziona e li elimina, ed esporta il caso.
• <rr0-date-input> — una data, con la sua precisione. Un selettore per un istante completo, un testo per meno (EDTF), e il grado di certezza. Gli editor lo usano per l'inizio e la fine di un'osservazione e per la data di un caso; dice ciò che contiene con un evento datechange.

Come si incastrano#

Non scrivi mai l'annidamento. Ogni elemento costruisce quello sottostante dentro il proprio shadow root, quindi ciò che la tua pagina contiene è un solo tag:

<rr0-sighting>           chi testimonia, il pannello dei metadati, le righe di incorporamento
└─ <rr0-scene>           il cielo, l'orizzonte, il meteo e lo scenario reali, il fenomeno, la riproduzione

<rr0-sighting-editor>    gli otto pannelli di redazione
└─ <rr0-scene>           una scena, non un avvistamento: un editor ha la propria barra degli strumenti

Ecco perché un solo tag script si porta dietro quelli sottostanti:

Così una pagina che mostra un avvistamento e, più in basso, un cielo tutto suo ha bisogno di un solo script e di due tag — il secondo elemento è già registrato.

Si può entrare in una composizione, una proprietà alla volta:

const sighting = document.querySelector("rr0-sighting")
sighting.scene                    // il <rr0-scene> che compone
sighting.scene.ufoElement         // e lo strato di riproduzione sotto di esso
sighting.scene.ufoElement.play()  // quindi la riproduzione è a due proprietà di distanza

<rr0-sighting-editor> tiene per sé la propria composizione: ciò che offre a una pagina è la registrazione — sightingData — e l'evento che segnala che è cambiata.

Quale ti serve#

Non sono varianti di un unico bundle: ognuno è autonomo, quindi carica solo quello che ti serve. Tutti e tre includono Three.js e un catalogo stellare, che è il prezzo di un cielo reale.

Metterne uno in una pagina richiede due righe.

Integrarlo nella tua applicazione#

Dopo npm install @rr0/ufoathome:

import "@rr0/ufoathome/scene"    // registra <rr0-scene>
import "@rr0/ufoathome/sighting" // registra <rr0-sighting>
import "@rr0/ufoathome/editor"   // registra <rr0-sighting-editor>

Oppure copia il contenuto delle cartelle dist-embed* del pacchetto sul tuo server e punta lì il <script src>. Ogni modulo fa riferimento alle proprie risorse — il catalogo stellare, l'audio meteorologico — in modo relativo a se stesso, quindi continua a funzionare da qualsiasi percorso; basta tenere insieme i file di ogni bundle. A quel punto nulla dipende più da questo sito.

Lingua#

Ogni etichetta è tradotta per rilevamento, senza selettore: prima la lingua dichiarata dalla pagina stessa — l'attributo lang più vicino, quindi <html lang="fr"> ottiene etichette in francese — poi le preferenze del browser, poi l'inglese. Una pagina che non dichiara nulla ricade sul browser esattamente come prima.

<rr0-sighting>#

La vista standard di un avvistamento

La scelta predefinita per un avvistamento reale, con uno o più osservatori. Compone un <rr0-scene> e aggiunge la barra degli strumenti: chi rende il resoconto, e il pannello i con i metadati propri dell'osservazione e i suoi crediti, e un pulsante di condivisione: il link che la riproduce, e le sue righe di incorporamento.

<rr0-sighting src="sighting.json"></rr0-sighting>
<rr0-sighting src="case.json"></rr0-sighting>  <!-- un caso, e tutti i suoi osservatori -->

Una registrazione che non nomina alcun osservatore non ha nessuna riga “resoconto di”, ed è la cosa esatta da dire di un cielo preparato per mostrare un alone.

La registrazione di ogni osservatore viene caricata non appena la lista è nota, quindi sceglierne un'altra è immediato. La lista nomina ciascuno con il suo title, altrimenti con nomi e cognome, altrimenti con il suo id; uno che non nomina nessuno è numerato secondo il suo posto nella lista.

Il pannello i si apre come popover, che Esc o un clic all'esterno chiudono (solo un clic all'esterno, su un browser senza popover). Indica il caso, la data, il luogo, il resoconto e i tag; data, luogo e tag ne escono finché la striscia show-labels li indica già. La data è all'ora dell'osservatore stesso (utcOffsetHours, o un'ora approssimata dalla longitudine), non a quella del lettore. La versione in fondo apre questa osservazione nell'editor. Anche la descrizione lo lascia finché i chip sono mostrati: è nella loro scatola Riepilogo, che si apre con un clic.

Il pulsante Condividi, tra quelli del lettore, apre un'unica finestra che dà il link o il codice da incorporare (il codice in un editor che va a capo e si può modificare), per il lettore o per l'editor, con le opzioni della pagina di condivisione, ciascuna offerta com'è il lettore. Il codice carica l'elemento da dovunque questa copia sia stata a sua volta caricata, così che uno snippet copiato da una copia locale o di staging rimandi a quella copia.

Cosa emette

Inserirlo nella tua pagina

<script type="module" src="https://ufoathome.org/lib/rr0-sighting.mjs"></script>
<rr0-sighting src="sighting.json"></rr0-sighting>

sighting.json è un file di avvistamento. Oppure, dopo npm install @rr0/ufoathome: import "@rr0/ufoathome/sighting". Il bundle pesa 249 KB compresso con gzip e registra il tag da sé — nient'altro da chiamare. La presentazione sopra dice cos'altro comporta, e condividere un'osservazione ha l'esempio completo, da provare e da copiare.

<rr0-scene>#

Il fenomeno, il cielo e il suolo

La forma disegnata da un osservatore, collocata nel cielo, nell'orizzonte, nel meteo e nel suolo reali della data, dell'ora e del luogo della registrazione, e nascosta da ciò che le stava davanti — con i comandi di riproduzione sotto. È l'elemento su cui si costruiscono gli altri due.

<rr0-scene src="sighting.json"></rr0-scene>

Al passaggio del puntatore nomina ciò che c'è sotto — una stella con la sua magnitudine e la sua altezza, un pianeta, una cometa, un edificio, un altro osservatore — e non dice nulla dove il suolo nasconde ciò che stai indicando.

Il pulsante © nel suo angolo elenca i crediti di ciò che mostra — le immagini del suolo e della mappa, i modelli, le foto del luogo, i suoni. Dentro <rr0-sighting> il pulsante è nascosto: sono nel suo pannello i.

La riproduzione, su ufoElement

Tutto ciò che riguarda la riproduzione della registrazione sta una proprietà più in basso, nel livello di riproduzione — scene.ufoElement.play() — lo stesso livello che gli altri due componenti raggiungono attraverso la propria scene.

Quei due sono gli unici valori predefiniti positivo e negativo di questo elemento, e la differenza è voluta. I momenti nominati di una registrazione sono le sue stesse parole su di sé, quindi si mostrano ovunque esistano; la mappa costa richieste di tile a una terza parte la prima volta che si apre, e non spetta a una pagina spenderle per conto di un lettore senza dirlo. In entrambi i casi il lettore conserva i due pulsanti, accanto a quello dello schermo intero — una pagina che imposta un valore predefinito non è una pagina che vieta il contrario.

La barra degli strumenti e i pulsanti dell'angolo compaiono solo mentre il puntatore è sopra l'immagine, in riproduzione o in pausa, o quando la tastiera vi porta il focus. Uno schermo tattile, che non ha un puntatore con cui passarci sopra, li tiene visibili.

Con la barra del tempo attiva, i tasti funzionano come su un sito di video: ← torna indietro di 5 s, → va avanti di 5 s e Spazio avvia o mette in pausa. Avviare o mettere in pausa, con un tasto, con il pulsante o con un clic sull'immagine, ne mostra il simbolo per un istante al centro dell'immagine.

Cosa emette

Inserirlo nella tua pagina

<script type="module" src="https://ufoathome.org/lib/rr0-scene.mjs"></script>
<rr0-scene src="sighting.json"></rr0-scene>

sighting.json è un file di avvistamento. Oppure, dopo npm install @rr0/ufoathome: import "@rr0/ufoathome/scene". Il bundle pesa 238 KB compresso con gzip e registra il tag da sé — nient'altro da chiamare. La presentazione sopra dice cos'altro comporta, e condividere un'osservazione ha l'esempio completo, da provare e da copiare.

<rr0-sighting-editor>#

L'editor

Tutto quanto sopra più la barra degli strumenti di creazione. Mettilo in una pagina dove le persone devono poter descrivere o correggere un'osservazione da sé.

<rr0-sighting-editor></rr0-sighting-editor>
<rr0-sighting-editor src="sighting.json"></rr0-sighting-editor>

Il suo canvas è una superficie di modifica, quindi enableClickToPlay lì è disattivato: un clic seleziona e trascina una forma invece di avviare o fermare la riproduzione. Cosa fanno gli otto gruppi della sua barra degli strumenti è spiegato nella pagina dell'editor.

Cosa emette

Inserirlo nella tua pagina

<script type="module" src="https://ufoathome.org/lib/rr0-sighting-editor.mjs"></script>
<rr0-sighting-editor></rr0-sighting-editor>

Oppure, dopo npm install @rr0/ufoathome: import "@rr0/ufoathome/editor". Il bundle pesa 293 KB compresso con gzip e registra il tag da sé — nient'altro da chiamare. La presentazione sopra dice cos'altro comporta, e condividere un'osservazione ha l'esempio completo, da provare e da copiare.

Fonti e scelte#

Nulla di ciò che lo strumento disegna è inventato. Ogni valore viene da una fonte nominata, letta in un momento dichiarato, e dove non esiste alcun dato l'interfaccia lo dice invece di colmare il vuoto.

I principi#

• Una fonte è letta solo quando serve. I cataloghi sono costruiti una volta nel repository; i servizi sono chiamati solo per una registrazione che ne ha bisogno (un luogo, una data nel loro intervallo, un pulsante premuto), e mai per una data anteriore all'inizio del loro archivio.
• Ciò che può scomparire è ospitato qui. I dati che una terza parte potrebbe ritirare o che non possono essere letti da un browser (elementi orbitali, modelli 3D) sono copiati, ridotti e serviti da ufoathome.org con il loro credito, così che ogni pagina che incorpora una scena li ottenga.
• Il misurato batte il modellato, e il modellato batte il supposto. Una luminosità è un'osservazione pubblicata dove ne esiste una; una formula completa solo ciò che nessuno ha misurato, e un oggetto senza né l'una né l'altra è calcolato ma non disegnato.
• Ogni servizio è sostituibile. Meteo, rilievo, immagini, luogo, fuso orario, modelli e redazione passano per uno stesso registro: la fonte è una scelta visibile, con il suo credito accanto, e se ne può aggiungere una seconda senza toccare il resto.
• I limiti sono dichiarati. Ogni fonte qui sotto dice dove si ferma: prima del 1940 per il meteo, prima del 1957 per i satelliti, prima del febbraio 2021 per i singoli passaggi.

Il cielo · L'aria · Satelliti · Aerei e scie · Meteo · Il suolo · Luogo e ora · Scenografia, foto e suono

Il cielo

L'aria

La luce del cielo è calcolata, non disegnata: la luce del Sole e della Luna è seguita attraverso un'atmosfera sferica di aria, foschia e ozono a quindici lunghezze d'onda, poi mostrata come la vedrebbe un occhio adattato o una fotocamera. Ogni dato in ingresso qui sotto è una misura o un modello pubblicato; i due ancoraggi di visualizzazione sono le sole scelte.

Satelliti

Due livelli. Per ogni data dallo Sputnik, ciò che l'ombra della Terra consentiva e quanti oggetti erano in orbita. Dal febbraio 2021, quali satelliti hanno davvero attraversato il cielo, dove e con quale luminosità.

Aerei e scie

Dal 2022, gli aerei che erano nel cielo dell'osservatore all'ora di una registrazione, l'aria in cui volavano e la scia che i loro motori vi lasciavano. Ciò che è disegnato è un candidato compatibile, mai un'identificazione, e un cielo vuoto nell'archivio non esclude nulla.

Meteo

Il suolo

Luogo e ora

Scenografia, foto e suono

Il dettaglio di ogni scelta, con le misure che l'hanno decisa, è nei commenti al codice di ogni fonte nel repository.