地图组件&温度检测&串口驱动安装

最新推荐文章于 2024-08-07 08:34:37 发布

701044

最新推荐文章于 2024-08-07 08:34:37 发布

阅读量145

点赞数

文章标签：单片机 pycharm 前端框架 python

本文链接：https://blog.csdn.net/weixin_41258131/article/details/131230600

版权

文章用于学习记录

文章目录

前言
一、地图组件
- 1.1 效果展示
- 1.2 代码示例
二、热红外图像温度检测
三、串口驱动安装
总结

前言

在地图中添加了定位控件和实时路况扩展，可以查看地图定位和实时路况信息；
读取给定的热红外图像，基于灰度图像中标准温度对照带，提取图像中各像素的温度值；
CP2102 是一款 USB 转 TTL 电平的 USB 转串口芯片，可实现串口调试助手查询到 COM 口，并实现串口数据的收发等。

一、地图组件

1.1 效果展示

点击定位控件触发显示标签文本，路况显示面板显示实时路况；
在这里插入图片描述

定位&路况

1.2 代码示例

<script type="text/javascript">
   function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
  }

   //创建地图函数：
   function createMap(){
       var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
       var point = new BMap.Point(116.395645,39.929986);//定义一个中心点坐标
       var marker = new BMap.Marker(point);

       // 将标注添加到地图中
       map.addOverlay(marker);
       map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
       var ctrl = new BMapLib.TrafficControl({
             showPanel: true //是否显示路况提示面板
        });
       map.addControl(ctrl);
       ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
       window.map = map;//将map变量存储在全局
   }

   //地图事件设置函数：
   function setMapEvent(){
       map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
       map.enableScrollWheelZoom();//启用地图滚轮放大缩小
       map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
       map.enableKeyboard();//启用键盘上下左右键移动地图
   }

   //地图控件添加函数：
   function addMapControl(){
       //向地图中添加缩放控件
       var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
       map.addControl(ctrl_nav);
       //向地图中添加缩略图控件
       var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
       map.addControl(ctrl_ove);
       //向地图中添加比例尺控件
       var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
       map.addControl(ctrl_sca);
       // 向地图中添加定位控件
       var geolocationCtrl = new BMap.GeolocationControl();
       map.addControl(geolocationCtrl);
       // 点击定位控件时添加并显示文字标签
       geolocationCtrl.addEventListener("locationSuccess", function (e) {
       var currentLocation = e.point;

       // 创建文本标签
       var labelContent = "当前位置施工";
       var labelOptions = {
           position: currentLocation, // 标签位置
           offset: new BMap.Size(30, -30) // 偏移量
       };
       var label = new BMap.Label(labelContent, labelOptions);

       // 自定义标签样式
       label.setStyle({
           color: "#fff", // 文字颜色
           backgroundColor: "#f00", // 背景颜色
           fontSize: "12px", // 字体大小
           padding: "5px 10px", // 内边距
           borderRadius: "3px", // 边框圆角
           border: "none" // 边框样式
       });

       // 将标签添加到地图中
       map.addOverlay(label);
    });
}
       initMap();//创建和初始化地图                         
</script>

二、热红外图像温度检测

参考基于matlab的热红外图像温度检测，读取热红外图像，基于灰度图像中标准温度对照带，提取图像中各像素的温度值；

2.1 代码示例

import cv2
import numpy as np

# Read the image
image_path = 'tem.jpg'
image = cv2.imread(image_path)

# Convert to grayscale
gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

# Temperature scale
temperature_scale = np.linspace(33.4, 37.4, 256)  # Assuming temperature range from 33.4°C to 37.4°C

# Display the image
cv2.imshow('Image', image)

# # 定义了鼠标点击事件处理程序，它接收鼠标事件的相关参数
# def mouse_click(event, x, y, flags, param):
#     # 判断鼠标事件是否为左键按下
#     if event == cv2.EVENT_LBUTTONDOWN:
#         # 获取鼠标点击位置 (x, y) 处的灰度图像 gray_image 的像素值，并使用该值作为索引获取相应的温度值
#         temperature = temperature_scale[gray_image[y, x]]
#         # 使用 cv2.putText() 函数在图像上的点击位置 (x, y) 处显示温度值，温度值以字符串形式进行格式化，并设置字体、大小、颜色和线条粗细
#         cv2.putText(image, f"Temperature: {temperature:.1f}", (x, y),
#                     cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 0), 1)
#         # 显示更新后的图像，包含了温度值的显示
#         cv2.imshow('Image', image)
#
# cv2.setMouseCallback('Image', mouse_click)

# 定义了鼠标滑动事件
def mouse_move(event, x, y, flags, param):
    if event == cv2.EVENT_MOUSEMOVE:
        temperature = temperature_scale[gray_image[y, x]]
        image_with_text = image.copy()
        cv2.putText(image_with_text, f"Temperature: {temperature:.1f}", (x, y),
                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 0), 1)
        cv2.imshow('Image', image_with_text)

cv2.setMouseCallback('Image', mouse_move)

cv2.waitKey(0)
cv2.destroyAllWindows()

2.2 效果展示

在这里插入图片描述

热红外图像温度检测

2.3 网页版代码示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <title>Temperature Image</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/opencv/3.4.1/opencv.js" async></script>
</head>
<body>
    <style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
<!--    margin-top: 10px;-->
  }

  h1 {
    text-align: center;
  }

  #image-container {
<!--    margin-top: 10px;-->
  }

  #image-container  label{
    margin-left: 75px;
  }

  #image-input {
    margin-top: 10px;
  }

  #temperature-inputs {
    margin-top: 10px;
  }

  #temperature-inputs label,
  #temperature-inputs input {
    margin-bottom: 10px;
  }

  #canvas {
    margin-top: 10px;
    border: 1px solid #ccc;
    max-width: 1200px;
    max-height: 800px;
  }
</style>

<h1>Temperature Image</h1>

<div id="image-container">
  <label for="image-input">Select an image:</label>
  <input type="file" id="image-input">
</div>

<div id="temperature-inputs">
  <label for="min-temp-input">Min Temperature:</label>
  <input type="number" id="min-temp-input">
  <label for="max-temp-input">Max Temperature:</label>
  <input type="number" id="max-temp-input">
</div>

<div>
  <canvas id="canvas"></canvas>
</div>

  <script>
    // Function to handle image file selection
    function handleImageSelect(event) {
      var file = event.target.files[0];
      var reader = new FileReader();

      reader.onload = function (event) {
        var image = new Image();
        image.src = event.target.result;

        image.onload = function () {
          var canvas = document.getElementById('canvas');
          canvas.width = image.width;
          canvas.height = image.height;

          var ctx = canvas.getContext('2d');
          ctx.drawImage(image, 0, 0);

          // Add click event listener to the canvas
          canvas.addEventListener('click', handleCanvasClick);
        };
      };

      reader.readAsDataURL(file);
    }

    // Function to handle canvas click event
    function handleCanvasClick(event) {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      // Get the clicked position
      var rect = canvas.getBoundingClientRect();
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;

      // Get the pixel color at the clicked position
      var imageData = ctx.getImageData(x, y, 1, 1).data;
      var grayValue = imageData[0]; // Assuming grayscale image

      // Get the minimum and maximum temperature inputs
      var minTemperatureInput = document.getElementById('min-temp-input');
      var maxTemperatureInput = document.getElementById('max-temp-input');

      // Parse the temperature values from the inputs
      var minTemperature = parseFloat(minTemperatureInput.value);
      var maxTemperature = parseFloat(maxTemperatureInput.value);

      // Convert the gray value to temperature using the scale
      var temperatureScale = new Float32Array(256);

      for (var i = 0; i < 256; i++) {
        temperatureScale[i] = minTemperature + (maxTemperature - minTemperature) * (i / 255);
      }

      var temperature = temperatureScale[grayValue].toFixed(1);

      // Draw a triangle marker at the clicked position
      var triangleSize = 10;
      ctx.fillStyle = 'rgb(0, 0, 255)';
      ctx.beginPath();
      ctx.moveTo(x, y - triangleSize);
      ctx.lineTo(x - triangleSize, y + triangleSize);
      ctx.lineTo(x + triangleSize, y + triangleSize);
      ctx.closePath();
      ctx.fill();

      // Display the temperature value at the clicked position
      ctx.font = '14px Arial';
      ctx.fillStyle = 'rgb(255, 255, 255)';
      ctx.fillText('Temperature: ' + temperature, x, y);
    }

  // Add change event listener to the image input
  document.getElementById('image-input').addEventListener('change', handleImageSelect);

  // Add change event listeners to the temperature inputs
  document.getElementById('min-temp-input').addEventListener('change', handleTemperatureChange);
  document.getElementById('max-temp-input').addEventListener('change', handleTemperatureChange);

  // Function to handle temperature change event
  function handleTemperatureChange(event) {
    var minTemperatureInput = document.getElementById('min-temp-input');
    var maxTemperatureInput = document.getElementById('max-temp-input');

    // Parse the temperature values from the inputs
    var minTemperature = parseFloat(minTemperatureInput.value);
    var maxTemperature = parseFloat(maxTemperatureInput.value);

    // Update the temperature scale
    var temperatureScale = new Float32Array(256);

    for (var i = 0; i < 256; i++) {
      temperatureScale[i] = minTemperature + (maxTemperature - minTemperature) * (i / 255);
    }
  }
</script>

三、串口驱动安装

CP2102 是一款 USB 转 TTL 电平的 USB 转串口芯片，连接到电脑上，可以实现串口调试助手查询到 COM 口，并实现串口数据的收发等。
网盘链接提取码：ap1b
下载串口驱动-CP2102，并解压与安装。
在这里插入图片描述
将使用 CP2102 的模块通过 USB 线连接到电脑上后，可在设备管理器中找到对应设备。

总结

在地图中添加了定位控件和实时路况扩展，可以查看地图定位和实时路况信息；
读取给定的热红外图像，基于灰度图像中标准温度对照带，提取图像中各像素的温度值；
CP2102 是一款 USB 转 TTL 电平的 USB 转串口芯片，可实现串口调试助手查询到 COM 口，并实现串口数据的收发等。

701044

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
地图组件&温度检测&串口驱动安装

在地图中添加了定位控件和实时路况扩展，可以查看地图定位和实时路况信息；读取给定的热红外图像，基于灰度图像中标准温度对照带，提取图像中各像素的温度值；CP2102 是一款 USB 转 TTL 电平的 USB 转串口芯片，可实现串口调试助手查询到 COM 口，并实现串口数据的收发等。
复制链接

扫一扫