[M4] - Add Voltage Cursor

[achuthanmukundan00]

Feature: Information Cursor Displaying Voltage and Field Strength

Description

Implement an information cursor that displays real-time data about the voltage and electric field strength at the cursor's position in the simulation. This feature will improve user interaction by providing detailed feedback and enabling better understanding of the electric field distribution.

Requirements

• Create a responsive cursor that displays:
  • Voltage at the cursor's position.
  • Electric field strength at the cursor's position.
• Ensure the data is updated dynamically as the cursor moves across the simulation area.
• Design a clean and intuitive UI for the information display.

Acceptance Criteria

1. The cursor should display the voltage and electric field strength in a small, unobtrusive tooltip near its position.
2. Tooltip data should update in real-time as the cursor moves.
3. Ensure the tooltip design is visually appealing and does not interfere with the simulation display.
4. The feature should work seamlessly across different devices and screen sizes.
5. Pass functional and usability testing.

Steps to Implement

1. Data Retrieval Logic:

   • Access the voltage and electric field data from the simulation at the cursor's position.
   • Ensure efficient calculation and data retrieval to maintain performance.

2. Tooltip Design and Implementation:

   • Create a tooltip UI element to display voltage and field strength.
   • Style the tooltip for readability and minimal visual intrusion.

3. Integrate Cursor Tracking:

   • Track the cursor's position relative to the simulation canvas.
   • Update the tooltip's position and data dynamically based on cursor movement.

4. Testing:

   • Verify the data displayed in the tooltip matches the simulation's calculations.
   • Ensure the tooltip appears and updates smoothly without lag.
   • Test for edge cases, such as moving the cursor outside the simulation area.

Additional Considerations

• Allow users to toggle the information cursor on/off via a control in the UI.
• Ensure compatibility with colorblind-friendly and dyslexia-friendly design schemes.
• Optimize the tooltip for performance, particularly in dense simulation areas.

Testing

• Unit test: Verify the voltage and field strength calculations are correct at different positions.
• Integration test: Ensure the tooltip updates and moves correctly with the cursor.
• Usability test: Gather feedback on the tooltip's clarity, usability, and overall impact.

---

Related Files

• PixiCanvas.vue (or equivalent rendering component)
• mathUtils.ts (or similar file for field and voltage calculations)
• drawingUtils.ts (if used for UI rendering logic)

Estimated Time

• Implementation: 6-8 hours
• Testing and Refinements: 2-3 hours

---

Priority

• 🔵 High: This feature adds significant interactivity and aligns with the M5 milestone for graphical and UI enhancements.

Assignees

• @<team_member_username>

Labels

• Feature
• M5 - Graphical Overhaul
• Enhancement
• UI/UX