qml for web - tutlively.cs.tut.fi/seminars/webgl2011/qml2web-pohjalainen.pdf · for handling the...
TRANSCRIPT
![Page 1: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/1.jpg)
1
QML for Web Pietu Pohjalainen
![Page 2: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/2.jpg)
Background
• QT as a cross-platform GUI toolkit has a steep learning curve – C++ SDK has the pros and cons of C++
• QML a new(ish) technology for speeding up UI prototyping and application building
• QML is a declarative(ish), JavaScript –compatible language
• Promises reasonable execution speed for good-looking UI’s in also in mobile devices
• An introduction available at: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeintroduction.html
"
2
![Page 3: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/3.jpg)
The first QML example
import Qt 4.7 !Rectangle { ! width: 200 ! height: 200! color: "blue" ! Image { ! source: ! "pics/logo.png" ! anchors.centerIn: ! parent ! } !}!
3
![Page 4: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/4.jpg)
QT’s signals & slots available
• QML builds heavily on using QT’s signals and slots, • E.g. MouseArea
http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html
4
![Page 5: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/5.jpg)
QMLViewer and example applications
• The QT SDK contains an application QMLViewer for running QML scenes
• A number of QML examples available at: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeexamples.html
• For complex cases, C++ bindings are available • However, many examples are implemented in pure
QML - see e.g. http://doc.qt.nokia.com/4.7-snapshot/demos-declarative-calculator.html
5
![Page 6: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/6.jpg)
Have you spotted the problem?
• A nice programming environment with a lean learning curve
• Builds on JavaScript > familiar to many web devs • However, it requires specific sdk’s installed to your
computer • Promises to run on target machine / cell phone
– IF QT INSTALLED • Promises to include web pages, but
– NOT POSSIBLE TO PLACE A QML APPLICATION TO THE WEB
6
![Page 7: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/7.jpg)
Our contribution: QML 2 WEB
• Our fix: design and implement a QML execution environment that runs in the web browser
1. Parse QML application 2. Construct corresponding JavaScript object tree 3. Render on HTML canvas element
=> PROFIT
7
![Page 8: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/8.jpg)
QML 2 WEB: An experimental environment for bringing QML apps to the WEB
8
QML APP
Canvas
![Page 9: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/9.jpg)
Why am I presenting this in WebGL forum?
• The implementation employs Processing.JS library for handling the drawing of QML objects
• Actually, our contribution is merely the transformation of QML object tree to JavaScript object tree in format accepted by PJS
1. Processing.JS has (experimental) support for WebGL
2. Qt3D has (experimental) bindings for QML
=> OBVIOUS MATCH
9
![Page 10: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/10.jpg)
Qt3D/QML to WebGL
10
![Page 11: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/11.jpg)
Current status of the project
• Currently a hobby project of mine • Might allow some publishing in CS, e.g.
Combining Pratt-style parsers; combine a QML parser with the (existing) JavaScript parser
• Only the features shown in the demo work • Welcome to join the project!
11
![Page 12: QML for Web - TUTlively.cs.tut.fi/seminars/WebGL2011/Qml2Web-pohjalainen.pdf · for handling the drawing of QML objects • Actually, our contribution is merely the transformation](https://reader036.vdocuments.net/reader036/viewer/2022062915/5e9c686f2ec00c250f1c0dcf/html5/thumbnails/12.jpg)
Q&A
• Discussion
12