Part 6: Drawing on the display area

[<< Contents] [<< Prev] [Next >>]

Adding items to a Graphics View scene

Now we are going to enhance our application to allow the user to place little graphical icons () representing the radio stations to the simulation display by clicking on the central display area.

The icons will be drawn by adding graphical items to the Graphics View scene we created previously. Each item will be an instance of a new class called Station that will be derived from the Qt class QGraphicsPixmapItem. The pixmap was prepared with the help of GIMP and saved in the XPM format.

Adding the new class

Our new class called "Station" needs to be added to our project in the same manner as done previously. Use the KDevelop "New Class..." wizard, enter the class name and press "OK". As usual if KDevelop pops up any dialog boxes saying a file has changed, simply press "Reload".

To make the code easier to follow and to do what we want, we will again replace the template code provided by KDevelop with our own code shown below.

station.h

#ifndef STATION_H
#define STATION_H

#include <QGraphicsPixmapItem>

/*************************************************************************************/
/******************* Represents a radio station in the simulation ********************/
/*************************************************************************************/

class Station : public QGraphicsPixmapItem
{
public:
  Station( qreal, qreal );                                    // constructor
};

#endif  // STATION_H

Our class is derived from QGraphicsPixmapItem and currently only has a simple constructor that takes two qreal parameters to set the x & y coordinates.

station.cpp

#include "station.h"
#include "pixmap_station.xpm"

/*************************************************************************************/
/******************* Represents a radio station in the simulation ********************/
/*************************************************************************************/

/************************************ constuctor *************************************/

Station::Station( qreal x, qreal y ) : QGraphicsPixmapItem()
{
  // set Station pixmap and position
  setShapeMode( QGraphicsPixmapItem::BoundingRectShape );
  setPixmap( QPixmap( pixmap_station_xpm ) );
  setOffset( -6.0, -8.0 );
  setPos( x, y );
}

Inside the constructor we set the shape mode to be the outline rectangle of the pixmap (useful later to make it easier for the user to select), set the pixmap to our station icon, set the offset to the centre of the pixmap, and set the position to the passed in x & y coordinates.

pixmap_station.xpm

/* XPM */
static char * pixmap_station_xpm[] = {
"12 16 2 1",
" 	c None",
".	c #000000",
"..   ..   ..",
" ..  ..  .. ",
"  .. .. ..  ",
"   ......   ",
"    ....    ",
"     ..     ",
"     ..     ",
" .......... ",
" .......... ",
" ..      .. ",
" ..      .. ",
" ..      .. ",
" ..      .. ",
" ..      .. ",
" .......... ",
" .......... "};

The pixmap XPM file is added to the project by using the KDevelop "File" menu "New" option. Enter the file name "pixmap_station.xpm" in our case. Ensure the "Add to project" is not selected (otherwise qmake may try to generate a make rule for it) and press OK. Because KDevelop automatically displays the XPM file graphically you will need to open the file with an editor to enter the code above.

Enhancing the scene

Now a few simple enhancements to the Scene class will display our Station icon each time the user clicks on the central display area.

scene.cpp

Include the Station class header file.

#include "station.h"

In the constructor we need to create an invisible item at (0,0) to provide an initial anchor for the scene extent. If this isn't done the default Qt functionality will use the first station added by the user to be the top-left anchor and the positioning of stations will not work as we want.

  // create invisible item to provide default top-left anchor of scene extent
  addLine( 0, 0, 0, 1, QPen(Qt::NoPen) );

In the mousePressEvent method replace the lines after checking which button was pressed with the new lines below. This will add a new station each time the mouse button is clicked and a more appropriate message.

  // create new Station at point where user clicked scene
  qreal  x = event->scenePos().x();
  qreal  y = event->scenePos().y();
  addItem( new Station( x, y ) );

  // emit informative message
  emit message( QString("Station add at %1,%2").arg(x).arg(y) );

Compile and run

The new code will automatically re-compile when you attempt to run the application. Play with the application adding new stations.

[<< Contents] [<< Prev] [Next >>]