🚕AI Vibe Coding Exercise

AI + RoverSE Robot (JavaScript)

Description

This flexible activity menu is designed to teach instructors how to harness large language models (LLMs) like ChatGPT to generate and refine JavaScript code that drives a four-motor robot. Each self-contained activity focuses on a core AI or robotics concept, pairing a clear learning objective with hands-on prompt exercises and real-world testing. Instructors can pick and choose which activities to run and in what order to fit their schedule and learners’ needs.

Overview

This guide covers:

• Generating PWM commands for the ROV.

• Understanding how PWM settings affect motor drive and direction.

• Running user-generated JavaScript using LLM output based on guided input.

• Debugging Javascript

Connect RoverSE Board

Before starting the activities, save RoverLLM.html and RoverLLM.js to your local machine in the same folder by copying and saving the files below. After launching, the following user interface will be displayed.

Note: This application uses the Web Bluetooth API, which is supported only in Chromium-based browsers on desktop platforms. For optimal compatibility, use:

• Google Chrome version 89 or later

• Microsoft Edge version 89 or later

Click the Bluetooth icon, then press the button on the ROV Board to start broadcasting. Select your device and click pair.

If this is your first time connecting onto this device on windows, you will be presented dialog windows to grant pairing permission. Tap the popup initiate the process.

Then, click the allow button.

Then, clock close.

You should not be presented with these options in the future for this board.

If you do not complete this step, the robot will not stay connected.

Once connected, the log will indicate "connected" and all buttons will be enabled. You can use the arrow keys to move the robot forward, backward, left, and right. Use the stop button to halt all motion.

As the robot moves, the log outputs values like “M1: 0 | M2: 0 | M3: 0 | M4: 0”:

• M1 = Motor1 PWM value

• M2 = Motor2 PWM value

• M3 = Motor3 PWM value

• M4 = Motor4 PWM value

To report distance values using the MODI sensor, ensure that the MODI is attached to your ROV board. If the sensor is enabled, a distance value will be reported in millimeters. If the value remains at 0, it may be necessary to enable the sensor. Enable the sensor by clicking the "Modi on" button. Pressing this button will produce the following output:

Press the Bluetooth button to reconnect the device. Once connected, press the enable Telemetry button. If the Modi is properly connected, distance values will appear as objects are placed in front of the sensor.

.

To execute a predefined set of commands found in the RoverLLM.js file, click the Run My Program button. This functionality will be elaborated on later. Currently, the function moves the robot forward for three seconds at 30% speed before coming to a stop.

JavaScript and Debuggers

In this course, you will be programming your Rover using Javascript, one of the most widely used programming languages in the world. JavaScript is used to power websites, control devices, and build real-time interactive systems — including robots like your Rover.

When you write code, the computer follows your instructions exactly. But sometimes, your program may not behave the way you expect. This is completely normal — even professional programmers encounter this every day. Finding and fixing these issues is called debugging.

A debugger is a tool that helps you see what your program is doing step-by-step. It allows you to:

• Pause your code while it is running

• Inspect values stored in variables

• Follow the exact sequence of instructions

• Identify where problems occur

• Fix issues more quickly and accurately

Using a debugger helps you understand not just what your code is doing, but why it is doing it.

In the next video, you will see how a debugger works and how it can help you troubleshoot and improve your Rover programs. Learning how to use a debugger is one of the most important skills you can develop as a programmer.

Joystick Code

Use the copy feature to save copy the contents of this file and save on your device as RoverLLM.html/RoverLLM.js. from both of the code blocks below.

RoverLLM.html

<!doctype html>
<html>

    <head>
        <title>RoverSE Control Panel</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css">
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

        <style>

            body {
              background: #fff;
            }
            
            .mip-layout {
              display: flex;
              align-items: center;
              justify-content: center;
              background: #fff;
            }
            
            .mip-card {
              width: 400px;
            }
            
            .mip-pad {
              display: flex;
              align-items: center;
              flex-direction: column;
            }
            
            .mip-pad button {
              margin: 1em 0.5em;
            }
            
            
            #logTextArea {
              width: 950%;
              height: 150px;
              overflow: auto;
            }
            
                    </style>

<style>
    #joystickZone {
      width: 300px;
      height: 300px;
      background: #eee;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
    }
    #output,#distance {
      text-align: center;
      font-size: 1.2em;
    }
     #output {
      text-align: center;
      font-size: 1.2em;
    }
  </style>
    </head>

    <body>


        <div class="mip-layout mdl-layout mdl-js-layout">

            <div class="mdl-card mdl-shadow--2dp mip-card">
                <div class="mdl-card__title">
                    <h3 class="mdl-card__title-text">Mantis RoverSE</h3>
                </div>
                <div class="mdl-card__supporting-text">
                </div>
                <div class="mdl-card__actions mdl-card--border mip-pad">

                    <button onclick="MoveMotors(30,30,30,30)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--raised mdl-js-ripple-effect">
                        <i class="material-icons">arrow_upward</i>
                    </button>

                    <div>
                        <button onclick="MoveMotors(30,30,-30,-30)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--raised mdl-js-ripple-effect">
                            <i class="material-icons">arrow_back</i>
                        </button>

                        <button id="bluetoothBtn" onclick="connect()" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                            <i class="material-icons">bluetooth_searching</i>
                        </button>

                        <button onclick="MoveMotors(-30,-30,30,30)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--raised mdl-js-ripple-effect">
                            <i class="material-icons">arrow_forward</i>
                        </button>
                    </div>

                    <button onclick="MoveMotors(-30,-30,-30,-30)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--raised mdl-js-ripple-effect">
                        <i class="material-icons">arrow_downward</i>
                    </button>
				

                </div>
                <div class="mdl-card__actions mdl-card--border" align="center">
                    <button onclick="stop()">
                        Stop
                    </button>

                    <button onclick="StartProgram()">Run My Program

                    </button>
                     <button onclick="disconnect()">
                        Disconnect Device
                    </button>
                    <div id="output" class="mdl-card__supporting-text">M1: 0 | M2: 0 | M3: 0 | M4: 0</div>
                    <div id="distance" class="mdl-card__supporting-text">Distance: 0mm</div>
                </div>
                 <div class="mdl-card__actions mdl-card--border" align="center">
                    <button onclick="EnableTelemetry('on')">
                        Enable Telemetry 
                    </button>
                    <button onclick="ModiState('on')">
                        Modi On
                    </button>
                    <button onclick="ModiState('off')">
                        Modi Off
                    </button>
                </div>
                <textarea id="logTextArea" readonly></textarea>
            </div>
           
        </div>
        

        <script src="RoverLLM.js"></script>
    </body>

</html>

RoverLLM.js

'use strict';

var mDev=null;
var Distance=null;

var isConnected=false;
var StopProgram = false; // Flag to stop the program
const originalLog = console.log;

const logTextArea = document.getElementById("logTextArea");


let isGATTOperationInProgress = false; // Lock to prevent overlapping GATT operations
setButtonsEnabled(false); // Disable buttons initially



// Override console.log to append logs to the text area
console.log = function() {
  // Convert all arguments to a single string
  const message = Array.from(arguments).map(arg => String(arg)).join(" ");

  // Append the log message to the text area
  logTextArea.value += message + "\n";
  logTextArea.scrollTop = logTextArea.scrollHeight;
  // Call the original console.log
  originalLog.apply(console, arguments);

};



function connect() {
    console.log('Requesting RoverSE Device...');
    if (!navigator.bluetooth) {
        alert('Web Bluetooth is disabled! Please go to enable it.');
        return;
    }

   // console.log("Filtering on BLE device name: " + dev + " Service: " + mDev.PrimaryService);
    navigator.bluetooth.requestDevice({
        filters: [{ namePrefix: "ROV" }],
        optionalServices: ['0000ffd0-0000-1000-8000-00805f9b34fb']
    })
        .then(device => {
          //  console.log("device:");
           // console.log(device);
            let deviceprefix=device.name.split("_")[0];
            mDev = new MantisDevice(deviceprefix.toLowerCase());
            device.addEventListener('gattserverdisconnected', onDisconnected);

          // Connect to the GATT server and get the services
            device.gatt.connect().then(server => {
                // Get the Service
               mDev.device = device;
               // console.log("Primary Service Requested: " + mDev.PrimaryService);
                // mDev.primaryServiceObj = server.getPrimaryService(mDev0.PrimaryService);
                server.getPrimaryService(mDev.PrimaryService)
                    .then(service => {
                        mDev.primaryServiceObj = service;
                     //   console.log("got service");
                        //Set the disconnection callback
                        if ((mDev.NotificationChar != null) && (notificationCallback != null)) {
                            service.getCharacteristic(mDev.NotificationChar)
                                .then(notifyChar => {
                              //      console.log("got notify characteristic");
                                    notifyChar.addEventListener('characteristicvaluechanged',notificationCallback);
                                    mDev.notificationCharObj = notifyChar;
                                    mDev.notificationCharObj.startNotifications()
                                    .catch(error => {
                                        console.error("Error turning on notifications: " + error.message)
                                    })
                                })
                        }
                        if (mDev.InitializationChar != null) {
                            service.getCharacteristic(mDev.InitializationChar)
                                .then(initChar => {
                                 //   console.log("got initialize characteristic");
                                    mDev.initializationCharObj = initChar;
                                })
                        }
                        if (mDev.MailboxChar != null) {
                            service.getCharacteristic(mDev.MailboxChar)
                                .then(mailboxChar => {
                               //     console.log("got mailbox characteristic");
                                    mDev.mailboxCharObj = mailboxChar;
                                })
                        }

                        if (mDev.CommandChar != null) {
                            service.getCharacteristic(mDev.CommandChar)
                                .then(commandChar => {
                                    isConnected=true;
                                  //  console.log("got command characteristic");
                                    mDev.commandCharObj = commandChar;
                                    console.log("Connected!");
                                   
                                     initialize().then(result => {
                                        console.log("Awaiting Commands!");
                                        });
                                     setButtonsEnabled(true); // Enable buttons after connection
                                })
                        }
                       

                    })
                    .catch(error => {
                        console.error("Failed to get services: " + error.message);
                    });
            })
                .catch(error => {
                    console.error("Error requesting device: " + error.message)
                })
        })

      //  console.log(mDev);
 
}

async function initialize() {
    await MoveMotors(-1, -1, -1, -1);
    await MoveMotors(0, 0, 0, 0);
}

function disconnect() {
    if (mDev && mDev.device && mDev.device.gatt.connected) {
        console.log("Disconnecting from device...");
        mDev.device.gatt.disconnect();
     
    } else {
        console.log("No device connected to disconnect.");
    }
}
function onDisconnected(event) {
    isConnected = false;
    console.log("Device disconnected.")
    console.log("Click the bluetooth icon to reconnect.");
   // document.getElementById('output').textContent = 'Device disconnected';
    setButtonsEnabled(false); // Disable buttons on disconnect
    //setBluetoothButtonToConnect();
    // Optionally, reset UI or attempt reconnection here
}


async function writeBytesUUID(characteristic, bytes) {
    try {
        await characteristic.writeValue(bytes)
       // console.log('Success')
        // Return a value, for example, a success message or the payloads
        return { success: true };
    } catch (error) {
        // Handle any errors that occur during the asynchronous operations
       // console.log('Error:' + error.message)
        return { success: false, error };
    }
}

 async function movecmd(payload_cmd, payload_data) {
        const startTime = Date.now(); // Record the start time

        const result = await writeBytesUUID(mDev.mailboxCharObj, payload_data);
        //console.log("Send Mailbox:" + payload_data)
        
           // const hexPayload = payload_data.toString(16);
            //console.log("Send Mailbox hex:" + hexPayload); 
        
        if (result.success) {
            //console.log("Send Command:" + payload_cmd)
            await writeBytesUUID(mDev.commandCharObj, payload_cmd);
           
        } else {
            console.log("Error don't sent Command:" + payload_cmd)
            console.error(result.error.message);
        }


    }

 function MantisDevice (devName1) {
  
   
   // console.log("DeviceName: " + devName1.split("_")[0]);
    switch (devName1) {
       case "rov":
        this.PrimaryService =     '0000ffd0-0000-1000-8000-00805f9b34fb';
        this.NotificationChar =   '0000ffd4-0000-1000-8000-00805f9b34fb';
        this.MailboxChar = '0000ffd1-0000-1000-8000-00805f9b34fb';
        this.CommandChar = '0000ffd2-0000-1000-8000-00805f9b34fb';
      break;
      //default:
   //       console.log("Dev Init: Unknown device, doing nothing: " + devName1);
  }
  
  
    this.primaryServiceObj =     null;
    this.notificationCharObj =   null;
    this.initializationCharObj = null;  
    this.mailboxCharObj = null;  
    this.commandCharObj = null; 
    this.device=null;
  
  
   // console.log(this);
  }

 
  

  function notificationCallback(event) {
    let value = event.target.value;
    let a = [];
    // Convert raw data bytes to hex values just for the sake of showing something.
    // In the "real" world, you'd use data.getUint8, data.getUint16 or even
    // TextDecoder to process raw data bytes.
    
    for (let i = 0; i < value.byteLength; i++) {
      a.push('0x' + ('00' + value.getUint8(i).toString(16)).slice(-2));	
    }
    if (a[0] == "0x01") {//distance packet
       Distance = toUInt16(bitConverter(a, 14, 15));
       const distance = (a[13] << 8) | a[12];
       //console.log('data: ' + a);
       //console.log("Distance: " + Distance);
      document.getElementById('distance').textContent =`Distance: ${Distance}mm`;

    }
  
    
  }

  var bitConverter = function bitConverter (arr, start, end) {
    var populate = function populate () {
        var data = [];
        for (var i = start; i <= end; i++) {
            (function (val) {
                data.push(arr[val]);
            })(i);
        }
        return data;
    };
    var combine = function combine (data, index) {
        if (index >= 0) {
            var tmp = data[index] << (index << 3);
            return tmp | combine(data, --index);
        } else {
            return 0;
        }
    };
    if (start >= 0 && start < arr.length && end > 0 && end < arr.length) {
        return combine(populate(), arr.length - 1);
    } else {
        throw Error('Invalid parameters to bitConverter: start: ' + start + ' end: ' + end + ' arr.length: ' + arr.length);
    }
};
/**
 * A function to treat a 16 bit integer as two's complement signed
 *
 * @param val A 16 bit integer
 * @returns {int} The parameter converted to its two's complement signed value
 */
var toSignedInt16 = function toSignedInt16 (val) {
    return (new Int16Array([val]))[0];
};

var toUInt16=function toUInt16(val) {
    return (new Uint16Array([val]))[0];
};



function setButtonsEnabled(enabled) {
    // Exclude the Bluetooth/connect button from being disabled
    const buttons = document.querySelectorAll('button');
    buttons.forEach(btn => {
        if (btn.id !== 'bluetoothBtn') { // Change 'bluetoothBtn' to your actual button's id
            btn.disabled = !enabled;
        }
    });
}
 function ModiState(modistate) { 
  
    let byte2='';
    if (modistate == 'on') {
        byte2 = 0x01;
    }
    else {
        byte2 = 0x00;
    }

   // console.log("byte2 " + byte2);
    let payload2 = new Uint8Array(2);
    payload2[0] = 0x00;
    payload2[1] = byte2;
    writeBytesUUID(mDev.mailboxCharObj, payload2);
    
    let payload3 = new Uint8Array(2);
    payload3[0] = 0x0D;
    payload3[1] = 0x00;
    
     setTimeout(function () {
         self.writeBytesUUID(mDev.commandCharObj, payload3);
     //    console.log("Executed CMD after 300 MS delay");
     }, 300);//timeout
 
     console.log("Turning Modi '"+ modistate+ "' and Restarting Device:")
 
 
 }

 function EnableTelemetry(state) { 
  
    let byte1='';
    if (state == 'on') {
        byte1 = 1;
    }
    else {
        byte1 = 0;
    }

    let payload2 = new Uint8Array(1);
    payload2[0] = byte1 ;
    writeBytesUUID(mDev.mailboxCharObj, payload2);
    
    let payload3 = new Uint8Array(2);
    payload3[0] = 0x19;
    payload3[1] = 0x00;
    
     setTimeout(function () {
         self.writeBytesUUID(mDev.commandCharObj, payload3);
     //    console.log("Executed CMD after 300 MS delay");
     }, 300);//timeout
 
     console.log("Telemetry State:" + state)
 
 }
async function stop(){
    MoveMotors(0,0,0,0)
    StopProgram=true;
}
async function MoveMotors(MTR1_PWM, MTR2_PWM, MTR3_PWM, MTR4_PWM) {

    const payloadMailbox = new Uint8Array(4);
    const payloadCmd = new Uint8Array(2);
    payloadCmd[0] = 0x13; // controls both motors
    payloadCmd[1] = 0x00;
     // Wait until the lock is released
     if (isGATTOperationInProgress) {
        return
    }

    isGATTOperationInProgress = true; // Acquire the lock
    payloadMailbox[0] = MTR1_PWM;
    payloadMailbox[1] = MTR2_PWM;
    payloadMailbox[2] = MTR3_PWM;
    payloadMailbox[3] = MTR4_PWM;

 
    try {
        // Use the movecmd function to send the command
        await movecmd(payloadCmd,payloadMailbox);
    
        await delay(0.1); // if no movement, wait a short time
        
       document.getElementById('output').textContent =
       `M1: ${MTR1_PWM} M2: ${MTR2_PWM} M3: ${MTR3_PWM} M4: ${MTR4_PWM}`;
   
    } catch (error) {
        console.error("Error in MoveMotors:", error.message);
    } finally {
        isGATTOperationInProgress = false; // Release the lock
    }
}
 function toLittleEndian2Bytes(num) {
        const buffer = new ArrayBuffer(2);
        const view = new DataView(buffer);
        view.setUint16(0, num, true);
        return new Uint8Array(buffer);
}

// Delay Helper Function
function delay(seconds) {
 // console.log(`delay for ${seconds} seconds...`);
  return new Promise(resolve => setTimeout(resolve, seconds * 1000));
}

async function StartProgram() {
  // Reset the stop flag so the program can run
  StopProgram = false;

  // Log what the robot is about to do
  console.log("Moving forward at 30% speed for 5 seconds");

  // Move all motors forward at 30% speed
  // M1 and M2 on one side, M3 and M4 on the other — same direction = forward
  await MoveMotors(30, 30, 30, 30);

  // Wait for 5 seconds while the robot moves
  await delay(5);

  // Log the stopping action
  console.log("Stopping all motors");

  // Stop all motors by setting their speed to 0
  await MoveMotors(0, 0, 0, 0);
}

Once you have copied RoverLLM.html/RoverLLM.js to your machine, connect your Rover and use the Javascript Debugger and look for the outputs in the console as your use the program.

On your machine, you should have two files save in the same directory as illustrated below.

If you have reached this section, you have successfully connected to your robot and issued basic commands. Now, we will use AI to develop some interesting use cases with our JavaScript Module. For each activity listed below, you will replace the StartProgram() function with a new custom version based on your AI prompts. To accomplish this:

1. Create a new version of your RoverLLM.html/RoverLLM.js files specific to your activity.

2. Replace the StartProgram() function in the template JavaScript file with the code generated from your AI prompts.

Activity 1 – LLM Setup for Coding

Objective: Configure the LLM to output code using your ROV-specific API.

Prerequisites:

1. Copy RoverLLM.html to activity1.html.

2. Copy RoverLLM.js to activity1.js.

3. Open activity1.html, replace `src="RoverLLM.js"` with `src="activity1.js"` towards the bottom of the file, and save.

Prompt to ChatGPT:

I have a robot with two equal-but-opposite motors driving its wheels. 
It exposes two JavaScript functions
•	function MoveMotors(M1, M2, M3, M4) where each motor speed M# is –100…100 
•	await delay(x) delays the program for x seconds using a promise
•	There is also a variable called Distance that contains the distance in millimeters from a target.
•	There is a global variable called “StopProgram” that if true should break any loops
•	Set StopProgram=False at the start of the StartProgram() function 
•	M1 and M2 are on the same side and should never have opposing motion
•	M3 and M4 are on the same side and should never have opposing motion

Examples:
MoveMotors(100, 100, 100, 100); // forward at full speed for 1s  
MoveMotors(-100, -100, -100, -100); // backward at full speed for 1s
MoveMotors(100, 100, -100, -100); // turns left   
MoveMotors(-100, -100, 100, 100); // turns right   
MoveMotors(0, 0, 0, 0); // stops all motors   

I want you to help me generate JavaScript code from prompts to perform robot activities.
•	Use simple, non-coder-friendly constructs.
•	Provide clear comments and explain each part of the code you generate.
•	You should implement a StartProgram() function that contains your logic.
•	All MoveMotor function calls should be asynchronous
•	If the step is time, add a delay(x) 
•	before each command, add a console.log to write the action to the console
•	start with an example that move forward for 5 seconds at 30% and stops.

This prompt should return back some sample code you can try.

Next Steps

1. Open activity1.js in a text editor, replace the StartProgram() function with the provided code, and save the file.

2. Navigate to the file system, select activity1.html, and open it in a web browser.

3. Pair with the device.

4. Click the "Run My Program" button to execute the code.

Activity 2 – Sensing & Reactive Behavior

Objective: User Distance to control movement

Prerequisites:

1. Copy RoverLLM.html to activity2.html.

2. Copy RoverLLM.js to activity2.js.

3. In activity2.html, replace `src="RoverLLM.js"` with `src="activity2.js"` at the bottom of the file and save.

Prompt:

Write JS code that:
1.	Move forward at 30%
2.	Backup at 30 percent for 1 second
3.	Turn right at 30 percent for 1 second
4.	Continue the cycle 

Next Steps:

1. Open activity2.js in a text editor, replace StartProgram() with ChatGPT's code, and save it.

2. Open activity2.html in your web browser.

3. Pair with your device.

4. Click "Run My Program" to execute the code.

Activity 3 – Random Movements

Objective: generate an algorithm with ordered steps based on user input.

Prerequisites:

1. Copy `RoverLLM.html` to `activity3.html`.

2. Copy `RoverLLM.js` to `activity3.js`.

3. In `activity3.html`, replace `src="RoverLLM.js"` with `src="activity3.js"` at the bottom of the file, then save.

Prompt:

Write JS code that:
1.	Move forward at 30% for 3 seconds.
2.	Stop for 2 seconds
3.	Back up for 3 seconds
4.	Stop for 1 second 
5.	Turn right for .5 seconds
6.	Stop 
7.	Turn left for .5 seconds
8.	Stop
9.	Spin in a circle for 5 seconds at 30%
10.	Spin in the opposite direction for 5 seconds at 30%
11.	Stop 

Next Steps

1. Open activity3.js in a text editor, replace the StartProgram() function with the provided code, and save the file.

2. Open activity3.html in your web browser.

3. Pair with the device.

4. Click "Run My Program" to execute the code.