3D Interactive Design Tool is not compatible for mobile device browsers.

Compatibility is being worked on and will be coming soon!

 Guide to Using the 3D Interactive Design Tool

 Getting Started

• Launch the tool in your browser — no installation required.

• The workspace is divided into three horizontal grids:

  • Top Grid: Configuration Panel

  • Middle Grid: Trailer Canvas

  • Bottom Grid: Recap & Export

 Top Grid: Configuration Panel

This is where you set up your trailer and add items.

 Trailer Sizing

• Length: Choose between 10–40 feet.

• Width: Fixed at 7 feet.

• The canvas automatically scales to match your chosen length.

 Adding Custom Items

• Enter an item name (e.g., “Griddle 36in”).

• Specify length and width in inches.

• Assign the item to a zone:

  • 🔴 Hot Workstation

  • 🔵 Cold Workstation

  • 🟡 Sanitize Station

  • 🟢 Customer Interaction

  • 🟠 Prep Workstation

• Click Add Item to place it on the canvas.

 Action Buttons

• Delete Last Item: Removes the most recently added item.

• Clear All: Wipes the canvas clean.

• Save Image: Saves the current design as an image file.

 Trailer Color Picker

• Browse the full RAL Classic color wheel (based on the uploaded document).

• Select a color swatch; it’s saved in the recap panel and included in the final export.

 Middle Grid: Trailer Canvas

This is your interactive design space.

 Canvas Behavior

• Drag-and-drop items to position them.

• Items scale proportionally to trailer size.

• Grid lines represent trailer dimensions for easy alignment.

• Orientation: Trailer is lengthwise; scroll horizontally if needed.

• Front marker: A red line at the right edge shows the trailer’s front.

 Interaction

• Mouse drag: Move items freely.

• Keyboard arrows: Nudge the last added item for precise placement.

• Scale slider: Adjust zoom to see more detail or the full trailer.

 Bottom Grid: Recap & Export

This section summarizes your design and lets you save it.

 Recap Panel

Displays:

• Trailer dimensions

• Selected RAL color

• List of items with sizes and zones

 Custom Notes

• Add any extra specifications (e.g., “Include double sink”).

• Notes are included in the final export.

 Final Export

• Combines:

  • Trailer canvas image

  • Recap panel

  • Custom notes

• Saved as a single image file (no meta tags).

 Tips for Best Results

• Plan zones first: Decide where hot, cold, sanitize, prep, and customer areas should go before adding items.

• Use grid lines: Align items neatly for realistic spacing.

• Color coding: Pick a RAL color early so your recap matches your design vision.

• Iterate: Add items, move them, delete, and refine until the layout feels balanced.

• Export often: Save versions as you go to compare layouts.