259 lines
7.1 KiB
HTML
259 lines
7.1 KiB
HTML
|
// Plantilla HTML
|
||
|
|
const char *htmlTemplate = R"rawliteral(
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset='UTF-8'>
|
||
|
|
<style>
|
||
|
|
/* Tema oscuro básico */
|
||
|
|
body {
|
||
|
|
background-color: #1e1e1e;
|
||
|
|
color: #ffffff;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
color: #cccccc;
|
||
|
|
/* Gris claro */
|
||
|
|
font-size: 32px;
|
||
|
|
border-bottom: 2px solid #555555;
|
||
|
|
/* Un borde gris medio */
|
||
|
|
padding-bottom: 5px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
color: #bbbbbb;
|
||
|
|
/* Gris medio-claro */
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 30px;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
border-bottom: 1px solid #444444;
|
||
|
|
/* Un borde gris oscuro */
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
color: #dddddd;
|
||
|
|
/* Blanco roto o gris muy claro */
|
||
|
|
font-size: 18px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilos de los inputs */
|
||
|
|
input[type="text"],
|
||
|
|
input[type="number"],
|
||
|
|
select {
|
||
|
|
width: 100px;
|
||
|
|
padding: 5px;
|
||
|
|
margin: 5px 0;
|
||
|
|
background-color: #333;
|
||
|
|
border: 1px solid #555;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilos del checkbox y radio */
|
||
|
|
input[type="checkbox"],
|
||
|
|
input[type="radio"] {
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilo de los sliders */
|
||
|
|
input[type="range"] {
|
||
|
|
width: 30%;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Botones */
|
||
|
|
button {
|
||
|
|
background-color: #1e88e5;
|
||
|
|
border: none;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 20px;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 16px;
|
||
|
|
margin: 10px 2px;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 5px;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
button:hover {
|
||
|
|
background-color: #1565c0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Dark styling for select dropdown */
|
||
|
|
select {
|
||
|
|
background-color: #333;
|
||
|
|
color: white;
|
||
|
|
border: 1px solid #555;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilo para contenedores de secciones */
|
||
|
|
.section {
|
||
|
|
background-color: #1e1e1e;
|
||
|
|
padding: 20px;
|
||
|
|
padding-top: 0px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
/* Bordes más visibles */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilo para centrar los formularios en la pantalla */
|
||
|
|
.form-container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- Sección Dispositivo 360 -->
|
||
|
|
<!-- Subsección X0 -->
|
||
|
|
<h4>X0:</h4>
|
||
|
|
<label for='x0Degrees'>Grados:</label>
|
||
|
|
<input type='text' id='x0Degrees'>
|
||
|
|
<label for='x0Duration'>Duración (s):</label>
|
||
|
|
<input type='text' id='x0Duration'>
|
||
|
|
<input type='number' id='x0Read'>
|
||
|
|
<br>
|
||
|
|
<button onclick="moveMotor('test_360','x0')">Test</button>
|
||
|
|
<button onclick="moveMotor('save_360','x0')">Save</button>
|
||
|
|
<span id="x0Message" style="color: green; display: none;">Movimiento enviado correctamente</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- Subsección X1 -->
|
||
|
|
<h4>X1:</h4>
|
||
|
|
<label for='x1Degrees'>Grados:</label>
|
||
|
|
<input type='text' id='x1Degrees'>
|
||
|
|
<label for='x1Duration'>Duración (s):</label>
|
||
|
|
<input type='text' id='x1Duration'>
|
||
|
|
<input type='number' id='x1Read'>
|
||
|
|
<br>
|
||
|
|
<button onclick="moveMotor('test_360','x1')">Test</button>
|
||
|
|
<button onclick="moveMotor('save_360','x1')">Save</button>
|
||
|
|
<span id="x1Message" style="color: green; display: none;">Movimiento enviado correctamente</span>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- Subsección Y0 -->
|
||
|
|
<h4>Y0:</h4>
|
||
|
|
<label for='y0Degrees'>Grados:</label>
|
||
|
|
<input type='text' id='y0Degrees'>
|
||
|
|
<label for='y0Duration'>Duración (s):</label>
|
||
|
|
<input type='text' id='y0Duration'>
|
||
|
|
<input type='number' id='y0Read'>
|
||
|
|
<br>
|
||
|
|
<button onclick="moveMotor('test_360','y0')">Test</button>
|
||
|
|
<button onclick="moveMotor('save_360','y0')">Save</button>
|
||
|
|
<span id="y0Message" style="color: green; display: none;">Movimiento enviado correctamente</span>
|
||
|
|
<br><br>
|
||
|
|
<input type='checkbox' id='syncWithInterval360'> Sincronizar con Intervalómetro
|
||
|
|
<br><br>
|
||
|
|
<!-- Script para manejar las interacciones y enviar el JSON -->
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function sendHeight() {
|
||
|
|
const height = document.documentElement.scrollHeight || document.body.scrollHeight;
|
||
|
|
window.parent.postMessage(height, "*");
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = sendHeight;
|
||
|
|
window.onresize = sendHeight;
|
||
|
|
setInterval(sendHeight, 500);
|
||
|
|
|
||
|
|
function showMessage(elementId) {
|
||
|
|
const messageElement = document.getElementById(elementId);
|
||
|
|
if (messageElement) {
|
||
|
|
messageElement.style.display = 'inline';
|
||
|
|
setTimeout(() => {
|
||
|
|
messageElement.style.display = 'none';
|
||
|
|
}, 3000); // Mostrar el mensaje durante 3 segundos
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function moveMotor(type_mode, motor) {
|
||
|
|
const degrees = document.getElementById(`${motor}Degrees`).value;
|
||
|
|
const duration = document.getElementById(`${motor}Duration`).value;
|
||
|
|
const syncWithInterval = document.getElementById('syncWithInterval360').checked;
|
||
|
|
|
||
|
|
const motorData = {
|
||
|
|
type: type_mode,
|
||
|
|
motor: motor,
|
||
|
|
degrees: degrees,
|
||
|
|
duration: duration,
|
||
|
|
syncWithInterval: syncWithInterval
|
||
|
|
};
|
||
|
|
fetch('/moveMotor360', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(motorData),
|
||
|
|
})
|
||
|
|
.then(response => response.text())
|
||
|
|
.then(() => showMessage(`${motor}Message`))
|
||
|
|
.catch(error => console.error('Motor Error:', error));
|
||
|
|
}
|
||
|
|
|
||
|
|
function updatex0Position() {
|
||
|
|
fetch('/x0Read')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
document.getElementById('x0Read').value = data.x0Read;
|
||
|
|
})
|
||
|
|
.catch(error => console.error('Error al obtener x0:', error));
|
||
|
|
}
|
||
|
|
|
||
|
|
function updatex1Position() {
|
||
|
|
fetch('/x1Read')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
document.getElementById('x1Read').value = data.x1Read;
|
||
|
|
})
|
||
|
|
.catch(error => console.error('Error al obtener x1:', error));
|
||
|
|
}
|
||
|
|
|
||
|
|
function updatey0Position() {
|
||
|
|
fetch('/y0Read')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
document.getElementById('y0Read').value = data.y0Read;
|
||
|
|
})
|
||
|
|
.catch(error => console.error('Error al obtener y0:', error));
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateSensors() {
|
||
|
|
fetch('/sensors')
|
||
|
|
.then(response => response.json()) // Parsear la respuesta como JSON
|
||
|
|
.then(data => {
|
||
|
|
if (data.sensors && Array.isArray(data.sensors)) {
|
||
|
|
const sensorValues = data.sensors;
|
||
|
|
// Asignar los valores a los elementos de la interfaz
|
||
|
|
if (sensorValues.length >= 1) {
|
||
|
|
document.getElementById('x0Read').value = sensorValues[0];
|
||
|
|
}
|
||
|
|
if (sensorValues.length >= 2) {
|
||
|
|
document.getElementById('x1Read').value = sensorValues[1];
|
||
|
|
}
|
||
|
|
if (sensorValues.length >= 3) {
|
||
|
|
document.getElementById('y0Read').value = sensorValues[2];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.error('Estructura inesperada:', data);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => console.error('Error al obtener sensores:', error));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Llama a updateSensors cada 500ms
|
||
|
|
setInterval(updateSensors, 500);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
)rawliteral";
|