### Navigate to Project Directory Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/README.md After cloning the repository, use this command to change your current directory to the main project folder, which contains the core program files and demos. ```bash cd RaspberryPi-CM4-main ``` -------------------------------- ### Update XGO-DOG System Script Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/README.md This script is designed to optimize the system startup time for the XGO-DOG. Running it can improve the overall efficiency and responsiveness of the robot's system. ```bash update.sh ``` -------------------------------- ### Contribute to XGO-DOG Project via Git Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/README.md These commands outline the standard Git workflow for contributing to the XGO-DOG project. It involves forking the repository, creating a new feature branch, committing changes, pushing to the branch, and finally submitting a Pull Request. ```bash git checkout -b feature-branch git commit -m 'Add new feature' git push origin feature-branch ``` -------------------------------- ### Clone XGO-DOG Project Repository Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/README.md This command clones the XGO-DOG project repository from GitHub to your local machine. It's the first step to setting up the project. ```bash git clone https://github.com/Xgorobot/RaspberryPi-CM4-XGO-Dog.git ``` -------------------------------- ### Initialize Video Stream with Dynamic IP Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html This snippet sets the source of an HTML element (likely an `iframe` or `img`) to display a video stream from the robot. It dynamically injects the robot's IP address, allowing the web interface to connect to the camera feed. ```JavaScript var deviceIP = "{{device_ip}}"; document.getElementById('videoFrame').src = "http://" + deviceIP +":5001/camera"; ``` -------------------------------- ### Run Main XGO-DOG Program Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/README.md This command executes the main Python program for the XGO-DOG. It requires superuser privileges (sudo) to access hardware or system resources necessary for robot operation. ```bash sudo python3 main.py ``` -------------------------------- ### Socket.IO Client Connection and Status Alerts Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html This code initializes a Socket.IO client connection to the server. It sets up event listeners to provide immediate feedback to the user via browser alerts upon successful connection, disconnection, or any errors encountered during communication. ```JavaScript var socket = io(); socket.on('connect', function () { alert('connected!'); }); socket.on('disconnect', function () { alert('disconnected!'); }); socket.on('error', function (data) { alert('error!' + data); }); ``` -------------------------------- ### Jinja2/HTML Template for Dynamic Video Feed Display Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/camera.html This HTML snippet, using Jinja2 templating, creates an image tag whose source URL is dynamically generated by the Flask `url_for` function. This allows the web application to serve a live video stream from a specified endpoint, typically a Flask route that streams MJPEG or similar video data. ```HTML ``` -------------------------------- ### Attach Event Listeners for Movement Buttons Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html This snippet iterates through a collection of movement control buttons and attaches event listeners for both mouse and touch interactions. It ensures that `startMoving` is called on press (mousedown/touchstart) and `stopMoving` on release or leaving the button area (mouseup/mouseleave/touchend/touchcancel), providing robust control for the robot. ```JavaScript const buttons = { up: document.querySelector('.up'), down: document.querySelector('.down'), left: document.querySelector('.left'), right: document.querySelector('.right') }; for (let [key, button] of Object.entries(buttons)) { button.addEventListener('mousedown', (event) => startMoving(event, key, button)); button.addEventListener('mouseup', (event) => stopMoving(event, key, button)); button.addEventListener('mouseleave', (event) => stopMoving(event, key, button)); button.addEventListener('touchstart', (event) => startMoving(event, key, button)); button.addEventListener('touchend', (event) => stopMoving(event, key, button)); button.addEventListener('touchcancel', (event) => stopMoving(event, key, button)); } ``` -------------------------------- ### Control Robot Height with Slider and Socket.IO Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html This snippet implements the functionality for a height control slider. As the user adjusts the slider, its current value is displayed on the page and simultaneously sent to the robot's backend via a Socket.IO 'height' event. This allows real-time adjustment of the robot's physical height. ```JavaScript const heightSlider = document.getElementById('height-slider'); const valueDisplay = document.querySelector('.value-display'); heightSlider.addEventListener('input', function () { const value = this.value; valueDisplay.textContent = value; socket.emit('height', value); }); ``` -------------------------------- ### CSS Styling for Full-Screen Video Feed Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/camera.html These CSS rules ensure that the video feed container (`body`) and the video image (`img`) occupy the full viewport height and width, centering the content. This is crucial for a dedicated video display interface, removing default margins and ensuring responsive scaling. ```CSS body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } img { width: 100vw; height: 100vh; } ``` -------------------------------- ### Control Robot Movement via Socket.IO Events Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html These JavaScript functions manage the robot's directional movement. `startMoving` sends a specific Socket.IO event ('up', 'down', 'left', 'right') with a corresponding value when a button is pressed, preventing multiple rapid emissions. `stopMoving` sends a 'reset' event when the button is released, ensuring the robot stops. Both functions also provide visual feedback by changing button background colors. ```JavaScript let isPressed = { up: false, down: false, left: false, right: false }; function startMoving(event, direction, button) { event.preventDefault(); if (!isPressed[direction]) { isPressed[direction] = true; console.log(`Move ${direction}`); button.style.background = "rgba(255, 255, 255, 0.5)"; switch (direction) { case 'up': socket.emit('up', '12'); break; case 'down': socket.emit('down', '-12'); break; case 'left': socket.emit('left', '6'); break; case 'right': socket.emit('right', '-6'); break; } } } function stopMoving(event, direction, button) { event.preventDefault(); if (isPressed[direction]) { isPressed[direction] = false; console.log(`Stop ${direction}`); button.style.background = "rgba(255, 255, 255, 0.3)"; socket.emit('reset', 'REST'); } } ``` -------------------------------- ### Animate Height Control Element Position Source: https://github.com/xgorobot/raspberrypi-cm4-xgo-dog/blob/DCM4V2/RaspberryPi-CM4-main/flacksocket/templates/demo.html This code block handles the initial positioning and animation of a 'height control' element on the web page. It sets the element's position to absolute and then, after a short delay, animates its `right` CSS property to slide it into view, improving the user interface's visual appeal. ```JavaScript document.addEventListener('DOMContentLoaded', () => { const heightControl = document.querySelector('.height-control'); heightControl.style.position = "absolute"; setTimeout(() => { heightControl.style.right = "5%"; }, 500); }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.