Munelit/swerve-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Configuration name now updated

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-28 13:43:10 -04:00
parent 22e48b34d5
commit f1117bf925
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
script.js
View File

@ -48,8 +48,13 @@ class SwerveModule {
// Swerve drive class to represent the robot as a whole // Swerve drive class to represent the robot as a whole
class SwerveDrive { class SwerveDrive {
constructor(modulePositionsAndNames) { constructor(modulePositionsAndNames, robotName) {
this.setModules(modulePositionsAndNames); this.setModules(modulePositionsAndNames);
this.setName(robotName);
}
setName(robotName) {
this.name = robotName;
} }
setModules(modulePositionsAndNames) { setModules(modulePositionsAndNames) {
@ -216,43 +221,49 @@ resetBtn.addEventListener('click', (e) => {
preset2WheelBtn.addEventListener('click', () => { preset2WheelBtn.addEventListener('click', () => {
const positions = PresetConfigs.twoWheel(robotSize); const positions = PresetConfigs.twoWheel(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("2-Wheel Differential");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
preset3WheelBtn.addEventListener('click', () => { preset3WheelBtn.addEventListener('click', () => {
const positions = PresetConfigs.threeWheel(robotSize); const positions = PresetConfigs.threeWheel(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("3-Wheel Triangle");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
preset4WheelBtn.addEventListener('click', () => { preset4WheelBtn.addEventListener('click', () => {
const positions = PresetConfigs.fourWheelSquare(robotSize); const positions = PresetConfigs.fourWheelSquare(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("4-Wheel Square");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
preset4RectBtn.addEventListener('click', () => { preset4RectBtn.addEventListener('click', () => {
const positions = PresetConfigs.fourWheelRectangle(robotSize); const positions = PresetConfigs.fourWheelRectangle(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("4-Wheel Rectangle");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
preset6WheelBtn.addEventListener('click', () => { preset6WheelBtn.addEventListener('click', () => {
const positions = PresetConfigs.sixWheel(robotSize); const positions = PresetConfigs.sixWheel(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("6-Wheel Hexagon");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
preset8WheelBtn.addEventListener('click', () => { preset8WheelBtn.addEventListener('click', () => {
const positions = PresetConfigs.eightWheel(robotSize); const positions = PresetConfigs.eightWheel(robotSize);
robot.setModules(positions); robot.setModules(positions);
createModuleDisplays(robot.modules); robot.setName("8-Wheel Octogon");
updateModuleDisplays(robot.modules); createModuleDisplays(robot);
updateModuleDisplays(robot);
}); });
/* /*
@ -260,10 +271,11 @@ preset8WheelBtn.addEventListener('click', () => {
* BEGIN DYNAMIC DOM FUNCTIONS * BEGIN DYNAMIC DOM FUNCTIONS
*/ */
function createModuleDisplays(modules) { function createModuleDisplays(robot) {
const grid = document.getElementById('module-grid'); const grid = document.getElementById('module-grid');
grid.innerHTML = ''; // Delete any pre-existing elements before creating new ones grid.innerHTML = ''; // Delete any pre-existing elements before creating new ones
const modules = robot.modules;
modules.forEach((module, i) => { modules.forEach((module, i) => {
const article = document.createElement('article'); const article = document.createElement('article');
article.className = 'module-display'; article.className = 'module-display';
@ -284,7 +296,13 @@ function createModuleDisplays(modules) {
}); });
} }
function updateModuleDisplays(modules) { function updateModuleDisplays(robot) {
const configName = document.getElementById('config-name');
configName.textContent = robot.name;
const moduleCount = document.getElementById('module-count-display');
moduleCount.textContent = robot.modules.length;
const modules = robot.modules;
modules.forEach((module, i) => { modules.forEach((module, i) => {
const angleElement = document.getElementById(`module-${i}-angle`); const angleElement = document.getElementById(`module-${i}-angle`);
const speedElement = document.getElementById(`module-${i}-speed`); const speedElement = document.getElementById(`module-${i}-speed`);
@ -401,8 +419,8 @@ function drawRobot(ctx, robot) {
// Initialize Variables // Initialize Variables
const robotSize = 200; const robotSize = 200;
const defaultModulePositions = PresetConfigs.fourWheelSquare(robotSize); const defaultModulePositions = PresetConfigs.fourWheelSquare(robotSize);
const robot = new SwerveDrive(defaultModulePositions); const robot = new SwerveDrive(defaultModulePositions, "4-Wheel Square");
createModuleDisplays(defaultModulePositions); createModuleDisplays(robot);
let xSpeed = 0; let xSpeed = 0;
let ySpeed = 0; let ySpeed = 0;
let turnSpeed = -1; let turnSpeed = -1;
@ -440,7 +458,7 @@ function animate() {
// Update module states before drawing the robot // Update module states before drawing the robot
robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value)); robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value));
updateModuleDisplays(robot.modules); updateModuleDisplays(robot);
// Draw the robot and it's movement. Grid should be oversized so movement // Draw the robot and it's movement. Grid should be oversized so movement
// doesn't find the edge of the grid // doesn't find the edge of the grid