Qt-QML Practical Examples

Name: Qt-QML Practical Examples
Rating: 4.4 (89 reviews)

Auto-Dashboard, Notepad, REST client.

Created byOmkar D

Last updated 5/2021

English

What you'll learn

Qt-Quick application development
Practical GUI example using Qt-QML and C++
Creating Automobile dashboard UI design and simulator
Creating Multifeatured Notpad Application
Simple REST API Client using Qt.

Course content

5 sections • 69 lectures • 12h 52m total length

Introduction2:37

installation15:06
Learn to download the online or offline installer, enter license or open-source options, and configure platform, compiler, and components to install Qt-QML with long-term support or latest releases.
setup17:51
How to use downloadable source code1:56
Learn how to download the source code and resources, open the project, and select the appropriate SDK to build and compare your QML application.

Dashboard - speedometer - accelerator 111:56
Learn to build an automobile dashboard display using a circular gauge speedometer in Qt QML, implementing acceleration and animated value changes for interactive speed readings.
Dashboard - speedometer - accelerator 214:44
Dashboard - speed and gear info15:16
Dashboard - Turn Indicator 15:38
Adding turn indicator placeholder and component.
Dashboard - Turn Indicator 217:41
Drawing Turn indicator arrow using Qt canvas and paint events.
Dashboard - Turn Indicator 38:45
Adding on (green led) and blinking UI effect to Turn Indicators using Qtimer.
Dashboard - RPM meter8:22
Adding RPM meter UI component - design , layout.
Dashboard - Adding Engine configuration and processor3:30
Conceptual representation of engine configuration model, View , View Model and Engine processor.
Dashboard - Adding configuration 17:28
Creating a navigation buttons in application to switch between simulation and configuration.
Moving Simulation UI component to separate QML file.
Dashboard - Adding configuration 211:46
Creating a Vehicle configuration screen using simple column and row layout.
Dashboard - Adding configuration 310:09
Using a ListModel and Repeaters in QML to render the vehicle parameters.
Dashboard - Adding configuration 420:29
Till now we have used number simulator to show speed value. Now we will create a backend C++ Engine class and use more realistic simulated values of speed, RPM and gears.
In this video below part is covered:
Connecting speed and engine RPM parameter to C++ model.
Connecting acceleration and braking action to C++ function.
Dashboard - Adding configuration 516:15
Learn how to implement a mobile dashboard in Qt-QML by adding an update button, binding configuration properties, and sending barometer values from the UI to the C++ backend.
Dashboard - Calculating speed from RPM19:09
Dashboard - Upshifting with all gears.13:28
Explore how to implement a multi-gear dashboard in qt-qml, calculating speed and rpm across gear shifts, including upshifting logic and gear configurations for a vehicle simulation.
Dashboard - Downshift with all gears and Brakes15:38
Dashboard - Synchronizing UI list model with Engine Configuration18:43
Dashboard - Synchronizing Upshift RPM configuration.11:26
Dashboard - Placing Fuel gauge and temperature indicator.12:15
Adding Fuel gauge and temperature indicator. Re lay outing turn indicator at top to make space for fuel gauge.
Dashboard - Style and Layout for Fuel Gauge12:35
Explore styling a Qt QML fuel gauge dashboard by building a circular gauge with state properties, setting max and min values, and configuring angle ranges for a clear, scalable display.
Dashboard - Integrating Fuel Gauge with backend C++ controller6:08
Dashboard - Style and Layout for Temperature Gauge, Integration with backend13:16
Dashboard - Showing warning indicators15:29
Dashboard - Showing warning indicators213:28
Dashboard - Showing warning indicators316:46
Dashboard - Showing warning indicators412:35
Dashboard - Distance display layout and style4:58
Dashboard - Distance calculation and connecting to view20:21

REST Client project creation and configs.3:10
Create a Qt-QML rest client project to consume open API services from web servers, building a business focused application with a basic window and features to connect to various services.
REST Client - Adding QNetworkManager14:54
Explore how to build a Qt QML REST client by integrating a network access manager, handling JSON and XML responses, and wiring signals and slots for requests and responses.
REST Client - GET and POST request overview6:52
REST Client - adding QNetworkRequest6:56
Explore building a rest client in Qt-QML by constructing and sending QNetworkRequest with a network manager, and handling connectivity, signals, and responses for responsive apps.
REST Client - Registering C++ class in QML context9:11
Register a C++ class in the QML context to expose a client list and properties, and implement a REST client flow that handles requests and responses.
REST Client - Sending Get request and receiving response.9:36
REST Client - Showing response JSON on UI.10:28
REST Client - Formatting response text area5:03
REST Client - Displaying APOD Image on UI8:11
REST Client - Getting APOD image for selected Date10:54
Develop a calendar-driven REST client that fetches the astronomy picture of the day for a selected date and displays the corresponding image in a Qt QML app.

Notepad Project creation and configs5:15
Notepad - Adding menu bar4:42
Notepad - Adding Menu Item in Menu - layout9:00
Notepad - Adding header, foot, content layout5:58
Notepad - Adding action for open and save file13:11
Notepad - Resolving File Dialog warnings14:15
Notepad - Adding actions for cut, copy, paste4:43
Notepad - Adding QQuickTextDocument and DocumentController14:17
Notepad - Adding QTextDocument and Loading file content from drive.18:10
Notepad - saving plaintext content in same file.6:31
learn to save plaintext content in the same file using a Qt-QML notepad example, and load content to verify the save with a self-contained workflow.
Notepad - Adding Toolbar icons - save, cut, copy, paste, undo, redo13:00
Notepad - Adding new file functionality11:28
Learn how to add new file functionality to a Qt-QML notepad app by wiring a new button and an open button to create and open files.
Notepad - Adding cursor position trackers18:23
Explore building a notepad in qt-qml by adding cursor position trackers and managing document selection with properties, signals, and reset logic to control selection start and updates.
Notepad - Getting QTextCursor from QTextDocument9:30
Notepad - Adding Control for text color8:36
Notepad - Set color of the character blocks using QTextCursor.16:12
Notepad - Set font size of the character blocks using QTextCursor.15:35
Notepad - Save and load formatted text as html document.13:29
learn how to save and load formatted text as an html document from a notepad-like editor, including detecting file type and exporting formatted content.
Notepad - Save as and Initial save functionality.8:19
Implement save as and initial save functionality in the Notepad app, adding open dialogs and proper save operations to handle new and existing documents.
Notepad - Set Font Family for text12:39
Explore how to set and link a font family for text in a Qt QML notepad example, applying a format object to update text styling from C++ properties.
Notepad - Adding setFormatting function.4:25
Add a private setFormatting function in the notepad example and refactor the code to manage properties and selection. Call the safeguarding function to ensure safe processing as you apply formatting.
Notepad - Adding bold, italic, underline functions.15:35
Notepad- Adding Undo and Redo Functionality.15:47
Add undo and redo functionality to a notepad-like app using Qt/QML, manage document operations, and enable or disable controls based on availability.
Notepad- Showing current filename on title bar7:48
Notepad- text alignment : left, center, right14:17
Notepad- print dialog5:29
Learn to implement a system dialogue in a Qt-QML app by wiring a button to open the dialogue, creating a slot, and managing its lifecycle.
Notepad- print to PDF / printer5:03

Requirements

Basics of Qt-QML
Basics of C++
Udemy course - The Complete Qt - QML with C++ : A complete course on Qt quick and QML.

Description

Qt-QML Practical Examples

A real software development experience is necessary to build up the skillset in GUI development framework like Qt QML. This course offers a real software development training with the help of simple application examples.

Prerequisite :

Basic level of C++
Understanding of Qt-QML framework

This course covers step by step implementation of following application examples using Qt-QML and C++.

1. Automobile dashboard design and simulation : This is a Qt-QML based design for car dashboard. This also have a simulator implemented at backend to provide more realistic data to UI. Concepts you will learn here are : Integrating QML and C++, CircularGauge, CircularGaugeStyle, Number Animation, QTimers, Image, Canvas.

2. Notepad application : This is basic notepad application with which you can create, edit and modify the text files. Operations include formatting, layout, font color, font family. Also support for HTML document for rich text format support. You will learn about Qt-Quick controls, Qt shortcuts, QTextDocument, FontDialog, Text processing, File operations, HTML files, file printing

3. Simple REST Client: This is very simple REST Client application using public REST APIs to show useful information. You will learn about QNetwork, QNetworkAccessManager, QNetworkReply, QJsonDocument, QSSL configs.

All above examples are explained in depth details. For each lecture a demo able sours code is available as downloadable resource. Users can download these source code packages and tryout on own either during the lectures or afterwards. This will help you to get hands on on programming and debugging.

Who this course is for:

Application developers
C++ Developers
Computer Science Students
Software professionals
Software Engineers
GUI developers
Automobile UI developers

Qt-QML Practical Examples

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 3min

Qt installation and setup3 lectures • 35min

Automobile Dashboard28 lectures • 5hr 58min

REST Client10 lectures • 1hr 25min

Notepad Application27 lectures • 4hr 52min

Requirements

Description

Who this course is for: