4 ms·

I've been wondering how an OS draws a high-quality GUI. I've don't bare metal development and drawn simple graphics with a linear frame buffer, but for a UI li

I've been wondering how an OS draws a high-quality GUI. I've don't bare metal development and drawn simple graphics with a linear frame buffer, but for a UI like this or Windows, I'm wondering how the images that represent the UI components are generated. I don't see any png files for window borders, but I do see code for setting pixels to the correct color for a theme. Are UI components in an OS usually programmed and not created in an image editor and then tiled?

TkTech 3y ago
> Are UI components in an OS usually programmed and not created in an image editor and then tiled? These days, it's almost always vector graphics. Used to be simple bitmaps. This OS in particular is using vector graphics.
cnity 3y ago
Good observation: the link above specifically calls out: > The user interface is completely vector-based So these are all descriptions of how to draw the UI, as opposed to using raster images.
pmarreck 3y ago
in case you've somehow missed this concept until now: https://en.wikipedia.org/wiki/Vector_graphics https://en.wikipedia.org/wiki/Vector_graphics
phendrenad2 3y ago
These days it's mostly hardware-accelerated (OpenGL) shaders.
signaru 3y ago
If starting from scratch, PNG files may actually be more complex, since decoding is needed. On the other hand, once a drawing API is available, it is easier to map some form of vector graphics encoding which calls corresponding drawing instructions. At the same time, this would also solve scaling issues and the vector graphics assets also normally takes far less space.
- TkTech 3y ago
  PNG files are much, much more complex. Although you can slim it down quite a bit, libpng16.so.16.40.0 alone is 229.9KiB. The entire Kernel.esx of Essence is just 843.1KiB.
  - smokel 3y ago
    PNG decoding is little more than an implementation of DEFLATE and handling of the delta encoding. For your own OS you most likely do not have to be feature complete. As an example, picoPNG [1] decodes most .png images, and is only ~500 lines of beautiful C++ code. For most practical purposes, you can probably get away with much less. [1] https://lodev.org/lodepng/ https://lodev.org/lodepng/

TkTech 3y ago

> Are UI components in an OS usually programmed and not created in an image editor and then tiled? These days, it's almost always vector graphics. Used to be simple bitmaps. This OS in particular is using vector graphics.

cnity 3y ago

Good observation: the link above specifically calls out: > The user interface is completely vector-based So these are all descriptions of how to draw the UI, as opposed to using raster images.

pmarreck 3y ago

in case you've somehow missed this concept until now: https://en.wikipedia.org/wiki/Vector_graphics https://en.wikipedia.org/wiki/Vector_graphics

phendrenad2 3y ago

These days it's mostly hardware-accelerated (OpenGL) shaders.

signaru 3y ago

If starting from scratch, PNG files may actually be more complex, since decoding is needed. On the other hand, once a drawing API is available, it is easier to map some form of vector graphics encoding which calls corresponding drawing instructions. At the same time, this would also solve scaling issues and the vector graphics assets also normally takes far less space.

TkTech 3y ago
PNG files are much, much more complex. Although you can slim it down quite a bit, libpng16.so.16.40.0 alone is 229.9KiB. The entire Kernel.esx of Essence is just 843.1KiB.
- smokel 3y ago
  PNG decoding is little more than an implementation of DEFLATE and handling of the delta encoding. For your own OS you most likely do not have to be feature complete. As an example, picoPNG [1] decodes most .png images, and is only ~500 lines of beautiful C++ code. For most practical purposes, you can probably get away with much less. [1] https://lodev.org/lodepng/ https://lodev.org/lodepng/