ws281x/main.js

96 lines
2.9 KiB
JavaScript

let delayTimeout;
async function post(path, value) {
console.log(path, value);
try {
const response = await fetch(path, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: value
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
} catch (error) {
console.error('Error during POST request:', error);
}
}
async function get(path) {
try {
const response = await fetch(path);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return await response.json(); // Assuming you are expecting JSON response
} catch (error) {
console.error('Error during GET request:', error);
}
}
async function updateColor(event) {
event.preventDefault();
const color = document.getElementById('color').value;
await post("/color", color);
}
async function updateColor2(event) {
event.preventDefault();
const color = document.getElementById('color2').value;
await post("/color2", color);
}
async function updatePattern(pattern) {
event.preventDefault();
await post("/pattern", pattern);
}
async function updateDelay(event) {
event.preventDefault();
clearTimeout(delayTimeout);
delayTimeout = setTimeout(async function() {
const delay = document.getElementById('delay').value;
await post('/delay', delay);
}, 500);
}
async function updateNumLeds(event) {
event.preventDefault();
const numLeds = document.getElementById('num_leds').value;
await post('/num_leds', numLeds);
}
function createPatternButtons(patterns) {
const container = document.getElementById('pattern_buttons');
container.innerHTML = ''; // Clear previous buttons
patterns.forEach(pattern => {
const button = document.createElement('button');
button.type = 'button'; // Use 'button' instead of 'submit'
button.textContent = pattern;
button.value = pattern;
button.addEventListener('click', async function(event) {
event.preventDefault();
await updatePattern(pattern);
});
container.appendChild(button);
});
}
document.addEventListener('DOMContentLoaded', async function() {
document.getElementById('color').addEventListener('input', updateColor);
document.getElementById('color2').addEventListener('input', updateColor2);
document.getElementById('delay').addEventListener('input', updateDelay);
document.getElementById('led_form').addEventListener('submit', updateNumLeds);
try {
const patterns = await get("/patterns");
console.log('Patterns fetched:', patterns);
createPatternButtons(patterns);
} catch (error) {
console.error('Error fetching patterns:', error);
}
});