Sau bài viết “Điều khiển chụp hình ESP32-CAMERA qua ineternet, hiển thị hình ảnh lên trình duyệt” , mình chưa có thời gian viết tiếp về server điều khiển hoạt động thế nào. Hôm nay mình sẽ tiếp tục chủ đề này, hi vọng có thể giúp các bạn hiểu và tự xây dựng hệ thống của mình từ local cho đến internet. Để hiểu được toàn bộ mã nguồn, các bạn cần có kiến thức cơ bản về HTTP, biết cơ bản HTML và PHP.
Toàn bộ quá trình hoạt động của hệ thống được mô tả trong sơ đồ dưới đây:
1- Đầu tiên là PC hoặc điện thoại thông qua giao diện WEB, điều khiển tham số {“led”:”on”} của file test.json trên server.
2- Sau đó, ESP32 sẽ định kì gửi POST REQUEST đọc file test.json này (2), bình thường thì ESP đọc được {“led”:”off”},
3- File test.json đã được thay đổi sau khi PC điều khiển. ESP đọc được {“led”:”on”}.
4- Sau đó, tại ESP32 thực hiện đọc và so sánh “led” có bằng “on” không, nếu thỏa mãn thì thực hiện bước tiếp theo.
5- Take photo và upload lên server. Tại server, sau khi có bản tin upload image từ esp32, nó sẽ lưu image này vào thư mục image_upload.
6- Bước cuối cùng là PC hoặc điện thoại sẽ load image này về trình duyệt và hiển thị ra màn hình.
Toàn bộ quá trình cứ thế lặp đi lặp lại theo sự điều khiển của người dùng. Hy vọng đến đây các bạn hiểu được cơ bản vấn đề. Bây giờ chúng ta sẽ đi viết chương trình để thực hiện 6 công việc nêu trên.
Để hệ thống trên hoạt động chúng ta đi viết các file php như sau:
1. Viết file esp32_cam_upload_control.php nhận hình ảnh từ ESP32-CAM
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- <meta http-equiv="refresh" content="3"> --> <title>He Thong Dieu Khien</title> <link rel = "stylesheet" type="text/css" href="style.css"/> <script src="js/jquery.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/ajax.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body align="center"> <br /> <header> <h2> <span style="color:#00F">HỆ THỐNG GIÁM SÁT QUA INTERNET SỬ DỤNG ESP32-CAMERA </span><br /> </h2> </header> <?php //thực hiện ghi giá trị led1=on vào test.json nếu như có bản tin POST của user:abcd_ef // gửi đến chính file php này. $jsonString = file_get_contents("test/test.json"); $data = json_decode($jsonString, true); $user='abcd_ef'; if(isset($_POST['LED1_ON'])) { if($user==$_POST['LED1_ON']) { $data['led1'] = "on"; } } $newJsonString = json_encode($data); file_put_contents("test/test.json", $newJsonString); ?> <form action="esp32_cam_upload_control.php" method="post"> <table border="2" width=100% height="400px" align="center"> <tr class="indam"> <td bgcolor="#FFCC00">HÌNH ẢNH</td> <td bgcolor="#FFCC00">TRẠNG THÁI</td> <td bgcolor="#FFCC00"> ĐIỀU KHIỂN</td> </tr> <tr> <td><img id="myImage1" src="camera_upload/upload_esp32.jpg" width="500" height="400"></td> <td id="hh" > Hello! </td> <td> <p> <?php $user='abcd_ef'; echo " <button style='height:60px; width:60px;' type='submit' name='LED1_ON' value='$user'>TAKE PHOTO</button> "; echo " <button style='height:60px; width:60px;' type='button' onclick='myFunction_reload()'>RELOAD</button> "; ?> </p> </td> <td id="ketqua" > </td> </tr> </table> </form> <?php // đọc file test.json để kiểm tra trạng thái điều khiển $jsonString = file_get_contents("test/test.json"); $data = json_decode($jsonString, true); if ($data['led1'] == 'on') { echo " <script>"; echo " document.getElementById('hh').innerHTML = 'TAKING PHOTO' "; echo " </script> "; } ?> <script > function myFunction_reload() { window.location.reload(); } var t=setTimeout("auto_update_stt()",1000); function auto_update_stt() { // alert("Hbyeee"); var t=setTimeout("auto_update_stt()",1000); $.ajax({ url:"sync_allpages.php", type:"post", data:"val_button="+1, async:true, success:function(kq){ $("#ketqua").html(kq); // alert("OK"); } }); } </script> |
Trong mã nguồn trên các bạn chú ý cho mình một số điểm:
+ Đây là file cung cấp giao diện điều khiển cũng như hiển thị cho hình ảnh nhận được từ ESP, các bạn có thể tùy biến lại giao diện theo ý mình.
+ Phần này dùng một kĩ thuật gọi là AJAX, để xử lý bản tin POST REQUEST. Vì vậy trang web sẽ định kì 1s reload lại trạng thái của server cho việc hiển thị “TAKING PHOTO” hoặc “DONE” mà không cần reload toàn bộ trang.
+ Có một đoạn script nhỏ, đó là
var t=setTimeout(“auto_update_stt()”,1000);
Ý nghĩa của script này là cứ sau 1s thì thực hiện function: auto_update_stt()
2. File sync_allpages.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php if(isset($_POST["val_button"])) { echo""; } // end if isset // ################## Đọc file json để cập nhật stt ################################## $jsonString = file_get_contents("test/test.json"); $data = json_decode($jsonString, true); if ($data['led1'] == 'on') { echo " <script>"; echo " document.getElementById('hh').innerHTML = 'LOADING NEW' "; echo " </script> "; } if ($data['led1'] == 'off') { echo " <script>"; echo " document.getElementById('hh').innerHTML = 'DONE!' "; echo " </script> "; } ?> |
Mục đích chính của file php trên là thực hiện kiểm tra giá trị của led1 =on hay off để thực hiện hiển thị lên giao diện web trạng thái đk của người dùng, việc này được thực hiện định kì 1s như đã giải thích ở trên
3. camera_upload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $jsonString = file_get_contents("test/test.json"); $data = json_decode($jsonString, true); $received = file_get_contents('php://input'); $fileToWrite = "camera_upload/upload_esp32.jpg"; file_put_contents($fileToWrite, $received); $data['led1'] = "off"; $newJsonString = json_encode($data); file_put_contents("test/test.json", $newJsonString); ?> |
File này rất quan trọng, nó nhận dữ liệu hình ảnh của ESP gửi lên, sau đó ghi dữ liệu này vào file upload_esp32.jpg, chính vì vậy mỗi khi có một hình ảnh mới thì server thực hiện ghi đề lên ảnh cũ, và chúng ta sẽ luôn load ra hình ảnh mới nhất được ESP đưa lên server. Sau khi lưu xong, thực hiện gán biến led1=off để báo cho giao diện hiển thị trạng thái “done”
Như vậy, chúng ta đã có tất cả các file PHP cần thiết, việc cuối cùng là tạo thêm các folder như dưới đây để lưu hình ảnh, lưu file test.json và các file cần thiết của javascript.
Trong thư mục test, các bạn tạo thêm 1 file là: test.json có nội dung là {“led1″:”on”} để có thể thao tác điều khiển ESP32 qua internet.
Trên đây là một số bước cơ bản, để có thể tạo ra một server bằng PHP cho phép chúng ta điều khiển chụp hình của ESP32 từ internet. Tác giả chỉ viết tóm tắt nên nếu có chỗ nào chưa hiểu các bạn hãy để lại comment phía dưới. Thanks!
Link test các mã nguồn đã nêu trên của tác giả: Link
![[WOKWI tutorial 1]: Introduction- Học lập trình Arduino, ESP32/8266 miễn phí trên nền tảng WOKWI](https://luuvachiase.net/wp-content/uploads/2023/03/wokwi-wb-120x86.png?v=1677725362)
Comments 1