lo stack grafico di qt - italiancpp.org · sono elementi grafici per interagire con l’utente...
TRANSCRIPT
![Page 1: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/1.jpg)
C++ Day 2016 29 Ottobre / Firenze
www.italiancpp.org
Lo stack grafico di Qt Luca Ottaviano – [email protected]
![Page 2: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/2.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Chi sono Team leader & project manager @Develer
Lavoro con C++ da 11+ anni
Sviluppo con Qt da 8+ anni
Relatore a conferenze da 6 anni
![Page 3: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/3.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Develer Azienda di sviluppo software e hardware
Sviluppiamo con tecnologie open source in molti campi diversi: ◦Embedded real-time ◦Linux e Android ◦Desktop multipiattaforma
◦Cloud e mobile
Siamo sempre alla ricerca di talenti
![Page 4: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/4.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
We’re hiring!
www.develer.com/jobs/
![Page 5: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/5.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Agenda Come si disegna un widget?
Come si crea un pdf?
Come si disegna una scena QtQuick?
Come ci si integra con il sistema operativo?
![Page 6: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/6.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Uno sguardo d’insieme
QPainter
QPaintDevice
Platform plugin (QPA)
QtQuick
X11, Cocoa, egl, Win32...
OS
QtCore
![Page 7: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/7.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Widget Widget = Form
Sono elementi grafici per interagire con l’utente ◦Button, Label, Checkbox ◦Slider, Combobox, Spinbox ◦Tab, Docks
◦Treeview, Tableview
![Page 8: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/8.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Widget gallery
![Page 9: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/9.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Disegnare su un widget È facile creare widget personalizzati
Possiamo disegnare durante il paintEvent()
Usiamo un QPainter!
![Page 10: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/10.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QPainter È la classe che disegna su un canvas
Può disegnare molte primitive ◦Linee ◦Testo ◦Rettangoli ed ellissi
◦Poligoni ◦Settori circolari e archi di cerchio
◦ Immagini
Può applicare trasformazioni 2.5D
Ha diversi algoritmi per comporre le immagini
![Page 11: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/11.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QPainter (esempi)
![Page 12: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/12.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QPainter (esempi)
![Page 13: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/13.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Esempio: custom widget void Painted::paintEvent(QPaintEvent * /*event*/)
{
QPainter p(this);
p.setPen(Qt::darkBlue);
p.setBrush(Qt::white);
p.drawRoundRect(100, 100, 100, 100);
p.setPen(Qt::red);
p.setBrush(Qt::yellow);
p.drawEllipse(30, 30, 240, 30);
p.setPen(Qt::black);
p.drawText(QPoint(50, 50), "Painting with QPainter is easy!");
}
![Page 14: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/14.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Stack grafico dei widget QPaintEngine: interfaccia usata da QPainter per disegnare su un device
QPaintDevice: astrazione per una superficie 2D QPaintEngine
QPaintDevice
QPainter
![Page 15: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/15.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Paint devices I widget non sono gli unici paint devices
◦QImage ◦QPrinter ◦QPdfWriter ◦…
Si può usare il QPainter su tutte queste superfici
Viene scelto il QPaintEngine corretto
Si possono creare altri paint devices tramite plugins
![Page 16: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/16.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Qt Quick QtQuick è un insieme di tecnologie per la creazione di GUI fluide
◦Noto per lo più con il nome di QML
È un linguaggio che parla di oggetti da trasformare e animare
![Page 17: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/17.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Qt Quick Rectangle {
PathView {
delegate: Column {
id: wrapper
Image { //...
}
Text { //...
}
}
path: Path {
startX: 120; startY: 100
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
}
}
![Page 18: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/18.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Item QtQuick Gli Item possono essere trasformati in molti modi:
◦Opacity ◦Rotate ◦Scale ◦Transform origin
◦Trasformazioni generiche tramite matrici 4x4
Tutti i cambiamenti possono essere animati
Gli Item sono aree rettangolari su schermo
![Page 19: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/19.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Rendering di Item Vi viene in mente una API con queste primitive?
◦Oggetti rettangolari ◦Matrici 4x4
OpenGL!
Ogni operazione su un Item si mappa su OpenGL
Non ci serve il Qpainter ◦Anzi, è dannoso
![Page 20: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/20.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QtQuick (esempi)
![Page 21: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/21.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Stack grafico QtQuick
QML Scene Graph
OpenGL ES 2
Qt Quick 2
Qt Quick 2: descrive la scena
QML Scene Graph: gestisce gli oggetti sulla scena
OpenGL ES 2: rendering finale su schermo
![Page 22: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/22.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QWindow QPainter e lo scene graph devono mandare immagini su schermo
Serve un’astrazione comune per richiedere una finestra al SO
QWindow è l’astrazione Qt per una surface del SO
Funziona anche in sistemi embedded ◦Si chiede una superficie OpenGL grande quanto tutto lo schermo
![Page 23: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/23.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Qt Platform Abstraction (QPA) QWindow è un wrapper sulle finestre di sistema
L’integrazione con la piattaforma è fatta da plugins
Ogni piattaforma ha il suo plugin specifico
È facile scrivere plugin per nuove piattaforme :)
L’API non è stabile :(
La classe factory principale è QPlatformIntegration
![Page 24: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/24.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Qt Platform Abstraction QPA fornisce sia le finestre ma non solo:
◦Funzioni di query degli schermi ◦Costruzione del database dei font ◦Pixel storage per QPixmap
Gli eventi del SO sono gestiti da QWindowSystemInterface, con molte funzioni per: ◦Gestire mouse, tastiera, touch ◦Eventi delle finestre: enter, exit, focus, close
◦Cambio degli schermi di sistema (geometria, numero)
![Page 25: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/25.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
QPA diagramma
QPlatformIntegration
QFont
QPixmap
QWidget
QWindowSystemInterface
platform
Built objects
![Page 26: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/26.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Sommario
QPainter
QPaintDevice
Platform plugin (QPA)
QtQuick
X11, Cocoa, egl, Win32...
OS
QtCore
![Page 27: Lo stack grafico di Qt - italiancpp.org · Sono elementi grafici per interagire con l’utente Button, Label, Checkbox Slider, Combobox, Spinbox Tab, Docks ... Gli Item possono essere](https://reader031.vdocuments.us/reader031/viewer/2022022723/5c69d76f09d3f27a7e8bc25f/html5/thumbnails/27.jpg)
C++ Day 2016, 29 Ottobre / Firenze – Italian C++ Community & Develer
Domande?
Email: [email protected]
Web: lucaotta.tumblr.com
Twitter: @lucaotta