lintavo · lintavo · Jun 9, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/.gitignore b/.gitignore
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "c3"]
+	path = c3
+	url = /~https://github.com/c3js/c3.git
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # Retavid
-Visualización de datos en tiempo real que son generados por estación IoT provista con sensores de niveles de GPL y CO para fortalecer la seguridad industrial en estaciones de distribución, almacenaje y procesamiento de gas propano en El Salvador
+Visualizar datos generados por estación IoT provista con sensores de niveles de GPL y CO en tiempo real, con el propósito de fortalecer la seguridad industrial en estaciones de distribución, almacenaje y procesamiento de gas propano en El Salvador.
+
+Las lecturas facilitadas por la estación se miden en ppm (partes por millón).
diff --git a/c3 b/c3
diff --git a/css/app.estilos.css b/css/app.estilos.css
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!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">
+    <!-- Google Material icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Google Material symbols -->
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <!-- 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">
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="#" 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>
+    <!-- Google Charts -->
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+</head>
+<body>
+    <!-- JavaScript personalizado de la aplicación -->   
+    <script type="module" src="js/app.script.js"></script>
+</body>
+</html>
diff --git a/js/app.script.js b/js/app.script.js
diff --git a/js/google.chats.js b/js/google.chats.js
@@ -0,0 +1,33 @@
+//Ejemplo de uso
+// Load the Visualization API and the corechart package.
+google.charts.load('current', {'packages':['corechart']});
+
+// Set a callback to run when the Google Visualization API is loaded.
+google.charts.setOnLoadCallback(drawChart);
+
+// Callback that creates and populates a data table,
+// instantiates the pie chart, passes in the data and
+// draws it.
+function drawChart() {
+
+  // Create the data table.
+  var data = new google.visualization.DataTable();
+  data.addColumn('string', 'Topping');
+  data.addColumn('number', 'Slices');
+  data.addRows([
+    ['Mushrooms', 3],
+    ['Onions', 1],
+    ['Olives', 1],
+    ['Zucchini', 1],
+    ['Pepperoni', 2]
+  ]);
+
+  // Set chart options
+  var options = {'title':'How Much Pizza I Ate Last Night',
+                 'width':400,
+                 'height':300};
+
+  // Instantiate and draw our chart, passing in some options.
+  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
+  chart.draw(data, options);
+}