Book Image

Qt5 C++ GUI Programming Cookbook

By : Lee Zhi Eng
Book Image

Qt5 C++ GUI Programming Cookbook

By: Lee Zhi Eng

Overview of this book

With the advancement of computer technology, the software market is exploding with tons of software choices for the user, making their expectations higher in terms of functionality and the look and feel of the application. Therefore, improving the visual quality of your application is vital in order to overcome the market competition and stand out from the crowd. This book will teach you how to develop functional and appealing software using Qt5 through multiple projects that are interesting and fun. This book covers a variety of topics such as look-and-feel customization, GUI animation, graphics rendering, implementing Google Maps, and more. You will learn tons of useful information, and enjoy the process of working on the creative projects provided in this book

Related Content you might be interested in

Current Title:

Small book image
Qt5 C++ GUI Programming Cookbook
Lee Zhi Eng
Jul, 2016 | 300 pages
No titles found
Table of Contents (16 chapters)
Qt5 C++ GUI Programming Cookbook
Qt5 C++ GUI Programming Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Look and Feel Customization
Look and Feel Customization
Introduction
Use style sheets with Qt Designer
Basic style sheet customization
Creating a login screen using style sheets
Using resources in style sheets
Customizing properties and sub-controls
Styling in QML
Exposing QML object pointer to C++
2
States and Animations
States and Animations
Introduction
Property animation in Qt
Using easing curves to control property animation
Creating an animation group
Creating a nested animation group
State machines in Qt
States, transitions, and animations in QML
Animating widget properties using animators
Sprite animation
3
QPainter and 2D Graphics
QPainter and 2D Graphics
Introduction
Drawing basic shapes on screen
Exporting shapes to SVG files
Coordinate transformation
Displaying images on screen
Applying image effects to graphics
Creating a basic paint program
2D canvas in QML
4
OpenGL Implementation
OpenGL Implementation
Introduction
Setting up OpenGL in Qt
Hello world!
Rendering 2D shapes
Render 3D shapes
Texturing in OpenGL
Lighting and texture filter in OpenGL
Moving an object using keyboard controls
3D canvas in QML
5
Building a Touch Screen Application with Qt5
Building a Touch Screen Application with Qt5
Introduction
Setting up Qt for mobile applications
Designing a basic user interface with QML
Touch events
Animation in QML
Displaying information using Model View
Integrating QML and C++
6
XML Parsing Made Easy
XML Parsing Made Easy
Introduction
Processing XML data using stream reader
Writing XML data using Stream Writer
Processing XML data using the QDomDocument class
Writing XML data using the QDomDocument class
Using Google's Geocoding API
7
Conversion Library
Conversion Library
Introduction
Data conversion
Image conversion
Video conversion
Currency conversion
8
Accessing Databases
Accessing Databases
Introduction
Connecting to a database
Writing basic SQL queries
Creating a login screen with Qt
Displaying information from a database on a model view
Advanced SQL queries
9
Developing a Web Application Using Qt Web Engine
Developing a Web Application Using Qt Web Engine
Introduction
Introduction to Qt WebEngine
WebView and web settings
Embedding Google Maps in your project
Calling C++ functions from JavaScript
Calling JavaScript functions from C++
Index
Index

Animating widget properties using animators

In this recipe, we will learn how to animate the properties of our GUI widgets using the animator feature provided by QML.

How to do it…

  1. Create a rectangle object and add a scale animator to it:

    Rectangle {
  id: myBox;
  width: 50;
  height: 50;
  anchors.horizontalCenter: parent.horizontalCenter;
  anchors.verticalCenter: parent.verticalCenter;
  color: "blue";

  ScaleAnimator {
    target: myBox;
    from: 5;
    to: 1;
    duration: 2000;
    running: true;
  }
}

  2. Add a rotation animator and set the running value in the parallel animation group, but not in any of the individual animators:

    ParallelAnimation {
  ScaleAnimator {
    target: myBox;
    from: 5;
    to: 1;
    duration: 2000;
  }
  RotationAnimator {
    target: myBox;
    from: 0;
    to: 360;
    duration: 1000;
  }
  running: true;
}

  3. Add an easing curve to the scale animator:

    ScaleAnimator {
  target: myBox;
  from: 5;
  to: 1;
  duration: 2000;
  easing.type: Easing.InOutElastic;
...
Previous Section
End of Section 9
Next Section