ICT Club, Bahria

Tag: Web Interface

  • Web Development for ROS 2 – Web Development for Robots

    Welcome to the definitive 4-month self-study course designed to bridge the exciting worlds of web technology and robotics. This comprehensive roadmap is your gateway to mastering web development for ROS 2, transforming how you interact with, control, and monitor robotic systems. Whether you’re a robotics enthusiast eager to build intuitive user interfaces or a web developer curious about controlling physical hardware, this course equips you with the essential skills to create powerful, browser-based applications for robots.

    This journey is tailored for motivated learners. If you have some programming exposure and a desire to specialize, you’ll find a structured path that takes you from foundational concepts to advanced implementation. By the end, you won’t just understand the theory—you’ll have the practical ability to design and deploy real-world web interfaces for ROS 2-powered machines.

    Learning Objectives: A Skill-Based Approach

    • Master Web Fundamentals: Build a solid understanding of core web technologies: HTML for structure, CSS for style, and JavaScript for interactivity.
    • Understand ROS 2 Architecture: Grasp key concepts such as nodes, topics, services, and actions that power the Robot Operating System 2.
    • Develop Interactive Front-Ends: Create dynamic web applications that subscribe to and publish data on ROS 2 topics for real-time monitoring and control.
    • Implement Robust Back-Ends: Build secure and efficient server-side logic to act as a bridge between your browser and the ROS 2 ecosystem.
    • Leverage Modern Frameworks: Use popular web frameworks and libraries to accelerate development and build professional-grade interfaces.
    • Build a Capstone Project: Design, develop, and deploy a complete web-based interface for controlling and visualizing data from a ROS 2 robot, solidifying your skills.

    What You’ll Need to Get Started

    • Computer: A modern computer with a stable internet connection.
    • Operating System: Ubuntu 20.04 or newer. A virtual machine (e.g., VirtualBox or VMware) running Ubuntu is also suitable.
    • ROS 2: A working installation of ROS 2 (Foxy, Humble, or Iron).
    • Code Editor: A text editor or IDE like Visual Studio Code.
    • Web Browser: A modern browser such as Google Chrome or Mozilla Firefox.
    • Node.js and npm: Essential tools for modern JavaScript development and backend server creation.
    • Basic Command-Line Skills: Familiarity with navigating a Linux terminal is highly beneficial.
    • (Optional but Recommended) A physical ROS 2 robot or a simulation environment like Gazebo for hands-on testing and real-world application.

    Course Syllabus: The First Two Weeks

    This 14-week course is structured to build your knowledge incrementally. Below is a detailed look at the foundational first two weeks.

    Week 1: Laying the Web Foundation – HTML, CSS, & JavaScript

    This week focuses on building a solid foundation in core web technologies. Before connecting to a robot, you must first understand how to build the interface it connects to. Think of it this way: HTML provides the skeleton (structure), CSS provides the skin (presentation), and JavaScript provides the brain (interactivity).

    HTML: Structuring the Content

    HTML (HyperText Markup Language) is the standard for creating web pages. It uses tags to define elements such as headings, paragraphs, images, and buttons.

    Example HTML Structure (index.html): 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ROS 2 Robot Control</title>
</head>
<body>
    <h1>Robot Control Panel</h1>
    <p>Use the button below to interact with the robot.</p>
    <button id="myButton">Click Me!</button>
</body>
</html>

    CSS: Styling the Interface

    CSS (Cascading Style Sheets) enhances your raw HTML by applying visual styles. It targets elements using selectors (like tag names, classes, or IDs) and applies rules such as color, font size, and layout.

    Example CSS (style.css): 
    body {
    font-family: Arial, sans-serif;
    background-color: #6B7C3A;
    text-align: center;
    padding-top: 50px;
}
#myButton {
    padding: 12px 25px;
    background-color: #6B7C3A;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    JavaScript: Adding Interactivity

    JavaScript brings your static page to life by enabling reactions to user actions, like button clicks, and allowing dynamic manipulation of HTML and CSS.

    Example JavaScript (script.js): 
    document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked! Preparing to send command to ROS 2...');
});

    Week 2: Introduction to ROS 2 for Web Developers

    With basic web skills established, we now shift focus to the robotics side. This week introduces the fundamental concepts of ROS 2—the framework that acts as the robot’s central nervous system. We’ll focus on the core components essential for effective web development for ROS 2.

    • Node: A node is a single, specialized program within the robot’s software. One node might handle camera data, another might control the wheels, and a third could process sensor readings.
    • Topic: Topics are communication channels nodes use to exchange information. A camera node publishes image data to an `/image_data` topic, while a motor control node subscribes to a `/cmd_vel` topic to receive movement commands.
    • Message: A message is the structured data sent over a topic. Examples include a `Twist` message for velocity commands or a `SensorData` message for readings.

    Understanding how these components interact prepares you to build a web server that can access these topics, effectively making your browser a new node in the robot’s network. This integration unlocks the full potential of web development for ROS 2, enabling intuitive dashboards, remote teleoperation systems, and powerful data visualization tools accessible from anywhere. Your journey has just begun.