DXF JSON Viewer Help

Welcome to the DXF JSON Viewer! This tool allows you to load, view, and annotate 2D drawing data exported from CAD software in JSON format.

Getting Started

• 📂 Open File: Click this button to load a drawing. The viewer supports:
  • .json: Standard Three.js JSON scene files.
  • .gz / .json.gz: Gzipped Three.js JSON scene files.
  • .dxfhs: Custom gzipped archives containing both the Three.js scene data and saved hotspot configurations (recommended for saving your work).
• Fit View: Centers the camera on the loaded drawing, adjusting the zoom to fit it entirely within the viewport.

Generating Scene Files from DXF

To view your DXF drawings in this application, you first need to convert them into the Three.js JSON scene format (.json or .json.gz).

Please use our dedicated converter application, available at: /Editor/index.html

Load your DXF file in the converter, then export it as a Three.js JSON scene. You can then load that exported JSON file into this viewer.

Drawing Hotspots (Areas)

• Draw Area: Click this button to activate the polygon drawing mode.
  • Left-Click: Add points to define your polygon's shape.
  • Snapping: The tool automatically snaps to existing vertices of the loaded drawing as you move your mouse, ensuring precision.
  • Click 1st point: Click near your very first point to automatically close and complete the polygon.
  • Enter Key: Press Enter to complete the polygon at any time (it will automatically close the polygon by connecting the last point to the first).
  • Esc Key: Press Esc to cancel the current drawing without saving.
  • Ctrl+Z / Cmd+Z: Press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo the last drawn point.

Saving Hotspot Details

Once a polygon is completed (by clicking the first point or pressing Enter), a "Save Room Hotspot" modal will appear:

• Room ID: Enter a unique identifier for your hotspot. This ID must not already exist.
• Z-Level: Set the Z-coordinate for your hotspot.
  • The main drawing is located at Z=1.
  • Enter a value less than 1 (e.g., 0.5, 0.0, -0.1) to place the hotspot behind the main drawing.
  • Enter a value greater than 1 (e.g., 1.5, 2.0) to place the hotspot in front of the main drawing.
• Room Type: Select a predefined category for your hotspot (e.g., Classroom, Lab, Office).
• Custom Color: If "Unspecified" is selected as the Room Type, a color picker will appear, allowing you to choose a custom color for the hotspot.
• Opacity: Use the slider to set the transparency of your hotspot (0.0 for fully transparent, 1.0 for fully opaque).
• Save: Saves the hotspot with the entered details.
• Delete: Discards the drawn polygon if you don't wish to save it.

Managing Hotspots List

• Show Rooms List: Opens a full-window list of all saved room hotspots.
  • Show Checkbox: Toggle visibility of individual hotspots in the viewer. Checking a hotspot will also fit the camera to its location.
  • Room ID, Type, Details: Displays the saved information for each hotspot. For "Unspecified" types with a custom color, the color will be shown in the "Details" column.
  • Delete Button: Permanently removes a hotspot from the list and the viewer.

Interacting with Hotspots in Viewer

• Hover: Moving your mouse over a hotspot will highlight it and display its Room ID, Type, and Opacity in the "Hotspot Info Box".
• Click: Clicking a hotspot will select it (highlighting it more prominently) and update its information in the "Hotspot Info Box". Clicking on empty space will clear the selection.

Exporting Your Scene

• Export Scene: Exports your current loaded drawing along with all your defined hotspots into a single .dxfhs file. This file can be reloaded later to restore your work.
  • All hotspots will be exported as visible, regardless of their current checkbox state, to ensure a complete scene is saved.

Getting Your Scene File

Once you click the "Export Scene" button, your browser will automatically download the generated .dxfhs file.

• By default, this file will be saved to your browser's configured downloads folder (e.g., "Downloads" on Windows, "Downloads" on macOS/Linux).
• The filename will be based on the name you entered in the prompt (e.g., MyBuildingPlan_2025-05-23T12-30-00.dxfhs).
• To use this file with the viewer again, simply click "Open File" and select the downloaded .dxfhs file.