Hot Spot Prototyping

Goal

The goal of this prototype was to:

1. Add in a tabbed layout for the property editor
2. 2. Add a second tab for supporting the UI for:
   1. Adding and deleting 3d hot spots in the viewer
   2. Manage a list of hotspts with the ability to activate and toggle 3d visibility.
   3. Clear, load and save set of hot spots to a file.

The existing code for the viewer was then merged into the tabbing code with actions added for each UI element as approrpriate

Implementation

ChatGPT was used to generate the HTML and Javascript UI and the a tabbed UI at the same time. Additional refinements to add in list management as well as file load and save were added afterwards. For the latter appropriate code for JSON encoding was asked for.

Results

Initial Generation

Below is the final prototype before integration with the rest of the viewer and additional styling. The "Material" tab would be filled in with the existing viewer's property editor.

• Material
• Hotspots

---

Initial Viewer Integration

Finalized Viewer Integration

In this iteration the explicit hotspot creation via a button was removed and replaced with interactive addition on the viewer