Arrange widget groups in portrait mode

[joyhughes]

Arrange widgets in the interface container when it is positioned below the image port.

Question: how to arrange the horizontal widgets in a horizontal container?

Some design work may be necessary

[agxmbedi]

I am Agamjot singh. Under GSSOC'24, I would like to work on this issue. Pls assign me this!!

[joyhughes]

I am Agamjot singh. Under GSSOC'24, I would like to work on this issue. Pls assign me this!!

This is probably my most critical issue. Please let me know why you're the best person to take it on quickly.

In particular, what is your familiarity with React and MUI?

[agxmbedi]

I will try my level best.

…

On Sat, May 11, 2024 at 3:45 AM Joy Hughes ***@***.***> wrote: I am Agamjot singh. Under GSSOC'24, I would like to work on this issue. Pls assign me this!! This is probably my most critical issue. Please let me know why you're the best person to take it on quickly. In particular, what is your familiarity with React and MUI? — Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2QB3T27XLO4ADYWVBGHONLZBVBHJAVCNFSM6AAAAABGT6ADISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBVGMZTINBYGE> . You are receiving this because you commented.Message ID: ***@***.***>

[joyhughes]

@agxmbedi Okay let's try. Here's what I think: all the widgets need to go into a grid that fits within the control panel (ControlPanel.js). If there are too many to fit, a scroll bar must be included so they don't overflow.

The control panel can go to the right of the ImagePort or below, depending on the aspect ratios of the image port and the window. Right now it can overflow and wind up to the right when it should be below.

The grid must handle the widgets individually - the problem I am having might be that each widget group goes within its own div. But really we need to have a list of individual widgets, concatenated from the title, the medial controller, and all the widget groups. Then these can all be displayed together in a grid that doesn't overflow.

To complicate things a bit more, the widgets can have different heights but are the same width. So maybe display them in columns - when a column gets full, go to the next column. If more columns are needed than fit within the width of the control panel, include a scroll bar to scroll left to right.

Maybe there is a better way to do this and you have a better idea - do let me know and try it out if this is the case!

[joyhughes]

@agxmbedi
Learn more about project here: https://www.youtube.com/watch?v=vN1ApdESIrc
Please ask any questions you may have

[joyhughes]

Please join Lux Vitae discord https://discord.gg/GQQHUbkf

[joyhughes]

@agxmbedi I am ready to work with you on this issue. I have created branch https://github.com/joyhughes/Jen/tree/UI-layout for this issue and I'll let you know whatever changes I decide to make.

[joyhughes]

With the latest commit layout flow works in landscape mode but height is incorrect in portrait mode, leading to unused space.

To calculate properly I will be moving responsibility for calculating the size of image port and control panel to InterfaceContainer.js ... then the full window will be used.

[joyhughes]

I committed again and got the control panel to fill the whole window and the UI elements to arrange automatically.