Replace circle heading handle with triangle

[Nsl106]

Intended to fix #341, just a simple change to make the heading handle on waypoints a triangle so the front of the robot is more clear.

[calcmogul]

The clickable area feels too small with a side length of 0.2. A side length of 0.26935 gives equivalent area:

triangle area = circle area
1/2 bh = πr²
1/2 (l)(√3/2 l) = πr²
√3/4 l² = πr²
l² = 4πr²/√3
l = √(4πr²/√3)
l = 2r√(π/√3)
l = 2 * 0.1 √(π/√3)
l ≈ 0.26935

[calcmogul]

The triangle point math in render() checks out.

The white circle on the playback robot needs to be changed to a triangle. I think it's rendered in InterpolatedRobot.tsx.

[shueja]

The playback robot is InterpolatedRobot.tsx.

[Nsl106]

Where should the shared code between them go? Or would it be better to just copy-paste the same math from OverlayWaypoint.tsx? Also thanks for cleaning up the math comments :)

[calcmogul]

It's not that much code, and it's clear what it does, so I think it's fine to copy-paste.

[Nsl106]

What would you think about making the center circle a triangle or arrow (similar to the advantagescope odometry page), and making the heading handle only be visible when the waypoint is selected?

[calcmogul]

making the heading handle only be visible when the waypoint is selected

That makes it less clear how you're supposed to interact with a pose waypoint, and I don't think it helps avoid visual clutter. I do like the idea of a central arrow though. Not sure how waypoint dragging would work.

[Nsl106]

It could just be if you grab it anywhere but the heading handle, not sure if that would be clear enough though.

[calcmogul]

Having the waypoint translate if you missed the rotation handle sounds frustrating. The clickable areas for translation and rotation are currently far apart, and missing one of them results in nothing happening.