Virtual Product Visualizer

Drag modules from the library and click on terminals to create connections

Load Sample Layout | How to use

Component Library

Instructions

  • Drag components from library to canvas
  • Drag modules to reposition them
  • Click a terminal (circle) to start a wire
  • Click grid points to route the wire
  • Click another terminal to complete
  • Backspace to remove last waypoint
  • Click on a wire to add/edit waypoints
  • Drag waypoints to adjust wire paths
  • Delete key to remove selected waypoint
  • Click switch toggle to turn ON/OFF
  • Green LED = module is powered
  • Right-click a wire or module to delete it
  • ESC to cancel wire in progress
  • Mouse wheel to zoom in/out
  • +/- keys to zoom, 0 to reset
  • Right-click and drag to pan the canvas

Active Connections

No connections yet

Actions

How to Use

×

Mouse Controls

  • Drag from palette: Click and drag components from the library onto the canvas
  • Move modules: Click and drag modules to reposition them
  • Create wires: Click on a terminal (circle) to start a wire
  • Route wires: Click on grid points to add waypoints to your wire path
  • Complete wire: Click on another terminal to finish the connection
  • Edit wire: Click on an existing wire to add or edit waypoints
  • Move waypoints: Click and drag waypoints to adjust wire paths
  • Zoom: Use the mouse wheel to zoom in and out
  • Pan: Right-click and drag to pan around the canvas
  • Select items: Click on wires or modules to select them
  • Toggle switch: Click on the switch toggle to turn it ON/OFF
  • Press button: Click on buttons to activate them

Keyboard Controls

  • Backspace: Remove the last waypoint while drawing a wire
  • Delete: Delete selected wire(s), module(s), or waypoint(s)
  • ESC: Cancel wire drawing in progress
  • + / =: Zoom in
  • - / _: Zoom out
  • 0: Reset zoom to 100%
  • Ctrl/Cmd + Z: Undo last action
  • Ctrl/Cmd + Y: Redo last undone action

Visual Indicators

  • Green LED: Indicates the module is receiving power
  • Wire colors: Different colors indicate different signal types
  • Highlighted terminals: Show valid connection points