Panel, le cockpit CSS pour interfaces web

🎛️ Pourquoi Panel ?

<!-- feuille de style + moteur + API (zéro dépendance) -->
<link rel="stylesheet" href="/assets/sdk/panel/panel.css">
<script defer src="/assets/sdk/panel/panel.js"></script>
<script defer src="/assets/sdk/panel/panel-instruments.js"></script>
<script defer src="/assets/sdk/panel/panel-cockpit.js"></script>
<script defer src="/assets/sdk/panel/panel-api.js"></script>

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, altitude: 3000, airspeed: 145 });

// 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.

Phase 2 — 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 de la Phase 1. Le voltmètre embarque un sélecteur de mode (V / A / Ω). Les assemblages refmanche et refcockpit viendront ensuite composer des tableaux de bord complets.

// 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. 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);