Quick Widgets

(Basic Example)
 
(10 intermediate revisions not shown)
Line 1: Line 1:
-
[[Category:Software]][[Category:Power users]]
+
[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 Example ==
+
== Basic Examples ==
-
tbd
+
=== 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