Remove obsolete audio and buzzer control documentation files, including detailed guides and HTML interfaces, to streamline the repository and eliminate redundancy. This cleanup enhances maintainability and focuses on essential resources for the reTerminal DM4 audio and buzzer functionalities.
This commit is contained in:
nearxos
348
archive/chromium-setup-legacy/buzzer_control.html
Normal file
348
archive/chromium-setup-legacy/buzzer_control.html
Normal file
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>reTerminal DM4 Buzzer Control</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 15px 25px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-on {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.btn-on:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
|
||||
.btn-off {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.btn-off:hover {
|
||||
background: #da190b;
|
||||
}
|
||||
|
||||
.btn-beep {
|
||||
background: #2196F3;
|
||||
}
|
||||
|
||||
.btn-beep:hover {
|
||||
background: #0b7dda;
|
||||
}
|
||||
|
||||
.btn-starwars {
|
||||
background: #FF9800;
|
||||
}
|
||||
|
||||
.btn-starwars:hover {
|
||||
background: #e68900;
|
||||
}
|
||||
|
||||
.pattern-section {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pattern-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pattern-input {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #e3f2fd;
|
||||
border-left: 4px solid #2196F3;
|
||||
border-radius: 5px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #e8f5e9;
|
||||
border-left-color: #4CAF50;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #ffebee;
|
||||
border-left-color: #f44336;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: #856404;
|
||||
margin: 5px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎵 reTerminal DM4 Buzzer Control</h1>
|
||||
<p class="subtitle">Control the built-in buzzer via web interface</p>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn-on" onclick="buzzerOn()">🔊 Buzzer ON</button>
|
||||
<button class="btn-off" onclick="buzzerOff()">🔇 Buzzer OFF</button>
|
||||
<button class="btn-beep" onclick="beep(0.2)">🔔 Short Beep</button>
|
||||
<button class="btn-beep" onclick="beep(0.5)">🔔 Long Beep</button>
|
||||
<button class="btn-starwars" onclick="starwars()">⭐ Star Wars Theme</button>
|
||||
</div>
|
||||
|
||||
<div class="pattern-section">
|
||||
<h3>🎼 Custom Pattern</h3>
|
||||
<p style="color: #666; margin-bottom: 10px; font-size: 14px;">
|
||||
Enter pattern as comma-separated values: on_time,off_time,on_time,off_time,...
|
||||
<br>Example: 0.1,0.1,0.1,0.1,0.1,0.3 (two short beeps, pause, one beep)
|
||||
</p>
|
||||
<div class="pattern-input">
|
||||
<input type="text" id="pattern" placeholder="0.1,0.1,0.1,0.1,0.1,0.3" value="0.1,0.1,0.1,0.1,0.1,0.3">
|
||||
<button class="btn-beep" onclick="playPattern()" style="min-width: 150px;">Play Pattern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">
|
||||
<div class="status-text">Ready</div>
|
||||
<div class="status-message">Click a button to control the buzzer</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p><strong>API Endpoint:</strong> <span id="apiUrl">http://localhost:5000</span></p>
|
||||
<p><strong>Status:</strong> <span id="connectionStatus">Not connected</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration
|
||||
const API_URL = window.location.hostname === ''
|
||||
? 'http://localhost:5000'
|
||||
: `http://${window.location.hostname}:5000`;
|
||||
|
||||
document.getElementById('apiUrl').textContent = API_URL;
|
||||
|
||||
function updateStatus(message, type = 'info') {
|
||||
const statusDiv = document.getElementById('status');
|
||||
statusDiv.className = `status ${type}`;
|
||||
const statusText = statusDiv.querySelector('.status-text');
|
||||
const statusMessage = statusDiv.querySelector('.status-message');
|
||||
|
||||
if (type === 'success') {
|
||||
statusText.textContent = '✓ Success';
|
||||
} else if (type === 'error') {
|
||||
statusText.textContent = '✗ Error';
|
||||
} else {
|
||||
statusText.textContent = 'Ready';
|
||||
}
|
||||
|
||||
statusMessage.textContent = message;
|
||||
}
|
||||
|
||||
function updateConnectionStatus(connected) {
|
||||
const statusEl = document.getElementById('connectionStatus');
|
||||
statusEl.textContent = connected ? 'Connected' : 'Not connected';
|
||||
statusEl.style.color = connected ? '#4CAF50' : '#f44336';
|
||||
}
|
||||
|
||||
async function makeRequest(endpoint, method = 'GET', body = null) {
|
||||
try {
|
||||
const options = {
|
||||
method: method,
|
||||
headers: {}
|
||||
};
|
||||
|
||||
if (body) {
|
||||
options.headers['Content-Type'] = 'application/json';
|
||||
options.body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_URL}${endpoint}`, options);
|
||||
const data = await response.json();
|
||||
|
||||
updateConnectionStatus(true);
|
||||
return data;
|
||||
} catch (error) {
|
||||
updateConnectionStatus(false);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function buzzerOn() {
|
||||
try {
|
||||
const data = await makeRequest('/buzzer/on', 'POST');
|
||||
updateStatus(data.message, 'success');
|
||||
} catch (error) {
|
||||
updateStatus(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function buzzerOff() {
|
||||
try {
|
||||
const data = await makeRequest('/buzzer/off', 'POST');
|
||||
updateStatus(data.message, 'success');
|
||||
} catch (error) {
|
||||
updateStatus(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function beep(duration) {
|
||||
try {
|
||||
const data = await makeRequest(`/buzzer/beep?duration=${duration}`);
|
||||
updateStatus(data.message, 'success');
|
||||
} catch (error) {
|
||||
updateStatus(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function starwars() {
|
||||
try {
|
||||
const data = await makeRequest('/buzzer/starwars?duration=5');
|
||||
updateStatus(data.message, 'success');
|
||||
} catch (error) {
|
||||
updateStatus(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function playPattern() {
|
||||
const patternStr = document.getElementById('pattern').value.trim();
|
||||
if (!patternStr) {
|
||||
updateStatus('Please enter a pattern', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const parts = patternStr.split(',');
|
||||
if (parts.length % 2 !== 0) {
|
||||
updateStatus('Pattern must have even number of values (on,off pairs)', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const pattern = [];
|
||||
for (let i = 0; i < parts.length; i += 2) {
|
||||
const onTime = parseFloat(parts[i]);
|
||||
const offTime = parseFloat(parts[i + 1]);
|
||||
if (isNaN(onTime) || isNaN(offTime)) {
|
||||
updateStatus('Invalid pattern format. Use numbers only.', 'error');
|
||||
return;
|
||||
}
|
||||
pattern.push([onTime, offTime]);
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await makeRequest('/buzzer/pattern', 'POST', { pattern });
|
||||
updateStatus(data.message, 'success');
|
||||
} catch (error) {
|
||||
updateStatus(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Check API connection on load
|
||||
window.addEventListener('load', async () => {
|
||||
try {
|
||||
const data = await makeRequest('/');
|
||||
updateConnectionStatus(true);
|
||||
updateStatus('API connected and ready', 'success');
|
||||
} catch (error) {
|
||||
updateConnectionStatus(false);
|
||||
updateStatus('Cannot connect to API. Make sure Flask app is running.', 'error');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user