QT IS NOT QuickTime,
(Learning is thou)
Qt is Object Oriented C++ GUI Toolkit.
Loads if pre-made widgets that make up/found in a modern desktop
application.
Loads of utility classes to get your job done fast.
Runs on embedded systems,
OSS Wrappers for various programming languages (Python, Ruby, Java,
etc)
Dual licensing (Commercial Developers Pay, Free Software/OSS
developers don’t. Hail RMS)

Qt Style Sheets the Makeup Box

What is stylesheets?
Text based specification describing how widgets are presented on screen.
Every widget has a set of look and feel attributes. With Style sheets one can
specify /change the attribute values, thus changing the appearance.
QPushButton { background-color: red }
QPushButton { background-color: red }
selector declaration
Style sheet can be applied on a single widget, or all the widgets that make
up the application. In the latter case it becomes Cascading Style Sheets.
qapp->setStyleSheet(style);

Widgets from Style sheet perspective
States of widgets and style sheet
(Hover, Pressed, Released)
Sub controls of the widgets
(Items/Controls that make up the widget)

States of widgets and style sheet
• QPushButton { border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px; }
• QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); }
• QPushButton:flat { border: none;}
• QPushButton:default { border-color: navy;}

Sub controls of the widgets
• The QScrollBar can be styled using its subcontrols like handle, add-line, sub-line, and so on. Note that if one property or
sub-control is customized, all the other properties or sub-controls must be customized as well.
• QScrollBar:horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }
• QScrollBar::handle:horizontal { background: white; min-width: 20px; }
• QScrollBar::add-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: right;
subcontrol-origin: margin; }
• QScrollBar::sub-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: left;
subcontrol-origin: margin; }

Where to learn more?
• Qt Docs
• Qt Demo
• http://code.google.com (Check other’s code
and see how they make their UI look cool.)

Making your own widgets
(Beauty is skin deep )

Paint shall we
Canvas

What matters while painting ?
Basic colors, create
new colors.
width, color.
Canvas
Length, height, color
Color, size.

Qt and Painting
QColor , QPalette .
QPen
Canvas
QWidget
virtual void paintEvent ( QPaintEvent * event )
QBrush

Basic Building Blocks
• Understanding Window and Widget
Geometry.
• Draw a Rect.
• Draw an Arc.
• Using Brush.
• Drawing paths.
• Rotation, Transform.
• Storing sequence of paint instructions.

Understanding Window and Widget
Geometry.

Drawing Rect, Circle, Line and Text.
QRectF rectangle(10.0, 20.0, 80.0, 60.0);
QPainter painter(this);
painter.drawRect(rectangle);
QPainter painter(this);
painter.drawText(rect, Qt::AlignCenter, tr(\"Qt by\\nTrolltech\"));
QRectF rectangle(10.0, 20.0, 80.0, 60.0);
QPainter painter(this);
painter.drawEllipse(rectangle);
QLineF line(10.0, 80.0, 90.0, 20.0);
QPainter(this);
painter.drawLine(line);

Draw Chord == Arc + Line
QRectF rectangle(10.0, 20.0, 80.0, 60.0); int
startAngle = 30 * 16; int spanAngle = 120 * 16;
QPainter painter(this);
painter.drawArc(rectangle, startAngle,
spanAngle);
QRectF rectangle(10.0, 20.0, 80.0, 60.0);
int startAngle = 30 * 16; int spanAngle = 120 * 16;
QPainter painter(this);
painter.drawChord(rect, startAngle, spanAngle);
QRectF rectangle(10.0, 20.0, 80.0, 60.0);
QPainter painter(this);
painter.drawEllipse(rectangle);
static const QPointF points[4] = { QPointF(10.0, 80.0), QPointF(20.0, 10.0),
QPointF(80.0, 30.0), QPointF(90.0, 70.0) };
QPainter painter(this);
painter.drawConvexPolygon(points, 4);

Basic Building Blocks
QPainter painter(this);
painter.setBrush(Qt::cyan);
painter.setPen(Qt::darkCyan);
painter.drawRect(0, 0, 100,100);
painter.setBrush(Qt::NoBrush);
painter.setPen(Qt::darkGreen);
painter.drawRect(40, 40, 100, 100);
QLinearGradient myGradient;
QPen myPen;
QRectF myRectangle;
QPainterPath myPath;
myPath.addRect(myRectangle);
QPainter painter(this);
painter.setBrush(myGradient);
painter.setPen(myPen);
painter.drawPath(myPath);
QLinearGradient myGradient;
QPen myPen; QFont myFont;
QPointF baseline(x, y);
QPainterPath myPath;
myPath.addText(baseline, myFont, tr(\"Qt\"));
QPainter painter(this);
painter.setBrush(myGradient);
painter.setPen(myPen);
painter.drawPath(myPath);

Basic Building Blocks
QLinearGradient myGradient;
QPen myPen;
QPainterPath myPath;
myPath.cubicTo(c1, c2, endPoint);
QPainter painter(this);
painter.setBrush(myGradient);
painter.setPen(myPen);
painter.drawPath(myPath);

Misc.
• Rotation, Transform.
• Storing sequence of paint instructions.
(QPainterPath)

Drawing the Mouse
Two eyeballs,
Two eye sockets,
One Tail,
One nose,
The body.

The Mouse
void Mouse::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
// Body
painter->setBrush(color);
painter->drawEllipse(-10, -20, 20, 40);
// Eyes
painter->setBrush(Qt::white);
painter->drawEllipse(-10, -17, 8, 8);
painter->drawEllipse(2, -17, 8, 8);
// Nose
painter->setBrush(Qt::black);
painter->drawEllipse(QRectF(-2, -22, 4, 4));
// Pupils
painter->drawEllipse(QRectF(-8.0 + mouseEyeDirection, -17, 4, 4));
painter->drawEllipse(QRectF(4.0 + mouseEyeDirection, -17, 4, 4));
// Ears
painter->setBrush(scene()->collidingItems(this).isEmpty() ? Qt::darkYellow : Qt::red);
painter->drawEllipse(-17, -12, 16, 16); painter->drawEllipse(1, -12, 16, 16);
// Tail
QPainterPath path(QPointF(0, 20));
path.cubicTo(-5, 22, -5, 22, 0, 25);
path.cubicTo(5, 27, 5, 32, 0, 30);
path.cubicTo(-5, 32, -5, 42, 0, 35);
painter->setBrush(Qt::NoBrush);
painter->drawPath(path); }

The Mouse Demo

Graphics View Framework
• Graphics View provides a surface for managing and
interacting with a large number of custom-made 2D
graphical items, and a view widget for visualizing the
items, with support for zooming and rotation.
• Interactive plane,
• Model View Programming,
• What’s QGraphicsView,
QGraphicsScene,
QGraphicsItem,
Qblah and blah?

Graphics View Framework
• Graphics View provides a surface for managing
and interacting with a large number of custom-
made 2D graphical items, and a view widget for
visualizing the items, with support for zooming
and rotation.
• What’s QGraphicsView,
QGraphicsScene,
QGraphicsItem,
Qblah and blah?

Model View Programming,
• Model – The Data Container
• View – The Data Visualizer
• Item – The Atomic Data

Model View Programming,
• Model – QGraphicsScene
• View – QGraphicsWidget
• Item – QGraphicsItem

QGraphicsItem
• Qt provides a set of standard graphics items for the most
common shapes. These are:
• QGraphicsEllipseItem provides an ellipse item
• QGraphicsLineItem provides a line item
• QGraphicsPathItem provides an arbitrary path item
• QGraphicsPixmapItem provides a pixmap item
• QGraphicsPolygonItem provides a polygon item
• QGraphicsRectItem provides a rectangular item
• QGraphicsSimpleTextItem provides a simple text label item
• QGraphicsTextItem provides an advanced text browser
item
• Derive and create your own mouse item.

QGraphicsScene
The QGraphicsScene class provides a surface for
managing a large number of 2D graphical items.
QGraphicsScene aScene(NULL);
QGraphicsTextItem aTextItem(“ilug-bom,
NULL”);
aScene.addItem(aTextItem);

QGraphicsView
QGraphicsView provides the view widget, which
visualizes the contents of a scene.
Ilug-bom

The Grapshics View Coordinate System
The scene represents the base coordinate system for all its items. Scene is infinite.
Compute length and width to accommodate all item’s location
View coordinates are the coordinates of the widget. Each unit in view
coordinates corresponds to one pixel.
Items live in their own local coordinate system.

Tough things made simple
Z ooming and rotating
scale(1.2, 1.2);
Painting
QPixmap pixmap;
QPainter painter(&pixmap);
painter.setRenderHint(QPainter::Antialiasing);
scene.render(&painter); painter.end();
pixmap.save(\"scene.png\");
Drag and Drop
void CustomItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
QMimeData *data = new QMimeData;
data->setColor(Qt::green);
QDrag *drag = new QDrag(event->widget());
drag->setMimeData(data); drag->start();
}

Elastic Node Demo