Nettoyage et construction micro services
This commit is contained in:
Christian CUNAT-BRULE
@@ -1,3 +1,5 @@
|
||||
import { initMusic } from './music.js';
|
||||
import { initInstruments } from './instruments.js';
|
||||
import { applyTheme, accents } from './theme.js';
|
||||
import { initJourney } from './journey.js';
|
||||
import { initCockpit } from './cockpit.js';
|
||||
@@ -33,85 +35,10 @@ function clock() {
|
||||
}
|
||||
clock(); setInterval(clock, 1000);
|
||||
|
||||
function makeGauge(id, max, step, unit, label) {
|
||||
const point = (angle, radius) => {
|
||||
const r = angle * Math.PI / 180;
|
||||
return [150 + radius * Math.sin(r), 150 - radius * Math.cos(r)];
|
||||
};
|
||||
let ticks = '';
|
||||
for (let v = 0; v <= max; v += step / 4) {
|
||||
const angle = -130 + v / max * 260;
|
||||
const major = v % step === 0;
|
||||
const a = point(angle, major ? 112 : 119), b = point(angle, 126), n = point(angle, 96);
|
||||
ticks += `<line class="tick ${major ? 'major' : v % (step / 2) === 0 ? 'intermediate' : 'quarter'}" x1="${a[0]}" y1="${a[1]}" x2="${b[0]}" y2="${b[1]}"/>`;
|
||||
if (major) ticks += `<text class="dial-number" x="${n[0]}" y="${n[1] + 4}">${max === 7000 ? v / 1000 : v}</text>`;
|
||||
}
|
||||
// Decorative demonstration red zone; not a calibrated vehicle redline.
|
||||
const redStart = point(-130 + 5500 / 7000 * 260, 128), redEnd = point(130, 128);
|
||||
const redZone = max === 7000 ? `<defs><linearGradient id="rpm-red-zone" gradientUnits="userSpaceOnUse" x1="${redStart[0]}" y1="${redStart[1]}" x2="${redEnd[0]}" y2="${redEnd[1]}"><stop stop-color="#f7a65d" stop-opacity="0.1"/><stop offset="0.5" stop-color="#f67855"/><stop offset="1" stop-color="#fa4d5b"/></linearGradient></defs><path class="rpm-red-zone" d="M${redStart.join(' ')} A128 128 0 0 1 ${redEnd.join(' ')}"/>` : '';
|
||||
const levelKey = max === 7000 ? 'coolantCelsius' : 'fuelPercent';
|
||||
const iconPath = document.querySelector(`[data-level="${levelKey}"] .aux-title svg`).innerHTML;
|
||||
// Compact auxiliary arc, separated from the main instrument.
|
||||
const levelPoint = (angle, radius = 64) => [150+radius*Math.sin(angle*Math.PI/180),244-radius*Math.cos(angle*Math.PI/180)];
|
||||
// 86.8 degrees: 30% shorter than the previous 124-degree auxiliary arc.
|
||||
const arcPath = (from,to) => `M${levelPoint(from).join(' ')} A64 64 0 0 0 ${levelPoint(to).join(' ')}`;
|
||||
const arc = arcPath(223.4,136.6);
|
||||
const redArc = max===7000 ? arcPath(153.96,136.6) : arcPath(223.4,212.984);
|
||||
const tickRatios = max === 7000 ? [0,.28,.56,.84,1] : [0,.12,.4133333333,.7066666667,1];
|
||||
const levelTicks = tickRatios.map((fraction,index) => {
|
||||
const angle = 223.4 - 86.8*fraction;
|
||||
const inner=levelPoint(angle,54), outer=levelPoint(angle,61);
|
||||
return `<path class="level-tick" d="M${inner.join(' ')} L${outer.join(' ')}"/>`;
|
||||
}).join('');
|
||||
const level = `<g class="digital-levels" data-digital-level="${levelKey}"><path class="level-arc-track" d="${arc}"/><path class="level-arc-progress" pathLength="100" d="${arc}"/><path class="level-arc-red" d="${redArc}"/>${levelTicks}<text class="level-end" x="95" y="304">${max===7000?'C':'E'}</text><text class="level-end" x="205" y="304">${max===7000?'H':'F'}</text>${max===7000?'':'<text class="level-end" x="150" y="325">½</text>'}<g class="level-icon" transform="translate(${max===7000?139.8:141.6} ${max===7000?267.8:269.6}) scale(${max===7000?.85:.7})" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${iconPath}</g><text class="level-value" x="150" y="348"><tspan data-value="${levelKey}">—</tspan> ${max===7000?'°C':'%'}</text></g>`;
|
||||
const low = max === 7000 ? 'C' : 'E', high = max === 7000 ? 'H' : 'F';
|
||||
const mini = `<path class="analog-separator" d="M59.590 240.609 L77 226 L223 226 L240.410 240.609"/><g class="analog-levels" data-analog-level="${levelKey}"><g transform="translate(150 264) scale(0.90) translate(-150 -264)"><g transform="translate(0 572) scale(1 -1)"><path class="mini-track" d="M90 308 A60 60 0 0 1 210 308"/><path class="mini-red" d="${max===7000?'M192.4 265.6 A60 60 0 0 1 210 308':'M90 308 A60 60 0 0 1 107.6 265.6'}"/><path class="mini-ticks" d="M90 308h8M107.6 265.6l6 6M150 248v8M192.4 265.6l-6 6M210 308h-8"/><text class="mini-end" transform="translate(0 604) scale(1 -1)" x="104" y="302">${low}</text><text class="mini-end" transform="translate(0 604) scale(1 -1)" x="196" y="302">${high}</text>${max===7000?'':`<text class="mini-end" transform="translate(0 520) scale(1 -1)" x="150" y="260">½</text>`}<line class="mini-needle" x1="150" y1="308" x2="150" y2="258"/><circle class="mini-hub" cx="150" cy="308" r="3"/></g></g><g class="level-icon" transform="translate(${max===7000?139.8:141.6} ${max===7000?277.8:279.6}) scale(${max===7000?.85:.7})" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${iconPath}</g><text class="level-value" x="150" y="368"><tspan data-value="${levelKey}">—</tspan> ${max===7000?'°C':'%'}</text></g>`;
|
||||
$(id).innerHTML = `<svg viewBox="0 0 300 265" role="img" aria-label="${label} : en attente"><path class="dial-rim" d="M68.4 255 A133 133 0 1 1 231.6 255 Z" fill="none" stroke="var(--border)"/><path class="dial-light" d="M51.9 232.3 A128 128 0 1 1 248.1 232.3"/><path class="digital-track" d="M51.9 232.3 A128 128 0 1 1 248.1 232.3"/><path class="digital-progress" pathLength="100" d="M51.9 232.3 A128 128 0 1 1 248.1 232.3"/>${ticks}${redZone}<text x="150" y="110" class="dial-label analog-unit">${unit}</text><text x="150" y="110" class="dial-label digital-unit">${max === 7000 ? 'TR/MIN' : unit}</text><line class="needle" x1="150" y1="150" x2="150" y2="43" style="transform-origin:150px 150px;transform:rotate(-130deg)"/><circle class="needle-hub" cx="150" cy="150" r="7" fill="var(--accent)"/><circle class="needle-hub" cx="150" cy="150" r="3" fill="var(--surface)"/><text x="150" y="212" class="dial-value">—</text><text x="150" y="239" class="dial-label">${label}</text>${level}${mini}</svg>`;
|
||||
return value => {
|
||||
const valid = typeof value === 'number' && Number.isFinite(value);
|
||||
$(`${id} .dial-value`).textContent = valid ? Math.round(value).toLocaleString('fr-FR') : '—';
|
||||
$(`${id} .digital-progress`).style.strokeDashoffset = String(valid ? 100 - Math.max(0,Math.min(1,value/max))*100 : 100);
|
||||
$(`${id} .needle`).style.opacity = valid ? '1' : '0';
|
||||
if (valid) $(`${id} .needle`).style.transform = `rotate(${-130 + Math.max(0, Math.min(max, value)) / max * 260}deg)`;
|
||||
$(`${id} svg`).setAttribute('aria-label', `${label} : ${valid ? Math.round(value) : 'indisponible'} ${max === 7000 ? 'tr/min' : 'km/h'}`);
|
||||
};
|
||||
}
|
||||
const speedGauge = makeGauge('#speed-gauge', 220, 20, 'KM/H', 'VITESSE');
|
||||
const rpmGauge = makeGauge('#rpm-gauge', 7000, 1000, '× 1 000 TR/MIN', 'RÉGIME MOTEUR');
|
||||
const { speedGauge, rpmGauge, updateLevels } = initInstruments();
|
||||
const savedProfile = storage.get('profile', 'route');
|
||||
$('#profile').value = ['route', 'ville', 'arret'].includes(savedProfile) ? savedProfile : 'route';
|
||||
let generation = 0, timer;
|
||||
function updateLevels(data) {
|
||||
all('[data-level]').forEach(el => {
|
||||
const key = el.dataset.level, value = data?.[key], valid = Number.isFinite(value);
|
||||
const min = Number(el.getAttribute('aria-valuemin')), max = Number(el.getAttribute('aria-valuemax'));
|
||||
const needle = el.querySelector('.aux-needle');
|
||||
if (needle) { needle.style.transform = `rotate(${valid ? -90+Math.max(0,Math.min(1,(value-min)/(max-min)))*180 : -90}deg)`; needle.style.opacity = valid ? '1' : '0'; }
|
||||
// Demo visualization ranges; actual CAN calibration belongs to the vehicle profile.
|
||||
const ratio = valid ? Math.max(0,Math.min(1,(value-min)/(max-min))) : 0;
|
||||
const starts = key === 'fuelPercent' ? [0,.1,.4,.7] : [0,.25,.5,.75];
|
||||
el.querySelectorAll('.sensor-segments i').forEach((segment,i) => {
|
||||
segment.classList.toggle('filled', valid && ratio > starts[i]);
|
||||
});
|
||||
const analog = document.querySelector(`[data-analog-level="${key}"]`);
|
||||
analog.querySelector('.mini-needle').style.transform = `rotate(${-90 + ratio*180}deg)`;
|
||||
analog.querySelector('.mini-needle').style.opacity = valid ? '1' : '0';
|
||||
analog.classList.toggle('red-zone', valid && (key === 'fuelPercent' ? ratio <= .25 : ratio >= .75));
|
||||
const digital = document.querySelector(`[data-digital-level="${key}"]`);
|
||||
const stops = key === 'fuelPercent' ? [0,.12,.4133333333,.7066666667,1] : [0,.28,.56,.84,1];
|
||||
const stepped = stops.filter(stop => stop <= ratio).at(-1) ?? 0;
|
||||
const progress = digital.querySelector('.level-arc-progress');
|
||||
progress.style.strokeDashoffset = String(100*(1-stepped));
|
||||
progress.style.opacity = valid && stepped > 0 ? '1' : '0';
|
||||
digital.classList.toggle('last-level', valid && key === 'coolantCelsius' && ratio >= .84);
|
||||
digital.classList.toggle('reserve-level', valid && key === 'fuelPercent' && stepped === .12);
|
||||
digital.classList.toggle('red-zone', valid && (key === 'fuelPercent' ? ratio <= .25 : ratio >= .75));
|
||||
el.classList.toggle('red-zone', valid && (key === 'fuelPercent' ? ratio <= .25 : ratio >= .75));
|
||||
el.classList.toggle('reserve', valid && key === 'fuelPercent' && value <= 10);
|
||||
if (valid) el.setAttribute('aria-valuenow', String(value)); else el.removeAttribute('aria-valuenow');
|
||||
el.setAttribute('aria-valuetext', valid ? value + (key === 'fuelPercent' ? ' %' : ' °C') : 'Indisponible');
|
||||
});
|
||||
}
|
||||
function offline() {
|
||||
$('#connection').textContent = 'Données indisponibles';
|
||||
$('#connection').classList.add('error');
|
||||
@@ -183,89 +110,7 @@ $('#fullscreen').onclick = async () => {
|
||||
catch { toast('Le plein écran n’est pas disponible dans ce navigateur.'); }
|
||||
};
|
||||
|
||||
const audio = $('#audio');
|
||||
let tracks = [], selected = -1;
|
||||
let shuffle = storage.get('shuffle') === 'true', shuffleBag = [], playbackHistory = [];
|
||||
$('#immersive-shuffle').setAttribute('aria-pressed', String(shuffle));
|
||||
$('#immersive-shuffle').onclick = () => {
|
||||
shuffle = !shuffle; shuffleBag = []; playbackHistory = [];
|
||||
storage.set('shuffle', String(shuffle));
|
||||
$('#immersive-shuffle').setAttribute('aria-pressed', String(shuffle));
|
||||
toast(shuffle ? 'Lecture aléatoire activée' : 'Lecture aléatoire désactivée');
|
||||
};
|
||||
function nextTrack() {
|
||||
if (!shuffle || tracks.length < 2) return selectTrack(selected + 1, true);
|
||||
if (!shuffleBag.length) {
|
||||
shuffleBag = tracks.map((_, index) => index).filter(index => index !== selected);
|
||||
for (let i = shuffleBag.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffleBag[i], shuffleBag[j]] = [shuffleBag[j], shuffleBag[i]];
|
||||
}
|
||||
}
|
||||
selectTrack(shuffleBag.pop(), true);
|
||||
}
|
||||
function renderPlaylist() {
|
||||
$('#playlist').replaceChildren();
|
||||
tracks.forEach((track, index) => {
|
||||
const li = document.createElement('li'), button = document.createElement('button');
|
||||
const number = document.createElement('span'), name = document.createElement('b');
|
||||
number.textContent = String(index + 1).padStart(2, '0'); name.textContent = track.name;
|
||||
button.append(number, name); button.classList.toggle('selected', index === selected);
|
||||
button.setAttribute('aria-pressed', String(index === selected)); button.onclick = () => selectTrack(index, true);
|
||||
li.append(button); $('#playlist').append(li);
|
||||
});
|
||||
$('#track-count').textContent = `${tracks.length} TITRE${tracks.length > 1 ? 'S' : ''}`;
|
||||
$('#empty-library').hidden = tracks.length > 0;
|
||||
['#play', '#previous', '#next'].forEach(id => $(id).disabled = tracks.length === 0);
|
||||
}
|
||||
async function playAudio() {
|
||||
try { await audio.play(); $('#audio-message').textContent = 'Lecture locale · aucun fichier envoyé au serveur.'; }
|
||||
catch { $('#audio-message').textContent = 'Lecture impossible : réessayez ou choisissez un format audio pris en charge.'; }
|
||||
}
|
||||
function selectTrack(index, play = false, remember = true) {
|
||||
if (!tracks.length) return;
|
||||
previousTap = -Infinity;
|
||||
if (remember && selected >= 0 && index !== selected) {
|
||||
playbackHistory.push(selected);
|
||||
if (playbackHistory.length > 256) playbackHistory.shift();
|
||||
}
|
||||
selected = (index + tracks.length) % tracks.length;
|
||||
shuffleBag = shuffleBag.filter(index => index !== selected);
|
||||
audio.src = tracks[selected].url;
|
||||
$('#track-title').textContent = tracks[selected].name;
|
||||
$('#home-track').textContent = tracks[selected].name;
|
||||
$('#track-subtitle').textContent = `Morceau ${selected + 1} sur ${tracks.length} · Bibliothèque locale`;
|
||||
$('#home-track-sub').textContent = 'Bibliothèque locale';
|
||||
renderPlaylist(); if (play) playAudio();
|
||||
}
|
||||
$('#music-files').addEventListener('change', event => {
|
||||
let added = 0;
|
||||
for (const file of event.target.files) {
|
||||
if (!file.type.startsWith('audio/') && !/\.(mp3|flac|ogg|wav|m4a|aac|opus)$/i.test(file.name)) continue;
|
||||
tracks.push({ name: file.name.replace(/\.[^.]+$/, ''), url: URL.createObjectURL(file) }); added++;
|
||||
}
|
||||
shuffleBag = [];
|
||||
renderPlaylist();
|
||||
if (selected === -1 && tracks.length) selectTrack(0);
|
||||
toast(added ? `${added} morceau${added > 1 ? 'x' : ''} ajouté${added > 1 ? 's' : ''}` : 'Aucun fichier audio reconnu');
|
||||
event.target.value = '';
|
||||
});
|
||||
$('#play').onclick = () => { if (selected === -1) return; if (audio.paused) playAudio(); else audio.pause(); };
|
||||
let previousTap = -Infinity;
|
||||
$('#previous').onclick = () => {
|
||||
const now = performance.now(), twice = now - previousTap < 600;
|
||||
previousTap = twice ? -Infinity : now;
|
||||
if (!twice) { audio.currentTime = 0; return; }
|
||||
if (shuffle) { shuffleBag = []; selectTrack(playbackHistory.pop() ?? selected, true, false); }
|
||||
else selectTrack(selected - 1, true);
|
||||
};
|
||||
$('#next').onclick = nextTrack;
|
||||
audio.addEventListener('play', () => $('#play').textContent = 'Pause');
|
||||
audio.addEventListener('pause', () => $('#play').textContent = 'Lecture');
|
||||
audio.addEventListener('ended', () => { if (audio.loop) return; if (shuffle || selected + 1 < tracks.length) nextTrack(); else $('#play').textContent = 'Lecture'; });
|
||||
audio.addEventListener('error', () => $('#audio-message').textContent = 'Ce fichier ne peut pas être lu. Essayez un autre format audio.');
|
||||
window.addEventListener('pagehide', event => { if (!event.persisted) tracks.forEach(track => URL.revokeObjectURL(track.url)); });
|
||||
renderPlaylist();
|
||||
initMusic({ storage, toast });
|
||||
initJourney({ storage, toast });
|
||||
initApplications({ storage, toast, navigate });
|
||||
initEmbeds({ storage, toast });
|
||||
|
||||
Reference in New Issue
Block a user