Robotics & Automation — Interactive Concepts

A live, in-browser companion to the SST Robotics & Automation course. Every core concept from lectures and labs is a thing you can poke at: drag sliders, click targets, watch arms swing, masks bloom, layers stack, ultrasonic pulses fly out and bounce back.

What's in here

Section	Interaction	Math / system being shown
01 Kinematics	sliders for θ₁, θ₂, L₁, L₂; click target for IK; double-click to flip elbow	2-link planar FK + closed-form IK (mirrors PROJECT/ik-two-links.py)
02 Degrees of Freedom	link count, motion amplitude/speed	N-link manipulator with tip-trail workspace exploration
03 Workspace	joint-limit sliders	Sampled reachable set vs. ideal annulus
04 Vision	per-color HSV sliders (H/S/V min–max)	OpenCV-style RGB→HSV, three masks (mirrors PROJECT/color_filtering.py)
05 ROS	publish rate, message drop, click nodes/edges	Animated nodes + topics graph
06 PID Control	Kp/Ki/Kd, disturbance; drag setpoint on chart	Discrete PID on a mass-damper
07 Gripper	servo angle slider, object width, auto-cycle	Rack & pinion (the lab's STL mechanism)
08 3D Printing	layer height, infill %, print speed	Layer-by-layer FDM toolpath visualisation
09 Electronics	voltage + 3 resistor band selectors	Ohm's law V=IR, LED brightness, burn-out at >30 mA
10 Ultrasonic Sensor	drag obstacle, beam angle, speed of sound	HC-SR04 echo time + cone, scrolling distance plot
11 Differential Drive	left + right wheel speeds, wheelbase	Mobile-robot pose integration v=(vR+vL)/2, ω=(vR-vL)/L
12 Path Planning	drag start/goal, click walls, heuristic weight	Live A* with explored-frontier overlay
13 Cobot HRI	drag human, drag gaze, tune personal space	Proxemics + gaze state machine

Run it locally

It's pure static HTML/CSS/JS — open index.html in any modern browser or serve the folder with any static server.

# Python (no install)
python -m http.server 8000

# or Node
npx serve .

Then visit http://localhost:8000.

Deploy to GitHub Pages

1. Create a new GitHub repository and push the contents of this folder to its default branch (typically main).

   git init
   git add index.html styles.css js .nojekyll .github README.md
   git commit -m "robotics interactive site"
   git branch -M main
   git remote add origin https://github.com/<you>/<repo>.git
   git push -u origin main

2. In GitHub: Settings → Pages → Build and deployment:

   • Source: GitHub Actions (the included .github/workflows/pages.yml deploys automatically on every push to main)
   • or pick Deploy from branch → main / root if you prefer the traditional method.

3. The site will be live at https://<you>.github.io/<repo>/ in a minute.

The included .nojekyll file disables Jekyll so any future filenames starting with _ are served as-is.

Layout

.
├── index.html          # all sections, navigation, controls markup
├── styles.css          # dark technical theme
├── js/
│   ├── kinematics.js   # FK + IK on canvas
│   ├── dof.js          # N-link manipulator
│   ├── workspace.js    # reachable-set sampling
│   ├── vision.js       # HSV thresholding
│   ├── ros.js          # SVG pub/sub animation
│   ├── control.js      # PID + drag setpoint
│   ├── gripper.js      # rack & pinion
│   ├── printing.js     # FDM layer simulator (side-elevation)
│   ├── electronics.js  # Ohm's law + LED + resistor bands
│   ├── sensor.js       # ultrasonic cone + plot
│   ├── drive.js        # differential-drive mobile robot
│   ├── planning.js     # A* path planning grid
│   └── cobot.js        # HRI state machine
├── .nojekyll
└── .github/workflows/pages.yml   # auto-deploy

The course materials themselves (CONTENT/, LAB/, PROJECT/, QUIZ/, Robotics_Automation.pdf) live alongside but are not consumed by the site — they're the source material that informs each demo.