Create window decorations #1

New Issue

seeseemelk · 2025-12-19T12:58:27+01:00

seeseemelk commented

2025-12-19 12:58:27 +01:00

What I need

I need 9-patches for window decorations. A 9-patch is an image that can be drawn at any size. The edges will be kept at their original sizes, while the insides get stretched to accommodate the size.
In DiceOS, the edges and insides are indicated with a single pixel line above and to the left of the image. White indicates that that region will be kept as is, black indicates that it will be stretched. See 1ef39458ce/src/main/resources/system/menubar.png as an example.

For the border, three images are needed:

A "thin" border that has no space for close, maximize, and minimize buttons (a.k.a. window controls). The width of the border should be the same all around the window. See reference 1.
A "thick" top border. This will have space for these buttons, but not actually contain them. This border will be drawn right above the thin border for windows that need them. As we want the inside to have a texture like wood or stone, we can't use just a 9-patch. A 9-patch would stretch the texture, even though we need it to be tiled. Therefore, the background area should be transparent. Semi-transparency is fine to create gradients. See reference 2.
A small (roughly 16x16) texture of stone and wood. These textures should tile seamlessly. They will be drawn first across the entire length of the window, and then the thick border will be drawn atop of it. This will give a nice tiling texture to the window decoration. See reference 4, which has such a texture.

Why I want it this way

Why do I want the thick and thin border separately? In Haiku (a modern continuation of BeOS), it's possible to tab any windows together. Given the small resolution DiceOS will run at, I think this will be very useful. But that means that the thick window border at the top will not stretch across the entire width of the window (see reference 3 for what BeOS windows look like). Having them separate makes this easier. In addition, the thin borders can maybe be used around splash screens, drop down menus, and other things that don't need all the window controls.

Sizing

These sizings are not fixed in stone, but are more of a guideline.

Thin border: 4 pixels on all four sides. As its a 9-patch, the actual size of the image doesn't matter. It will get stretch or compressed anyway.
Thick border: at least 12 pixels high, to accommodate the window title text. Width doesn't matter as it's a 9-patch.
Stone/wood texture: 16x16 or maybe 32x32, if it's possible to convey a wood texture in that.

References

Reference 1

Reference 2

Reference 3

Reference 4

# What I need I need 9-patches for window decorations. A 9-patch is an image that can be drawn at any size. The edges will be kept at their original sizes, while the insides get stretched to accommodate the size. In DiceOS, the edges and insides are indicated with a single pixel line above and to the left of the image. White indicates that that region will be kept as is, black indicates that it will be stretched. See https://gitea.seeseepuff.be/seeseemelk/diceos/src/commit/1ef39458cea8268fd9475dde8b58c0baac287c6f/src/main/resources/system/menubar.png as an example. For the border, three images are needed: - A "thin" border that has no space for close, maximize, and minimize buttons (a.k.a. window controls). The width of the border should be the same all around the window. See reference 1. - A "thick" top border. This will have space for these buttons, but not actually contain them. This border will be drawn right above the thin border for windows that need them. As we want the inside to have a texture like wood or stone, we can't use just a 9-patch. A 9-patch would stretch the texture, even though we need it to be tiled. Therefore, the background area should be transparent. Semi-transparency is fine to create gradients. See reference 2. - A small (roughly 16x16) texture of stone and wood. These textures should tile seamlessly. They will be drawn first across the entire length of the window, and then the thick border will be drawn atop of it. This will give a nice tiling texture to the window decoration. See reference 4, which has such a texture. # Why I want it this way Why do I want the thick and thin border separately? In Haiku (a modern continuation of BeOS), it's possible to tab any windows together. Given the small resolution DiceOS will run at, I think this will be very useful. But that means that the thick window border at the top will not stretch across the entire width of the window (see reference 3 for what BeOS windows look like). Having them separate makes this easier. In addition, the thin borders can maybe be used around splash screens, drop down menus, and other things that don't need all the window controls. # Sizing These sizings are not fixed in stone, but are more of a guideline. - Thin border: 4 pixels on all four sides. As its a 9-patch, the actual size of the image doesn't matter. It will get stretch or compressed anyway. - Thick border: at least 12 pixels high, to accommodate the window title text. Width doesn't matter as it's a 9-patch. - Stone/wood texture: 16x16 or maybe 32x32, if it's possible to convey a wood texture in that. # References ## Reference 1 ![image.png](/attachments/789899c0-0773-4d56-b5aa-f90185ed80e7) ## Reference 2 ![image.png](/attachments/632a5c7e-08a7-4ed9-9a9d-5f1cc62704ee) ## Reference 3 ![image.png](/attachments/842c7b52-a733-42ce-82f4-ce0744249fd1) ## Reference 4 ![image.png](/attachments/43f78ab5-ac31-4d9b-9340-e2505a41f5a5)

image.png

16 KiB

image.png

2.6 KiB

image.png

2.5 KiB

image.png

18 KiB

Sign in to join this conversation.