Results 1 to 9 of 9

Thread: Suggestions in giving to my application a cool look

  1. #1
    Join Date
    Jan 2006
    Location
    Catalonia
    Posts
    266
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Cool Suggestions in giving to my application a cool look

    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.
    Attached Images Attached Images
    Last edited by SkripT; 2nd May 2006 at 13:03.

  2. #2
    Join Date
    Jan 2006
    Location
    Ukraine,Lviv
    Posts
    454
    Thanks
    9
    Thanked 27 Times in 27 Posts
    Qt products
    Qt3
    Platforms
    Unix/X11 Windows

    Default Re: Suggestions in giving to my application a cool look

    IMHO It look good Have you will be use QFileDialog?
    a life without programming is like an empty bottle

  3. #3
    Join Date
    Jan 2006
    Location
    Catalonia
    Posts
    266
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Suggestions in giving to my application a cool look

    Quote Originally Posted by zlatko
    IMHO It look good Have you will be use QFileDialog?
    Thanks zlatko and yes I use it, but do you mean QDialog or QFileDialog?

  4. #4
    Join Date
    Jan 2006
    Location
    Ukraine,Lviv
    Posts
    454
    Thanks
    9
    Thanked 27 Times in 27 Posts
    Qt products
    Qt3
    Platforms
    Unix/X11 Windows

    Default Re: Suggestions in giving to my application a cool look

    I mean QFileDialog for selecting file or folder...its better IMHO then type it in line edit
    a life without programming is like an empty bottle

  5. #5
    Join Date
    Jan 2006
    Location
    Catalonia
    Posts
    266
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Suggestions in giving to my application a cool look

    Quote Originally Posted by zlatko
    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...
    Last edited by SkripT; 2nd May 2006 at 12:14.

  6. #6
    Join Date
    Jan 2006
    Location
    Cambridge, MA
    Posts
    32
    Thanked 7 Times in 6 Posts
    Qt products
    Qt3 Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: Suggestions in giving to my application a cool look

    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

  7. The following user says thank you to Glitch for this useful post:

    SkripT (2nd May 2006)

  8. #7
    Join Date
    Jan 2006
    Location
    Catalonia
    Posts
    266
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Suggestions in giving to my application a cool look

    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?
    Last edited by SkripT; 2nd May 2006 at 17:19.

  9. #8
    Join Date
    Jan 2006
    Location
    Cambridge, MA
    Posts
    32
    Thanked 7 Times in 6 Posts
    Qt products
    Qt3 Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: Suggestions in giving to my application a cool look

    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

  10. #9
    Join Date
    Jan 2006
    Location
    Catalonia
    Posts
    266
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Suggestions in giving to my application a cool look

    Thanks Glitch, I think I have it now

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.