Flat Decorator and ControlLook

I feel like the general consensus is that you cannot draw rounded corners in the decorators with the current app_server, though I know people would like it.

BeOS Dano and Zeta had an app_server which supported non-rectangular windows and apparently it worked pretty well, even without a compositor or GPU acceleration. One thing I know about it is the algorithm involved a data structure called a skip list, I suspect for the mouse click hit detection (figuring out what window was clicked when some are not rectangular becomes quite a bit more complicated.) Some other people here may know more about it.

Anyhow if you try to draw a decorator now with rounded top corners there probably will be drawing artifacts and the mouse hit detection in the rounded part won’t work right (though it will be a tiny area.) Fixing this is probably not that hard but so far is has not been a critical thing for Haiku.

Also I must say I kind of like how the flat theme is looking, it definitely looks more modern though also maybe a bit harder to use (as most flat UIs are: what is clickable?) I like the dark theme colors a lot, though I think the scrollbar arrows should not be black. I would also darken the shade of yellow for the tabs and focus ring into more of an orange. Lastly the Deskbar leaf looks bad with the dark background because of the gradient. I think the maple leaf like the favicon for this site would be better there, though I think you have to recompile Deskbar to change it.

1 Like

Also on this general topic I have had an idea for a while to make a special decorator and control look implementation that is based on BPicture or something like that, with a GUI to use for “drawing” the various components, hopefully with some live updating like used for color changing. It would make it much, much easier to experiment with decorators and control looks and allow normal people to make some themes. Maybe those themes could even be saved and shared as flattened BMessages.

I think it should be possible and I was hoping I could hack something up but I have not had time. Maybe someone else can take the idea and make it happen. If not I will work on it eventually :wink:

1 Like

At least PhOSDecorator by @looncraz used to do that in 2010. However, it got broke after Stack and Tile was merged into app_server and looncraz never fixed it again which is a shame.

8 Likes

That looks neat! Is the source code for it still around somewhere?

1 Like

I don’t think the source was published for this one. It uses a complex BRegion with many rectangles around the corner to do something that looks rounded. As a result there is also no antialiasing, so it doesn’t look that great.

1 Like

I think that if we remove a few pixels, antialiasing will not be necessary… the change is very subtle. For example:

rounded

The problem is that i dont have idea how to do that. The source code of the @looncraz is lost?

1 Like

Update:

As @bitigchi sugested, srollbars arrows, combo indicator and shadows switch to light or dark color automatically depending of the control font color selected (the default decorator not support it, so i added):

screenshot3
screenshot2

I tried to make the buttons in the decorator as a ellipse, but some glitches appears and no looks good. Aparently the api is not too rich… i think it needs some work to accomplish interesting things. For example, it would be interesting that the framwork accept svg images for the buttons…

test

8 Likes

Split the rect yellow tab to 3 sections (left/middle/right). The middle is still a FillRect(). For the left section, the bottom 4/5 is also a BRect (so use FillRect), while for the top 1/5 use BView::FillArc(). Repeat for right section.

For a small performance gain, instead of FillArc(), pregenerate an array of line sizes and call StrokeLine() to raster fill the Arc.

This is suprisingly easy for a GPU accelerated shader program to do once the HW support becomes available … but thats a topic for another post.

I have an important question for all Decorator creators reading this: In your decorator’s code, do you provide your own versions of the Draw() and Draw(BRect updateRect) methods?

Hello @CodeforEvolution! No, Im not using anithing that not is in the DefaultDecorator.

1 Like

Its a good idea! I will try to do that!

Those flatter decorators and themes look really good. Maybe they could even be used as defaults post-R1. The dark theme in particular could be especially beneficial for those who prefers such looks. Also, easier on the eyes for some bad displays with severe light bleed (like mine).

Edit: Forgot to ask if these are available as HPKGs somewhere, so that others can try them out themselves.

1 Like

Have you thought about making the dark theme’s selection glow/shadow a darker or muted yellow instead of grey? It would at least give a distinctive colour to it that could fit it in with the BeOS/Haiku aesthetic.

Yes! its allready maked. The shadows ajust of the text color selected, for example:

screenshot1
if i select a yellow/orange color for the control texts, the shadows adjusts to it making more cohesive the UI.

My plan is that when the control and decorator are well polishead, make a pull request to the “haikuextras” package.

6 Likes

I generally prefer dark themes but often struggle with the contrast of scroll bars/thumbs. For example, QtCreator Haiku package has a dark theme but no option to modify scroll thumb colour, and its hard to use since it’s barely visible. My suggestion for your theme would be to enhance the scroll thumb visibility. Good luck.

1 Like

Looks like the tab has some pixel issue?
decorators_2

Hello @Begasus, you are right. Thats the border… i will try to correct.
Thanks @Zenja, I will keep that in mind.

1 Like

I’ve just installed your dark themes and they are quite neat.

However, I’m experiencing the same problem of dark text on dark background on folder windows, even on icon view mode.

Could you tell me how you fixed it because I was not able to find the option in the system color preference panel.

Thanks

Hello @xipehuz! Yes, its an issue that its reported to tracker, we need to be patients to somebody fix that.

For now, you can make the “/boot” folder as icon mode view (in tracker: window menu > icon view)… and start to navigate from this folder to others in list mode view. It worked for me (hrev544xx), if doesn’t try to restart tracker…

Thanks for your help.

it is still not working even after restarting Tracker and switching between different views (Icon, list, mini icons).

but it’s not a big deal as I can navigate the filesystem with a right click and from there the text is correctly displayed with the right color.

EDIT : Maybe it doesn’t work because I’m on beta2 Hrev 54154 and not on nightly ?