Merge branch 'develop'

Author: GOB52

README.en.md

@@ -2,25 +2,26 @@
 
 [日本語](README.md)
 
-<img src="https://user-images.githubusercontent.com/26270227/239725404-c5dd33c4-c511-4d05-a192-3d184ef4de8b.png" width="480">
+<img src="https://user-images.githubusercontent.com/26270227/239725404-c5dd33c4-c511-4d05-a192-3d184ef4de8b.png" width="320"><img src="https://github.com/GOB52/M5StackCoreS3_CameraWebServer/assets/26270227/fb2e7edb-c2fe-4caf-b585-b2f6728df559" width="320">
+
 
 ## Overview
 Porting of [espressif/arduino-esp32](https://github.com/espressif/arduino-esp32) example [CameraWebServer](https://github.com/espressif/arduino-esp32/blob/master/libraries/ESP32/examples/Camera/CameraWebServer) to M5Stack CoreS3 (GC0308).  
-Access CoreS3 from a browser via WiFi to control the camera and receive streaming.
-
+Access CoreS3 from a browser via WiFi to control the camera and receive streaming.  
+It can also perform QR recognition.
 
-## Required libraries
+## Required
 * [M5Unified](https://github.com/m5stack/M5Unified)
-* [es32-camera](https://github.com/espressif/esp32-camera/tree/master)   
-However, If you set platform = espressif32 and framework = arduino in platformio, esp32-camera is included in the package, so you do not need to specify es32-camera in lib_deps.
+* [esp32-camera](https://github.com/espressif/esp32-camera/tree/master)   
+However, If you set platform = espressif32 and framework = arduino in platformio, esp32-camera is included in the package, so you do not need to specify esp32-camera in lib_deps.
 * [gob_GC0308](https://github.com/GOB52/gob_GC0308)
 * WiFi connection available
 
 ## Build type
 |Env|Description|
 |---|---|
-|release|Basic settings|
-|release_face|Support dace detection and recognition|
+|release|Basic settings and QR recognition|
+|release_face|Support face detection and recognition|
 
 ## How to use
 Once executed, the IP address will be displayed on the screen and on the serial monitor.  
@@ -49,6 +50,8 @@ Please save the credential in some way or rewrite the source.
 The currently set camera resolution is displayed. The resolution cannot be changed.
 * Contrast  
 Change the contrast.
+* Saturation  
+Change the saturation.
 * Special Effect  
 Change the special effect.
 
@@ -95,6 +98,8 @@ Start/Stop receiving stream.
 * Enroll Face  
 Enroll the face on the camera.  
 Once enrolled, the face will no longer be treated as an intruder (red frame) if Face Recogintion is ON.
+* Start/Stop Scan QR  
+Start/Stop recognize QR code.
 
 * Save  
 Download incoming images.
@@ -112,3 +117,4 @@ Refer to data sheets and other sources for register and function information.
 * M5Unified base to work.
 * Modified html for GC0308.
 * Functions not present in GC0308 were omitted.
+* Add QR code recognition.

README.md

@@ -2,27 +2,28 @@
 
 [English](README.en.md)
 
-<img src="https://user-images.githubusercontent.com/26270227/239725404-c5dd33c4-c511-4d05-a192-3d184ef4de8b.png" width="480">
+<img src="https://user-images.githubusercontent.com/26270227/239725404-c5dd33c4-c511-4d05-a192-3d184ef4de8b.png" width="320"><img src="https://github.com/GOB52/M5StackCoreS3_CameraWebServer/assets/26270227/fb2e7edb-c2fe-4caf-b585-b2f6728df559" width="320">
+
 
 ## 概要
 [espressif/arduino-esp32](https://github.com/espressif/arduino-esp32) の [CameraWebServer](https://github.com/espressif/arduino-esp32/blob/master/libraries/ESP32/examples/Camera/CameraWebServer) を M5Stack CoreS3 向けに移植した物です。  
-WiFi 経由でブラウザから CoreS3 へアクセスし、カメラの制御とストリーミング受信を行います。
+WiFi 経由でブラウザから CoreS3 へアクセスし、カメラの制御とストリーミング受信を行います。  
+QR 識別も行えます。
 
 
 ## 必要な物
 * [M5Unified](https://github.com/m5stack/M5Unified)
-* [es32-camera](https://github.com/espressif/esp32-camera/tree/master)  
+* [esp32-camera](https://github.com/espressif/esp32-camera/tree/master)  
 platformio で platform = espressif32, framework = arduino なら同梱なので必要無し
 * [gob_GC0308](https://github.com/GOB52/gob_GC0308)
 * WiFi 接続可能な環境
 
 ## ビルド種別
 |Env|説明|
 |---|---|
-|release|基本設定|
+|release|基本設定と QR 識別|
 |release_face|顔検出、認識あり|
 
-
 ## 使い方
 実行すると、画面とシリアルモニタに接続先 IP アドレスが表示されます。  
 下記は例なので実際は環境によって IP は異なります
@@ -50,6 +51,8 @@ platformio で platform = espressif32, framework = arduino なら同梱なので
 現在設定されているカメラの解像度を表示しています。解像度変更はできません。
 * Contrast  
 コントラストを変更します。
+* Saturation  
+彩度を変更します。
 * Special Effect  
 エフェクトをかけます。
 
@@ -97,6 +100,8 @@ platformio で platform = espressif32, framework = arduino なら同梱なので
 * Enroll Face  
 カメラに写っている顔を登録します。  
 登録すると Face Recogintion ON の時に侵入者(赤枠)扱いになりません。
+* Start/Stop Scan QR  
+QR 識別の開始/終了。
 
 * Save  
 受信画像をダウンロードします。
@@ -114,4 +119,5 @@ platformio で platform = espressif32, framework = arduino なら同梱なので
 * M5Unified ベースで動作するようにした。
 * GC0308 用に html を修正した。
 * GC0308 に無い機能を割愛した。
+* QR 識別機能を追加した
 

html/index_gc0308.html

@@ -405,13 +405,23 @@
                                 <option value="0">96x96</option>
                             </select>
                         </div>
-                        <div class="input-group" id="contrast-group">
+
+			<hr style="width:75%">
+
+			<div class="input-group" id="contrast-group">
                             <label for="contrast">Contrast</label>
                             <div class="range-min">-2</div>
                             <input type="range" id="contrast" min="0" max="127" value="64" class="default-action">
                             <div class="range-max">2</div>
                         </div>
 
+                        <div class="input-group" id="saturation-group">
+                            <label for="saturation">Saturation</label>
+                            <div class="range-min">0</div>
+                            <input type="range" id="saturation" min="0" max="255" value="64" class="default-action">
+                            <div class="range-max">255</div>
+                        </div>
+			
                         <div class="input-group" id="special_effect-group">
                             <label for="special_effect">Special Effect</label>
                             <select id="special_effect" class="default-action">
@@ -464,9 +474,13 @@
                                 <label class="slider" for="colorbar"></label>
                             </div>
                         </div>
-                        <section id="buttons">
+
+			<hr style="width:75%">
+
+			<section id="buttons">
                             <button id="get-still">Get Still</button>
                             <button id="toggle-stream">Start Stream</button>
+			    <button id="toggle-qr">Start Scan QR</button>
                             <!-- <button id="face_enroll" class="disabled" disabled="disabled">Enroll Face</button> -->
                         </section>
 
@@ -773,6 +787,7 @@
   const viewContainer = document.getElementById('stream-container')
   const stillButton = document.getElementById('get-still')
   const streamButton = document.getElementById('toggle-stream')
+  const qrButton = document.getElementById('toggle-qr')
   const closeButton = document.getElementById('close-stream')
   const saveButton = document.getElementById('save-still')
   const ledGroup = document.getElementById('led-group')
@@ -788,15 +803,29 @@
     streamButton.innerHTML = 'Stop Stream'
   }
 
+  const stopQR = () => {
+    window.stop();
+    qrButton.innerHTML = 'Start Scan QR'
+  }
+
+  const startQR = () => {
+    view.src = `${streamUrl}/qr`
+    show(viewContainer)
+    qrButton.innerHTML = 'Stop Scan QR'
+  }
+
+    
   // Attach actions to buttons
   stillButton.onclick = () => {
     stopStream()
+    stopQR();
     view.src = `${baseHost}/capture?_cb=${Date.now()}`
     show(viewContainer)
   }
 
   closeButton.onclick = () => {
     stopStream()
+    stopQR();
     hide(viewContainer)
   }
 
@@ -805,10 +834,21 @@
     if (streamEnabled) {
       stopStream()
     } else {
+      stopQR();
       startStream()
     }
   }
 
+  qrButton.onclick = () => {
+    const qrEnabled = qrButton.innerHTML === 'Stop Scan QR'
+    if (qrEnabled) {
+      stopQR()
+    } else {
+      stopStream()
+      startQR()
+    }
+  }
+
   saveButton.onclick = () => {
     var canvas = document.createElement("canvas");
     canvas.width = view.width;