Haiku UI look patch

Forum thread started by admin on Mon, 2008-12-22 12:01

Inspired by this mockup, I started to implement something similar as code. Modifying the app_server and InterfaceKit code slightly, I came to the following intermediate result:

The patch is not quite finished, I just changed the drawing code of a few controls (window decorations, menus, scroll bars, buttons), and the look is not perfect yet, but I thought I should gather some feedback from you before I continue coding. The patch (against Haiku r28819) can be found here.

Comments

Re: Haiku UI look patch

Cool - I liked your look and are looking forward to enjoying it again ;-) maybe it provides some more inspiration for certain people who love plans which work *grin*

Btw you should also post such stuff to the mailing list ;) might get more attention of the developers there ...

Re: Haiku UI look patch

As Stephan Aßmus committed a revised window decoration look to SVN trunk (this is the "new look" mentioned before in this thread), the UI patch did not apply cleanly anymore. Thus, I have now updated the patch to not include any changes to the window decorator. (The decoration look in trunk is very similar to the one formerly part of this patch.)

The updated patch can be found at the usual location.

Re: Haiku UI look patch

yep... matrix reloaded 1:48

i believe it was trinity hacking the auxiliary power supply :-)

Re: Haiku UI look patch

So. how you like the new look that made it to the trunk?

Re: Haiku UI look patch

Quote:

So. how you like the new look that made it to the trunk?

I haven't seen it, would someone mind posting some pictures?

Thanks,

Re: Haiku UI look patch

It'll be in the next pre alpha image in a few days.

Re: Haiku UI look patch

yes is matrix 2 jej,

Re: Haiku UI look patch

It is a shot from the matrix... I don't remember that scene though is doesn't seem photoshoped... guess I have to watch it again to check :-)

Re: Haiku UI look patch

the theme who most like to me ever was a theme for a very old version of gnome,green LCD, flat and green as the very old advanced LCD devices, without the more or less flat note sudden changes of texture that I think a more reassuring by a theme.
no mean what my sugest are for do haiku green what i mean is the flat or the unneeded changes sharp on texture, more simply like the color of tab-bars...where all are soft transitions..minimalism.
sorry my english if this are really englis n_n

Re: Haiku UI look patch

Re: Haiku UI look patch

skarmiglione wrote:

or something like this too jej

http://nmap.org/images/matrix/trinity-nmapscreen-hd-crop-1200x728.jpg

1st April fool in advance ? I hope so...
:)

Re: Haiku UI look patch

On the subject of theming, I'm against its inclusion in Haiku. Mac OS X has zero theming support, yet considering the size of the userbase, there are few complaints. I'd wager this is because a) the default theme is so good b) people that really care about theming have no problem whatsoever with downloading a third party theming application. Theming to me seems to be more derived from the Linux everything-and-the-kitchen-sink mentality than the simplicity-is-paramount approach of MacOS and BeOS. Theming is a serious blow to consistency (how many Linux distributions or desktops have you seen bin the default theme every couple of releases rather than spend years refining and perfecting one?) and offers very little in return as far as usability is concerned. This isn't to say I don't think there should be UI options for accessibility though.

As far as Denis' refining and perfecting of the current Haiku interface goes, I'm liking the progress being made. Nice subtle improvements which should modernise the UI yet age gracefully. Tabs have got to be the biggest improvement, looking far, far nicer than they did previously. Keep up the good work!

Re: Haiku UI look patch

Actually, I don't really like the theme in Mac OS X. If I wanted to use OS X, not being able to change the theme would be a real minus. While an OS should definitely try to have good defaults, it should not be hostile against giving the users options. I don't know how big OS X's user base is, but it doesn't make me like it more. A third-party application for theming? It could work, but it makes me think of all the third-party theming applications for Windows.

About Linux: there are many areas where the everything-and-the-kitchen-sink mentality hurts it, like several different incompatible GUI toolkits (Qt, GTK, FLTK..), a big sound mess, the different desktop environments with incompatible icon themes, incompatible drag-and-drop, etc. But there are also other things that I actually consider necessary for a good desktop. Being able to change the theme is one of them. There are times when limiting the options will make users feel trapped.

About skinning and inconsistency: I don't really like "skinning" that much either. I don't want every application to have its own set of widgets etc.; consistency is good. And if we ever port any non-native GUI toolkit, then it must be integrated so that applications that use it will look like native applications (look at Qt in Windows).

Re: Haiku UI look patch

Hi there! That looks way better than the usual look (Which looked good 10 years ago when it didn't have to compete with OS X, vista and X-managers.

A few things though: (IMO)
BRadiobutton looks like it's disabled with the same grey color as the disabled BCheckBox.

BButton still need a little work. Can't put my finger on it (still its better than the default/origin look).

BPopupmenu should be redone from the ground up. I never liked them. (OS X managed to make them look good though).

If you like to add more usability to Haiku/Beos why not add "Bread crumbs" to tracker?
http://en.wikipedia.org/wiki/Breadcrumb_(navigation)

I'm eager to see your work on my desktop in the future =)
Thanks

Re: Haiku UI look patch

<quoted from="Mikael Konradsson" when="2009-01-12 09:02" mid="10631">
If you like to add more usability to Haiku/Beos why not add "Bread crumbs" to tracker
</quoted>

actually BeOS had it in tracker

http://betips.net/1997/09/09/visualize-your-path/

and Haiku has too, but now you can browse the parent folders too...

Re: Haiku UI look patch

I'd rather have a shelf: http://en.wikipedia.org/wiki/Shelf_(computing)

Re: Haiku UI look patch

I don't remeber which but I used a replacement for Norton Commander in Windows (Salamander?) a few years ago. In that one you clicked on the text separated with "\" in the tracker navigation. Windows Vista has this and I think its very useful.

Re: Haiku UI look patch

If bread crumbs are to be added, then it must be done well! If you've ever used a GTK+ program, you should have noticed the incredibly annoying bread crumb navigation in the file dialogue. So, either make it very well, or make it optional.

Re: Haiku UI look patch

Humm ... i like the idea of a theme-friendly Haiku, where i really don't like the idea that a software can have its own style. That's where i like the BeOS GUI consistance, and where i hate the way all sharewares can be totally different in Windows ! (Even all Microsoft softwares have no GUI guideline between each others !! :-X )

Re: Haiku UI look patch

While the new version does look a little more consistent, will there be something for those of us who like roundness?

Re: Haiku UI look patch

I am tempted very much to incorporate the patch in a more generic way. I would like to introduce a (private for the time being) InterfaceKit class which would be used by all other controls to delegate theme related drawing. Then it can be changed all in one place, and would be plugin friendly for the future. I would like to implement it in such a way that third party applications can (once it's official) use this for their own custom controls to still achieve a themed look for things like "frames" and "background" and this class could also handle other stuff, like default spacings for controls or between list items and so on. No idea when I will get around to doing this though.

Re: Haiku UI look patch

I have uploaded another update of the patch. It is just a minor update that takes some small suggestions made in this thread (mostly Stephan's) - for more I don't have time currently, unfortunately.

Changes include:

* The button corners are not round anymore, as many noted this to be inconsistent with the rest of the look.

* The window resize handles now look as if they are part of the window frame rather than the window content, like in the current look.

* The background of scrollbars is now darker, making it and the scroll thumb more distinguishable. The thumb now also has a small shadow like in the current style.

* The background of inactive tabs is now a slight bit lighter, with a less strong gradient.

* Some other small tweaks.

Below is a screenshot of the Playground demo which illustrates most of the changes:

The patch can be found at the usual location (as with the last update, the previous version of the patch has been overwritten).

Re: Haiku UI look patch

Very good, I'd change the checkbox and radio buttons, they look as if disabled in this screenshot. I'd add those dots or something else you have on the resize handle on to the scrollbars to indicate that they are grabable and can be moved. The handle looks very 'flat' I'd change that too and I'd change those black arrow indicators, make them sharper.

Re: Haiku UI look patch

Hi Denis,

the UI with your updated patch looks very good, there are many aspects I like about it. Here are some things I would improve:

Window border:

* Especially the in-active window decor has a white line in the frame which I don't like, especially visible underneath the tab.

* The decorator zoom button has a slightly darker background where the regular tab background should be visible.

* I would completely switch back to the old resize knob look. You can apply a gradient, but I think the button should blend into the rest of the border, currently, there is a white separating line which I don't like at all.

* The single line decorator mode should be made darker again, there are problems with apps that rely on the color, like LaunchBox. This may affect menus, but I think it would be ok.

GUI:

* The selector in the menus could look better without darker border line. At least I don't like that the border is inset one pixel on the left and the right, it should fall on the same pixels as the window decor.

* Inactive buttons are not distinguishable. This should be much easier visible. Maybe this applies to other controls as well, have not checked.

* Active scrollbars should have a darker background (behind the thumb). Maybe put back the one pixel shadow line below/beside the thumb.

* The buttons in general don't look bad, but I am not 100% happy either. For one thing, there is a slightly too dark background inside the round corners. And the "default button" does not look slick. The double frame somehow does not convince me.

Otherwise, very nice and tasteful work! Looking forward to your improvements.

Best regards,
-Stephan

Re: Haiku UI look patch

I agree with most of what Stephan said, but I particularly don't like the buttons: the slightly rounded corners don't fit to any other UI element, making the whole appearance rather inconsistent. They should be either square, or all other elements should be rounded as well.

The space above the inactive tabs isn't ideal, but I don't have a good idea on how to improve upon it.

But anyway, I think you're on the right way, and I'm looking forward for further improvements.

Round vs rectangular Re: Haiku UI look patch

I agree with Axel, if you compare R5 and Dano screenshots you'll see well made consistent use of rectangular vs rounded. Zeta OTOH uses gradients in the menu bar which make it seem rounded and stand out with the old-R5-look which looks IMHO ugly.

One argument I have with the default Haiku look is that buttons are too flat and sometimes don't look like buttons at all.

Re: Round vs rectangular Re: Haiku UI look patch

I like Artur Wyszynski's concept very much, at least a few elements from that one should be used.

Re: Haiku UI look patch

Not at all. We don't use mailing lists for more privacy and we don't forget they are public through the archives.

You may be using forums to find information, but we use mailing lists to communicate. To use a forum for communication is an additional hassle. I and other devs don't have the time at all to go look if someone replied. So that rules out using forums directly. Instead, most forums will send notification *e-mail* when someone replied to a post. Note the inefficiency. You already get an e-mail, now you have to go see the actual communication. We have no time for this. We have barely the time to read all the e-mails, let alone go look in various forums or forum threads. So mailing lists it is. It has nothing to do with privacy, but all to do with efficient communication.

Re: Haiku UI look patch

Edit: actually now I look at the 1st screenshot I like the darker gray menu but if it also had the z-snake http://www.osnews.com/img/632/zsnake.png I'll die of happiness :-)

Yes, I do like the z-snake. Maybe I like its colour in the screenshot even more!

Edit: Also the brownish colour of the close and maximize buttons on the yellow tabs are very nice, they make the GUI appear so much warmer than the default. That's what I always liked about the BeOS GUI, warm, joyful colours and cleanliness, simplicity.

Re: Haiku UI look patch

Yes, I also like the warm colors in the tab buttons. Those are nice. There are some improvements possible on the zoom button. It has some strange slightly darker corners where the background should be.

Re: Haiku UI look patch

Very nice. May I suggest a few things?
I would:
Add dots like in the lower right resize handle on the scroll bar so that it looks more grabable.
Change blue colour in the menu selection and elsewhere to the blue which is in the default desktop background.
Gradients are nice but don't make things too round with it eg. going from light to dark yes but don't go back to light. The roundness doesn't look bad per se but not in combination with the R5 straight window borders and tab.
Change those menu arrows to something smoother like R5, it is not a button so it should have a more passive colour melting more with the background.

Well done, very subtle, very nice.

Re: Haiku UI look patch

Sorry I haven't shown any further progress yet, I'm currently pretty busy with other things. I promise, though, that I will get back to this as soon as possible.

@Artur Wyszynski: Maybe we should collaborate in creating the theme ;)

Re: Haiku UI look patch

themeable version of haiku soon?

Re: Haiku UI look patch

At least the groundwork for theming seems to be laid, see http://www.haiku-os.org/blog/mmu_man/2008-01-25/the_bowels_of_the_theme_...

For everyone hating skinned applications like me, it doesn't mean that every app can draw every widget willy nilly. You are the one changing the look of the whole system. Or, like me, not.

Re: Haiku UI look patch

I think we will have to wait for a while.
Remember the first version of Haiku wasn't even released yet.

Re: Haiku UI look patch

I think I would make the gradient blue a bit darker, now that you've change the text to white (on mouse-over). It seems a bit hard to read with light text and light gradient.

edit: Are you planning on rounding the corners a bit? Just a tad maybe, or is it to much work?

Re: Haiku UI look patch

Hey! Well I didn't know you could do all this with Haiku (even though the fonts are smoothed, but not like I was thinking). I'm totally new to the BE way of things and must admit it's been lots of adaptation. When I said font smoothing I meant like mac OS. So yes, that blurry way of smoothing fonts :)

I personally love the OS X interface, and I think a bit of blurryness to fonts gives a very clean look. Anyway, Haiku would really benefit from some sort of manual and lots of help (end-user). Coming from the Mac/Linux side, it's hard to find stuff intuitively. Is there any help Wiki or project going on. Like a total guide to BeOS/Haiku. If so, this should really be on the Desktop.

The current desktop help isn't really a guide to Haiku, and I can't access it anyway because firefox crashes, hehe.

All this is off topic, so I'll stop now. Just my 10 cents for today.

Socapex_2K

Re: Haiku UI look patch

Socapex_2K wrote:

The current desktop help isn't really a guide to Haiku, and I can't access it anyway because firefox crashes, hehe.

Would you mind opening a new thread about what's still missing from the User Guide in your opinion? We'd like to improve it continuously and knowing what new users miss or expect would help a lot!

Also, I'll ask our web team if we could put the guide online. I think it's in a good enough condition to make it available for everyone outside of a Haiku installation.

Regards,
Humdinger

Re: Haiku UI look patch

Of course I will. It seems that there is a user guide manual written (reading the devel list on translation).

Cheers,
Socapex_2K

Re: Haiku UI look patch

What Haiku would need for a real slick look is some font smoothing in the menus (GUI). That would help alot overall.

Still your patch looks great, I'll be trying as soon as I get back to my haiku computer. Cheers.

Re: Haiku UI look patch

What do you mean? Haiku's fonts are antialiased by default. If you want, you can even compile it with subpixel font rendering endabled, making the fonts look even better.

Re: Haiku UI look patch

Denise Purple wrote:

What do you mean? Haiku's fonts are antialiased by default. If you want, you can even compile it with subpixel font rendering endabled, making the fonts look even better.

And you can even change the hinting to make them blurry like OS X - Haiku has it all!

Re: Haiku UI look patch

umccullough wrote:
Denise Purple wrote:

What do you mean? Haiku's fonts are antialiased by default. If you want, you can even compile it with subpixel font rendering endabled, making the fonts look even better.

And you can even change the hinting to make them blurry like OS X - Haiku has it all!

To this day, I still do not understand the claims that OS X font antialiasing is blurry. It looks crystal clear to me and always has... At any rate, OS X antialiasing is intended to make text look exactly how it would if it the screen you're currently looking at was printed on a sheet of paper. In other words, it's there to improve the WYSIWYG factor of every application on the system that's capable of printing. I personally think it feels a bit more natural than SmoothType and other font smoothing systems since reading webpages and long documents feels more like reading a book.

Re: Haiku UI look patch

Wow! The update looks great. I will come back and complain soon enough when I find something you can improve in a certain way, but for now, I just think it's great. I am compiling Haiku with your patch right now!

Re: Haiku UI look patch

Artur, that's just great. I like you new style very much. Rounded rects everywhere, and yellow checkboxes / radio buttons / buttons. Brilliant.

Re: Haiku UI look patch

@Jim Saxton: Copy the patch to your Haiku directory and run from there on the command-line:

patch -p0 < haiku-refreshed-ui.patch

The recompile. Be warned, the patch is still rough around the edges, you might see some visual glitches at places. If you want to remove the patch again, type:

svn revert

Re: Haiku UI look patch

i am waiting for this in the main svn :) ancien, plis no later.
but remember, ever should be able the option to back to the classic style, for the people who want remeber beos or simply for the performance.
Thanks and congrats.

Re: Haiku UI look patch

I have continued the work on the patch. A new look for checkboxes, radio buttons and tabs are now implemented, and a few other small things changed (for instance the window title buttons, which were criticized of being to dark in some comments). The (intermediate) result can be seen in the following images:



I hope you like the changes. The updated patch can be found here (this is the same link as in the initial post; I replaced the first patch).