Quick Widgets

quick-widgets is an application to facilitate creating and deploying home screen widgets.

see thread on talk

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!

Wish list

• base widgets
• more event bindings directly in qml

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

• 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

API

document qmlprocess here...

Thanks

venemo and the Nokia Qt labs