-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
📈 Nueva interfaz y opción de visualizar apariciones
- Loading branch information
Showing
10 changed files
with
967 additions
and
366 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import coloresAMil from '../utilidades/colores'; | ||
|
|
||
| const categorias = [ | ||
| 'person', | ||
| 'bicycle', | ||
| 'car', | ||
| 'motorcycle', | ||
| 'airplane', | ||
| 'bus', | ||
| 'train', | ||
| 'truck', | ||
| 'boat', | ||
| 'traffic light', | ||
| 'fire hydrant', | ||
| 'stop sign', | ||
| 'parking meter', | ||
| 'bench', | ||
| 'bird', | ||
| 'cat', | ||
| 'dog', | ||
| 'horse', | ||
| 'sheep', | ||
| 'cow', | ||
| 'elephant', | ||
| 'bear', | ||
| 'zebra', | ||
| 'giraffe', | ||
| 'backpack', | ||
| 'umbrella', | ||
| 'handbag', | ||
| 'tie', | ||
| 'suitcase', | ||
| 'frisbee', | ||
| 'skis', | ||
| 'snowboard', | ||
| 'sports ball', | ||
| 'kite', | ||
| 'baseball bat', | ||
| 'baseball glove', | ||
| 'skateboard', | ||
| 'surfboard', | ||
| 'tennis racket', | ||
| 'bottle', | ||
| 'wine glass', | ||
| 'cup', | ||
| 'fork', | ||
| 'knife', | ||
| 'spoon', | ||
| 'bowl', | ||
| 'banana', | ||
| 'apple', | ||
| 'sandwich', | ||
| 'orange', | ||
| 'broccoli', | ||
| 'carrot', | ||
| 'hot dog', | ||
| 'pizza', | ||
| 'donut', | ||
| 'cake', | ||
| 'chair', | ||
| 'couch', | ||
| 'potted plant', | ||
| 'bed', | ||
| 'dining table', | ||
| 'toilet', | ||
| 'tv', | ||
| 'laptop', | ||
| 'mouse', | ||
| 'remote', | ||
| 'keyboard', | ||
| 'cell phone', | ||
| 'microwave', | ||
| 'oven', | ||
| 'toaster', | ||
| 'sink', | ||
| 'refrigerator', | ||
| 'book', | ||
| 'clock', | ||
| 'vase', | ||
| 'scissors', | ||
| 'teddy bear', | ||
| 'hair drier', | ||
| 'toothbrush', | ||
| ]; | ||
|
|
||
| const categoriasConColor: { [nombre: string]: string } = {}; | ||
|
|
||
| categorias.forEach((categoria, i) => { | ||
| categoriasConColor[categoria] = coloresAMil[i]; | ||
| }); | ||
|
|
||
| export default categoriasConColor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import type { Aparicion, Cuadro } from '../tipos'; | ||
| import categoriasConColor from './categorias'; | ||
|
|
||
| const video = document.getElementById('video') as HTMLVideoElement; | ||
| const lienzo2 = document.getElementById('lienzo2') as HTMLCanvasElement; | ||
| const lienzo3 = document.getElementById('lienzo3') as HTMLCanvasElement; | ||
| const ctx3 = lienzo3.getContext('2d'); | ||
| const listaCategorias = document.getElementById('listaCategorias') as HTMLDivElement; | ||
| let categorias: { [categoria: string]: { contador: HTMLSpanElement; apariciones: Aparicion[] } } = {}; | ||
|
|
||
| export default { | ||
| reiniciar: () => { | ||
| listaCategorias.innerHTML = ''; | ||
| categorias = {}; | ||
| }, | ||
|
|
||
| agregar: (nombreCategoria: string, confianza: number, area: Cuadro, tiempo: number) => { | ||
| const categoria = categorias[nombreCategoria]; | ||
|
|
||
| if (!categoria) { | ||
| const elemento = document.createElement('div'); | ||
| const contador = document.createElement('span'); | ||
| const barra = document.createElement('span'); | ||
| const color = categoriasConColor[nombreCategoria]; | ||
|
|
||
| elemento.className = 'categoria'; | ||
| elemento.innerText = nombreCategoria; | ||
| contador.className = 'contadorCategoria'; | ||
| contador.innerText = '1'; | ||
| barra.className = 'barraColor'; | ||
| barra.style.backgroundColor = color; | ||
|
|
||
| elemento.appendChild(barra); | ||
| elemento.appendChild(contador); | ||
| listaCategorias.appendChild(elemento); | ||
|
|
||
| elemento.onclick = () => { | ||
| console.log(`Apariciones de categoría ${nombreCategoria}`, categorias[nombreCategoria].apariciones); | ||
| }; | ||
|
|
||
| elemento.onmouseenter = () => { | ||
| if (!ctx3) return; | ||
|
|
||
| lienzo2.classList.remove('visible'); | ||
| lienzo3.classList.add('visible'); | ||
|
|
||
| ctx3.clearRect(0, 0, lienzo3.width, lienzo3.height); | ||
|
|
||
| const { apariciones } = categorias[nombreCategoria]; | ||
|
|
||
| if (apariciones && apariciones.length) { | ||
| ctx3.fillStyle = color; | ||
| ctx3.globalAlpha = 0.05; | ||
|
|
||
| apariciones.forEach(({ area }) => { | ||
| ctx3.fillRect(area.x, area.y, area.alto, area.alto); | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| elemento.onmouseleave = () => { | ||
| lienzo2.classList.add('visible'); | ||
| lienzo3.classList.remove('visible'); | ||
| }; | ||
|
|
||
| categorias[nombreCategoria] = { contador, apariciones: [] }; | ||
| } else { | ||
| categoria.contador.innerText = `${categoria.apariciones.length + 1}`; | ||
| } | ||
|
|
||
| categorias[nombreCategoria].apariciones.push({ tiempo, area, confianza }); | ||
| }, | ||
|
|
||
| apariciones: () => { | ||
| return categorias.apariciones; | ||
| }, | ||
| }; |
Oops, something went wrong.