SlideShare a Scribd company logo
Integrated Computer Solutions Inc. www.ics.com
How Do I Make That in
QML?
Chris Cortopassi
1
Integrated Computer Solutions Inc. www.ics.com
Controls from Scratch Blog
2
Integrated Computer Solutions Inc. www.ics.com
A Brief History of QML
3
Integrated Computer Solutions Inc. www.ics.com
The Controls
from Scratch
4
1. Button
2. CheckBox
3. RadioButton
4. Switch
5. Slider
6. ScrollBar
7. ProgressBar
8. Spinner
9. Dialog
10. PageDots
11. Tabs
12. Table
13. TimePicker
14. DatePicker
15. BarChart
16. LineChart
17. PieChart
18. Keyboard
Integrated Computer Solutions Inc. www.ics.com
Design Objectives (Mainly Minimalism)
Most controls < 100 lines of QML (easy to understand + modify source)
QML only (no C++)
No extraneous animations
No images (.png)
Black and White (except charts)
Resizable (reusable on different screen sizes)
Stick to QtQuick 1 APIs (for portability to Qt 4 with exeption of Canvas)
5
Integrated Computer Solutions Inc. www.ics.com
QML Primitives Used
1. Item
2. Rectangle
3. Text
4. TextInput
5. MouseArea
6. ListView
7. Row
8. Column
9. Grid
10. Repeater
11. Timer
12. Canvas (not available in Qt 4/Qt Quick 1)
bold = draws pixels
6
Integrated Computer Solutions Inc. www.ics.com
Controls!
7

More Related Content

PDF
Introduction to the Qt State Machine Framework using Qt 6
ICS
 
PDF
Driving Down Automotive Costs for Richer HMIs with Qt & i.MX RT1170
Qt
 
PDF
Introduction to the Qt Quick Scene Graph
ICS
 
PDF
Software Development Best Practices: Separating UI from Business Logic
ICS
 
PDF
Introduction to FreeRTOS
ICS
 
PDF
Maximizing High Performance Applications with CAN Bus
Janel Heilbrunn
 
PDF
Porting Motif Applications to Qt - Webinar
Janel Heilbrunn
 
PPTX
Create Amazing VFX with the Visual Effect Graph
Unity Technologies
 
Introduction to the Qt State Machine Framework using Qt 6
ICS
 
Driving Down Automotive Costs for Richer HMIs with Qt & i.MX RT1170
Qt
 
Introduction to the Qt Quick Scene Graph
ICS
 
Software Development Best Practices: Separating UI from Business Logic
ICS
 
Introduction to FreeRTOS
ICS
 
Maximizing High Performance Applications with CAN Bus
Janel Heilbrunn
 
Porting Motif Applications to Qt - Webinar
Janel Heilbrunn
 
Create Amazing VFX with the Visual Effect Graph
Unity Technologies
 

What's hot (20)

PDF
Qt for Beginners Part 3 - QML and Qt Quick
ICS
 
PPTX
Hexagonal Architecture: The Standard for Qt Embedded Applications
Burkhard Stubert
 
PDF
GPU Ecosystem
Ofer Rosenberg
 
PPT
NVIDIA CUDA
Jungsoo Nam
 
PPTX
AGDK tutorial step by step
Jungsoo Nam
 
PDF
GS-4150, Bullet 3 OpenCL Rigid Body Simulation, by Erwin Coumans
AMD Developer Central
 
PDF
The GPGPU Continuum
Ofer Rosenberg
 
PDF
Newbie’s guide to_the_gpgpu_universe
Ofer Rosenberg
 
PDF
Improving User Experience with Ubiquitous QuickBoot
ICS
 
PPTX
Intrinsics: Low-level engine development with Burst - Unite Copenhagen 2019
Unity Technologies
 
PDF
Ostech war story using mainline linux for an android tv bsp
Neil Armstrong
 
PDF
PL-4044, OpenACC on AMD APUs and GPUs with the PGI Accelerator Compilers, by ...
AMD Developer Central
 
PDF
LCE13: Android Graphics Upstreaming
Linaro
 
PPTX
Media SDK Webinar 2014
AMD Developer Central
 
PDF
Intel's Presentation in SIGGRAPH OpenCL BOF
Ofer Rosenberg
 
PDF
IoT with Ruby/mruby - RubyWorld Conference 2015
哲也 廣田
 
PPTX
Optimizing Total War*: WARHAMMER II
Intel® Software
 
PDF
DirectGMA on AMD’S FirePro™ GPUS
AMD Developer Central
 
PDF
PT-4057, Automated CUDA-to-OpenCL™ Translation with CU2CL: What's Next?, by W...
AMD Developer Central
 
PDF
PL-4048, Adapting languages for parallel processing on GPUs, by Neil Henning
AMD Developer Central
 
Qt for Beginners Part 3 - QML and Qt Quick
ICS
 
Hexagonal Architecture: The Standard for Qt Embedded Applications
Burkhard Stubert
 
GPU Ecosystem
Ofer Rosenberg
 
NVIDIA CUDA
Jungsoo Nam
 
AGDK tutorial step by step
Jungsoo Nam
 
GS-4150, Bullet 3 OpenCL Rigid Body Simulation, by Erwin Coumans
AMD Developer Central
 
The GPGPU Continuum
Ofer Rosenberg
 
Newbie’s guide to_the_gpgpu_universe
Ofer Rosenberg
 
Improving User Experience with Ubiquitous QuickBoot
ICS
 
Intrinsics: Low-level engine development with Burst - Unite Copenhagen 2019
Unity Technologies
 
Ostech war story using mainline linux for an android tv bsp
Neil Armstrong
 
PL-4044, OpenACC on AMD APUs and GPUs with the PGI Accelerator Compilers, by ...
AMD Developer Central
 
LCE13: Android Graphics Upstreaming
Linaro
 
Media SDK Webinar 2014
AMD Developer Central
 
Intel's Presentation in SIGGRAPH OpenCL BOF
Ofer Rosenberg
 
IoT with Ruby/mruby - RubyWorld Conference 2015
哲也 廣田
 
Optimizing Total War*: WARHAMMER II
Intel® Software
 
DirectGMA on AMD’S FirePro™ GPUS
AMD Developer Central
 
PT-4057, Automated CUDA-to-OpenCL™ Translation with CU2CL: What's Next?, by W...
AMD Developer Central
 
PL-4048, Adapting languages for parallel processing on GPUs, by Neil Henning
AMD Developer Central
 
Ad

Similar to How Do I Make That in QML? (20)

PDF
AutoCAD Productivity Hacks for Engineers, Architects, Designers, and Draftsme...
Ndianabasi Udonkang
 
PPTX
ICS3211 lecture 08
Vanessa Camilleri
 
PPTX
CGLecture 02 Interactive Graphics.pptx
niyonshutinobert
 
PDF
Digging into your DevTools
Vernon Kesner
 
PDF
Graphical User Interface or GUI
Jakaria Hossain Ridoy
 
PDF
Hacking the Kinect with GAFFTA Day 1
benDesigning
 
PDF
Qt Multiplatform development
Sergio Shevchenko
 
PDF
List of-run-commande
Abid Anwar
 
PDF
list of run commands
Abid Anwar
 
PPTX
The Great and Mighty C++
Andrey Karpov
 
PDF
Qt for Python
ICS
 
PDF
Advance Computer Architecture
Vrushali Lanjewar
 
PPT
ch01_an overview of computers and programming languages
LiemLe21
 
PDF
Open frameworks 101_fitc
benDesigning
 
PPT
Topic 1 Introduction to Computer Graphics.ppt
VincentOdundo
 
PPT
Tablet pc
aayushakumars
 
PDF
Qt 6 Chat - Are You Ready?
ICS
 
PPT
16 greg hope_com_wics
ashish61_scs
 
PPT
Ck5 Series Ppt
OwenZhong
 
PPTX
AutoCAD Tutorial AB.pptx
Arba Minch University
 
AutoCAD Productivity Hacks for Engineers, Architects, Designers, and Draftsme...
Ndianabasi Udonkang
 
ICS3211 lecture 08
Vanessa Camilleri
 
CGLecture 02 Interactive Graphics.pptx
niyonshutinobert
 
Digging into your DevTools
Vernon Kesner
 
Graphical User Interface or GUI
Jakaria Hossain Ridoy
 
Hacking the Kinect with GAFFTA Day 1
benDesigning
 
Qt Multiplatform development
Sergio Shevchenko
 
List of-run-commande
Abid Anwar
 
list of run commands
Abid Anwar
 
The Great and Mighty C++
Andrey Karpov
 
Qt for Python
ICS
 
Advance Computer Architecture
Vrushali Lanjewar
 
ch01_an overview of computers and programming languages
LiemLe21
 
Open frameworks 101_fitc
benDesigning
 
Topic 1 Introduction to Computer Graphics.ppt
VincentOdundo
 
Tablet pc
aayushakumars
 
Qt 6 Chat - Are You Ready?
ICS
 
16 greg hope_com_wics
ashish61_scs
 
Ck5 Series Ppt
OwenZhong
 
AutoCAD Tutorial AB.pptx
Arba Minch University
 
Ad

More from ICS (20)

PDF
Understanding the EU Cyber Resilience Act
ICS
 
PDF
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
PDF
Medical Device Cybersecurity Threat & Risk Scoring
ICS
 
PDF
Exploring Wayland: A Modern Display Server for the Future
ICS
 
PDF
Threat Modeling & Risk Assessment Webinar: A Step-by-Step Example
ICS
 
PDF
8 Mandatory Security Control Categories for Successful Submissions
ICS
 
PDF
Future-Proofing Embedded Device Capabilities with the Qt 6 Plugin Mechanism.pdf
ICS
 
PDF
Choosing an Embedded GUI: Comparative Analysis of UI Frameworks
ICS
 
PDF
Medical Device Cyber Testing to Meet FDA Requirements
ICS
 
PDF
Threat Modeling and Risk Assessment Webinar.pdf
ICS
 
PDF
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
PDF
Webinar On-Demand: Using Flutter for Embedded
ICS
 
PDF
A Deep Dive into Secure Product Development Frameworks.pdf
ICS
 
PDF
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
ICS
 
PDF
Practical Advice for FDA’s 510(k) Requirements.pdf
ICS
 
PDF
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
ICS
 
PDF
Overcoming CMake Configuration Issues Webinar
ICS
 
PDF
Enhancing Quality and Test in Medical Device Design - Part 2.pdf
ICS
 
PDF
Designing and Managing IoT Devices for Rapid Deployment - Webinar.pdf
ICS
 
PDF
Quality and Test in Medical Device Design - Part 1.pdf
ICS
 
Understanding the EU Cyber Resilience Act
ICS
 
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
Medical Device Cybersecurity Threat & Risk Scoring
ICS
 
Exploring Wayland: A Modern Display Server for the Future
ICS
 
Threat Modeling & Risk Assessment Webinar: A Step-by-Step Example
ICS
 
8 Mandatory Security Control Categories for Successful Submissions
ICS
 
Future-Proofing Embedded Device Capabilities with the Qt 6 Plugin Mechanism.pdf
ICS
 
Choosing an Embedded GUI: Comparative Analysis of UI Frameworks
ICS
 
Medical Device Cyber Testing to Meet FDA Requirements
ICS
 
Threat Modeling and Risk Assessment Webinar.pdf
ICS
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
Webinar On-Demand: Using Flutter for Embedded
ICS
 
A Deep Dive into Secure Product Development Frameworks.pdf
ICS
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
ICS
 
Practical Advice for FDA’s 510(k) Requirements.pdf
ICS
 
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
ICS
 
Overcoming CMake Configuration Issues Webinar
ICS
 
Enhancing Quality and Test in Medical Device Design - Part 2.pdf
ICS
 
Designing and Managing IoT Devices for Rapid Deployment - Webinar.pdf
ICS
 
Quality and Test in Medical Device Design - Part 1.pdf
ICS
 

Recently uploaded (20)

PPTX
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
PDF
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 
PPTX
ConcordeApp: Engineering Global Impact & Unlocking Billions in Event ROI with AI
chastechaste14
 
PPTX
Presentation about variables and constant.pptx
safalsingh810
 
PDF
Exploring AI Agents in Process Industries
amoreira6
 
DOCX
Can You Build Dashboards Using Open Source Visualization Tool.docx
Varsha Nayak
 
PDF
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
PPT
Why Reliable Server Maintenance Service in New York is Crucial for Your Business
Sam Vohra
 
PDF
MiniTool Power Data Recovery Crack New Pre Activated Version Latest 2025
imang66g
 
PPTX
oapresentation.pptx
mehatdhavalrajubhai
 
PDF
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 
PDF
lesson-2-rules-of-netiquette.pdf.bshhsjdj
jasmenrojas249
 
PPTX
Presentation about Database and Database Administrator
abhishekchauhan86963
 
PDF
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
PPTX
Maximizing Revenue with Marketo Measure: A Deep Dive into Multi-Touch Attribu...
bbedford2
 
PPTX
Web Testing.pptx528278vshbuqffqhhqiwnwuq
studylike474
 
PPTX
ASSIGNMENT_1[1][1][1][1][1] (1) variables.pptx
kr2589474
 
PDF
Salesforce Implementation Services Provider.pdf
VALiNTRY360
 
PDF
Protecting the Digital World Cyber Securit
dnthakkar16
 
PPTX
Presentation about variables and constant.pptx
kr2589474
 
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 
ConcordeApp: Engineering Global Impact & Unlocking Billions in Event ROI with AI
chastechaste14
 
Presentation about variables and constant.pptx
safalsingh810
 
Exploring AI Agents in Process Industries
amoreira6
 
Can You Build Dashboards Using Open Source Visualization Tool.docx
Varsha Nayak
 
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
Why Reliable Server Maintenance Service in New York is Crucial for Your Business
Sam Vohra
 
MiniTool Power Data Recovery Crack New Pre Activated Version Latest 2025
imang66g
 
oapresentation.pptx
mehatdhavalrajubhai
 
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 
lesson-2-rules-of-netiquette.pdf.bshhsjdj
jasmenrojas249
 
Presentation about Database and Database Administrator
abhishekchauhan86963
 
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
Maximizing Revenue with Marketo Measure: A Deep Dive into Multi-Touch Attribu...
bbedford2
 
Web Testing.pptx528278vshbuqffqhhqiwnwuq
studylike474
 
ASSIGNMENT_1[1][1][1][1][1] (1) variables.pptx
kr2589474
 
Salesforce Implementation Services Provider.pdf
VALiNTRY360
 
Protecting the Digital World Cyber Securit
dnthakkar16
 
Presentation about variables and constant.pptx
kr2589474
 

How Do I Make That in QML?

  • 1. Integrated Computer Solutions Inc. www.ics.com How Do I Make That in QML? Chris Cortopassi 1
  • 2. Integrated Computer Solutions Inc. www.ics.com Controls from Scratch Blog 2
  • 3. Integrated Computer Solutions Inc. www.ics.com A Brief History of QML 3
  • 4. Integrated Computer Solutions Inc. www.ics.com The Controls from Scratch 4 1. Button 2. CheckBox 3. RadioButton 4. Switch 5. Slider 6. ScrollBar 7. ProgressBar 8. Spinner 9. Dialog 10. PageDots 11. Tabs 12. Table 13. TimePicker 14. DatePicker 15. BarChart 16. LineChart 17. PieChart 18. Keyboard
  • 5. Integrated Computer Solutions Inc. www.ics.com Design Objectives (Mainly Minimalism) Most controls < 100 lines of QML (easy to understand + modify source) QML only (no C++) No extraneous animations No images (.png) Black and White (except charts) Resizable (reusable on different screen sizes) Stick to QtQuick 1 APIs (for portability to Qt 4 with exeption of Canvas) 5
  • 6. Integrated Computer Solutions Inc. www.ics.com QML Primitives Used 1. Item 2. Rectangle 3. Text 4. TextInput 5. MouseArea 6. ListView 7. Row 8. Column 9. Grid 10. Repeater 11. Timer 12. Canvas (not available in Qt 4/Qt Quick 1) bold = draws pixels 6
  • 7. Integrated Computer Solutions Inc. www.ics.com Controls! 7