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

💖 作者简介：大家好，我是喜欢记录零碎知识点的小菜鸟。😎

📝 个人主页：欢迎访问我的 Ethernet_Comm 博客主页🔥

🎉 支持我：点赞👍+收藏⭐️+留言📝

📣 系列专栏：K210开发板二次开发🍁

💬格言：写文档啊不是写文章，重要的还是直白！🔥

目录

[1. TCP server + JPEG图像解析上位机开发](#1. TCP server + JPEG图像解析上位机开发)

[1.1 开发环境](#1.1 开发环境)

[1.2 上位机功能](#1.2 上位机功能)

[1.3 C# 在窗体绘制图像解析](# 在窗体绘制图像解析)

[1.4 显示效果](#1.4 显示效果)

[1.4.1 上位机标定坐标，坐标数据回传](#1.4.1 上位机标定坐标，坐标数据回传)

[1.4.2 下位机接收坐标值并更新显示](#1.4.2 下位机接收坐标值并更新显示)

[1.4.3 重新设定区域并传输](#1.4.3 重新设定区域并传输)

[1.4.4 上位机传输多个坐标值](#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服务器