Integração de mapa de calor em tempo real com painel de dados do Grafana
Introdução
Este projeto realiza detecção de alvos usando o modelo YOLO11n integrado na reCamera. Ele executa processamento de desfoque em alvos de pessoas e exibe um efeito de mapa de calor. Tudo isso é processado localmente dentro da reCamera! E a reCamera enviará os dados detectados para o banco de dados Influxdb em execução localmente. Em seguida, o Grafana lê os dados do banco de dados Influxdb para exibir painéis de dados em tempo real.
A seguir está o efeito de uso após concluir este demo.
Preparação de hardware
Uma reCamera um computador
| reCamera 2002 Series | reCamera Gimbal | reCamera HQ POE |
|---|---|---|
 |  |  |
1.Configuração do InfluxDB
1.1 Baixar o InfluxDB2-2.1.1 e iniciar
Acesse o link de download, baixe e extraia. Pressione Win + R para abrir o Prompt de Comando, depois entre no diretório onde o arquivo foi extraído e, por fim, digite:
influxd
Conforme mostrado na figura a seguir, a inicialização foi bem-sucedida
Se o seu dispositivo for um dispositivo de arquitetura ARM executando um sistema Linux, como um Raspberry Pi, o link de download está aqui.
Se o seu dispositivo for um dispositivo de arquitetura AMD executando um sistema Linux, clique aqui para fazer o download.
Para dispositivos Linux, o procedimento de inicialização do InfluxDB é o mesmo. Entre no diretório após a descompactação e execute:
./influxd
1.2 Acessar a página local do InfluxDB para configuração
Em seguida, abra um terminal cmd e insira o seguinte comando para consultar o IP do seu computador
ipconfig
Depois, insira o IP obtido no navegador e, em seguida, adicione a porta 8086 para entrar na interface principal do InfluxDB.
Por exemplo, meu IP é 192.168.7.183, então insira 192.168.7.183:8086 no navegador
Em seguida, clique em "Get Started" e preencha suas próprias informações. Observe que, nesta etapa, certifique-se de lembrar o nome de usuário e a senha que você definiu!!
Depois clique em "Confgure Later"
Depois clique em Data para ver o "Initial Bucket Name" que acabamos de definir na etapa de preenchimento das nossas próprias informações. Eu preenchi reCamera
Em seguida, clique em Setting para definir o tempo de retenção dos dados
Clique em API Token para visualizar o Token do seu banco de dados, que será usado na configuração posterior da reCamera e na configuração da página web do mapa de calor.
2.Configuração da reCamera
2.1 Conectar a reCamera a um dispositivo Linux (Se você não estiver usando um dispositivo Linux, prossiga para a próxima etapa e comece a partir da etapa 2.2)
Se você planeja conectar a reCamera a um dispositivo Linux, sugiro que primeiro use um computador Windows ou Mac para se conectar à reCamera e fazer algumas alterações de configuração. Caso contrário, a reCamera não conseguirá se conectar diretamente ao dispositivo Linux.
Tomando o Windows como exemplo. Digite 192.168.42.1 no navegador e depois clique em "setting"
Em seguida, clique em "Terminal" e insira o nome de conta "recamera" e sua senha.
Depois execute isto no terminal da recamera (esta etapa exigirá que você insira a senha novamente):
sudo rootfs_rw on
Em seguida, execute:
sudo vi /mnt/system/usb-ncm.sh
Depois comente esta linha (primeiro pressione a tecla "I" no teclado para entrar no modo de escrita, depois use as teclas de direção para chegar a esta linha e adicione um "#" no início). /etc/run_usb.sh probe acm >> /tmp/ncm.log 2>&1
Depois é só salvar e sair (pressione a tecla ESC no teclado para sair do modo de escrita e, em seguida, digite ":wq" para salvar e sair).
Isso pode se tornar ineficaz após várias reinicializações e precisará ser redefinido.
2.2 Instalar programas das plataformas SenseCraft na reCamera
Na plataforma SenseCraft AI, navegue até Applications > Application Square, depois digite "Real-time Crowd Heatmap" na caixa de pesquisa. Encontre o aplicativo chamado "Real-time Crowd Heatmap" e faça o deploy dele na sua reCamera.
2.3 conectar à rede e instalar o node ausente
Após entrar no workspace, este aviso irá aparecer. Isso é normal. Clique primeiro em Close. Mais tarde precisaremos instalar um node para a reCamera.
Conecte a reCamera à rede (certifique-se de que ela esteja conectada à mesma rede que o seu computador!! Isso será muito importante depois)
Em seguida, instale o node node-red-contrib-influxdb na reCamera.
Depois preencha node-red-contrib-influxdb na caixa de pesquisa, e a primeira versão 0.7.0 é o node que precisamos. Clique em Install
A instalação leva bastante tempo, aguarde pacientemente; após a instalação bem-sucedida, será exibido o seguinte
2.4 Configurar o Node InfluxDB
Neste momento, também precisamos adicionar algumas informações de configuração ao node chamado Write Person Count para encontrar este node.
Clique duas vezes para abrir o painel de configuração e, em seguida, clique no pequeno ícone de lápis atrás de server
Antes disso, lembre-se de que o conteúdo nas opções "Organization" e "Bucket" abaixo do pequeno lápis é o mesmo que você configurou no InfluxDB!!! "Organization" é seu nome de usuário no InfluxDB e "Bucket" é o nome do banco de dados que você criou.
Depois de clicar no pequeno lápis, precisamos preencher a URL e o Token
A URL aqui é para preencher o link da página web do InfluxDB que inserimos na primeira etapa. Por exemplo, se sua página web for 192.168.7.183:8086, então você pode preencher http://192.168.7.183:8086 para a URL.
Em seguida, preencha o Token, que é o API Tokens na página web do InfluxDB que mencionamos no início.
Clicamos em Copy to Cilpboard e preenchemos o Token copiado na configuração.
Depois de preencher, clique em Update no canto superior direito. Não altere outras configurações.
Em seguida, clicamos em deployment no canto superior direito para fazer com que a alteração feita agora entre em vigor. Haverá uma janela de aviso pop-up e podemos fechá-la.
2.5 Visualizar dados do InfluxDB
Neste ponto, podemos entrar na interface do InfluxDB para ver se os dados aparecem; se der certo, clique em Submit, você verá o gráfico de linha dos dados, aqui consultamos a quantidade de dados.
3.Configuração do Grafana
3.1 Instalação do Grafana
3.1.1 Sistema Windows
Acesse o site oficial do Grafana Grafana get started | Cloud, Self-managed, Enterprise para baixar o pacote de instalação localmente. A versão que baixei aqui é a 12.3.0
Lembre-se, o Grafana deve ser instalado na unidade C!!! Caso contrário, você não poderá modificar seu arquivo de configuração depois.
Após baixar e instalar, o Grafana deve ser executado automaticamente em segundo plano; você pode abrir o "service" do computador para ver se ele está em execução.
3.1.2 Sistema Linux
Se o seu dispositivo for um dispositivo baseado em ARM executando Linux, como um Raspberry Pi, então o link de download está aqui
Se o seu dispositivo for um dispositivo baseado em AMD executando o sistema Linux, faça o download pelo link aqui
Em seguida, descompacte o arquivo tar.gz que você baixou.
3.2 Modificar defaults.ini para permitir que o Grafana incorpore HTML
3.2.1 Sistema Windows
Navegue até o diretório "grafana/conf", localize o arquivo "defaults.ini" e clique com o botão direito para abri-lo com o Bloco de Notas.
Pressione Ctrl + F, pesquise por "disable_sanitize_html", altere o original "disable_sanitize_html = false" para "disable_sanitize_html = true" para permitir que o Grafana incorpore html. Após fazer a modificação, salve e saia.
3.2.2 Sistema Linux
Para o sistema Linux, o defaults.ini também está localizado no diretório conf.
Clique com o botão direito e selecione abrir com um aplicativo semelhante ao Bloco de Notas. Em seguida, encontre esta frase na imagem e altere o "false" original para "true".
3.3 Iniciar o Grafana
Para o sistema Windows, se você instalou o Grafana, só precisa verificar na seção "Services" se o Grafana está em execução, conforme descrito na Etapa 3.1.1. Geralmente, o Grafana será iniciado automaticamente após a instalação.
Para o sistema Linux, o Grafana precisa ser iniciado manualmente. Depois de entrar no diretório do arquivo grafana descompactado, execute o seguinte comando:
./bin/grafana-server
3.4 Definir fonte de dados
Depois de confirmar que o Grafana está em execução, neste ponto, você pode acessar a interface local do Grafana visitando http://localhost:3000 no navegador para configuração. Primeiro, você precisa fazer login. O nome de usuário e a senha iniciais são ambos admin. Após o login, o sistema solicitará que você altere sua nova senha. Lembre-se da sua senha. A conta ainda será admin e não mudará.
Após o login, clicamos em "Data sources" no lado esquerdo e, em seguida, selecionamos "Add new data source"
Em seguida, selecione "InfluxDB"
Em seguida, você precisa fazer as seis revisões a seguir:
(1) "Query language" selecionado como "Flux"
(2) Insira a URL da página web do seu banco de dados, que é o link para a página web do InfluxDB que você acessou na primeira etapa. Por exemplo, se o endereço da sua página web for 192.168.7.183:8086, então a URL que você deve preencher é http://192.168.7.183:8086.
(3) Desative a opção "Basic auth"
(4) "Organization" deve ser preenchido com o nome de usuário que você usou ao registrar o banco de dados.
(5) Token deve ser preenchido com o API Tokens mencionado na página web do InfluxDB, conforme discutido na etapa 2.3.
(6) "Default Bucket" deve ser preenchido com o nome do banco de dados que você criou.
Quando tudo estiver pronto, clique em "Save & Test". Se o teste for bem-sucedido, será exibido "datasource is working". Neste ponto, você pode prosseguir diretamente para a próxima etapa. Essas configurações serão salvas automaticamente.
3.5 Importar Dashboard
Clique em Dashboards
Em seguida, clique em New dashboard
Selecione Import dashboard
Por favor, baixe o projeto que enviei para o GitHub. Após baixar e extrair, localize o "Grafana Json File" que contém "reCamera Heatmap-1766213863140.json" nele. Este arquivo é o que precisamos importar para o Grafana.
Após a importação, você deverá conseguir ver o seguinte efeito (se você não vir a tela a seguir, vá para a seção de FAQ no final do artigo, lá haverá uma solução)
4. Uso do software de calibração em Python
Lembre-se de primeiro baixar meu projeto no GitHub. Depois de extrair e abrir, localize a pasta chamada "Heatmap area calibration", que contém três arquivos: calibration_tool.py é o programa de calibração, R1.jpg é a imagem original capturada pela reCamera, e R2.png é a planta baixa do cômodo que eu desenhei.
4.1 Obter uma imagem de resolução nativa atual da reCamera
Obter a imagem de resolução original é importante!! Embora os passos sejam mais trabalhosos, isso afeta diretamente a precisão de posicionamento do mapa de calor! Por favor, tenha paciência com a operação!
4.1.1 Usar a reCamera para tirar fotos
Volte para a interface de workspace da reCamera e pare o programa primeiro
Em seguida, encontre o nó capture à esquerda, arraste-o para trás do nó camera e conecte-os com linhas
Depois, clique duas vezes para abrir o nó capture, modifique as duas opções a seguir (a função deste nó é tirar uma foto a cada 2s e armazená-la localmente na reCamera), então clique em Finish e faça o redeploy, e clique em Run. Após rodar por três ou quatro segundos, clique em Stop Running (não precisa rodar o tempo todo, caso contrário ficará tirando fotos o tempo todo). Em seguida, moveremos as fotos tiradas para o computador local.
4.1.2 Transferir as fotos tiradas pela reCamera para o nosso computador
Vamos ver se a foto que acabamos de tirar foi bem-sucedida.
Clique em Setting
Clique em Terminal e insira a senha da conta da reCamera para fazer login.
Em seguida, insira os dois comandos a seguir, um após o outro:
Entre na pasta Images
cd / && cd userdata/Images/
Listar arquivos
ls
Então você deverá ver que o sistema lista alguns nomes de arquivos de imagem, que são as fotos recém-tiradas pelo nó de captura.
Volte para a interface de configuração de agora há pouco e abra a conexão ssh.
Em seguida, pressione Win R no teclado, digite cmd e depois digite no terminal
scp -r recamera@<reCamera IP>:/userdata/Images "The folder path of the 'Heatmap area calibration' file that you downloaded from GitHub after decompression"
A reCamera desses IPs pode ser encontrada nas configurações de rede
O caminho da pasta do arquivo 'Heatmap area calibration' que você baixou do GitHub após a descompactação: primeiro entramos em Heatmap area calibration, clicamos na caixa de caminho acima da pasta e copiamos o caminho.
Por exemplo:
scp -r [email protected]:/userdata/Images "C:\Users\seeed\Desktop\热力图\正式版\reCamera with Heatmap\Heatmap area calibration"
Em seguida, insira a senha da reCamera para fazer o download para o caminho de sua escolha
Volte para a pasta que você acabou de baixar e você verá a pasta Images que acabou de baixar.
Agora exclua o R1.jpg original do meu projeto.
Escolhemos a imagem mais recente, geralmente a última imagem, e a renomeamos para R1
Depois coloque essa imagem no diretório superior.
4.2 preparar planta do cômodo
Você pode usar as próprias ferramentas de desenho do Windows para desenhar e salvar como imagens e armazená-las no caminho Heatmap area calibration, ou armazenar diretamente sua planta de cômodo existente no caminho Heatmap area calibration. Nesta etapa, você também deve lembrar de excluir o R2.png do meu projeto anterior e renomear sua imagem para R2 e armazená-la neste caminho.
4.3 Uso do procedimento de calibração
O programa de calibração é o programa calibration_tool.py de Heatmap sob o caminho area calibration.
Aqui eu uso o Pycharm por padrão. Antes de usá-lo, preciso instalar a biblioteca OpenCV do Python.
pip install opencv-python
Há dois pontos a serem observados: primeiro, as duas imagens precisam estar sob o mesmo caminho, ou seja, sob o caminho Heatmap area calibration; em segundo lugar, verifique se o nome do arquivo de imagem está correto
Após a execução do programa, uma janela aparecerá para exibir a captura de tela da sua câmera. Neste momento, você precisa clicar na área efetiva com o mouse. A sequência de cliques é muito importante: clique nos quatro cantos da área que você deseja selecionar na sequência no sentido horário de "superior esquerdo -> superior direito -> inferior direito -> inferior esquerdo". Por exemplo, se você quiser exibir apenas a superfície da mesa, clique nos quatro cantos da mesa. Após 4 pontos, pressione qualquer tecla no teclado (como espaço) para entrar na próxima etapa.
Em seguida, uma segunda janela aparecerá para exibir seu mapa de visão superior R2.png. A sequência de cliques deve corresponder à primeira etapa: clique nas posições correspondentes dos quatro pontos no mapa de agora há pouco. Por exemplo, o canto superior esquerdo da mesa foi clicado primeiro há pouco, e agora o canto superior esquerdo da mesa é clicado no mapa. Após 4 pontos, pressione qualquer tecla para encerrar.
Depois volte para a janela de linha de comando (CMD), você verá que o script gera automaticamente um trecho de código JS, copie diretamente esse código e substitua o const CALIBRATION = { ... }; do seu index.html. É isso. (Ele só será usado na próxima etapa de "5.5 os dados de coordenadas calibrados", por enquanto ignore)
5. Configuração da página de mapa de calor
A configuração web para o heatmap também está disponível em meu projeto no GitHub, especificamente na pasta heatmap-demo, no arquivo index.html. Também precisamos modificar várias seções neste arquivo; caso contrário, ele não conseguirá ser executado corretamente nem receber os dados de coordenadas do mapa de calor.
5.1 Configuração de parâmetros da página web para mapa de calor
5.1.1 Imagem do mapa de calor
Substitua pelo nome de arquivo da sua imagem real
5.1.2 a configuração da parte do banco de dados
Explicação dos parâmetros
URL é o endereço web do InfluxDB que você abriu.
ORG é o nome de usuário quando você configura o InfluxDB.
BUCKET é o nome do banco de dados que você criou no InfluxDB.
TOKEN é o seu InfluxDB API Tokens, substitua o 12345678 original no HTML pelo seu Token real
5.1.3 Intervalo de atualização dos dados térmicos e período de consulta
Explicação dos parâmetros
REFRESH_INTERVAL refere-se ao número de milissegundos para atualizar, DATA_RANGE refere-se ao tempo de consulta nos dados passados. Os "3000" e "-3s" padrão no código, onde "3000" significa 3000 milissegundos, ou seja, atualizado a cada 3 segundos, enquanto "-3s" significa consultar os dados de coordenadas térmicas dos últimos 3s.
Seleção de modo
Existem dois modos que podem ser configurados:
(1) "modo em tempo real": as coordenadas térmicas serão atualizadas e limparão as coordenadas anteriores em tempo real, sem sobreposição cumulativa. Para realizar o modo em tempo real, você precisa definir o DATA_RANGE para um tempo curto. Por exemplo, meus "-3s" e "-3s" padrão significam consultar os dados de coordenadas térmicas dos últimos 3s; por exemplo, o programa está em execução há 10s agora, então, quando você configura o DATA_RANGE para -3s, os dados de coordenadas exibidos pelo diagrama térmico são os dados do 8º ao 10º segundo, e os dados de coordenadas dos 1º-7º segundos anteriores não serão exibidos;
(2) "Modo cumulativo": as coordenadas térmicas serão atualizadas em tempo real, mas as coordenadas anteriores serão sobrepostas. Para realizar o modo cumulativo, você precisa definir o DATA_RANGE para um tempo mais longo, por exemplo, você pode definir o DATA_RANGE para "-1h", então o diagrama térmico exibirá cumulativamente os dados da última 1h. Depois que o programa estiver em execução por 2 horas, agora serão exibidos os dados da segunda hora, e os dados da primeira hora não serão exibidos.
5.1.4 resolução da câmera
Explicação dos parâmetros
CAM_WIDTH / CAM_HEIGHT: A resolução do streaming real da câmera (por exemplo, 1920x1080 ou 1280x720) deve ser preenchida aqui, caso contrário a transformação de perspectiva estará errada.
Esse parâmetro também é apresentado na etapa de "4.1.1 usando a reCamera para tirar fotos". Quando conectamos o nó da câmera com o nó de captura, você pode visualizar o parâmetro Resolution do nó da câmera. Este é o parâmetro de resolução que você precisa modificar. Se 1920 × 1080 for selecionado aqui, então, no código, você deve modificar CAM WIDTH para 1920 e CAM HEIGHT para 1080
5.1.5 Dados de coordenadas da calibração
Este é o código gerado no console após a execução do programa Python na etapa anterior "uso do programa de calibração 4.3". Substitua este código
5.1.6 Limite térmico
Explicação dos parâmetros
Sensibilidade (valor máximo): Se estiver no modo em tempo real (apenas alguns pontos), defina o valor máximo como cerca de 2, caso contrário a cor ficará muito clara para ser vista;
Se for uma acumulação de 1 hora (milhares de pontos), o valor máximo deve ser definido como 150 ou superior, caso contrário o mapa ficará instantaneamente vermelho (superexposto).
5.2 Ativar o mapa de calor
Pressione Win + R, digite "cmd", entre no caminho "heatmap-demo" e, em seguida, insira
python -m http.server 8080
Em seguida, abrindo a página "InfluxDB Heatmap (Grafana Fix + 1h Accumulation)" no navegador, você poderá ver que o mapa foi carregado.
Esta etapa também é aplicável ao Linux.
6. Volte ao painel do Grafana e veja o resultado final
Neste ponto, você deverá conseguir ver a seguinte exibição no painel do Grafana. Se encontrar algum problema, consulte a seção "Perguntas frequentes" no final do artigo.
Perguntas frequentes
Falha ao abrir a página web do Grafana
Depois de entrar em "Services", encontre "Grafana", clique com o botão direito e selecione "Restart". Depois disso, basta abrir novamente http://localhost:3000.
O painel do Grafana foi carregado incorretamente
Se for constatado no Grafana que o mapa térmico em tempo real ou a tela em tempo real da reCamera não podem ser carregados ou são exibidos incorretamente, então você precisa clicar no painel com problemas para atualizá-lo, tomando o painel do mapa térmico como exemplo:
Em seguida, clique em Refresh
Há um problema ao carregar o mapa térmico
Se você encontrar o problema de carregamento do mapa térmico, verifique primeiro se todos os itens de configuração nesta etapa estão corretos. Se todos os itens de configuração estiverem corretos e ainda houver um problema ao carregar o mapa térmico, pressione a tecla F12 na interface [InfluxDB Heatmap (Grafana Fix 1h Accumulation)](http:// localhost:8080/index.html) para visualizar a saída do console da web para solução de problemas.
Travamentos aparecem na imagem em tempo real da reCamera
Se você perceber que a imagem em tempo real da reCamera está travando e "WebSocket:Disconnected" aparece após algum tempo de execução, isso é um fenômeno normal, os recursos da reCamera são limitados e a memória ficará muito cheia. Aguarde até que ela retome a exibição.
O "Current Number" e o "Number of People Today" no painel do Grafana são exibidos incorretamente
Este é um fenômeno normal, porque haverá interferência de ruído, e o valor voltará ao normal após um período de tempo.
O que significa "continuous running time" no painel do Grafana
O "continuous running time" aqui se refere a quanto tempo o banco de dados está em execução desde o primeiro dia até agora, porque defini o tempo de retenção de dados do banco de dados da reCamera no InfluxDB para 7 dias, então ele será automaticamente limpo e o tempo será reiniciado após sete dias. Aqui você pode definir livremente o tempo de armazenamento de dados de cada banco de dados no InfluxDB.
Se os dados podem ser exportados
Sim, você precisa selecionar os dados de que precisa na interface InfluxDB Explore, depois clicar em Submit e, em seguida, clicar em Download CSV
Se o endereço IP mudar, por exemplo, se você mudar para uma rede diferente, será necessário modificar estas seções de acordo.
(1) O endereço IP e o token de verificação do nó "InfluxDB Out" no Node-RED
(2) O IP de login do banco de dados InfluxDB, por exemplo:: http://10.241.1.98:8086/
(3) O IP da fonte de dados no Grafana
(4) O IP no código HTML do mapa de calor
Suporte técnico e discussão sobre o produto
Obrigado por escolher nossos produtos! Estamos aqui para fornecer diferentes tipos de suporte para garantir que sua experiência com nossos produtos seja a mais tranquila possível. Oferecemos vários canais de comunicação para atender a diferentes preferências e necessidades.