-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (133 loc) · 5.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>Calculadora de cometas</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}
#video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#contenido {
color: white;
z-index: 1;
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
}
#info-box {
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
display: inline-block;
}
#capture-button {
position: absolute;
margin-bottom: 20px;
background-color: #ffffff;
color: #000000;
padding: 10px 20px;
border: none;
border-radius: 4px;
margin-top: 10px;
cursor: pointer;
}
#capture-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="video-container">
<video id="video-background" autoplay muted loop></video>
</div>
<div id="mira">
<object id="mira-svg" type="image/svg+xml" data="mira.svg"></object>
</div>
<div id="contenido">
<div id="info-box">
<p id="LoremIpsum">Lorem Ipsum</p>
<p id="tilt-info"></p>
</div>
<button id="capture-button" disabled>Capturar imagen</button>
</div>
<script>
// Obtener referencia a los elementos HTML
var videoBackground = document.getElementById('video-background');
var tiltInfo = document.getElementById('tilt-info');
var miraSvg = document.getElementById('mira-svg');
var captureButton = document.getElementById('capture-button');
// Variables para controlar el estado de captura de imagen
var isCapturing = false;
var previousVisibility;
// Función para capturar imagen con el boton
function captureImage() {
if (isCapturing) return;
isCapturing = true;
// Guardar el estado actual de visibilidad de la imagen SVG y ocultarla temporalmente
previousVisibility = miraSvg.style.visibility;
miraSvg.style.visibility = 'hidden';
// Lógica para capturar imagen
// Aquí puedes usar librerías como html2canvas o Canvas API para capturar una imagen del contenido
// Simulación de tiempo de captura (3 segundos)
setTimeout(function() {
// Restaurar la visibilidad de la imagen SVG y restablecer el estado de captura
miraSvg.style.visibility = previousVisibility;
isCapturing = false;
}, 3000);
}
// Obtener los datos de inclinación del dispositivo
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
// Obtener los ángulos de inclinación
var tiltX = event.beta -90; // elevancion con telefono en vertical (rango normal: -180 a 180)
var tiltY = event.gamma -90; // elevacion con telefono en horizontal (rango normal: -90 a 90)
var tiltZ = event.alpha; // Giro (rango: 0 a 360)
//aqui podria ir una variable tipo comparar tiltX y TiltY para indicar la mira en un color para tenerlo bien centrado
//o alguna operacion para mantener el telefono estabilizado o corregie el angulo, un horizonte artificial
// Actualizar el texto con la información de los sensores de inclinación
tiltInfo.textContent = 'Vertical: ' + tiltX.toFixed(2) + ', Horizontal: ' + tiltY.toFixed(2) + ', Giro: ' + tiltZ.toFixed(2);
});
}
// Verificar si el navegador es compatible con la API de mediaDevices
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Obtener el stream de la cámara trasera
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then(function(stream) {
videoBackground.srcObject = stream;
captureButton.disabled = false;
})
.catch(function(error) {
console.log('Error al acceder a la cámara:', error);
});
}
// Agregar evento click al botón de capturar imagen
captureButton.addEventListener('click', captureImage);
</script>
</body>
</html>