-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
319 lines (305 loc) · 18.2 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Metadatos -->
<!-- Codificación de caracteres para la aplicación -->
<meta charset="UTF-8">
<!-- Compatibilidad para navegador Microsoft Edge -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Comportameinto inicial para la presentación en dispositivos -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Autor de la aplicación -->
<meta name="author" content="Gustavo Enrique Tovar Ramos">
<!-- Descripción -->
<meta name="description" content="Aplicación de monitoreo en tiempo real de niveles de gas propano y monóxido de carbono en centros de procesamiento, distribución y almacenamiento de gas propano en El Salvador">
<!-- Palabras clave -->
<meta name="keywords" content="JavaScript,Tiempo Real,Firebase,Monitoreo,Gas Propano,El Salvador,UTEC">
<!-- Copyright -->
<meta name="copyright" content="Universidad Tecnológica de El Salvador">
<!-- Open Graph -->
<meta property="og:image" content="#">
<meta property="og:description" content="Aplicación de monitoreo en tiempo real de niveles de gas propano y monóxido de carbono en centros de procesamiento, distribución y almacenamiento de gas propano en El Salvador">
<meta property="og:title" content="Retavid El Salvador">
<!-- Twitter -->
<meta name="twitter:title" content="Retavid El Salvador">
<!-- Título de la aplicación -->
<title>Retavid - Sistema de monitoreo de gas propano</title>
<!-- Estilos -->
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css"/>
<!-- C3 -->
<link rel="stylesheet" href="c3/c3.min.css">
<!-- Manifiesto de la aplicación -->
<link rel="manifest" href="manifest.json">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!-- Estilos personalizados de la aplicación -->
<link rel="stylesheet" href="css/app.estilos.css">
<!-- Scripts vía CDN -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- DataTables -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.js"></script>
<!-- Firebase -->
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> -->
<script>
const div = d3.selectAll("div");
</script>
<!-- C3 -->
<script src="c3/c3.min.js"></script>
<!-- Librería Moment de JS -->
<script src="js/moment.min.js"></script>
</head>
<body>
<!-- Menú principal de la aplicación -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark opacity-100">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/retavid-logo-name-pg-inv.png" class="img-fluid" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" id="inicio" href="#"><i class="bi bi-house-door show"></i> Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monitoreo" href="#monitoreo-tool-section"><i class="bi bi-speedometer"></i> Monitoreo</a>
</li>
<li class="nav-item">
<a class="nav-link" id="analisis" href="#analytics"><i class="bi bi-graph-up"></i> Gráfica del día</a>
</li>
<li class="nav-item">
<a class="nav-link" id="datos" href="#data"><i class="bi bi-table"></i> Datos históricos</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contacto" href="#contacts"><i class="bi bi-person-lines-fill"></i> Acerca de</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Final de menú principal -->
<!-- Info página principal -->
<div class="container-fluid mt-3" id="home-section">
<div class="row">
<div class="" id="info-principal">
<div class="card card-body">
<div class="row">
<div class="col-12 pt-0 col-md-12 pt-sm-0 pt-md-0 col-lg-5 col-xl-6 pt-xl-0 text-center">
<img src="img/retavid-logo-slogan.png" alt="retavid-logo-label" class="img-fluid logo-label" srcset="">
</div>
<div class="col-md-12 col-lg-7 col-xl-6">
<p class="p3 align-middle description">
Es una aplicación en tiempo real que tiene como propósito principal, contribuir a la seguridad industrial
en el rubro del manejo, almacenanaje y distribuciónde gas propano en El Salvador, esta, realiza una lectura
en tiempo real de un dispositivo <strong>IoT</strong> en una locación en específico, este dispositivo se
encuentra equipado con sensores de PLG (Gas licuado de petróleo) y CO (Monóxido de carbono) y envía periódicamente
lecturas en ppa (partes por millón), de esta forma si se detecta una concentración de cualquiera de éstos
compuestos, se puede ver la variación a través de la aplicación <strong>RETAVID</strong> e intervenir de inmediato
para evitar un siniestro en cualquiera de los centros antes referidos.
</p>
</div>
</div>
</div>
</div>
<h3 class="text-center mt-2"><i class="bi bi-info-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Ayuda" data-bs-content="Haz click sobre el ícono de la herramienta de la que quieres saber más para obtener ayuda"></i> Ayuda sobre las herramientas</h3>
<div class="row text-center">
<!-- Botones OffCanvas -->
<!-- Botón monitoreo -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#monitoring" aria-controls="monitoring"><h2><i class="bi bi-speedometer"></i><p> Monitoreo</p></h2></button>
<!-- Botón análisis -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-analisis" aria-controls="p-analisis"><h2><i class="bi bi-graph-up"></i><p> Gráfica del día</p></h2></button>
<!-- Botón datos -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-datos" aria-controls="p-datos"><h2><i class="bi bi-table"></i><p> Datos Históricos</p></h2></button>
</div>
<!-- Paneles offcanvas -->
<!-- Panel monitoreo -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="monitoring" aria-labelledby="monitoringLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="monitoringLabel"><i class="bi bi-speedometer"></i> Monitoreo</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<p>
Esta es la herramienta principal, permite visulizar dos tarjetas en las que se muestran los niveles
de PLG como CO, estos corresponden al uĺtimo registro enviado por el dispositivo IoT, el gráfico contenido
de cada uno de las tarjetas posee tres niveles, con los colores del semáforo, que nos indican si
la lectura se encuentra en un nivel aceptable (<i class="bi bi-question-diamond-fill text-success"></i>
color verde), un nivel de alerta (<i class="bi bi-question-diamond-fill text-warning"></i> color naranja)
o si la lectura se ubica en un nivel muy peligroso (<i class="bi bi-question-diamond-fill text-danger"></i> color rojo).
</p>
</div>
</div>
<!-- Panel Análisis -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="p-analisis" aria-labelledby="p-analisisLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="p-analisisLabel"><i class="bi bi-graph-up"></i> Análisis</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<p>
Esta herramienta, muestra un gráfico de líneas, en cada una de ellas se muestran los registros diarios
de PLG y CO debidamente ubicados en el tiempo, de acuerdo a las lecturas enviadas por el dispositivo
IoT, de esta forma puede evaluarse como hoscila la lectura de los mismos durante el día, la gráfica es
dinámica y aunque se presentan ambas lecturas al inicio puede separarse presionando sobre la leyenda
de la gráfica y así ver solo los datos de PLG o CO según sea el caso. Hay una tercera tarjeta invisible
que aparece cuando se presenta una lectura que indique peligro.
</p>
</div>
</div>
<!-- Panel Datos -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="p-datos" aria-labelledby="p-datosLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="p-datosLabel"><i class="bi bi-table"></i> Datos</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<p>
Esta herramienta presenta la totalidad de los datos históricos en el momento en el que carga la página,
estos constituyen la totalidad de los datos que han sido enviados por el dispositivo IoT y que se encuentran
en la base de datos, estos se presentan en forma de una tabla, en ella, se pueden hacer búsquedas, ordenar el resultado
por colummnas y exportar toda la información a diferentes formatos, entre ellos: CSV, JSON e incluso como hoja
de cálculo de Microsoft Excel, también puede copiarse toda la información e imprimirla.
</p>
<p>
<strong>Nota:</strong> Si ya se lleva tiempo con la aplicación cargada, es recomentable recargarla
en el navegador para tener acceso a los últimos registros.
</p>
</div>
</div>
</div>
</div>
<!-- Fin sección Info página principal -->
<!-- Inicio sección de monitoreo -->
<div class="container-fluid" id="monitoreo-tool-section">
<div class="row">
<h1 class="text-center col-12">Monitoreo en tiempo real</h1>
<hr><br>
<!-- Lectura de GPL -->
<div class="card col-md-12 col-lg-4">
<div id="graph-plg" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title text-center">Última lectura</h5>
<h6 id="plg-ultimate" class="card-title text-center"></h6>
<p class="card-text">
Nivel de GPL en estación, lectura en PPA (partes por millón). <i class="bi bi-question-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Importante" data-bs-content="Una lectura de más de 1000 PPM en PLG ya se considera de alto riesgo para la salud"></i>
</p>
</div>
</div>
<!-- Section de alertas -->
<div id="card-alert" class="card col-md-12 col-lg-4 p-1 border-danger invisible">
<div id="alertas" class="card-img-top">
<img id="img-card-alert" src="img/A8tv.gif" alt="alerta" class="img-fluid w-100">
</div>
<div class="card-body">
<h5 class="card-title text-center text-danger"><strong><i id="card-title-alert" class="bi bi-radioactive"></i></strong></h5>
<p class="card-text text-danger text-center">
<strong id="message-alert"></strong>
</p>
</div>
</div>
<!-- Lectura de CO -->
<div class="card col-md-12 col-lg-4 p-1">
<div id="graph-co" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title text-center">Última lectura</h5>
<h6 id="co-ultimate" class="card-title text-center"></h6>
<p class="card-text">
Nivel de CO en estación, lectura en PPA (partes por millón). <i class="bi bi-question-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Importante" data-bs-content="Una lectura de más de 100 PPA en CO ya se considera de alto riesgo para la salud"></i>
</p>
</div>
</div>
</div>
<br>
</div>
<!-- Fin Sección monitoreo -->
<!-- Inicio sección análisis -->
<div class="container-fluid" id="analytics">
<div class="row card">
<h1 class="text-center col-12">Gráfica del día</h1>
<hr><br>
<div class="card-body">
<div id="graph-lines">
</div>
</div>
</div>
</div>
<!-- Fin Sección análisis -->
<!-- Inicio sección datos -->
<div class="container-fluid mt-2" id="data">
<div class="row card">
<h1 class="text-center col-12">Datos históricos</h1>
<hr><br>
<div class="card-body table-responsive">
<div id="table">
<table class="table table-striped table-over p-sm-0" id="historico"></table>
</div>
</div>
</div>
</div>
<!-- Fin Sección datos -->
<!-- Inicio sección contactos -->
<div class="container-fluid mt-2" id="contacts">
<div class="row card">
<h1 class="text-center col-12">Acerca de</h1>
<hr><br>
<div class="card-body">
<div id="">
<h5 class="text-center">RETAVID es un proyecto desarrollado para la Universidad Tecnológica de El Salvador</h5>
<p class="text-center">
<a class="btn border-0 btn-lg" href="https://www.facebook.com/universidadtecnologica" data-bs-toggle="tooltip" data-bs-placement="left" title="Facebook de la UTEC"><i class="bi bi-facebook"></i></a>
<a class="btn border-0 btn-lg" href="https://twitter.com/utecedusv" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter de la UTEC"><i class="bi bi-twitter"></i></a>
<a class="btn border-0 btn-lg" href="https://www.instagram.com/utecelsalvador/" data-bs-toggle="tooltip" data-bs-placement="top" title="Instagram de la UTEC"><i class="bi bi-instagram"></i></a>
<a class="btn border-0 btn-lg" href="https://www.youtube.com/user/UTECedusv" data-bs-toggle="tooltip" data-bs-placement="right" title="Canal de YouTube de la UTEC"><i class="bi bi-youtube"></i></a>
</p>
<p class="text-center">
Desarrollada por: Gustavo Enrique Tovar Ramos <br>
Contacta con el desarrollador para más información <a href="mailto:lintavo@gmail.com?subject=Información sobre aplicación RETAVID" data-bs-toggle="tooltip" data-bs-placement="right" title="Envía un correo al desarrollador"><i class="bi bi-envelope-exclamation"></i> lintavo@gmail.com</a><br>
Disponible en GitHub <a href="https://github.com/lintavo/Retavid.git" target="_blank" data-bs-toggle="tooltip" data-bs-placement="right" title="Repositorio de RETAVID en GitHub"><i class="bi bi-github"></i> </a>
</p>
</div>
</div>
</div>
</div>
<!-- Fin Sección contactos -->
<!-- Footer de página de aplicación -->
<br>
<div class="container-fluid">
<div class="row">
<h4 class="text-center">Universidad Tecnológica de El Salvador - © Copyright <span id="año"></span></h4>
</div>
</div>
<!-- Fin de footer -->
<!-- JavaScript personalizado de la aplicación -->
<script src="js/app.script.js"></script>
<!-- Firebase -->
<script type="module" src="js/firebase.js"></script>
<!-- Habilitar popovers -->
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
<!-- Habilita tooltips de bootstrap -->
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>