Plataforma para la prevención de delitos:entorno visual para el análisis y la prevención de delitos
Abstract
El objetivo del proyecto ha sido desarrollar un entorno visual para el análisis y prevención de delitos, con el fin de proveer a los agentes de seguridad del cuerpo nacional de policía de Málaga una herramienta visual e intuitiva que facilite las labores en la prevención del crimen en la provincia de Málaga y su capital, ya sea mediante la comparación de hechos ocurridos o como la predicción de futuros casos. Dicha heraamienta cuenta con mapas de calor, a través de los cuales se podrán contrastar los datos almacenados en la aplicación, así como distintos menús para filtrar los valores mostrados y realizar simulaciones de predicción y evolución. Para poder dar respuesta a los objetivos del proyecto se ha combinado HTML con JAVAscript, usando a su vez el framework AngularJS. Mientras que para generación y manipulación de los mapas se ha utilizado la librería D3, que permite generar distintos elementos visuales sobre lienzos svg. Este proyecto ha sido desarrollado por un grupo de tres estudiantes.
Full text
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA GRADO EN INGENIERÍA DEL SOFTWARE PLATAFORMA PARA LA PREVENCIÓN DE DELITOS ENTORNO VISUAL PARA EL ANÁLISIS Y LA PREVENCIÓN DE DELITOS CRIME PREVENTION PLATFORM VISUAL ENVIRONMENT FOR THE CRIME ANALYSIS AND PREVENTION Realizado por ALBERTO RAMÍREZ MENA Tutorizado por EDUARDO GUZMÁN DE LOS RISCOS Departamento LENGUAJE Y CIENCIAS DE LA COMPUTACIÓN UNIVERSIDAD DE MÁLAGA MÁLAGA, SEPTIEMBRE DE 2019 Fecha defensa: septiembre de 2019
................................................................................................... 13 1.1 Motivación ........................................................................................................... 13 1.2 Objetivos ............................................................................................................. 14 1.3 Antecedentes ....................................................................................................... 14 1.4 Metodología ........................................................................................................ 15 1.5 Tecnologías empleadas ........................................................................................ 16 1.6 Estructura de la memoria..................................................................................... 17 ....................................................................................................... 19 2.1 Introducción ........................................................................................................ 19 2.2 Desarrollo ............................................................................................................ 19 2.2.1 Investigación ................................................................................................. 19 2.2.2 Toma de requisitos visuales ........................................................................... 22 2.2.3 Modelo de navegación .................................................................................. 22 2.3 Primera reunión con el cliente ............................................................................. 23 ....................................................................................................... 25 3.1 Introducción ........................................................................................................ 25 3.2 Desarrollo ............................................................................................................ 25 3.2.1 Diseño de la interfaz ...................................................................................... 25 3.2.2 Creación de la ventana de acceso .................................................................. 29 3.2.3 Creación de la ventana del mapa ................................................................... 30 3.3 Segunda reunión con el cliente ............................................................................ 33 ....................................................................................................... 35 4.1 Introducción ........................................................................................................ 35 4.2 Desarrollo ............................................................................................................ 35 4.2.1 Pestaña de filtros ........................................................................................... 35 4.2.2 Manejo de datos ........................................................................................... 38 4.2.3 Selección de áreas ......................................................................................... 39 4.2.4 Tipos de búsquedas ....................................................................................... 40 4.2.5 Cambio entre mapas ..................................................................................... 42 4.2.6 Importar datos .................................................................................................. 42 4.3 Tercera reunión con el cliente.............................................................................. 44 ....................................................................................................... 45 5.1 Introducción ........................................................................................................ 45 5.2 Desarrollo ............................................................................................................ 45 5.2.1 Ventana de simulación .................................................................................. 46 5.2.2 Ventana de gráficas ....................................................................................... 47 5.2.3 Gestión de usuarios ....................................................................................... 49 5.2.4 Exportación de datos ..................................................................................... 49 5.2.5 Manual de usuario ......................................................................................... 51 ....................................................................................................... 53 6.1 Introducción ........................................................................................................ 53
6.2 Conclusión ............................................................................................................53 6.3 Dificultades encontradas ......................................................................................54 6.4 Mejoras futuras en la interfaz ...............................................................................55 6.4.1 Mejor control de errores ................................................................................55 6.4.2 Representación de gráficas .............................................................................55 6.5 Posibles nuevas funcionalidades ..........................................................................56 6.5.1 Mapa del callejero de Málaga .........................................................................56 6.5.2 Mapas por barrios y distritos policiales ...........................................................56 6.5.3 Mapas de la Costa del Sol ...........................................................................56 6.5.4 Iconos de delitos ............................................................................................57 ...................................................................................................... 59 ....................................................................................... 61 A.1. Acerca del programa ...........................................................................................61 A.2. Guía de uso..........................................................................................................62 A.2.1. Realizar búsqueda .........................................................................................62 A.2.2. Consultar datos y estadísticas........................................................................68 A.2.3. Simulación y predicción .................................................................................72 A.2.4. Opciones de usuario ......................................................................................77 A.2.5. Opciones de administrador ...........................................................................80 ....................................................................................... 83
.left-panel { width: 40%; height: 100%; background: whitesmoke; position: absolute; border-right-style: solid; border-width: 2px; top: 0%; left: -40%; display: flex; flex-direction: column; align-items: center; justify-content: start; transition: left 0.4s; overflow-y: scroll; padding: 20px; } .checkbox:checked ~ .left-panel { left: 0; }
$(".nacionalidades").select2({ data: response.data.Nacionalidades }); $(".lugares").select2({ data: response.data.Tipos_lugar_especifico }); $(".hechos").select2({ data: response.data.Tipos_hecho }); $(".modus").select2({ data: response.data.Modus_operandi });
• •
$http({ url: url, method: "GET", config: config, headers: {…}, cache: true, params: {…} })
<div class="d-flex input-group input append date mr-1" id="dateRangePickerFrom"> <input class="form-control datepicker" id="fdesde" name="date" type="text"/> <span class="input-group-text input-group-addon add-on"><i class="fas fa-calendar"></i></span> </div> <script> $(document).ready(function () { $('#dateRangePickerFrom') .datepicker({ format: 'dd/mm/yyyy' }) .datepicker(('setDate', '')); }); </script>
let downloadAnchorNode = document.createElement('a'); downloadAnchorNode.setAttribute("href", dataStr); downloadAnchorNode.setAttribute("download", "fichero.json"); document.body.appendChild(downloadAnchorNode); // required for firefox downloadAnchorNode.click(); downloadAnchorNode.remove();
var blob = new Blob(["\uFEFF" + response.data], {type: 'text/csv;charset=Windows-1252;'}); if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, name + ".csv"); } else { var a = window.document.createElement("a"); a.href = window.URL.createObjectURL(blob, { type: 'text/csv;charset=Windows-1252;' }); a.download = name + ".csv"; document.body.appendChild(a); a.click(); document.body.removeChild(a); }