Quick Widgets
greatgonzo (Talk | contribs) |
greatgonzo (Talk | contribs) (→Basic Example) |
||
(10 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | [ | + | [http://maemo.org/packages/view/quick-widgets/ quick-widgets] is an application to facilitate creating and deploying home screen widgets. |
- | + | ||
- | quick-widgets is an application to facilitate creating and deploying home screen widgets. | + | |
see [http://talk.maemo.org/showthread.php?t=65769 thread on talk] | see [http://talk.maemo.org/showthread.php?t=65769 thread on talk] | ||
Line 9: | Line 7: | ||
* run Qt Quick applications as home widgets | * run Qt Quick applications as home widgets | ||
* suspend widget when not on current home screen | * suspend widget when not on current home screen | ||
- | * access to system calls in QML (wrapping QProcess) | + | * access to system calls in QML (wrapping <code>QProcess</code>) |
* fix widget to size or let content determine the size | * fix widget to size or let content determine the size | ||
* restore after reboot/crash | * restore after reboot/crash | ||
+ | * rotate with landscape/portrait orientation | ||
+ | * absolutely no compilation/building required! | ||
== Wish list == | == Wish list == | ||
Line 18: | Line 18: | ||
* more event bindings directly in qml | * more event bindings directly in qml | ||
- | == Basic | + | == Basic Examples == |
- | + | === Application Launcher Button === | |
+ | |||
+ | <source lang="javascript"> | ||
+ | import QtQuick 1.0 | ||
+ | import quickwidgets 1.0 | ||
+ | |||
+ | Rectangle { | ||
+ | // Customize to your fancy | ||
+ | property string buttonImage: "/usr/share/icons/hicolor/64x64/hildon/general_email.png" | ||
+ | property string appName: "modest" | ||
+ | color: "#552a2a2a" // optionally "transparent" | ||
+ | radius: 5 | ||
+ | property int imagePadding: 5 | ||
+ | |||
+ | width: childrenRect.width+imagePadding | ||
+ | height: childrenRect.height+imagePadding | ||
+ | id: container; | ||
+ | |||
+ | Image { | ||
+ | anchors.centerIn: parent | ||
+ | id: play | ||
+ | smooth: true | ||
+ | source: buttonImage | ||
+ | MouseArea { | ||
+ | id: ma | ||
+ | anchors.fill: parent | ||
+ | onClicked: { | ||
+ | anim.running = true; | ||
+ | dbus.run() | ||
+ | } | ||
+ | } | ||
+ | SequentialAnimation { | ||
+ | id: anim | ||
+ | PropertyAnimation { target: play; property: "scale"; duration: 150; to: 0.9 } | ||
+ | PropertyAnimation { target: play; property: "scale"; duration: 100; to: 1.0 } | ||
+ | } | ||
+ | } | ||
+ | Process { | ||
+ | id: dbus | ||
+ | command: "dbus-send --type=method_call --dest=com.nokia.HildonDesktop.AppMgr \ | ||
+ | /com/nokia/HildonDesktop/AppMgr \ | ||
+ | com.nokia.HildonDesktop.AppMgr.LaunchApplication string:\""+appName+"\"" | ||
+ | |||
+ | onCompleted: {} | ||
+ | onFailed: {} | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | === Web Browser widget === | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | import QtQuick 1.0 | ||
+ | import QtWebKit 1.0 | ||
+ | |||
+ | Item { | ||
+ | // Modify these to customize | ||
+ | |||
+ | // widget width | ||
+ | width: 300 | ||
+ | |||
+ | // widget height | ||
+ | height: 350 | ||
+ | |||
+ | // the url to display | ||
+ | property string url: "http://touch.facebook.com" | ||
+ | |||
+ | // the optimum width for the website. The page is scaled down | ||
+ | // from this width to the widget's width | ||
+ | property int optimal_width: 340 | ||
+ | |||
+ | // interval when to reload the page | ||
+ | // setting it to 0 means never refresh | ||
+ | property real reload_in_minutes: 10 | ||
+ | |||
+ | // end user mods. | ||
+ | |||
+ | id: main | ||
+ | MouseArea { | ||
+ | anchors.right: parent.right | ||
+ | width: 30 | ||
+ | height: parent.height | ||
+ | onClicked: { | ||
+ | } | ||
+ | } | ||
+ | |||
+ | Rectangle { | ||
+ | anchors.fill: parent | ||
+ | radius: 10 | ||
+ | color: "gray" | ||
+ | opacity: 0.6 | ||
+ | } | ||
+ | |||
+ | Text { | ||
+ | id: txt | ||
+ | anchors.centerIn: parent | ||
+ | text: "loading..." | ||
+ | color: "white" | ||
+ | } | ||
+ | |||
+ | WebView { | ||
+ | id: browser | ||
+ | transformOrigin: Item.TopLeft | ||
+ | property bool scaled: false | ||
+ | |||
+ | smooth: true | ||
+ | visible: false | ||
+ | preferredWidth: optimal_width | ||
+ | preferredHeight: parent.height | ||
+ | url: parent.url | ||
+ | Behavior on y { PropertyAnimation {} } | ||
+ | onUrlChanged: { | ||
+ | y = 0 | ||
+ | } | ||
+ | onLoadFinished: { | ||
+ | if (!scaled) { | ||
+ | browser.contentsScale = main.width/browser.width | ||
+ | scaled = true; | ||
+ | } | ||
+ | browser.visible = true | ||
+ | //console.log('loaded') | ||
+ | txt.z = 0 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | MouseArea { | ||
+ | anchors.right: parent.right | ||
+ | width: 30 | ||
+ | height: parent.height | ||
+ | onClicked: { | ||
+ | var inc = main.height*0.9 | ||
+ | if (mouse.y > main.height/2) { | ||
+ | var dy = Math.min(inc, | ||
+ | browser.contentsSize.height-main.height+browser.y) | ||
+ | browser.y -= dy | ||
+ | } else { | ||
+ | var dy = Math.min(inc, Math.abs(browser.y)) | ||
+ | browser.y += dy | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | Timer { | ||
+ | id: refresh | ||
+ | interval: 1000*60*parent.reload_in_minutes | ||
+ | running: runtime.isActiveWindow | ||
+ | repeat: true | ||
+ | onTriggered: { txt.z = 1 | ||
+ | browser.reload.trigger() | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </source> | ||
== User Contributed scripts == | == User Contributed scripts == | ||
- | * /opt/quick-widgets/examples/process.qml | + | * qmltube widget - [http://talk.maemo.org/showpost.php?p=995846&postcount=548] |
+ | * quicklyrics - a lyrics widget for someplayer [http://talk.maemo.org/showpost.php?p=991754&postcount=1] | ||
+ | * someplayer widget [http://talk.maemo.org/showpost.php?p=965421&postcount=1] | ||
+ | * Tagesschau podcast widget [http://talk.maemo.org/showpost.php?p=968864&postcount=44] | ||
+ | * system info widget - [http://talk.maemo.org/showpost.php?p=896791&postcount=1] | ||
+ | * <code>/opt/quick-widgets/examples/process.qml</code> | ||
+ | |||
+ | == API == | ||
+ | |||
+ | document qmlprocess here... | ||
== Thanks == | == Thanks == | ||
venemo and the Nokia Qt labs | venemo and the Nokia Qt labs | ||
+ | |||
+ | [[Category:Software]] | ||
+ | [[Category:Power users]] |
Latest revision as of 04:03, 2 May 2011
quick-widgets is an application to facilitate creating and deploying home screen widgets.
see thread on talk
Contents |
[edit] Features
- run Qt Quick applications as home widgets
- suspend widget when not on current home screen
- access to system calls in QML (wrapping
QProcess
) - fix widget to size or let content determine the size
- restore after reboot/crash
- rotate with landscape/portrait orientation
- absolutely no compilation/building required!
[edit] Wish list
- base widgets
- more event bindings directly in qml
[edit] Basic Examples
[edit] Application Launcher Button
import QtQuick 1.0 import quickwidgets 1.0 Rectangle { // Customize to your fancy property string buttonImage: "/usr/share/icons/hicolor/64x64/hildon/general_email.png" property string appName: "modest" color: "#552a2a2a" // optionally "transparent" radius: 5 property int imagePadding: 5 width: childrenRect.width+imagePadding height: childrenRect.height+imagePadding id: container; Image { anchors.centerIn: parent id: play smooth: true source: buttonImage MouseArea { id: ma anchors.fill: parent onClicked: { anim.running = true; dbus.run() } } SequentialAnimation { id: anim PropertyAnimation { target: play; property: "scale"; duration: 150; to: 0.9 } PropertyAnimation { target: play; property: "scale"; duration: 100; to: 1.0 } } } Process { id: dbus command: "dbus-send --type=method_call --dest=com.nokia.HildonDesktop.AppMgr \ /com/nokia/HildonDesktop/AppMgr \ com.nokia.HildonDesktop.AppMgr.LaunchApplication string:\""+appName+"\"" onCompleted: {} onFailed: {} } }
[edit] Web Browser widget
import QtQuick 1.0 import QtWebKit 1.0 Item { // Modify these to customize // widget width width: 300 // widget height height: 350 // the url to display property string url: "http://touch.facebook.com" // the optimum width for the website. The page is scaled down // from this width to the widget's width property int optimal_width: 340 // interval when to reload the page // setting it to 0 means never refresh property real reload_in_minutes: 10 // end user mods. id: main MouseArea { anchors.right: parent.right width: 30 height: parent.height onClicked: { } } Rectangle { anchors.fill: parent radius: 10 color: "gray" opacity: 0.6 } Text { id: txt anchors.centerIn: parent text: "loading..." color: "white" } WebView { id: browser transformOrigin: Item.TopLeft property bool scaled: false smooth: true visible: false preferredWidth: optimal_width preferredHeight: parent.height url: parent.url Behavior on y { PropertyAnimation {} } onUrlChanged: { y = 0 } onLoadFinished: { if (!scaled) { browser.contentsScale = main.width/browser.width scaled = true; } browser.visible = true //console.log('loaded') txt.z = 0 } } MouseArea { anchors.right: parent.right width: 30 height: parent.height onClicked: { var inc = main.height*0.9 if (mouse.y > main.height/2) { var dy = Math.min(inc, browser.contentsSize.height-main.height+browser.y) browser.y -= dy } else { var dy = Math.min(inc, Math.abs(browser.y)) browser.y += dy } } } Timer { id: refresh interval: 1000*60*parent.reload_in_minutes running: runtime.isActiveWindow repeat: true onTriggered: { txt.z = 1 browser.reload.trigger() } } }
[edit] User Contributed scripts
- qmltube widget - [1]
- quicklyrics - a lyrics widget for someplayer [2]
- someplayer widget [3]
- Tagesschau podcast widget [4]
- system info widget - [5]
-
/opt/quick-widgets/examples/process.qml
[edit] API
document qmlprocess here...
[edit] Thanks
venemo and the Nokia Qt labs
- This page was last modified on 2 May 2011, at 04:03.
- This page has been accessed 17,636 times.