index.lxp@lxpwrap=x7898_252ehtm.htm
来自「GUI Programming with Python」· HTM 代码 · 共 399 行
HTM
399 行
<table border="0" cellspacing="0" cellpadding="3" width="100%"><tr><td> <div align="center" id="bldcontent"> <a href="../default.htm"><img src="../images/opendocs.png" width="63" height="76" border="0"></a> <br> <div class="symbol">Your OpenSource Publisher™</div> </div> </td></tr></table> <div align="center" class="author"> <a href="../products.lxp">Products</a> | <a href="../wheretobuy.lxp">Where to buy</a> | <a href="../bookstore.lxp">Retailers</a> | <a href="../faq.lxp">FAQ</a> | <a href="../writeforus.lxp">Write for Us.</a> | <a href="#contact">Contact Us.</a> </div> <table border="0" cellspacing="3" cellpadding="0" width="100%"><tr><td width="100%"> <div class="content"> <table border="0" cellspacing="2" cellpadding="0" width="100%"><tr><td width="100%"> <div align="center"><H4 CLASS="AUTHOR"><A NAME="AEN5">Boudewijn Rempt</A><br><a href="../../https@secure.linuxports.com/opendocs/default.htm"><img src=odpyqt125.png></a><br>ISBN: 0-97003300-4-4<br><a href="../../https@secure.linuxports.com/opendocs/default.htm">Available from bookstores everywhere or you can order it here.</a><p>You can download the source files for the book <a href="pyqtsrc.tgz">(code / eps) here.</a><hr></div> <HTML><HEAD><TITLE>Faking it with bitmaps</TITLE><METANAME="GENERATOR"CONTENT="Modular DocBook HTML Stylesheet Version 1.72"><LINKREL="HOME"TITLE="GUI Programming with Python: QT Edition"HREF="book1.htm"><LINKREL="UP"TITLE="Gui Design in the Baroque Age"HREF="c7878.htm"><LINKREL="PREVIOUS"TITLE="Gui Design in the Baroque Age"HREF="c7878.htm"><LINKREL="NEXT"TITLE="Creating themes with QStyle"HREF="x7947.htm"></HEAD><BODYCLASS="SECT1"BGCOLOR="#FFFFFF"TEXT="#000000"LINK="#0000FF"VLINK="#840084"ALINK="#0000FF"><DIVCLASS="NAVHEADER"><TABLESUMMARY="Header navigation table"WIDTH="100%"BORDER="0"CELLPADDING="0"CELLSPACING="0"><TR><THCOLSPAN="3"ALIGN="center">GUI Programming with Python: QT Edition</TH></TR><TR><TDWIDTH="10%"ALIGN="left"VALIGN="bottom"><A accesskey="P" href="index.lxp@lxpwrap=c7878_252ehtm.htm">Prev</A></TD><TDWIDTH="80%"ALIGN="center"VALIGN="bottom">Chapter 22. Gui Design in the Baroque Age</TD><TDWIDTH="10%"ALIGN="right"VALIGN="bottom"><A accesskey="N" href="index.lxp@lxpwrap=x7947_252ehtm.htm">Next</A></TD></TR></TABLE><HRALIGN="LEFT"WIDTH="100%"></DIV><DIVCLASS="SECT1"><H1CLASS="SECT1">Faking it with bitmaps</A></H1><P>The first stab at a totally cool gui will be an imitation of a remote control. This will involve a nice brushed steel background with rounded buttons and a deep bevel. The remote control used in this instance is part of a system for medical imagery, and we want to duplicate the actual control on screen so that users familiar with the hardware won't have to learn a new interface for use with the software. </P><P>To create the interface, I first scanned a picture of the actual remote control unit. This gives us the picture shown below:</P><DIVCLASS="MEDIAOBJECT"><P><DIVCLASS="CAPTION"><P>A scan of the remote control. Thanks to Cameron Laird for permission to use this image.</P></DIV></P></DIV><P>Note the subtle play of light on the buttons: no two buttons are the same. The photo-realistic effect would be very hard to achieve without using an actual photograph. This means that we will have to cut out each separate button, and save it in a separate file. The buttons should give feedback to the user when depressed, so we make a copy of each button and save that, too. Then, using a bitmap manipulation program such as the Gimp, the highlight in the up button is changed to a bit of shadow, and the text is shifted a few pixels to the right and left.</P><DIVCLASS="MEDIAOBJECT"><P><DIVCLASS="CAPTION"><P>Changing the shadows with the Gimp</P></DIV></P></DIV><P>This part of the proceedings is a bit of a bore: let's skip drawing a few of those buttons, and start with the implementation. A real remote control doesn't have window borders, so ours shouldn't have those, either. We can achieve this effect by using window flags: first the <TTCLASS="VARNAME">Qt.WStyle_Customize</TT> flag to indicate that we are customizing the appearance of the window, and then the <TTCLASS="VARNAME">Qt.WStyle_NoBorderEx</TT> flag to tell the window system that we don't want borders.</P><DIVCLASS="EXAMPLE"></A><P><B>Example 22-1. remote.py - remote control application</B></P><PRECLASS="PROGRAMLISTING">## remote.py - remote control application#import os, sysfrom qt import *from view import *class Window(QMainWindow): def __init__(self, *args): QMainWindow.__init__(self, None, 'RemoteControl', Qt.WStyle_Customize | Qt.WStyle_NoBorderEx) self.initView() def initView(self): self.view = View(self, "RemoteControl") self.setCentralWidget(self.view) self.setCaption("Application") self.view.setFocus()def main(argv): app=QApplication(sys.argv) window=Window() window.show() app.connect(app, SIGNAL('lastWindowClosed()'), app, SLOT('quit()')) app.exec_loop()if __name__=="__main__": main(sys.argv) </PRE></DIV><P>Next, we create the main view:</P><DIVCLASS="EXAMPLE"></A><P><B>Example 22-2. view.py - the main view of the remote control application </B></P><PRECLASS="PROGRAMLISTING">## view.py = the main view to go with remote.py#from qt import *from button import Buttonclass View(QWidget): buttondefs=[ ('register', 80, 111) , ('freeze', 22, 388) , ('minus', 22, 457) , ('toolbox', 130 , 166)] def __init__(self, *args): apply(QWidget.__init__,(self,)+args) self.setFixedSize(245,794) self.setBackgroundPixmap(QPixmap("remote.gif")) self.buttons=[] for bndef in self.buttondefs: print bndef bn=Button(self, bndef[0], bndef[1], bndef[2], bndef[0]+'up.gif', bndef[0]+'down.gif') self.buttons.append(bn) QObject.connect(bn, PYSIGNAL("pressed"), self.Pressed) def Pressed(self, name): print "Button", name, "pressed."</PRE></DIV><P>There is a class variable <TTCLASS="VARNAME">buttondef</TT> that contains the set of buttons we will use. Each definition consists of a base name from which the filenames of the up and down buttons will be deduced, and the X and Y position of the button on the window. These hardcoded positions make it impossible to use this technique together with layout managers.</P><P>A background image is set in the constructor, using <TTCLASS="FUNCTION">setBackgroundPixmap</TT>; after this, all actual button objects are created. The button objects are instances of the button class:</P><DIVCLASS="EXAMPLE"></A><P><B>Example 22-3. button.py - the class that implements the pixmapped buttons </B></P><PRECLASS="PROGRAMLISTING">## button.py - pixmapped button definition to go with remote.py#from qt import *class Button(QWidget): def __init__(self, parent, name, x, y, up, down, *args): apply(QWidget.__init__,(self, parent)+args) self.pxUp=QPixmap(up) self.pxDown=QPixmap(down) self.setBackgroundPixmap(self.pxUp) self.name=name self.x=x self.y=y self.move(x, y) self.setFixedSize(self.pxUp.size()) def mousePressEvent(self, ev): self.setBackgroundPixmap(self.pxDown) def mouseReleaseEvent(self, ev): self.setBackgroundPixmap(self.pxUp) self.emit(PYSIGNAL("pressed"), (self.name, ))</PRE></DIV><P>The button class is interesting because of its extreme simplicity. All it really does is move itself to the right place and then wait for mouse clicks. When a mouse button is pressed, the down pixmap is shown, using <TTCLASS="FUNCTION">setBackgroundPixmap()</TT>. When the mouse button is released, the up pixmap is restored. In order to be able to catch the press event in view.py, a signal is generated.</P><P>Creating a set of graphics for the number displays and updating those when the buttons are pressed has been left out of this book. (It's extremely tedious, I'm afraid to say).</P><P>Using pixmaps to create a distinctive user interface works well for smaller projects, and in situations where every detail has to be just right. However, the tedium involved in creating the individual pixmaps, and the lack of flexibility, makes the technique unsuitable for more complex interfaces.</P></DIV><DIVCLASS="NAVFOOTER"><HRALIGN="LEFT"WIDTH="100%"><TABLESUMMARY="Footer navigation table"WIDTH="100%"BORDER="0"CELLPADDING="0"CELLSPACING="0"><TR><TDWIDTH="33%"ALIGN="left"VALIGN="top"><A accesskey="P" href="index.lxp@lxpwrap=c7878_252ehtm.htm">Prev</A></TD><TDWIDTH="34%"ALIGN="center"VALIGN="top"><A accesskey="H" href="index.lxp@lxpwrap=book1_252ehtm">Home</A></TD><TDWIDTH="33%"ALIGN="right"VALIGN="top"><A accesskey="N" href="index.lxp@lxpwrap=x7947_252ehtm.htm">Next</A></TD></TR><TR><TDWIDTH="33%"ALIGN="left"VALIGN="top">Gui Design in the Baroque Age</TD><TDWIDTH="34%"ALIGN="center"VALIGN="top"><A accesskey="U" href="index.lxp@lxpwrap=c7878_252ehtm.htm">Up</A></TD><TDWIDTH="33%"ALIGN="right"VALIGN="top">Creating themes with QStyle</TD></TR></TABLE></DIV></BODY></HTML> </td> </tr> </table> </td> </tr> </table> ⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?