Suggestions in giving to my application a cool look

[SkripT]

Hi all, I'm creating an application that manages book images. I don't have much experinece creating GUI applications but I would like to obtain a good look for this app (it's for the final project of my career ). The application works like a wizard. I've been thinking in having the image of an open book as the background of the app with transparent color around it, so the app will mantain the book shape. In the left page of the book I will put a widget (with transparent background) that contains information about the current window in the wizard and on the right page I will put a widget with the controls (buttons, textedits, lineedits, ...) for working with this page. I've attached an example image that shows what I want to obtain. My questions are:
1) is it difficult to do?
2) Could you suggest me something to make it better or any other look?
3) Do you have any nice image of an open book that fits well in what I want to do?. I think that it's important that both pages have a rectangular shape so the widgets will fit better...

I will be very thankfull if you could give me some guides to obtain this look for my application or if you know of another application with a similar look

Thanks.

[zlatko]

IMHO It look good Have you will be use QFileDialog?

[SkripT]

IMHO It look good Have you will be use QFileDialog?

Thanks zlatko and yes I use it, but do you mean QDialog or QFileDialog?

[zlatko]

I mean QFileDialog for selecting file or folder...its better IMHO then type it in line edit

[SkripT]

I mean QFileDialog for selecting file or folder...its better IMHO then type it in line edit

Ok, yes the image that I show is just an example of the app look that I want to obtain, beside the lineedits there should be buttons conected to a slot where I should call QFileDialog No problem with that...

[Glitch]

SkripT,

Alrighty you can easily make this UI in Qt. You will be using masks to make non-rectangular widgets. Making you UI is an easier in Qt 4.1 and the following is Qt 4.1 based.

Basically you want a base dialog with an elaborate pixmap drawn on ground and a mask set to let the windowing system know what shape you would like to have. A mask is a 1bit deep pixmap (pixels can be on or off, 1 or 0). If you use a PNG with index transparency this will be done automatically or you can have Qt create on from your pixmap by trying to stip out the background.

The following of code off the top of my head so do not expect it to "just work" with a cut and paste.

You will subclass QDialog and in the resizeEvent you will do the following
1) Resize your background image
2) Call QBitmap bm = myPixmap.createHueristicMask(); // Not need if using PNG
2) If usiing PNG you could just do QBitmap bm(myPixmap)
3) call setMask(myPixmap)
4) Calulate how many pixels to "step in" to avoid the transparent space and the edges of the book and call setContentsMargins(int,int,int,int) with these values. This will allow you to use regular layouts.

In paintEvent:
1) Make a painter
2) call drawPixmap(... myPixmap);


That should get you a window that looks like the book. If using Qt 4.1 and above childern effectively recieve snapshots of the parent for a background for "true transparency". So you can just make an instance of the above class, create childern and layouts as you see fit and you should be well on your way.

If setContents marginis set correctly the toplevel layout of this book class will only allocate space defint by the readctangle "Widget1" + "Widget2" + Space in the middle. You can use two widgets for layout in your implementation, but since those blank container QWidgets will get snapshots for thier backgrounds that is a simple implementation detail.

--Justin Noel
justin@ics.com

[SkripT]

Thanks a lot Glitch, I will try it and I will comment the results....

EDIT: I think that I dont' understand how to fix the contents margins:

...If setContents marginis set correctly the toplevel layout of this book class will only allocate space defint by the readctangle "Widget1" + "Widget2" + Space in the middle. You can use two widgets for layout in your implementation, but since those blank container QWidgets will get snapshots for thier backgrounds that is a simple implementation detail.

Could you explain me it again, please?

[Glitch]

The concept is ULTRA nifty, but hard to get your brain around to start. Let take the example of a QGroupBox which uses this concept.

A group box starts out life a a blank widget. When a blank widget gets a layout that layout uses all available space. But....

A GroupBox has a frame drawn X pixels in from each side..widgets cannot appear in that area.... So one solution (the Qt3 way actually) is to have the layout have a margin that is X+Margin So the child widgets do not appear drawn over the frame..... but.....

A GroupBox also has a label so it needs to reverse a little extra space just on the top of the layout so that widgets do not write over the Label Text..... So in Qt3 each QGroupBox had two internal layouts and nesting your own instaces of layouts in a QGroupBox was a nightmare.....

I wish I had time to make screenshots of this...... I hope your following up to here. Qt4 took a novel approach to what I would phrase as "restricting the space a layout can occupy". Instead of having specially configured layouts Trolltech added the concept of a "Contents Rectangle" to each widget. The QGroupBox has one of these speciifed and you can give a QVBoxLayout to a QGroupBox with a margin of 0 and it will just run up against the frame and label and not go over it. Automagic

By default your contents rectangle is your whole widget. You can change this by using the method

void QWidget::setContentsMargins ( int left, int top, int right, int bottom )

Which is simply offsets from each side of your rectangle your rectangle. From eyeballing your maock up I would say the following might be acceptable in all cases.

setContentsMargins ( 50, 10, 50, 10 );

This is because you need lots of space on the left and right to avoid the graphics that look like the edges of pages. You do not need to reserve as much space on the top and bottom.

I hope this makes sense.
--Justin Noel
justin@ics.com

[SkripT]

Thanks Glitch, I think I have it now