feat: example with multiple various functionallity
This commit is contained in:
@@ -17,7 +17,8 @@ MultiMatrixService::MultiMatrixService(NodeContext& ctx, TaskManager& taskManage
|
||||
m_serial(std::make_unique<SoftwareSerial>(rxPin, txPin)),
|
||||
m_potentiometerPin(potentiometerPin),
|
||||
m_volume(DEFAULT_VOLUME),
|
||||
m_playerReady(false) {
|
||||
m_playerReady(false),
|
||||
m_loopEnabled(false) {
|
||||
pinMode(m_potentiometerPin, INPUT);
|
||||
m_serial->begin(9600);
|
||||
|
||||
@@ -46,8 +47,9 @@ void MultiMatrixService::registerEndpoints(ApiServer& api) {
|
||||
[this](AsyncWebServerRequest* request) { handleControlRequest(request); },
|
||||
std::vector<ParamSpec>{
|
||||
ParamSpec{String("action"), true, String("body"), String("string"),
|
||||
{String("play"), String("stop"), String("pause"), String("resume"), String("next"), String("previous"), String("volume")}},
|
||||
ParamSpec{String("volume"), false, String("body"), String("numberRange"), {}, String("15")}
|
||||
{String("play"), String("stop"), String("pause"), String("resume"), String("next"), String("previous"), String("volume"), String("loop")}},
|
||||
ParamSpec{String("volume"), false, String("body"), String("numberRange"), {}, String("15")},
|
||||
ParamSpec{String("loop"), false, String("body"), String("boolean"), {}}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -59,6 +61,10 @@ uint8_t MultiMatrixService::getVolume() const {
|
||||
return m_volume;
|
||||
}
|
||||
|
||||
bool MultiMatrixService::isLoopEnabled() const {
|
||||
return m_loopEnabled;
|
||||
}
|
||||
|
||||
void MultiMatrixService::play() {
|
||||
if (!m_playerReady) {
|
||||
return;
|
||||
@@ -124,6 +130,20 @@ void MultiMatrixService::setVolume(uint8_t volume) {
|
||||
applyVolume(clampedVolume);
|
||||
}
|
||||
|
||||
void MultiMatrixService::setLoop(bool enabled) {
|
||||
if (!m_playerReady) {
|
||||
return;
|
||||
}
|
||||
m_loopEnabled = enabled;
|
||||
if (enabled) {
|
||||
m_player.enableLoop();
|
||||
} else {
|
||||
m_player.disableLoop();
|
||||
}
|
||||
publishEvent("loop");
|
||||
LOG_INFO("MultiMatrixService", String("Loop ") + (enabled ? "enabled" : "disabled"));
|
||||
}
|
||||
|
||||
void MultiMatrixService::registerTasks() {
|
||||
m_taskManager.registerTask("multimatrix_potentiometer", POTENTIOMETER_SAMPLE_INTERVAL_MS,
|
||||
[this]() { pollPotentiometer(); });
|
||||
@@ -137,17 +157,7 @@ void MultiMatrixService::pollPotentiometer() {
|
||||
const uint16_t rawValue = analogRead(static_cast<uint8_t>(m_potentiometerPin));
|
||||
const uint8_t targetVolume = calculateVolumeFromPotentiometer(rawValue);
|
||||
|
||||
// Debug: fire event on significant change
|
||||
if (targetVolume > m_volume + POT_VOLUME_EPSILON || targetVolume + POT_VOLUME_EPSILON < m_volume) {
|
||||
StaticJsonDocument<128> debugDoc;
|
||||
debugDoc["action"] = "pot_debug";
|
||||
debugDoc["raw"] = rawValue;
|
||||
debugDoc["target"] = targetVolume;
|
||||
debugDoc["current"] = m_volume;
|
||||
String debugPayload;
|
||||
serializeJson(debugDoc, debugPayload);
|
||||
m_ctx.fire(EVENT_TOPIC, &debugPayload);
|
||||
|
||||
applyVolume(targetVolume);
|
||||
}
|
||||
}
|
||||
@@ -169,9 +179,10 @@ void MultiMatrixService::applyVolume(uint8_t targetVolume) {
|
||||
}
|
||||
|
||||
void MultiMatrixService::handleStatusRequest(AsyncWebServerRequest* request) {
|
||||
StaticJsonDocument<128> doc;
|
||||
StaticJsonDocument<192> doc;
|
||||
doc["ready"] = m_playerReady;
|
||||
doc["volume"] = static_cast<int>(m_volume);
|
||||
doc["loop"] = m_loopEnabled;
|
||||
|
||||
String json;
|
||||
serializeJson(doc, json);
|
||||
@@ -201,14 +212,23 @@ void MultiMatrixService::handleControlRequest(AsyncWebServerRequest* request) {
|
||||
} else {
|
||||
ok = false;
|
||||
}
|
||||
} else if (action.equalsIgnoreCase("loop")) {
|
||||
if (request->hasParam("loop", true)) {
|
||||
String loopValue = request->getParam("loop", true)->value();
|
||||
bool enabled = loopValue.equalsIgnoreCase("true") || loopValue == "1";
|
||||
setLoop(enabled);
|
||||
} else {
|
||||
ok = false;
|
||||
}
|
||||
} else {
|
||||
ok = false;
|
||||
}
|
||||
|
||||
StaticJsonDocument<192> resp;
|
||||
StaticJsonDocument<256> resp;
|
||||
resp["success"] = ok;
|
||||
resp["ready"] = m_playerReady;
|
||||
resp["volume"] = static_cast<int>(m_volume);
|
||||
resp["loop"] = m_loopEnabled;
|
||||
if (!ok) {
|
||||
resp["message"] = "Invalid action";
|
||||
}
|
||||
@@ -219,9 +239,10 @@ void MultiMatrixService::handleControlRequest(AsyncWebServerRequest* request) {
|
||||
}
|
||||
|
||||
void MultiMatrixService::publishEvent(const char* action) {
|
||||
StaticJsonDocument<128> doc;
|
||||
StaticJsonDocument<192> doc;
|
||||
doc["action"] = action;
|
||||
doc["volume"] = static_cast<int>(m_volume);
|
||||
doc["loop"] = m_loopEnabled;
|
||||
String payload;
|
||||
serializeJson(doc, payload);
|
||||
m_ctx.fire(EVENT_TOPIC, &payload);
|
||||
|
||||
@@ -18,6 +18,7 @@ public:
|
||||
|
||||
bool isReady() const;
|
||||
uint8_t getVolume() const;
|
||||
bool isLoopEnabled() const;
|
||||
|
||||
void play();
|
||||
void stop();
|
||||
@@ -26,6 +27,7 @@ public:
|
||||
void next();
|
||||
void previous();
|
||||
void setVolume(uint8_t volume);
|
||||
void setLoop(bool enabled);
|
||||
|
||||
private:
|
||||
static constexpr uint16_t POTENTIOMETER_SAMPLE_INTERVAL_MS = 200;
|
||||
@@ -47,4 +49,5 @@ private:
|
||||
uint8_t m_potentiometerPin;
|
||||
uint8_t m_volume;
|
||||
bool m_playerReady;
|
||||
bool m_loopEnabled;
|
||||
};
|
||||
|
||||
@@ -3,48 +3,335 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Multi-Matrix Audio Control</title>
|
||||
<title>Multi-Matrix Audio Player</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; }
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 3rem 2.5rem;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.player-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.player-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-dot.inactive {
|
||||
background: #ef4444;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.secondary-controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
padding: 0.6rem 1.25rem;
|
||||
border: 2px solid #667eea;
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.secondary-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.volume-section {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.volume-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.volume-value {
|
||||
color: #667eea;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.volume-slider:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.volume-slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.loop-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
border-radius: 12px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.loop-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
background: #cbd5e1;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-switch.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toggle-switch.active .toggle-slider {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.player-container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.player-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
</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 class="player-container">
|
||||
<div class="player-header">
|
||||
<h1 class="player-title">Multi-Matrix Audio</h1>
|
||||
<div class="status-badge">
|
||||
<span class="status-dot" id="statusDot"></span>
|
||||
<span id="statusText">Connecting...</span>
|
||||
</div>
|
||||
</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 class="main-controls">
|
||||
<button class="control-btn" onclick="sendAction('previous')" title="Previous">
|
||||
<span class="icon">⏮</span>
|
||||
</button>
|
||||
<button class="control-btn play-btn" id="playBtn" onclick="togglePlayPause()" title="Play/Pause">
|
||||
<span class="icon" id="playIcon">▶</span>
|
||||
</button>
|
||||
<button class="control-btn" onclick="sendAction('next')" title="Next">
|
||||
<span class="icon">⏭</span>
|
||||
</button>
|
||||
</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 class="secondary-controls">
|
||||
<button class="secondary-btn" onclick="sendAction('stop')">⏹ Stop</button>
|
||||
<button class="secondary-btn" onclick="sendAction('resume')">▶ Resume</button>
|
||||
</div>
|
||||
|
||||
<div class="volume-section">
|
||||
<div class="volume-header">
|
||||
<span>🔊 Volume</span>
|
||||
<span class="volume-value" id="volumeDisplay">15</span>
|
||||
</div>
|
||||
<input type="range"
|
||||
class="volume-slider"
|
||||
id="volumeSlider"
|
||||
min="0"
|
||||
max="30"
|
||||
value="15"
|
||||
oninput="updateVolumeDisplay(this.value)"
|
||||
onchange="setVolume(this.value)">
|
||||
</div>
|
||||
|
||||
<div class="loop-toggle">
|
||||
<div class="loop-label">
|
||||
<span>🔁 Loop Mode</span>
|
||||
</div>
|
||||
<div class="toggle-switch" id="loopToggle" onclick="toggleLoop()">
|
||||
<div class="toggle-slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let isPlaying = false;
|
||||
let loopEnabled = false;
|
||||
|
||||
async function fetchStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/audio/status');
|
||||
@@ -52,18 +339,42 @@
|
||||
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');
|
||||
updateUIStatus(status);
|
||||
} catch (error) {
|
||||
document.getElementById('playerStatus').textContent = 'Error';
|
||||
document.getElementById('statusIndicator').className = 'status-indicator not-ready';
|
||||
document.getElementById('statusText').textContent = 'Error';
|
||||
document.getElementById('statusDot').className = 'status-dot inactive';
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateUIStatus(status) {
|
||||
const statusDot = document.getElementById('statusDot');
|
||||
const statusText = document.getElementById('statusText');
|
||||
|
||||
if (status.ready) {
|
||||
statusDot.className = 'status-dot';
|
||||
statusText.textContent = 'Ready';
|
||||
} else {
|
||||
statusDot.className = 'status-dot inactive';
|
||||
statusText.textContent = 'Not Ready';
|
||||
}
|
||||
|
||||
if ('volume' in status) {
|
||||
document.getElementById('volumeSlider').value = status.volume;
|
||||
document.getElementById('volumeDisplay').textContent = status.volume;
|
||||
}
|
||||
|
||||
if ('loop' in status) {
|
||||
loopEnabled = status.loop;
|
||||
const loopToggle = document.getElementById('loopToggle');
|
||||
if (loopEnabled) {
|
||||
loopToggle.classList.add('active');
|
||||
} else {
|
||||
loopToggle.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function sendAction(action, params = {}) {
|
||||
try {
|
||||
const formData = new URLSearchParams({ action, ...params });
|
||||
@@ -73,11 +384,16 @@
|
||||
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');
|
||||
updateUIStatus(result);
|
||||
|
||||
if (action === 'play' || action === 'resume') {
|
||||
isPlaying = true;
|
||||
updatePlayButton();
|
||||
} else if (action === 'pause' || action === 'stop') {
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
}
|
||||
|
||||
if (!result.success) {
|
||||
alert(result.message || 'Action failed');
|
||||
}
|
||||
@@ -86,50 +402,104 @@
|
||||
}
|
||||
}
|
||||
|
||||
function togglePlayPause() {
|
||||
if (isPlaying) {
|
||||
sendAction('pause');
|
||||
} else {
|
||||
sendAction('play');
|
||||
}
|
||||
}
|
||||
|
||||
function updatePlayButton() {
|
||||
const playIcon = document.getElementById('playIcon');
|
||||
playIcon.textContent = isPlaying ? '⏸' : '▶';
|
||||
}
|
||||
|
||||
function updateVolumeDisplay(value) {
|
||||
document.getElementById('volumeValue').textContent = value;
|
||||
document.getElementById('volumeDisplay').textContent = value;
|
||||
}
|
||||
|
||||
function setVolume(value) {
|
||||
sendAction('volume', { volume: value });
|
||||
}
|
||||
|
||||
function toggleLoop() {
|
||||
loopEnabled = !loopEnabled;
|
||||
const loopToggle = document.getElementById('loopToggle');
|
||||
if (loopEnabled) {
|
||||
loopToggle.classList.add('active');
|
||||
} else {
|
||||
loopToggle.classList.remove('active');
|
||||
}
|
||||
sendAction('loop', { loop: loopEnabled });
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// Skip debug messages
|
||||
if (data.action === 'pot_debug') {
|
||||
return;
|
||||
}
|
||||
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';
|
||||
|
||||
if ('volume' in data) {
|
||||
document.getElementById('volumeSlider').value = data.volume;
|
||||
document.getElementById('volumeDisplay').textContent = data.volume;
|
||||
}
|
||||
|
||||
if ('loop' in data) {
|
||||
loopEnabled = data.loop;
|
||||
const loopToggle = document.getElementById('loopToggle');
|
||||
if (loopEnabled) {
|
||||
loopToggle.classList.add('active');
|
||||
} else {
|
||||
loopToggle.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
if (data.action) {
|
||||
const statusText = document.getElementById('statusText');
|
||||
const statusDot = document.getElementById('statusDot');
|
||||
|
||||
if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
|
||||
statusText.textContent = 'Playing';
|
||||
statusDot.className = 'status-dot';
|
||||
isPlaying = true;
|
||||
updatePlayButton();
|
||||
} else if (data.action === 'pause') {
|
||||
statusText.textContent = 'Paused';
|
||||
statusDot.className = 'status-dot';
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
} else if (data.action === 'stop') {
|
||||
statusText.textContent = 'Stopped';
|
||||
statusDot.className = 'status-dot inactive';
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
} else if (data.action === 'ready') {
|
||||
statusText.textContent = 'Ready';
|
||||
statusDot.className = 'status-dot';
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setTimeout(setupWebSocket, 3000);
|
||||
};
|
||||
}
|
||||
|
||||
setupWebSocket();
|
||||
|
||||
@@ -8,7 +8,7 @@ const HTTP_PORT = process.env.PORT || 3000;
|
||||
// UDP settings
|
||||
// Default broadcast; override with unicast address via UDP_ADDR if you have a single receiver
|
||||
const UDP_BROADCAST_PORT = Number(process.env.UDP_PORT) || 4210;
|
||||
const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '10.0.1.144';
|
||||
const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '255.255.255.255';
|
||||
|
||||
// NeoPixel frame properties for basic validation/logging (no transformation here)
|
||||
const MATRIX_WIDTH = Number(process.env.MATRIX_WIDTH) || 16;
|
||||
|
||||
Reference in New Issue
Block a user