backend - web server
Stone Computing Project - Web Server
The web server needs to provide the entrance of the user's graphical user interface. Through this entrance, the ESP32-CAM is required to upload pictures. After receiving the pictures, the pictures are handed over to the intelligent application program for computer graphics or artificial intelligence calculations, and then the calculations are performed. The result is returned to the user. The whole operation process is shown in the figure below:
- ESP32-CAM and the web server are connected to the same subnet. The smart application can be an independent server, but the current practice is to combine it with the web server.
- A user requests a graphical user interface from a web server.
- The user clicks a button to request an image in the GUI.
- After receiving the request, the web server sends a request to ESP32-CAM to take pictures and upload them.
- ESP32-CAM uploads the picture to the web server.
- After the web server receives the picture, it requests calculation from the smart application.
- The smart application responds with the calculated results to the web server.
- The web server responds with the calculated results to the graphical user interface.
Figure 1. Web server operation process
Provides a graphical user interface for the user
The web server is written by the Flask web framework, and provides the entrance of the user's graphical user interface on the home page. The graphical user interface is CountStoneUI.html .
Entry / source code for the GUI
@app.route("/")
def web_root():
return render_template("CountStoneUI.html")
GUI 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="/video_feed"> -->
</body>
</html>
Enter the address of the web server on the browser, and a graphical user interface will appear, as shown in the figure below, and the description is as follows:
- The address of the web server.
- Request to send real-time captured images of ESP32-CAM - Provided by ESP32-CAM
- Real-time results of images captured by ESP32-CAM
- Request ESP32-CAM to send the picture to the web server for calculation - provided by the web server
- The calculation result of the intelligent application.
Figure 2. Graphical User Interface
Take pictures for calculation
Clicking the Send Photo button is to request ESP32-CAM to send the picture to the web server for calculation, the following is the relevant code, the third line specifies the camera API of ESP32-CAM - /image_feed; the sixth line calls the API; the eighth line calls will return The uploaded picture is stored; the 12th line calls the smart application , and gets the calculation result count ; finally, the 16th line returns the calculation result.
@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})
Figure 3. Picture of the calculation result of the smart application