🎛️ Pourquoi Panel ?

// npm
npm install @synapxlab/panel

<!-- script global (IIFE) : window.SXP.Panel + window.SxpPanel, un seul fichier, 19 ko gz -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@synapxlab/panel/dist/panel.css">
<script src="https://cdn.jsdelivr.net/npm/@synapxlab/panel/dist/panel.min.js"></script>

// module ES
import Panel from '@synapxlab/panel';
import '@synapxlab/panel/style.css';

API JavaScript

// Poste de vol : instancier par sélecteur, piloter par API
const cockpit = new SXP.Panel.Cockpit("#cockpit");
cockpit.set({ pitch: 12, roll: -18, heading: 270, alt: 0.3, speed: 0.6 });

// Cadran à aiguille avec zones (l'aiguille vibre en butée rouge)
const bar = new SXP.Panel.Gauge("#pressure", {
  min: 0, max: 10, unit: "bar",
  zones: [{ from: 0, to: 7, color: "#33ff66" }, { from: 9, to: 10, color: "#ff3355" }]
});
bar.set(8.4);

// Synchroniser deux composants : un potentiomètre pilote l'oscilloscope
const scope = new SXP.Panel.Scope("#scope", { wave: "sine", freq: 3 });
const knob  = new SXP.Panel.Knob("#freq", { min: 1, max: 12, val: 3 });
knob.on(v => scope.set({ freq: v }));

// Alimenter un radar depuis n'importe quelle source temps réel
const radar = new SXP.Panel.Radar("#radar", { range: 0.7 });
socket.onmessage = e => radar.set(JSON.parse(e.data));

Boutons

Des boutons d'action lumineux, lisibles et déclinables, pensés pour afficher clairement les états et les variantes d'une interface.

<button class="sxp-btn is-on">Actif</button>

Interrupteurs on/off

Des toggles animés à LED pour rendre les activations, désactivations et changements d'état immédiatement compréhensibles. Chaque passage à ON déclenche une brève rampe d'allumage.

<label class="sxp-toggle">
  <input type="checkbox" checked><span class="sxp-led-dot"></span> Reverb
</label>

Curseurs, faders & indicateurs

Sliders horizontaux, faders verticaux et voyants LED. Le banc de faders, le vumètre et le voyant d'activité sont pilotés en direct par le spectre de notre simulation musicale.

Potentiomètres

Des knobs rotatifs qui donnent aux réglages fins une présence visuelle inspirée des équipements audio et industriels. Glissez verticalement, à la molette ou au clavier.

<div class="sxp-knob" data-min="0" data-max="100" data-val="35"></div>

Radar 1940

Un écran radar PPI d'époque : balayage tournant à rémanence phosphore, échos qui s'illuminent au passage du faisceau puis s'estompent lentement. Les potentiomètres pilotent le balayage, le gain, la portée et la rémanence.

Appareils de mesure

Des instruments vintage réellement fonctionnels : cadrans à aiguille dessinés sur canvas, pilotables par API (set(valeur)) et ici directement par les contrôles ci-dessus. Le voltmètre embarque un sélecteur de mode (V / A / Ω). Les assemblages refmanche et refcockpit composent un poste de vol complet.

// API : chaque cadran expose canvas._sxp.set(valeur)
<canvas class="sxp-inst" data-inst="manometer" data-min="0" data-max="10"
        data-zones="0,7,#33ff66;7,9,#ffb000;9,10,#ff3355"></canvas>

Poste de vol — refmanche + refcockpit

Le manche à balai (ressort de rappel au centre) et la manette des gaz (à friction) pilotent en direct le cluster d'instruments de vol : assiette, inclinaison, cap, variomètre, altitude et vitesse. Tout est dessiné sur canvas et pilotable par API.

// le manche pilote le cockpit
stick._sxp.onInput(function (s) {
  cockpit._sxp.set({ pitch: s.y * 60, roll: s.x * 45, heading: cap, speed: s.throttle });
});

Instruments Canvas en mouvement

Panel étend sa collection avec des instruments de mesure vintage bien au-delà des cadrans ronds : VU-mètre, enregistreur à bande, odomètre, rotamètre, thermomètre, boussole et compteur Geiger — et deux appareils au thème terminal : une bande perforée de téléscripteur qui décode son message au défilé, et la cascade spectrale ASCII d'un récepteur radio. Chaque appareil est dessiné sur Canvas, pilotable en JavaScript via set(), animé en temps réel et fonctionne sans aucune dépendance.

// chaque instrument s'instancie par sélecteur et se pilote par API
const vu = new SXP.Panel.Vumeter("#vu");
vu.set(0.82);                 // niveau audio 0..1 (ballistique VU)

const compas = new SXP.Panel.Compass("#compas");
compas.set(270);                // cap en degrés

const trace = new SXP.Panel.Recorder("#trace");
socket.onmessage = e => trace.feed(JSON.parse(e.data).v);

const bande = new SXP.Panel.Punchtape("#bande");
bande.set("BUILD 1.1.0 OK");     // perfore un nouveau message

const sdr = new SXP.Panel.Waterfall("#sdr");
sdr.feed(spectre);              // une ligne : tableau de niveaux 0..1

Thème terminal

Un conteneur .sxp-terminal transforme n'importe quel bloc HTML en écran phosphore vert : titres, liens, tableaux et champs natifs sont habillés d'office, et des composants à la Bootstrap — boutons, badges, alertes, barre de progression, carte, invite — s'écrivent avec le préfixe .sxp-t-. Variante ambre : .sxp-terminal--amber.

$ npm install @synapxlab/panel
added 1 package in 0.8s

00:10  démarrage
00:12  recalibrage radar
00:13  synchronisation

<!-- tout bloc HTML devient un écran phosphore ; variante : sxp-terminal--amber -->
<div class="sxp sxp-terminal">
  <h2>Diagnostic</h2>
  <button class="sxp-t-btn sxp-t-btn--primary">Valider</button>
  <span class="sxp-t-badge sxp-t-badge--warn">81 %</span>
  <div class="sxp-t-alert sxp-t-alert--danger"><strong>Erreur</strong> — liaison perdue</div>
  <div class="sxp-t-progress" data-label="62 %"><i style="width:62%"></i></div>
  <table>…</table>  <input type="text">  <a href="#">lien</a>
</div>