石头计算项目 - 后端 - Web 服务器
后端 - Web 服务器
Web 服务器需要提供用户图形用户介面的入口,透过这个入口来要求 ESP32-CAM 上传图片,都收到图片后再将图片交予智能应用程序进行计算机图学或是人工智能运算,接著再把运算结果回覆给用户。整个运作流程如下图所示:
- ESP32-CAM 与 Web 服务器连上同一个子网,智能应用程序可以是独立的一个服务器,目前的作法是与 Web 服务器结合在一起。
- 用户向 Web 服务器请求图形用户介面。
- 用户在图形用户介面中点击请求图片的按键。
- Web 服务器收到请求后,向 ESP32-CAM 发出请求拍照上传。
- ESP32-CAM 将图片上传到 Web 服务器。
- Web 服务器收到图片后,向智能应用程序请求计算。
- 智能应用程序响应计算结果给 Web 服务器。
- Web 服务器响应计算结果给图形用户介面。
图 1. Web 服务器运作流程
提供用户图形用户介面
Web 服务器由Flask 网页框架所撰写,在首页处提供用户图形用户介面的入口,图形用户介面为 CountStoneUI.html。
图形用户介面的入口 / 源代码
@app.route("/")
def web_root():
return render_template("CountStoneUI.html")
图形用户介面 CountStoneUI.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>石头计算图形用户介面</title>
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 align='center'>石头计算图形用户介面</h1>
<div class="container">
<button value="picture" onClick="imageRefresh()">ESP32-CAM的照片</button>
<button value="picture" onClick="sendImage()">传送照片</button>
<img src="http://192.168.92.160:5000/image_feed" id="uPyImage">
</div>
<div id="ESP32Response"></div>
<script language="javascript">
var uPyImage = document.getElementById("uPyImage");
function imageRefresh(){
imageSrc = uPyImage.src
if (imageSrc.lastIndexOf('?')>0)
imageSrc = imageSrc.substr(0,imageSrc.lastIndexOf('?'));
uPyImage.src = imageSrc "?t=" new Date().getTime();
console.log('refresh URL - ' uPyImage.src);
}
function sendImage(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
console.log(xhttp.responseText);
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("ESP32Response").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "/get_esp32_im", true);
xhttp.send();
}
</script>
<!-- <img src="https://blog.csdn.net/video_feed"> -->
</body>
</html>
在浏览器上输入 Web 服务器的所在位址,即会出现图形用户介面,如下图所示,说明如下:
- Web 服务器的所在位址。
- 请求传送实时的 ESP32-CAM 所捕捉的画面 - 由 ESP32-CAM 提供
- 实时的 ESP32-CAM 所捕捉的画面结果
- 请求 ESP32-CAM 将画面传给 Web 服务器进行运算 - 由 Web 服务器 提供
- 智能应用程序的运算结果。
图 2. 图形用户介面
拍照进行运算
单击 传送照片 按钮是请求 ESP32-CAM 将画面传给 Web 服务器进行运算,以下是相关代码,第 3 行指定 ESP32-CAM 的拍照 API - /image_feed;第 6 行调用 API;第 8 行调用将回传的图片储存起来;第 12 行调用智能应用程序,并得到计算结果 count;最后在第 16 行回传计算结果。
@app.route("/get_esp32_im", methods=["GET"])
def download_image():
esp32_camAPI = 'http://192.168.92.160:5000/image_feed'
msg = ""
count = 0
res = requests.get(esp32_camAPI, stream = True)
if res.status_code == 200:
with open(esp32_image_filename,'wb') as f:
shutil.copyfileobj(res.raw, f)
print('Image sucessfully Downloaded: ',esp32_image_filename)
msg = "sucessfully Downloaded"
count = count_stone(esp32_image_filename)
else:
print('Image Couldn\'t be retrieved')
msg = "Couldn\'t be retrieved"
return jsonify({'message': msg, 'count' : count})
图 3. 智能应用程序计算结果的图片
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhbjh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13