Quick Widgets: Difference between revisions

From Maemo Wiki
Jump to navigationJump to search
imported>greatgonzo
No edit summary
imported>greatgonzo
No edit summary
Line 20: Line 20:
== Basic Example ==
== Basic Example ==


tbd
=== Web Browser widget ===
 
<source lang="javascript">
import Qt 4.7
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
* /opt/quick-widgets/examples/process.qml
== API ==
document qmlprocess here...


== Thanks ==
== Thanks ==


venemo and the Nokia Qt labs
venemo and the Nokia Qt labs

Revision as of 02:19, 24 November 2010


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

Wish list

  • base widgets
  • more event bindings directly in qml

Basic Example

Web Browser widget

<source lang="javascript"> import Qt 4.7 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

  • /opt/quick-widgets/examples/process.qml

API

document qmlprocess here...

Thanks

venemo and the Nokia Qt labs