[optimization] Layout division

[vslmc]

I would suggest optimizing the layout with grids. This would fix all problems with different resolutions, and shows you where all elements should be placed (atm there are all over the place)

[mateosss]

Hi this seems interesting, could you point out how to do this with the grub theme.txt file? (it has something to do with canvas, vbox and/or hbox?)

[vslmc]

I have no idea how to do this especially with grub, but in general you would need access to use % or calculate it, and work with independent cells.
e.g you would devide the canvas in 4x4 (4 x 25% in H | 4 x 25% in V) [or create containers in this dimensions]; devide the cells in the middle even further. (e.g. an numbered array)
(Draw things in one cell only; but "connect" them visual to the neighbor cell = may be easier to handle)

Maybe this helps: http://grub.gibibit.com/Theme_format#styled-boxes

[vslmc]

If I read the docs right, i would suggest in the moment you would

• create 3 vbox next to each other (each with 3 label inside / or 3 vbox if nesting is allowed?)
  -- all = Top 0; 1. left 0%, 2. left 33%, 3. left 66%
• The label size sets the vbox size, so all label need to be 33% width (or 100% width if the value uses the container size it's inside, and if so set the 3 vbox to 33% width)

If nesting is allow you could create the image I posted befor, If not you have atleast 3 dynamic columns

[mateosss]

That may be interesting, but just to be clear, this would not solve the fixed icon/font size that looks too big on smaller screens. Based on that I was thinking probably the best we can get with what grub has, is to regenerate the fonts with different sizes during the theme installation. And the same for icons.
This will probably introduce some kind of manual presets for different resolutions.

And for what I understand, using a grid this way only solves the positioning of elements and not the sizing.
Given that manual presets will eventually need to be done, then I think it wouldn't be so hard to just add the layout configuration to those presets, instead of working on a proper grid setup.

Does this make sense?

[heyzec]

I've tried placing the boot menu objects within vbox and the result will glitch out.

The theme file I tested: https://github.com/heyzec/matter/blob/f92e795a35274b4d3177cc0a21621d4b4c13d47c/theme.txt.template
Useful guide: http://wiki.rosalab.ru/en/index.php/Grub2_theme_tutorial

[vslmc]

Long Time , here without testing if syntax is correct:

+ vbox {
        left = 0
        top = 0
        width = 25%
        height = 100%
}
+ vbox {
        left = 25%
        top = 0
        width = 25%
        height = 100%
        +hbox {
            left = 0
            top = 0
            width = 100%
            height = 25%
        }
        +hbox {
            left = 0
            top = 25%
            width = 100%
            height = 25%
            +vbox {
                left = 0
                top = 0
                width = 100%
                height = 33%
            }
            +vbox {
                left = 0
                top = 33%
                width = 100%
                height = 33%
                +hbox {
                    left = 0
                    top = 0%
                    width = 100%
                    height = 50%
                }
                +hbox {
                    left = 0
                    top = 50%
                    width = 100%
                    height = 50%
                    + image { 
                        file = "first_os_logo.png"
                        left = 4%
                        top = 4%
                        width = 92%
                        height = 92%
                    }
                }
            }
            +vbox {
                left = 0
                top = 66%
                width = 100%
                height = 33%
            }
        }
       +hbox {
            left = 0
            top = 50%
            width = 100%
            height = 25%
        }
        +hbox {
            left = 0
            top = 75%
            width = 100%
            height = 25%
        }
}
+ vbox {
        left = 50%
        top = 0
        width = 25%
        height = 100%
        +hbox {
            left = 0
            top = 0
            width = 100%
            height = 25%
        }
        +hbox {
            left = 0
            top = 25%
            width = 100%
            height = 25%
            +vbox {
                left = 0
                top = 0
                width = 100%
                height = 33%
            }
            +vbox {
                left = 0
                top = 33%
                width = 100%
                height = 33%
                + label { 
                    text = "1."
                    left = 0
                    top = 4%
                    width = 96%
                    height = 92%
                 }
                
            }
            +vbox {
                left = 0
                top = 66%
                width = 100%
                height = 33%
            }
        }
       +hbox {
            left = 0
            top = 50%
            width = 100%
            height = 25%
        }
        +hbox {
            left = 0
            top = 75%
            width = 100%
            height = 25%
        }
}
+ vbox {
        left = 75%
        top = 0
        width = 25%
        height = 100%
}

... etc , as you see a nested mess , but if nesting has no limit this should exactly work as intended. Screen size independent and properly aligned ,