Using pixel values for divide ratio

[dayunbao]

For greatest accuracy, enter pixel values corresponding to height / width (vertical / horizontal mode respectively), eg 300,100,112 -> 512.

I'm getting close to finishing the UI I'm building for Regional Prompter in my app, and I have a question. I plan to use pixel values for the divide ratio, and am trying to figure out how that will work. When using simple ratios, like 1,2,1,1; in horizontal divide mode, the first value is the row ratio, indicating the row's height, but the following three values are the column ratio, indicating the columns' widths. So if I'm using a 512 x 512 image, converting 1,2,1,1; to pixels would be '256, 256, 128, 128;`, right?

[dayunbao]

This is the MVP for the Regional Prompter UI in my app.

The first image is an example using the horizontal divide mode. In that divide mode, columns can only be added to a selected region. A row can be added anytime, but it will always be placed below existing columns. The bottom region with the white border is a selected region. The Regional prompts section has text boxes added dynamically as new regions are added. I plan to hide the usage of the BREAK keyword by not showing or requiring them to be entered. They'll be added automatically before the API request is made.

The image below is an example using the vertical divide mode. In this mode, rows can only be added to selected regions. Columns can be added anytime, though. New columns are always added to the right of existing regions.

I also plan on hiding the divide ratio, since it's calculated automatically. Each region can be clicked and dragged to change its height or weight (with certain limitations), and the divide ratio is updated automatically. But I need to verify that I'm calculating the divide ratios correctly. Right now, I'm most confused by how to calculate the divide ratio when using vertical mode. Also, would it be best to use 3 values to define any region, regardless of the divide mode? Any help would be greatly appreciated!

[dayunbao]

Just in case anyone ever looks at this post, the above divide ratio for vertical mode is incorrect. This would be the correct way to do it.

170;150;362,170;362;150,170;170

170 = COL_1_WIDTH
; (new row)
150 = ROW_1_HEIGHT
; (new row)
362 = ROW_2_HEIGHT
,(new column)
170 = COL_2_WIDTH
; (new row)
362 = ROW_1_HEIGHT
; (new row)
150 = ROW_2_HEIGHT
,(new column)
170 = COL_3_WIDTH
; (not a new row, but the default row 1)
170 = ROW_1_HEIGHT

[dayunbao]

After some offline help from hako-mikan, I figured out how to calculate the divide ratio correctly.

Horizontal mode:

Vertical mode:

Thank you @hako-mikan !