Mapa de Calor 🗺️🌡️

Visão Geral

Este projeto é uma aplicação web que permite gerar um mapa de calor dinâmico sobre uma imagem com base em dados JSON fornecidos. Utiliza a biblioteca heatmap.js para a criação do mapa de calor e html2canvas para capturar e baixar a imagem com o mapa de calor sobreposto.

Componentes Principais

HeatmapComponent

Descrição: Componente responsável por renderizar o mapa de calor sobre a imagem fornecida.

Props:

imageUrl (string): URL da imagem na qual o mapa de calor será sobreposto.
data (array): Dados de entrada para o mapa de calor, contendo informações sobre os pontos de interesse.
objectOfInterest (string): Tipo de objeto de interesse para filtrar os dados a serem exibidos no mapa de calor.

Funcionalidades:

Inicialização do Heatmap: Cria uma instância do heatmap quando o componente é montado.
Atualização dos Dados: Filtra os dados para o objeto de interesse e atualiza o mapa de calor com os pontos e valores correspondentes.
Download da Imagem: Captura a área do mapa de calor e a imagem base usando html2canvas e permite o download da imagem resultante.

MainContent

Descrição: Componente principal da aplicação que lida com o upload de arquivos JSON e imagens, bem como a seleção do objeto de interesse.

Estado:

image (string): URL da imagem carregada.
data (array): Dados carregados do arquivo JSON.
objectOfInterest (string): Tipo de objeto selecionado pelo usuário.

Funcionalidades:

Upload de JSON: Lê e formata o arquivo JSON para extrair os dados necessários para o mapa de calor.
Upload de Imagem: Carrega a imagem a ser usada no mapa de calor.
Seleção do Objeto de Interesse: Permite ao usuário escolher qual objeto será destacado no mapa de calor.
Renderização Condicional: Exibe o HeatmapComponent somente quando a imagem e os dados estão disponíveis.

Passos para Inicialização

Clone o Repositório: Se você ainda não tiver o repositório localmente, clone-o usando o seguinte comando:

git clone https://github.com/amayararocha/heatmap.git
cd heatmap

Instalação de Dependências

Instale as dependências necessárias com o comando:

npm install

Execução da Aplicação

Inicie o servidor de desenvolvimento com o comando:

npm start

Isso deve iniciar a aplicação e abrir um navegador para você visualizar a interface web.

Requisitos

JSON de Entrada: O arquivo JSON deve seguir a estrutura esperada, com a propriedade deepstream-msg contendo dados no formato "TRACKING-ID|X-MIN|Y-MIN|X-MAX|Y-MAX|OBJECT|REGION".
Imagem de Entrada: Deve ser um arquivo de imagem válido (JPG, PNG, etc.) que será utilizado como base para o mapa de calor.

Acesso Online

Você pode acessar a aplicação online aqui.

amayararocha / heatmap