-2

Not entirely sure if this is the most appropriate community for this but...

I'm looking for solutions to calculate positions for menu options when the amount of options vary and when each options might vary in size (due to text wrapping).

Our current code runs a for loop with two variables, one for the total number of options and one for how many should be on screen at once. Position was calculated as startYposition + 0.038 * number of options already on screen and that works fine for single-line entries but it goes to hell once you factor variable heights in.

I can know what height an option will be by rendering it but not putting it on screen right away.

Any ideas on how I might approach approach this?

Improve this question

1 Answer 1

Reset to default
0

Pixel Picking

Draw each menu item to a buffer the same size as the window you are picking within. Except when you draw the item, colour the entire clickable area one colour. Choose a different colour per clickable. Go to the pixel and read its colour, use your map of colours to clickables to discover what was clicked.

This works even on 3d objects.

Preparation

Maintain something like an r-tree of clickables. Within the r-tree are the clickable bounding boxes. When a given item draws (like a menu item) it updates its bounding box, possible adding/removing itself from the tree entirely. When a click is received query the r-tree and find out who could have been clicked.

If you get more than one result back you can thin the herd out by looking for visible objects, or sorting by Z-order, or invent your own semantic selector so that the most obvious/next clickable gets the focus.

A TUI?

Use a Monospace font. This will remove kerning issues from consideration.

You should be able to determine the pixel width per character, that and the pixels per lines will give you how many characters before a line wrap. You may have some per browser hiccups in that the particular div reports 800 pixels, but lines wrap 20 pixels early. Unfortunately this has to be tuned.

Alternately fix the number of characters per line, turn off line wrapping and enable a horizontal scroll.

Improve this answer
2
  • Sounds like a not horrible version of the oldie HTML maps? That might work, except there's no mouse on this UI; it's keyboard only. Commented Jul 11, 2020 at 1:28
  • Added some thoughts to my answer. Commented Jul 12, 2020 at 23:48

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.