https://detector-glucosa.netlify.app/

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6<!-- This site is hosted on Netlify. Anyone can build and deploy a site
7     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=839df43b-f7fd-453c-97cf-d72ec3e606e2
8     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
9  <meta name="viewport" content="width=device-width, initial-scale=1.0">
10  <title>Deteccion de Glucosa</title>
11  <link rel="shortcut icon" href="./assets/logo.jpg" />
12  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
13    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
14  <link rel="stylesheet" href="./style.css">
15  <link
16    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
17    rel="stylesheet">
18</head>
19
20<body>
21  <header>
22    <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
23      <div class="container-fluid">
24        <h1 class="titulo navbar-brand mb-0 h1" href="./index.html">Glucose Levels</h1>
25        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
26          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
27          <span class="navbar-toggler-icon"></span>
28        </button>
29        <div class="collapse navbar-collapse" id="navbarNav">
30          <ul class="navbar-nav">
31            <li class="nav-item">
32              <a aria-current='page' class='nav-link active' href='/'>Glucose Determination</a>
33            </li>
34            <li class="nav-item">
35              <a class='nav-link' href='/pages/colorimetria'>Color Guide</a>
36            </li>
37            <li class="nav-item">
38              <a class='nav-link d-none' href='/pages/registro' id='aparece'>Register</a>
39            </li>
40            <li class="nav-item">
41              <a class='nav-link  d-none' href='/pages/login' id='aparece1'>Log in</a>
42            </li>
43            <li class="nav-item">
44              <a class='nav-link' href='/pages/login' id='desaparece' onclick='logout()'>Log out</a>
45            </li>
46          </ul>
47        </div>
48      </div>
49    </nav>
50  </header>
51  <!-- <input type="file" class="fileInput" id="fileInput" accept="image/*">
52  <canvas class="outputCanvas" id="outputCanvas" width="400" height="300"></canvas>
53  <div class="colorIntensity" id="colorIntensity"></div> -->
54  <meta name="viewport" content="width=device-width,initial-scale=1" />
55  <div class="row">
56    <div id="app" class="container">
57      <div class="hijo">
58        <canvas id="outputCanvas" ></canvas>
59        <div id="colorIntensity" class="d-none"></div>
60        <div class="intensity-container">
61          <canvas id="intensityCanvas" width="200" height="200"></canvas>
62          <div id="statusText" class="intensity-container"></div>
63        </div>
64        <div class="file-select">
65          <label for="fileInput" id="boton-file" class="file-label">Measure Glucose</label>
66          <input type="file" name="src-file" id="fileInput" accept="image/*" style="display: none;">
67          <button id="backButton" class="btn d-none">Back</button>
68          <button id="loginButton" class="btn d-none"><a class='link' href='/pages/login'>Log in</a></button>
69        </div>
70      </div>
71    </div>
72    <canvas id="glucoseChart" width="400" height="200"></canvas>
73  </div>
74  

74<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

74
75
76  <!-- 

76<script>
77    function onOpenCvReady() {
78      console.log('OpenCV.js loaded');
79      document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
80    }
81
82    function handleFileSelect(event) {
83      const file = event.target.files[0];
84      const reader = new FileReader();
85
86      reader.onload = function (event) {
87        const img = new Image();
88        img.onload = function () {
89          processImage(this);
90        };
91        img.src = event.target.result;
92      };
93
94      reader.readAsDataURL(file);
95    }
96
97    function processImage(image) {
98      const canvas = document.getElementById('outputCanvas');
99      const ctx = canvas.getContext('2d');
100      canvas.width = image.width;
101      canvas.height = image.height;
102      ctx.drawImage(image, 0, 0);
103
104      // Convertir la imagen a un objeto Mat de OpenCV.js
105      const src = cv.imread(canvas);
106
107      // Convertir la imagen a HSV
108      const hsv = new cv.Mat();
109      cv.cvtColor(src, hsv, cv.COLOR_RGBA2RGB);
110      cv.cvtColor(hsv, hsv, cv.COLOR_RGB2HSV);
111
112      // Definir el rango de color azul en HSV
113      const lowerBlue = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [90, 50, 50, 0]);//Hue(matriz, cant de componentes),Saturacion,Valor, transparencia
114      const upperBlue = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [130, 255, 255, 255]);//totalmente opaco 255 en traparencia
115      // Rango para colores verdes
116      const lowerGreen = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [35, 50, 50, 0]);
117      const upperGreen = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [85, 255, 255, 255]);
118      // Crear máscaras para verdes y azules
119      let maskGreen = new cv.Mat();
120      let maskBlue = new cv.Mat();
121      cv.inRange(hsv, lowerGreen, upperGreen, maskGreen);
122      cv.inRange(hsv, lowerBlue, upperBlue, maskBlue);
123
124      // Combinar las máscaras para obtener una única máscara que incluya ambos colores
125      let mask = new cv.Mat();
126      cv.bitwise_or(maskGreen, maskBlue, mask);
127      // Crear una máscara para aislar las áreas azules
128
129      // Aplicar umbralización
130      const dst = new cv.Mat();
131      cv.threshold(mask, dst, 100, 255, cv.THRESH_BINARY);
132
133      // Calcular la intensidad del color
134      const intensity = cv.countNonZero(dst);
135      document.getElementById("colorIntensity").textContent = "Intensidad del color:" + intensity;
136
137      // Mostrar el resultado en el canvas
138
139      cv.imshow(canvas, dst);
140
141      // Liberar memoria
142      src.delete();
143      hsv.delete();
144      lowerBlue.delete();
145      upperBlue.delete();
146      mask.delete();
147      dst.delete();
148    }
149  </script>

149 -->
150  

150<script src="./app.js"></script>

150
151  

151<script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady()"></script>

151
152  

152<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
153    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
154    crossorigin="anonymous"></script>

154
155  

155<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
156    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
157    crossorigin="anonymous"></script>

157
158  <!-- <style>
159    #outputCanvas {
160      position: absolute;
161      z-index: -1;
162      width: 400px;
163      /*Este numero puede ser ajustado segun sea necesario*/
164    }
165  </style> -->
166</body>
167
168</html>