7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
1/44
Copyright2012 Johan Thelin
CC-BY-SA
Building the run-time
by Johan ThelinPelagicore
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
2/44
Copyright2012 Johan Thelin
CC-BY-SA
Bio
Johan Thelin
Worked with Qtsince 10+ years
Author
FoQD
Articles
Tutorials
Embedded Linux
@e8johan
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
3/44
Copyright2012 Johan Thelin
CC-BY-SA
Work
Produces an In-Vehicle Infotainment (IVI) framework
Open Source / Linux / Qt
GENIVI / LinuxFoundation / Ubuntu Core
We're hiring!
http://www.pelagicore.com/career.html
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
4/44
Copyright2012 Johan Thelin
CC-BY-SA
Demo Screens
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
5/44
Copyright2012 Johan Thelin
CC-BY-SA
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
6/44
Copyright2012 Johan Thelin
CC-BY-SA
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
7/44
Copyright2012 Johan Thelin
CC-BY-SA
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
8/44
Copyright2012 Johan Thelin
CC-BY-SA
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
9/44
Copyright2012 Johan Thelin
CC-BY-SA
QML is Productive
Developed over 2.5 months for CES 2012
Interaction and graphics design
Run-time and QML development
~5 full time persons involved (team of 15)
The code consists of
5986 loc (4871 / 1115 according to cloc)
10312 lines of QML (not loc)
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
10/44
Copyright2012 Johan Thelin
CC-BY-SA
QML in Five Slides
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
11/44
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
12/44
Copyright2012 Johan Thelin
CC-BY-SA
QML 2(5) Basic Items
Rectangle
Image
Text
MouseArea
abc 123
Image {source: ...
}
Rectangle {
width: height: color: #abcdef
}
Text {text: abc 123font.family: helvetica
font.pixelSize: 25color: black
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
13/44
Copyright2012 Johan Thelin
CC-BY-SA
QML 3(5) Binding and Actions
Rectangle {
id: red
width: 100; height: yellow.height
color: redMouseArea {
anchors.fill: parent
onClicked: console.log(I'm clicked!)
}
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
14/44
Copyright2012 Johan Thelin
CC-BY-SA
QML 4(5) - Components
// Button.qml
Rectangle {
id: root
signal clicked
property string text
Text { anchors.centerIn: parent; text: root.text }
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
}
// main.qml
Button { text: Click me!; onClicked: { } }
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
15/44
Copyright2012 Johan Thelin
CC-BY-SA
QML 5(5) States and Transitions
Rectangle {
id: r
states: [
State { name: either
PropertyChanges { target: r; opacity: 1.0 } },
State { name: orPropertyChanges { target: r; opacity: 0.2 } }
]
state: either
transitions: [
Transition {
PropertyAnimation { properties: opacity; duration: 3000 }
}
]
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
16/44
Copyright2012 Johan Thelin
CC-BY-SA
QML, Declarative and QtQuick
QtQuick consists of
QML the Qt Meta Language
QtDeclarative the Qt module for executing QML
Tooling Visualdesigner, profiler,viewer, etc
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
17/44
Copyright2012 Johan Thelin
CC-BY-SA
The Demonstrator
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
18/44
Copyright2012 Johan Thelin
CC-BY-SA
Taking one Step Back
Environment
Run-time
User Experience
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
19/44
Copyright2012 Johan Thelin
CC-BY-SA
Taking one Step Back
Linux
Qt and C++
QML HTML5
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
20/44
Copyright2012 Johan Thelin
CC-BY-SA
Taking one Step Back
Qt and C++
WebKit2Qt 5.x
QMLWebKitQt 4.x
DeepIntegration WebChannels
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
21/44
Copyright2012 Johan Thelin
CC-BY-SA
The Interface
Qt and C++
QML
ValuesObjects
Classes
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
22/44
Copyright2012 Johan Thelin
CC-BY-SA
A Basic Run-Time
int main(int argc, char **argv)
{
QApplication a(argc, argv);
QDeclarativeView view;
view.setSource(main.qml);
view.show();return a.exec();
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
23/44
Copyright2012 Johan Thelin
CC-BY-SA
Exposing a Value
Expose it as a root context property, i.e. aglobal variable
view.rootContext()->
setContextProperty(itemWidth, 350);
Bind to it in QML
Rectangle {width: itemWidth
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
24/44
Copyright2012 Johan Thelin
CC-BY-SA
Exposing an Object
class ClimateControl : public QObject {
Q_OBJECT
Q_PROPERTY(int fanSpeed READ fanSpeed
WRITE setFanSpeed NOTIFY fanSpeedChanged)
public: Q_INVOKABLE resetClimate();
int fanSpeed() const;
void setFanSpeed(int);
signals:
void climateReset();
void fanSpeedChanged();
};
Image {source: fan-image- +climate.fanSpeed + .png
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
25/44
Copyright2012 Johan Thelin
CC-BY-SA
Exposing an Item
Inherit QDeclarativeItem Position and size
Anchoring
Keyboard focus
For Qt 5, inherit QQuickPaintedItem
Slightly different signature, but nothing dramatical
http://bit.ly/y17W1n (Zchydem)
Register using qmlRegisterType
qmlRegisterType(com.pelagicore.navigation,
1, 0, Map);
http://bit.ly/y17W1nhttp://bit.ly/y17W1n7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
26/44
Copyright2012 Johan Thelin
CC-BY-SA
From QML
import com.pelagicore.navigation 1.0
Map {
pitch: 30
zoom: 128
position: vehicle.position}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
27/44
Copyright2012 Johan Thelin
CC-BY-SA
Exposing a Class
An item is just another QObject you canexpose more!
Functional building blocks
Dynamic control elements etc
Just qmlRegisterType any type derived fromQObject and let QML handle the instantiation
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
28/44
Copyright2012 Johan Thelin
CC-BY-SA
Models
The QAbstractItemModel interface provides astandardized way to expose data models in Qt
Can be exposed both as objects and classes
An ideal way to expose lists of data to QML
The current playlist
The locations of restaurants in the vicinity A list of tweets
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
29/44
Copyright2012 Johan Thelin
CC-BY-SA
A Basic Model
class PlayListModel : public QAbstractListModel {
Q_OBJECT
public:
int rowCount() const;QVariant data(const QModelIndex&, int) const;
QVariant headerData(int,
Qt::Orientation, int) const;
};
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
30/44
Copyright2012 Johan Thelin
CC-BY-SA
Models in QML
Model
Delegate
View
Separates the presentationfrom the visualization!
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
31/44
Copyright2012 Johan Thelin
CC-BY-SA
Available Views
GridView
PathViewListView
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
32/44
Copyright2012 Johan Thelin
CC-BY-SA
And from QML...
Exposed as an objectListView {
model: media.playlist
delegate: PlayListDelegate {}
}
Exposed as a class
MediaSearchModel { id: mediaModel }
ListView { model: mediaModel
delegate: MediaDelegate {}
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
33/44
Copyright2012 Johan ThelinCC-BY-SA
Exposing Different Roles
For each element of a model, there can bemultiple roles
Using QAbstractItemModel::setRoleNames
more roles can be named Allows for easy-to-read delegates
Text { text: albumName }
Text { text: songDuration }Image { source: albumArtUrl }
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
34/44
Copyright2012 Johan ThelinCC-BY-SA
Asynchronous Data Retrieval
Use canFetchMore and fetchMore to request more databool canFetchMore(const QModelIndex&);
void fetchMore(const QModelIndex&);
Use beginInsertRows and endInsertRows when the datahas been retrieved
void MyModel::gotMoreData() {
beginInsertRows(parent, first, last);
updateModelWithNewData();
endInserRows();
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
35/44
Copyright2012 Johan ThelinCC-BY-SA
Prototyping Models in QML
ListModel {
id: musicModel
ListElement {
albumName: The Wall
songTitle: Empty Spaces
}
ListElement {
}
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
36/44
Copyright2012 Johan ThelinCC-BY-SA
When to do what?
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
37/44
Copyright2012 Johan ThelinCC-BY-SA
The Goals
QML controls Appearance
Behaviour
The run-time provides Functionality
Access to state and data
A well defined interface allows designers andrun-time developers to work in parallel
CC-BY ekkebushttp://www.flickr.com/photos/ekkebus/5020840511/
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
38/44
Copyright2012 Johan ThelinCC-BY-SA
The State of the System
Use system-wide singletons per function, e.g. vehicle, climate, media
Rationale There is only a single vehicle, so only one state
Dividing them among functional areas
gives small, clean interfaces allows limited system access for sandboxed elements
h f h
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
39/44
Copyright2012 Johan ThelinCC-BY-SA
The State of the System
Provide properties media.masterVolume
Provide signals for events
navigation.onDestinationReached
Provide methods for common functions
media.mute
Th S f QML
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
40/44
Copyright2012 Johan ThelinCC-BY-SA
The State from QML
VolumeIndicator { volume: media.masterVolume }
Slider { onValueChanged: {
media.masterVolume = value;
}
}
MuteButton { onClicked: media.mute(); }
Connections {target: navigation
onDestinationReached: navigation.resetDestination();
}
D t F th S t
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
41/44
Copyright2012 Johan Thelin
CC-BY-SA
Data From the System
Use models for all data that is not a state What is a state and what is a model?
Climate zone states?
driverTemperature, passengerTemperature, rearTemperature
Climate zone as a model?
How dynamic is your system?
How dynamic is your design?
zoneName temperature
Driver 20.5
Passenger 20.0
Rear 22.0
Obj t Cl
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
42/44
Copyright2012 Johan Thelin
CC-BY-SA
Object or Class
Exposing a model as an object There is only one playlist, use media.playlist, e.g.
ListView { model: media.playlist }
Exposing a model as a class
There can be any number of search results, use MediaSearchModel, e.g.
MediaSearchModel {
id: search
filter: artist=Pink Floyd
}PathView {
model: search
}
Th E i i Ch i
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
43/44
Copyright2012 Johan Thelin
CC-BY-SA
The Engineering Choice
QML forces you to separate form and function It also gives you new choices
Limiting the run-time environment saves
development time short term Generalizing the run-time improves reuseability
How do you work? What are you building?
7/27/2019 Osd Cph 2012 Building the Runtime 120312021208 Phpapp02
44/44
Copyright2012 Johan Thelin
CC-BY-SA
Thank you!@e8johan