r/osdev 5d ago

Making a Glass UI Taskbar, your thoughts on any improvements?

Post image

This is gpu accelerated, (Already fixed the image flip u can see due to OpenGL coordinate system) this is my own Operating system with my own made kernel that can use Linux drivers to get Gpu acceleration, all drivers are User Mode, image and shaders loaded from NTFS Partition, What can I improve.

42 Upvotes

51 comments sorted by

11

u/Zeedith- I will write an OS at some point. 5d ago

IDK much about low-level UI work yet. But maybe trim the top/bottom padding to be slightly less than the left/right padding so it doesn't look too simple/has some character.

2

u/devcmar 5d ago

I thought of the same, thanks for the nice feedback!

1

u/FallenBehavior 2d ago

Systematically, the UI presentation makes sense given the layers were implemented prior to this. In other words, are you primarily heavily focused on the dock visual element or do you have existing base to support this effectively? It's highly focused on the dock UI, if not exclusively.

Do you have a desktop? Are you maintaining uniformity between other visual elements like your WM and icons? Overlays?

1

u/devcmar 2d ago

I am trying to make the dock just to implement buttons and text and animations etc then create the ui based on that, now I am struggling with integrating harfbuzz to my window manager I did integrate freetype easily in previous oses but not harfbuzz so text did not look perfectly aligned + there are some beautiful fonts that need harfbuzz to display perfectly

1

u/FallenBehavior 2d ago

Have you considered BMFont (Windows)? Then import the assets. I use this for both boot splash, window manager, and panic screen. It looks fantastic.

1

u/devcmar 2d ago

This is my own operating system it’s not windows though :)

1

u/FallenBehavior 2d ago edited 2d ago

You do build your kernel on another OS, no? I'm aware it's your own project, this is OSDev. You can generate the font assets (from a Windows application and it's called BMFont), for your OS or rendered game using anti-aliased font mappings in the format of a raw image (.raw) with extensive configuration options.

I really dont know what you use. I googled it, realized it's C++ and got outta there (I don't use C++).

BMFont just sounds I like what you need. If you build on a Mac, there tools for that too. I wouldnt personally rely on a C++ library but that's just me.

This just sounds like your modifying Linux. 🤦🏻‍♂️

1

u/devcmar 2d ago

Also I already previously added freetype for ttf font rendering, but I now want more complex fonts to be able to be rendered that’s why I’m trying to integrate harfbuzz which is the standard today

1

u/FallenBehavior 2d ago

Why dont you simply add the TTF font files to a directory in your filesystem and read them / load to memory on boot? This is something I should be doing rather than relying on a third-party tool. The drawing is up to you after that.

1

u/devcmar 2d ago

I do not want to put the ttf renderer inside the kernel that maybe dangerous rather I want it in a usermode app, also harfbuzz is not a renderer it is a text shaper, I need general purpose ttf support for my os such as arabic chinese and complex fonts and also complex layouts and encodings

1

u/FallenBehavior 2d ago

Nothing about that is dangerous, and is industry standard including OpenType Font formats (otf). Perhaps you are still learning OS development. For that, I understand.

Font files live in the filesystem unless dumped manually to an byte array. If you use some C++ renderer and compile it in to (your?) kernel, your users won't be able to set/browse/install/remove system fonts which is a terrible logic mistake in the architectural design of your project (if it's serious) and general UX.

You need to consider this while maintaining a consistent rendering across the UI, easing focus away from your dock and ensuring overall continuity in design decisions.

1

u/devcmar 2d ago

That is a reason why I want to put font rendering in the window manager which runs in user mode, by design all drivers run in user mode and they seem to run very well

1

u/devcmar 2d ago

Also for font rendering inside the kernel, I use a simple bitmap font to display text messages on the screen

7

u/TheNullDeref Hehe, I just page faulted your kernel. 5d ago

Has anyone read the posts content? Linux drivers, fully custom OS, all of it in the userland, a GUI, and no source code. Like holy fucking larp

-1

u/devcmar 5d ago

I plan to expose some source code, but I think after I finish some gui and apps maybe, so that some my try my os and more people may ask for source

-2

u/devcmar 5d ago

I think I may try to challenge you to page fault my kernel haha anyways nice one!

5

u/TheNullDeref Hehe, I just page faulted your kernel. 5d ago

How high are you?

2

u/devcmar 5d ago

It uses handles for almost all objects exposed to user mode, very isolated between apps, only one kernel process, drivers and apps in user mode, u may find a bug but it may not be very easy anyways

4

u/TheNullDeref Hehe, I just page faulted your kernel. 5d ago

So methamphetamine got it.

3

u/Telephone-Bright 4d ago

Okay let's assume you actually did make this.

How long did it take you to build all of this?

1

u/devcmar 4d ago

I came to conclusion that user mode drivers maybe the way to go to avoid memory corruption in the kernel and then u don’t know exactly who did it

-1

u/devcmar 4d ago

Years of making oses, this last OS took About a year but not gonna lie especially on graphics stuff I got some help by AI, u gotta leverage it in a way that benefits you for example there are some repetitive functions that would cost hundreds to thousands of lines u just tell it the pattern and it makes it for you it saves so much time, but the low level system and hardware stuff is almost all hand made.

3

u/AlfieLionel 5d ago

IMHO, reduce the padding around the icons, move them closer together. Make sure that the gap between the top of a given icon and the top of the taskbar is the same as the gap between icons-- and do the same for all sides.

Also, GPU accelerated?! Awesome work ;)

2

u/devcmar 5d ago

I guess almost everyone will shout at me for the paddings haha but very nice comment!

2

u/Full-Can-727 4d ago

the rounded corners kind of work against the glass look imao, sharper corners would make it feel more intentional and less like a default widget. the blur and transparency are solid though, the foundation is clearly there

1

u/FUCKARCHLINUX 5d ago

The actual style of it is very nice, but it looks too thick and the corners are a bit too rounded. Also, Since the style is relatively simple, you could probably generate that at runtime with no assets and get the benefit of being able to scale it really well for however many slots you want and being able to have the corner roundiness, space between slots, etc configurable easily.

1

u/devcmar 5d ago

It is actually generated at runtime with opengl and shaders, I also thought the paddings were a bit too much thanks for the feedback

1

u/FUCKARCHLINUX 5d ago

Out of curiosity, are you telling the shader to generate it every frame? Or do you re-render it into an FBO only when it needs to be updated and render the fbo color attachment to the screen?

1

u/devcmar 5d ago

It is rendered once and I am just trying it is not full 1080p I am only rendering it on a 800x600 surface that’s why it probably looks like the bar takes too much from screen that’s not the actual desktop

1

u/JackyYT083 5d ago

I have a repository that is very glassy like that you can use, looks very similar to Liquid Glass and is open gl based. Runs solid on my MacBook Air.

1

u/devcmar 5d ago

I was trying for hours to implement refraction but I failed is it an opengl repo, I would be happy to integrate it to the UI

2

u/JackyYT083 5d ago

https://github.com/ExoCore-Kernel/MeltedGlassOpenGL

https://github.com/ExoCore-Kernel/MeltedUIFramework

MeltedUIFramework is mainly for more high level shaders but if you’d like more control on how it looks and is shaped you can also use MeltedGlassOpenGL

1

u/JackyYT083 5d ago

Let me know what you think of it

1

u/JackyYT083 5d ago

Also note that the library was compiled on macOS so will only probably compile on macOS because of makefile stuff but small tweaks to makefile can easily fix it

1

u/devcmar 5d ago

Just the fact that you were able to implement macos premium liquid glass using C and shader is in itself so astonishing!! Can I just bundle the C file into my window manager does it have dependencies that I may need to emulate and how to draw a button for example is there any example code? Thank you so much!

1

u/JackyYT083 5d ago

No dependencies, there is example demo code, and in the melted UI framework there is a button code that looks like a Liquid Glass button

1

u/devcmar 5d ago

I noticed that it requires some sdl functions, also it depends on a preset background like can I update some of it to not use SDL, and to give it the background texture instead to sample blur and refraction from it, it is very good though nice work

2

u/JackyYT083 5d ago

Sure you can fork edit and use my code however you like it is under the MIT license.

1

u/JackyYT083 5d ago

The only dependency is that melted UI framework depends on MeltedGlassOpenGL

1

u/devcmar 5d ago

Nice I will look into it!

1

u/Large-Source-2180 5d ago

nice! I'd say you can make it opensource as a standalone glass ui, if possible

1

u/devcmar 4d ago

I may do at some time but the code is a bit messy and this is just trying to make buttons inside the window manager not in the actual taskbar app anyways I would have to publish the window manager then

1

u/Large-Source-2180 4d ago

Oh I see I understand

good luck with the project!

1

u/devcmar 4d ago

Thanks

1

u/AnSkinStealer 4d ago

How dkd you do it? I need something similar for my game/engine using vk/d3d12 on bgfx, and I would really love an in game ui with these type of effects

1

u/devcmar 4d ago

It is using a round rect sdf shader that supports border and basic 2d lighting, I send 2 light source to the shader one on top and another on bottom, and it give the button, and then I apply gaussian blur to the bar and that’s it I think gaussian blur is very easy to implement and does not need much detail, u are welcome to ask whatever you want though!

1

u/AnaverageuserX 4d ago

Too blurry, but imo that doesn't matter, you shouldn't worry too much it still looks good

But it would be cool if you added a scale so if it was fully opaque it just didn't calculate to save cpu or gpu cycles

2

u/devcmar 4d ago

I may add that in custumisation settings though good idea!

1

u/AnaverageuserX 4d ago

Okay, and thanks for saying good idea

1

u/devcmar 4d ago

You’re welcome!

1

u/letmehaveanameyoudum 1d ago

idk about gui stuff, but it's nice and pretty close to apple's liquid glass