iot/spore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: multimatrix example

Browse Source
This commit is contained in:
0x1d
2025-10-04 13:54:06 +02:00
parent d07c1f40de
commit 0fcebc0459
8 changed files with 515 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
examples/multimatrix/data/public/index.html Normal file
View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Matrix Audio Control</title>
<style>
body { font-family: Arial, sans-serif; background: #111; color: #f4f4f4; margin: 0; padding: 2rem; }
h1 { color: #4caf50; }
button { margin: 0.25rem; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; }
button { background: #4caf50; color: #fff; }
button.secondary { background: #1976d2; }
button.danger { background: #f44336; }
.controls { display: flex; flex-wrap: wrap; margin-bottom: 1.5rem; }
.status { margin-top: 1.5rem; }
.status span { font-weight: bold; }
.volume-control { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
input[type="range"] { width: 200px; }
.card { background: #1f1f1f; border-radius: 8px; padding: 1.5rem; box-shadow: 0 0 10px rgba(0,0,0,0.4); max-width: 400px; }
.status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 0.5rem; }
.status-indicator.ready { background: #4caf50; }
.status-indicator.not-ready { background: #f44336; }
</style>
</head>
<body>
<div class="card">
<h1>Multi-Matrix Audio</h1>
<div class="controls">
<button onclick="sendAction('play')">Play</button>
<button class="secondary" onclick="sendAction('pause')">Pause</button>
<button class="secondary" onclick="sendAction('resume')">Resume</button>
<button class="danger" onclick="sendAction('stop')">Stop</button>
<button onclick="sendAction('previous')">Previous</button>
<button onclick="sendAction('next')">Next</button>
</div>
<div class="volume-control">
<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="30" value="15" oninput="updateVolumeDisplay(this.value)" onchange="setVolume(this.value)">
<span id="volumeValue">15</span>
</div>
<div class="status">
<p>Player Status: <span id="playerStatus">Unknown</span><span id="statusIndicator" class="status-indicator not-ready"></span></p>
<p>Volume: <span id="currentVolume">-</span></p>
</div>
</div>
<script>
async function fetchStatus() {
try {
const response = await fetch('/api/audio/status');
if (!response.ok) {
throw new Error('Status request failed');
}
const status = await response.json();
document.getElementById('playerStatus').textContent = status.ready ? 'Ready' : 'Not Ready';
document.getElementById('currentVolume').textContent = status.volume;
document.getElementById('volume').value = status.volume;
document.getElementById('volumeValue').textContent = status.volume;
document.getElementById('statusIndicator').className = 'status-indicator ' + (status.ready ? 'ready' : 'not-ready');
} catch (error) {
document.getElementById('playerStatus').textContent = 'Error';
document.getElementById('statusIndicator').className = 'status-indicator not-ready';
console.error(error);
}
}
async function sendAction(action, params = {}) {
try {
const formData = new URLSearchParams({ action, ...params });
const response = await fetch('/api/audio', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: formData
});
const result = await response.json();
document.getElementById('playerStatus').textContent = result.ready ? 'Ready' : 'Not Ready';
document.getElementById('currentVolume').textContent = result.volume;
document.getElementById('volume').value = result.volume;
document.getElementById('volumeValue').textContent = result.volume;
document.getElementById('statusIndicator').className = 'status-indicator ' + (result.ready ? 'ready' : 'not-ready');
if (!result.success) {
alert(result.message || 'Action failed');
}
} catch (error) {
alert('Request failed: ' + error.message);
}
}
function updateVolumeDisplay(value) {
document.getElementById('volumeValue').textContent = value;
}
function setVolume(value) {
sendAction('volume', { volume: value });
}
fetchStatus();
setInterval(fetchStatus, 5000);
function setupWebSocket() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(protocol + '//' + window.location.host + '/ws');
ws.onmessage = (event) => {
try {
const payload = JSON.parse(event.data);
if (payload.event === 'audio/player' && payload.payload) {
const data = JSON.parse(payload.payload);
if ('volume' in data) {
document.getElementById('volume').value = data.volume;
document.getElementById('volumeValue').textContent = data.volume;
document.getElementById('currentVolume').textContent = data.volume;
}
if (data.action) {
let statusText = data.action.charAt(0).toUpperCase() + data.action.slice(1);
if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
statusText = 'Playing';
} else if (data.action === 'pause') {
statusText = 'Paused';
} else if (data.action === 'stop') {
statusText = 'Stopped';
} else if (data.action === 'ready') {
statusText = 'Ready';
}
document.getElementById('playerStatus').textContent = statusText;
const indicatorClass = (data.action === 'stop') ? 'not-ready' : 'ready';
document.getElementById('statusIndicator').className = 'status-indicator ' + indicatorClass;
}
}
} catch (err) {
console.error('WebSocket parse error', err);
}
};
}
setupWebSocket();
</script>
</body>
</html>