Minor control layout change + added documentation
This commit is contained in:
180
index.html
180
index.html
@ -25,18 +25,18 @@
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Translation & Rotation</legend>
|
<legend>Translation & Rotation</legend>
|
||||||
|
|
||||||
<div class="control-group">
|
|
||||||
<label for="vx-slider">Strafe Left/Right (pixels/s)</label>
|
|
||||||
<input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
|
|
||||||
<output id="vx-value">0</output>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label for="vy-slider">Move Forward/Backward (pixels/s)</label>
|
<label for="vy-slider">Move Forward/Backward (pixels/s)</label>
|
||||||
<input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
|
<input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
|
||||||
<output id="vy-value">0</output>
|
<output id="vy-value">0</output>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label for="vx-slider">Strafe Left/Right (pixels/s)</label>
|
||||||
|
<input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
|
||||||
|
<output id="vx-value">0</output>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label for="omega-slider">Rotation (rad/s)</label>
|
<label for="omega-slider">Rotation (rad/s)</label>
|
||||||
<input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
|
<input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
|
||||||
@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label for="max-speed-slider">Max Module Speed (pixels/s)</label>
|
<label for="max-speed-slider">Max Module Speed (pixels/s)</label>
|
||||||
<input type="range" id="max-speed-slider" min="1" max="300" step="10" value="150">
|
<input type="range" id="max-speed-slider" min="0" max="300" step="10" value="150">
|
||||||
<output id="max-speed-value">0</output>
|
<output id="max-speed-value">0</output>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@ -106,9 +106,173 @@
|
|||||||
<h2>About This Project</h2>
|
<h2>About This Project</h2>
|
||||||
<details>
|
<details>
|
||||||
<summary>How To Use</summary>
|
<summary>How To Use</summary>
|
||||||
|
<div class="documentation-content">
|
||||||
|
<h3>Getting Started</h3>
|
||||||
|
<p>This interactive visualizer demonstrates how a swerve drive robot moves based on commanded
|
||||||
|
velocities. Use the controls to experiment with different configurations and movement patterns.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Drive Controls</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Strafe Left/Right:</strong> Controls the robot's velocity in the X direction
|
||||||
|
(field-relative). Positive values move right, negative values move left.</li>
|
||||||
|
<li><strong>Move Forward/Backward:</strong> Controls the robot's velocity in the Y direction
|
||||||
|
(field-relative). Positive values move forward, negative values move backward.</li>
|
||||||
|
<li><strong>Rotation:</strong> Controls the robot's angular velocity (turn rate) in radians per
|
||||||
|
second. Positive values rotate counter-clockwise.</li>
|
||||||
|
<li><strong>Max Module Speed:</strong> Sets the maximum speed limit for any individual swerve
|
||||||
|
module. If calculated speeds exceed this, all modules are scaled proportionally.</li>
|
||||||
|
<li><strong>Reset Controls:</strong> Returns all velocity sliders to zero.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Preset Configurations</h3>
|
||||||
|
<p>Choose from 9 pre-built robot configurations ranging from 2 to 16 wheels. Each preset
|
||||||
|
demonstrates different module arrangements:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>2-Wheel:</strong> Differential drive arrangement</li>
|
||||||
|
<li><strong>3-Wheel Triangle:</strong> Three modules in an equilateral triangle</li>
|
||||||
|
<li><strong>4-Wheel Square:</strong> Classic square configuration</li>
|
||||||
|
<li><strong>4-Wheel Rectangle:</strong> Rectangular configuration for longer robots</li>
|
||||||
|
<li><strong>6-Wheel Hexagon:</strong> Hexagonal arrangement</li>
|
||||||
|
<li><strong>8-Wheel Octagon:</strong> Octagonal arrangement</li>
|
||||||
|
<li><strong>8-Wheel Square:</strong> Double-layered square with inner and outer modules</li>
|
||||||
|
<li><strong>12-Wheel Hexagon:</strong> Double-layered hexagonal arrangement</li>
|
||||||
|
<li><strong>16-Wheel Octagon:</strong> Double-layered octagonal arrangement</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Custom Configurations</h3>
|
||||||
|
<p>Create your own robot configuration:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Enter the desired number of modules (Minimum of 2)</li>
|
||||||
|
<li>Click <strong>Generate Position Inputs</strong> to create input fields</li>
|
||||||
|
<li>For each module, specify:
|
||||||
|
<ul>
|
||||||
|
<li><strong>Module Name:</strong> A label for the module</li>
|
||||||
|
<li><strong>X Position:</strong> Distance from robot center (pixels, positive = right)
|
||||||
|
</li>
|
||||||
|
<li><strong>Y Position:</strong> Distance from robot center (pixels, positive = up)</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Click <strong>Apply Custom Configuration</strong> to see your design</li>
|
||||||
|
<li>Use <strong>Remove Position Inputs</strong> to clear the custom fields. This does not reset
|
||||||
|
the robot, only clears the input box</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Understanding the Visualization</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Robot Frame:</strong> The filled polygon connecting the outer-most module positions
|
||||||
|
</li>
|
||||||
|
<li><strong>Modules:</strong> Circular markers at each wheel position</li>
|
||||||
|
<li><strong>Velocity Arrows:</strong> Red arrows showing the direction and magnitude of each
|
||||||
|
module's velocity</li>
|
||||||
|
<li><strong>Grid:</strong> Moves relative to the robot to show field-relative motion</li>
|
||||||
|
<li><strong>Gyro Heading:</strong> The current rotation angle of the robot in degrees</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Module States Panel</h3>
|
||||||
|
<p>Displays real-time information for each module:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Angle:</strong> The direction the module is pointing (in degrees)</li>
|
||||||
|
<li><strong>Speed:</strong> The velocity of the module (in pixels/second)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>Explaination of Swerve Kinematics</summary>
|
<summary>Explanation of Swerve Kinematics</summary>
|
||||||
|
<div class="documentation-content">
|
||||||
|
<h3>What is Swerve Drive?</h3>
|
||||||
|
<p>Swerve drive (also called holonomic drive) is a drivetrain design where each wheel module can
|
||||||
|
independently rotate and drive in any direction. This allows the robot to move in any direction
|
||||||
|
while simultaneously rotating, providing exceptional maneuverability.</p>
|
||||||
|
|
||||||
|
<h3>Kinematic Equations</h3>
|
||||||
|
<p>The simulator calculates each module's state using inverse kinematics. Given a desired robot
|
||||||
|
velocity (v<sub>x</sub>, v<sub>y</sub>) and rotation rate (ω), we calculate each module's
|
||||||
|
required velocity.</p>
|
||||||
|
|
||||||
|
<h4>Field-Relative vs Robot-Relative</h4>
|
||||||
|
<p>This simulator uses <strong>field-relative control</strong>, meaning the velocity commands are
|
||||||
|
relative to the field, not the robot's current orientation. The inputs are transformed to
|
||||||
|
robot-relative coordinates using the current gyro heading:</p>
|
||||||
|
<pre>
|
||||||
|
v<sub>robot_x</sub> = v<sub>field_x</sub> × cos(-θ) - v<sub>field_y</sub> × sin(-θ)
|
||||||
|
v<sub>robot_y</sub> = v<sub>field_x</sub> × sin(-θ) + v<sub>field_y</sub> × cos(-θ)
|
||||||
|
</pre>
|
||||||
|
<p>Where θ is the robot's heading angle (gyro reading).</p>
|
||||||
|
|
||||||
|
<h4>Module Velocity Calculation</h4>
|
||||||
|
<p>For each module at position (x<sub>i</sub>, y<sub>i</sub>) relative to the robot's center of
|
||||||
|
rotation:</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Translation component:</strong> The robot's linear velocity (v<sub>robot_x</sub>,
|
||||||
|
v<sub>robot_y</sub>)</li>
|
||||||
|
<li><strong>Rotation component:</strong> Perpendicular to the position vector, with magnitude
|
||||||
|
proportional to distance from center:
|
||||||
|
<pre>
|
||||||
|
v<sub>rot_x</sub> = -y<sub>i</sub> × ω
|
||||||
|
v<sub>rot_y</sub> = x<sub>i</sub> × ω
|
||||||
|
</pre>
|
||||||
|
</li>
|
||||||
|
<li><strong>Combined velocity:</strong> Vector sum of translation and rotation:
|
||||||
|
<pre>
|
||||||
|
v<sub>module_x</sub> = v<sub>robot_x</sub> + v<sub>rot_x</sub>
|
||||||
|
v<sub>module_y</sub> = v<sub>robot_y</sub> + v<sub>rot_y</sub>
|
||||||
|
</pre>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h4>Module Angle and Speed</h4>
|
||||||
|
<p>From the module's velocity vector, we calculate:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Speed:</strong> The magnitude of the velocity vector: √(v<sub>x</sub>² +
|
||||||
|
v<sub>y</sub>²)</li>
|
||||||
|
<li><strong>Angle:</strong> The direction of the velocity vector: arctan2(v<sub>y</sub>,
|
||||||
|
v<sub>x</sub>)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>Speed Normalization</h4>
|
||||||
|
<p>If any module's calculated speed exceeds the maximum allowed speed, all module velocities are
|
||||||
|
scaled proportionally. This preserves the movement direction while respecting hardware limits:
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
scale = max_speed / max(calculated_speeds)
|
||||||
|
if scale < 1:
|
||||||
|
all_module_speeds × scale
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Gyro Integration</h3>
|
||||||
|
<p>The robot's heading (gyro angle) is continuously updated by integrating the rotation rate:</p>
|
||||||
|
<pre>
|
||||||
|
θ<sub>new</sub> = θ<sub>old</sub> + ω × Δt
|
||||||
|
</pre>
|
||||||
|
<p>Where Δt is the time step. The heading is normalized to stay within the range [-π, π].</p>
|
||||||
|
|
||||||
|
<h3>Real-World Applications</h3>
|
||||||
|
<p>Swerve drive systems are commonly used in:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>FRC (FIRST Robotics Competition):</strong> For competitive robots requiring precise
|
||||||
|
positioning</li>
|
||||||
|
<li><strong>Industrial AGVs:</strong> Automated guided vehicles in warehouses</li>
|
||||||
|
<li><strong>Research Platforms:</strong> Mobile robots requiring omnidirectional movement</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Key Advantages</h3>
|
||||||
|
<ul>
|
||||||
|
<li>True holonomic motion (can move in any direction without rotating)</li>
|
||||||
|
<li>Can translate and rotate simultaneously</li>
|
||||||
|
<li>Excellent maneuverability in constrained spaces</li>
|
||||||
|
<li>No "drift" or unwanted rotation during translation</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Implementation Considerations</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Mechanical Complexity:</strong> Each module requires two motors (drive and steering)
|
||||||
|
</li>
|
||||||
|
<li><strong>Control Complexity:</strong> Requires coordinated control of all modules</li>
|
||||||
|
<li><strong>Sensor Requirements:</strong> Absolute encoders recommended for module angles</li>
|
||||||
|
<li><strong>Cost:</strong> More expensive than traditional drivetrains</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user