本文章主要记录基于 【K210-ESP8266】 图传和显示的过程，上位机开发过程，系统架构和下位机开发请参考文章：
【K210-ESP8266】开发板上传图像数据到服务器并实时显示

• 💖 作者简介：大家好，我是喜欢记录零碎知识点的小菜鸟。😎
• 📝 个人主页：欢迎访问我的 Ethernet_Comm 博客主页🔥
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 📣 系列专栏：K210开发板二次开发 🍁
• 💬格言：写文档啊不是写文章，重要的还是直白！🔥

目录

• 1. TCP server + JPEG图像解析上位机开发
• • 1.1 开发环境
  • 1.2 上位机功能
  • 1.3 C# 在窗体绘制图像解析
  • 1.4 显示效果
  • • 1.4.1 上位机标定坐标，坐标数据回传
    • 1.4.2 下位机接收坐标值并更新显示
    • 1.4.3 重新设定区域并传输
    • 1.4.4 上位机传输多个坐标值

1. TCP server + JPEG图像解析上位机开发

系统架构和下位机开发请参考文章：

【K210-ESP8266】开发板上传图像数据到服务器并实时显示

1.1 开发环境

本文上位机:

开发环境为基于windows下的 visual studio 2015，

开发语言：基于 winform 窗体的 C#

1.2 上位机功能

1️⃣ : 开启 TCP 服务器

2️⃣ : JPEG 图像数据解析显示

3️⃣ : 在窗体内用鼠标绘图并提取坐标值

4️⃣ : 坐标值通过 TCP 协议回传 ESP8266

1.3 C# 在窗体绘制图像解析

关于上位机开发过程，参考另一篇博文：

【C#绘制区域】C# pictruebox 划线绘制区域

1.4 显示效果

1.4.1 上位机标定坐标，坐标数据回传

思路：上位机将ESP8266的透传数据解析显示为 JPEG 图像后，鼠标在窗体绘制图像并记录坐标，将坐标值通过 TCP 回传给 ESP8266

2022.7.26 更新，通过上位机动态标定区域，以下是上位机标定区域的演示过程：

---

1.4.2 下位机接收坐标值并更新显示

7.27更新 上位机绘制区域，下位机接受区域
参考博文：【K210+ESP8266+区域检测】上位机绘制区域，K210区域检测
测试结果：

设置区域，传递给下位机

1.4.3 重新设定区域并传输

重新设定区域：

---

1.4.4 上位机传输多个坐标值

11.15 更新 上位机绘制区域，下位机接受区域，更新可接受2个监测区域，并将结果发布到mqtt服务器
参考博文：【K210+ESP8266+区域检测】上位机绘制区域，K210区域检测
测试结果：