search

joyhughes / Jen

Image processing, generative photography, cellular automata
https://discord.gg/GQQHUbkf
23 stars 20 forks source link

Arrange widget groups in portrait mode #71

Closed joyhughes closed 4 months ago

joyhughes commented 5 months ago

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 commented 4 months ago

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

joyhughes commented 4 months ago

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 commented 4 months ago

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 https://github.com/joyhughes/Jen/issues/71#issuecomment-2105334481, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2QB3T27XLO4ADYWVBGHONLZBVBHJAVCNFSM6AAAAABGT6ADISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBVGMZTINBYGE . You are receiving this because you commented.Message ID: @.***>

joyhughes commented 4 months ago

@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 commented 4 months ago

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

joyhughes commented 4 months ago

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

joyhughes commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

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