update content

Author: Hannes7eicher

content/hardware/10.mega/boards/giga-r1-wifi/tutorials/giga-camera/assets/connect_port.png

@@ -1,6 +1,6 @@
 ---
 title: GIGA R1 Camera Guide
-description: Learn about the GIGA R1 WiFi's camera connector, and how to use existing examples.
+description: Learn about the GIGA R1 WiFi's camera connector, and how to stream data through webserial.
 tags: [ArduCAM, Camera, WebSerial]
 author: Karl Söderby
 hardware:
@@ -27,7 +27,7 @@ To follow and use the examples provided in this guide, you will need an [Arduino
 You will also need the following software:
 
 - [Arduino IDE](https://www.arduino.cc/en/software) (any version).
-- [Webserial](https://github.com/arduino/ArduinoCore-mbed/tree/main/libraries/Camera/extras/WebSerialCamera) (for displaying camera feed).
+- [Webserial](https://labs.oniudra.cc/en/labs/web-serial-camera) (for displaying camera feed).
 
 To run the Webserial locally go to:
 
@@ -44,7 +44,6 @@ The GIGA R1 currently supports the following cameras, via the [Camera](https://g
 - **OV7670** and **OV7675**
 - **GC2145**
 - **Himax HM01B0**
-- **Himax HM0360**
 
 ## Camera Connector
 
@@ -87,9 +86,25 @@ This example allows you to stream the sensor data from your camera to a web inte
 
 Upload the following sketch to your board.
 
-This sketch is also available in the Arduino IDE via **Examples > Camera > CameraCaptureRawBytes**.
+This sketch is also available in the Arduino IDE via **Examples > Camera > CameraCaptureWebSerial**.
 
 ```arduino
+/*
+ * This example shows how to capture images from the camera and send them over Web Serial.
+ * 
+ * There is a companion web app that receives the images and displays them in a canvas.
+ * It can be found in the "extras" folder of this library.
+ * The on-board LED lights up while the image is being sent over serial.
+ * 
+ * Instructions:
+ * 1. Make sure the correct camera is selected in the #include section below by uncommenting the correct line.
+ * 2. Upload this sketch to your camera-equipped board.
+ * 3. Open the web app in a browser (Chrome or Edge) by opening the index.html file 
+ * in the "WebSerialCamera" folder which is located in the "extras" folder.
+ * 
+ * Initial author: Sebastian Romero @sebromero
+ */
+
 #include "camera.h"
 
 #ifdef ARDUINO_NICLA_VISION
@@ -142,7 +157,7 @@ FrameBuffer fb;
  * @param ledPin The pin number of the LED.
  * @param count The number of times to blink the LED. Default is 0xFFFFFFFF.
  */
-void blinkLED(int ledPin, uint32_t count = 0xFFFFFFFF) {
+void blinkLED(int ledPin, uint32_t count = 0xFFFFFFFF) { 
   while (count--) {
     digitalWrite(ledPin, LOW);  // turn the LED on (HIGH is the voltage level)
     delay(50);                       // wait for a second
@@ -152,7 +167,7 @@ void blinkLED(int ledPin, uint32_t count = 0xFFFFFFFF) {
 }
 
 void setup() {
-  pinMode(LED_BUILTIN, OUTPUT);
+  pinMode(LED_BUILTIN, OUTPUT);  
   pinMode(LEDR, OUTPUT);
   digitalWrite(LED_BUILTIN, HIGH);
   digitalWrite(LEDR, HIGH);
@@ -167,7 +182,7 @@ void setup() {
 
 /**
  * Sends a chunk of data over a serial connection.
- *
+ * 
  * @param buffer The buffer containing the data to be sent.
  * @param bufferSize The size of the buffer.
  */
@@ -182,21 +197,21 @@ void sendChunk(uint8_t* buffer, size_t bufferSize){
  */
 void sendFrame(){
   // Grab frame and write to serial
-  if (cam.grabFrame(fb, 3000) == 0) {
+  if (cam.grabFrame(fb, 3000) == 0) {    
     byte* buffer = fb.getBuffer();
     size_t bufferSize = cam.frameSize();
     digitalWrite(LED_BUILTIN, LOW);
-
+    
     sendChunk(START_SEQUENCE, sizeof(START_SEQUENCE));
 
     // Split buffer into chunks
     for(size_t i = 0; i < bufferSize; i += CHUNK_SIZE) {
       size_t chunkSize = min(bufferSize - i, CHUNK_SIZE);
       sendChunk(buffer + i, chunkSize);
-    }
-
+    }    
+    
     sendChunk(STOP_SEQUENCE, sizeof(STOP_SEQUENCE));
-
+    
     digitalWrite(LED_BUILTIN, HIGH);
   } else {
     blinkLED(20);
@@ -215,9 +230,9 @@ void sendCameraConfig(){
 }
 
 void loop() {
-  if(!Serial) {
+  if(!Serial) {    
     Serial.begin(115200);
-    while(!Serial);
+    while(!Serial);    
   }
 
   if(!Serial.available()) return;
@@ -227,26 +242,30 @@ void loop() {
   switch(request){
     case IMAGE_SEND_REQUEST:
       sendFrame();
-      break;
+      break; 
     case CONFIG_SEND_REQUEST:
       sendCameraConfig();
       break;
   }
-
+  
 }
 
 ```
 
 ### Step 2: Web Serial
 
-Open the Webserial Interface which allows you to view the camera feed. As data is streamed via serial, make sure you close the Serial Monitor during this process, else it will not work.
+Open the [Webserial Interface](https://labs.oniudra.cc/en/labs/web-serial-camera) which allows you to view the camera feed. As data is streamed via serial, make sure you close the Serial Monitor during this process, else it will not work.
 
 Press on **Connect** and select the correct port.
 
-![Select Port](./assets/webSerial_example_connect.png)
+![Select Port](./assets/connect_port.png)
 
 You should now be able to see the camera feed.
 
+There is also a variety of video filters that can be applied.
+
+![Video Filters](./assets/video_filter.png)
+
 ## Summary
 
-In this article, we learned a bit more about the camera connector on board the GIGA R1 board, how it is connected to the STM32H747XI microcontroller, and a simple example on how to connect an inexpensive OV7675 camera module through web serial.
+In this article, we learned a bit more about the camera connector on board the GIGA R1 board, how it is connected to the STM32H747XI microcontroller, and a simple example of how to connect ArduCam camera modules through web serial.