1

I'm working on an application that uses VR target recognition to display information on screen. The design is to point out areas of the recognized object and make these objects interactible as well as giving them a label.

As the layout of these objects is dynamic and positioned through code, I'm looking for some guidelines on how I should move things around so that objects don't overlap. I'm not a "UI guy" so I don't have a good basis for deciding what offsets to make or how to prioritize them.

For example, this is what I currently have (with and without the camera input):

UI minus camera input

UI with camera input

Notice that the one "Wheel" label overlaps the box for the front bumper. That's what I want to avoid.

Currently I've made the text offset vertically when it overlaps with other text (prioritizing the labels "closer" to the camera: i.e. "Front Bumper" was moved up because it overlapped with "Wheel" but "Wheel" was closer to the user) but I haven't done anything to prevent the text from overlapping with any of the boxes and the boxes themselves can't move (as they're tied to points in real-world space). Text is placed on left/right depending on whether the center of the text's parent box is to the left or right of the target's cuboid center in screenspace.

What things should I keep in mind from a UI layout perspective as I proceed to write code that will prevent (or at least, minimize) overlaps?

I am capable of drawing a line from the text to the box (as seen in the first image) so I can position the text arbitrarily far away from its parent box. I can't, however, write code to "minimize the total distance of moves" or "use the fewest number of lines" as that requires testing all possible solutions, which is not computable in linear time.

(Side note: the "Light Bar" gets nudged upwards in the first picture by "Front Bumper" due to issues calculating each text's on-screen AABB, but that's not a major concern at the moment).

I'm working in Unity with deployment for the HoloLens, but that shouldn't impact the answer any (although the displayable area of the HoloLens is ridiculously tiny).

1 Answer 1

1

You could always use the lines extending from the box to the label. If you can detect the object area, draw an offset rectangle and put all labels outside the rectangle.

This way you the user can clearly see the truck parts without labels blocking the view, and clearly reading the labels without them blocking each other.

enter image description here

1
  • Thanks for the reply. I hadn't thought of doing it that way. I've since moved on (I asked the question on July 5th and my contract ended the 28th) but this is still a helpful answer. Commented Aug 13, 2017 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.