adding examples and images

Author: jhansson-ard

content/software/app-lab/tutorials/04.examples/all-examples.md

@@ -0,0 +1,328 @@
+---
+title: Arduino® UNO Q Applications
+description: An overview of various applications developed for the Arduino® UNO Q platform, showcasing unique functionalities from environmental monitoring to machine learning.
+author: Karl Söderby
+tags: [AI, Computer Vision, Audio Classification, Arduino App Lab]
+---
+
+## Overview
+
+This article provides a comprehensive overview of various applications developed for the Arduino® UNO Q platform. Each application showcases unique functionalities, from environmental monitoring to machine learning, leveraging the capabilities of the Arduino ecosystem. Below is a summary of each example, detailing the app's purpose, functionality, and components used.
+
+## Requirements
+
+- [Arduino® UNO Q](https://store.arduino.cc/products/uno-q)
+- [USB-C® cable](https://store.arduino.cc/products/usb-c-to-hdmi-multiport-adapter-with-ethernet-and-usb-hub)
+
+## Built-in Examples
+
+### Air Quality Monitoring App
+
+![Air Quality Monitoring App](assets/air-quality-monitoring-app-hero.png)
+
+The **Air Quality Monitoring App** displays real-time air quality data using the AQICN service on an 8x13 LED matrix. It visually represents air quality levels with animated emoji patterns, ranging from "Good" to "Hazardous."
+
+#### How it Works
+
+- **Data Fetching:** The app retrieves air quality data from the AQICN API for a specified city.
+- **Visualization:** Numeric AQI values are converted into visual patterns displayed on the LED matrix.
+- **Communication:** The Python® script handles API communication, while the Arduino sketch manages the LED display.
+
+#### Bricks Used
+
+- **None:** Direct communication between Python® and Arduino is facilitated through the Router Bridge.
+
+### Blink LED
+
+![Blink LED](assets/blink-led-hero.png)
+
+The **Blink** example toggles the onboard LED state every second, illustrating basic LED control and Router Bridge communication.
+
+#### How it Works
+
+- **Timing Control:** A Python® script manages the timing and state logic for the LED.
+- **LED Control:** The Arduino sketch handles the hardware control.
+
+#### Bricks Used
+
+- **None:** Direct communication via Router Bridge.
+
+### Blinking LED from Arduino Cloud
+
+![Blinking LED from Arduino Cloud](assets/blinking-led-from-arduino-cloud-hero.png)
+
+This example allows remote control of the onboard LED from the Arduino Cloud using a dashboard with a switch.
+
+#### How it Works
+
+- **Cloud Integration:** The `arduino_cloud` Brick connects the device to the Arduino Cloud.
+- **LED Control:** Changes in the cloud dashboard update the LED state.
+
+#### Bricks Used
+
+- **arduino_cloud:** For cloud connectivity.
+
+### Concrete Crack Detector
+
+![Concrete Crack Detector](assets/concrete-crack-detector-hero.png)
+
+The **Concrete Crack Detector** uses a pre-trained machine learning model to identify cracks in concrete surfaces. It provides a web interface for image upload and displays results with highlighted crack locations.
+
+#### How it Works
+
+- **Image Analysis:** The `VisualAnomalyDetection` Brick processes images to detect structural anomalies.
+- **Web Interface:** Users can upload images or select samples, adjust detection sensitivity, and view results.
+
+#### Bricks Used
+
+- **visual_anomaly_detection:** For image analysis.
+- **web_ui:** For creating the web interface.
+
+### Glass Breaking Sensor
+
+![Glass Breaking Sensor](assets/glass-breaking-sensor-hero.png)
+
+The **Glass Breaking Sensor** classifies audio files to detect glass breaking sounds using a machine learning model. It features a web interface for audio upload and real-time classification results.
+
+#### How it Works
+
+- **Audio Classification:** The `audio_classification` Brick analyzes audio files for specific sound patterns.
+- **Web Interface:** Supports audio file upload and displays classification results with confidence scores.
+
+#### Bricks Used
+
+- **audio_classification:** For sound detection.
+- **web_ui:** For the web interface.
+
+### Image Classification HERE
+
+![Image Classification](assets/image-classification-hero.png)
+
+#### How it Works
+
+MISSING
+
+#### Bricks Used
+
+- `imageclassification`: Brick to classify objects within an image. 
+- `web_ui`: Brick to create a web interface to display the image classification dashboard.
+
+### Linux® Blink with UI (JavaScript)
+
+![Linux® Blink with UI (JavaScript)](assets/linux-blink-with-ui-javascript-hero.png)
+
+The **Linux® Blink** example toggles an LED state on the board through a web-based interface, demonstrating basic event handling and UI updates.
+
+#### How it Works
+
+- **Web Interface:** A toggle switch controls the LED state via WebSocket communication.
+- **LED Control:** The Arduino sketch manages the LED hardware.
+
+#### Bricks Used
+
+- **web_ui:** For the web interface.
+
+### Object Detection HERE
+
+![](assets/object-detection-hero.png)
+
+#### How it Works
+
+#### Bricks Used
+
+### System Resources Logger
+
+![System Resources Logger](assets/system-resources-logger-hero.png)
+
+The **System Resources Logger** monitors and displays real-time system performance data from your Arduino UNO Q board.
+
+#### How it Works
+
+- **Data Collection:** Uses the `psutil` library to gather CPU and memory usage statistics every 5 seconds.
+- **Data Storage:** The `dbstorage_tsstore` Brick stores performance metrics with timestamp.
+- **Web Interface:** Provides interactive visualization with real-time updates via WebSocket communication.
+
+#### Bricks Used
+
+- **dbstorage_tsstore:** For time series data storage.
+- **web_ui:** For the web interface.
+
+### Weather Forecast on LED Matrix
+
+![Weather Forecast on LED Matrix](assets/weather-forecast-on-led-matrix-hero.png)
+
+The **Weather Forecasting System** displays real-time weather information from the *open-meteo.com* service on the Arduino UNO Q LED matrix.
+
+#### How it Works
+
+- **Weather Data:** The `weather_forecast` Brick fetches data from the *open-meteo.com* API.
+- **LED Display:** The Arduino sketch manages LED matrix animations based on weather conditions.
+
+#### Bricks Used
+
+- **weather_forecast:** For fetching weather data.
+
+Each of these applications highlights the versatility and power of the Arduino® UNO Q platform, providing practical solutions for various real-world scenarios.
+
+## Examples Using Additional Hardware
+
+### Code Detector
+
+![Code Detector](assets/code-detector-hero.png)
+
+The **Code Detector** scans barcodes and QR codes using a USB camera, displaying results on a web interface and storing them in a local database.
+
+#### Additional Hardware
+
+- USB camera
+- USB-C® hub
+
+#### How it Works
+
+- **Code Detection:** The `camera_code_detection` Brick processes video input for code detection.
+- **Web Interface:** Displays live camera feed and detected codes.
+
+#### Bricks Used
+
+- **camera_code_detection:** For code scanning.
+- **dbstorage_sqlstore:** For data storage.
+- **web_ui:** For the web interface.
+
+### Detect Objects on Camera
+
+![Detect Objects on Camera](assets/detect-objects-on-camera-hero.png)
+
+The **Detect Objects on Camera** example lets you detect objects on a live feed from a USB camera and visualize bounding boxes around the detections in real-time.
+
+#### Additional Hardware
+
+- USB camera
+- USB-C® hub
+- External power supply
+
+#### How it Works
+
+- **Video Stream:** Processes frames from a USB camera using the `video_objectdetection` Brick.
+- **Web Interface:** Displays the classification results and model controls.
+
+#### Bricks Used
+
+- **web_ui:** For the web interface.
+- **video_objectdetection:** For object detection.
+
+### Face Detector on Camera
+
+![Face Detector on Camera](assets/face-detector-on-camera-hero.png)
+
+The **Face Detector on Camera** example lets you detect objects on a live feed from a USB camera and visualize bounding boxes around the detections in real-time.
+
+#### Additional Hardware
+
+- USB camera
+- USB-C® hub
+- External power supply
+
+#### How it Works
+
+- **Video Stream:** Processes frames from a USB camera using the `video_objectdetection` Brick.
+- **Web Interface:** Displays the classification results and model controls.
+
+#### Bricks Used
+
+- **web_ui:** For the web interface.
+- **video_objectdetection:** For face detection.
+
+### Hey Arduino! HERE
+
+![](assets/hey-arduino-hero.png)
+
+#### How it Works
+
+
+
+#### Bricks Used
+
+
+
+### Home Climate Monitoring
+
+![Home Climate Monitoring](assets/home-climate-monitoring-hero.png)
+
+The **Home Climate Monitoring** app records temperature and humidity data from the Modulino® Thermo node, displaying it on a web interface.
+
+#### Additional Hardware
+
+- Modulino® Thermo
+- Qwiic cable
+
+#### How it Works
+
+- **Data Storage:** The `dbstorage_tsstore` Brick stores time-based data.
+- **Web Interface:** Displays real-time and historical data.
+
+#### Bricks Used
+
+- **dbstorage_tsstore:** For data storage.
+- **web_ui:** For the web interface.
+
+### Real Time Accelerometer Data
+
+![Real Time Accelerometer Data](assets/real-time-accelerometer-data-hero.png)
+
+The **Real Time Accelerometer Data** example records accelerometer data from the Modulino® Movement node, and streams it to a web interface.
+
+#### Additional Hardware
+
+- Modulino® Movement
+- Qwiic cable
+
+#### How it Works
+
+- **Motion Detection:** The `motion_detection` Brick processes accelerometer data to identify specific motion patterns using a pre-trained model.
+- **Web Interface:** Hosts a web server on the board, serving HTML, CSS & JavaScript files.
+
+#### Bricks Used
+
+- **motion_detection:** For processing accelerometer data.
+- **web_ui:** For the web interface.
+
+### UNO Q Pin Toggle
+
+![UNO Q Pin Toggle](assets/uno-q-pin-toggle-hero.png)
+
+The **UNO Q Pin Toggle** example lets you control the state of every pin of the Arduino UNO Q through an interactive web interface.
+
+#### Additional Hardware
+
+- USB-C® to USB-A Cable
+
+#### How it Works
+
+- **Web Interface:** Displays the board pins control dashboard with toggle switches.
+- **Pin Control:** The backend processes toggle requests and broadcasts updates.
+
+#### Bricks Used
+
+- **web_ui:** For the web interface.
+
+### Person Classifier on Camera
+
+![Person Classifier on Camera](assets/person-classifier-on-camera-hero.png)
+
+The **Person Classifier** example lets you detect people on a live feed from a camera and visualize the model inference result on a user-friendly web interface.
+
+#### Additional Hardware
+
+- USB camera
+- USB-C® hub
+- External power supply
+
+#### How it Works
+
+- **Video Stream:** Processes frames from a USB camera using the `video_imageclassification` Brick.
+- **Web Interface:** Displays the classification results and model controls.
+
+#### Bricks Used
+
+- **web_ui:** For the web interface.
+- **video_imageclassification:** For person classification.