Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Alter Clocks demo
For further component reuse, it's now a delegate in a view that can load
many more clocks. Also looks better both in landscape and portrait mode.

Change-Id: Ib5f172ee165554dfbe1ab84b96fe0eec7c22b1d1
Reviewed-by: Yann Bodson <yann.bodson@nokia.com>
  • Loading branch information
Alan Alpert authored and Qt by Nokia committed Feb 15, 2012
1 parent 6a62d2b commit 16da679
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 57 deletions.
45 changes: 37 additions & 8 deletions examples/declarative/toys/clocks/clocks.qml
Expand Up @@ -42,18 +42,47 @@ import QtQuick 2.0
import "content"

Rectangle {
width: 640; height: 240
id: root
width: 640; height: 320
color: "#646464"

Row {
anchors.centerIn: parent
Clock { city: "New York"; shift: -4 }
Clock { city: "Mumbai"; shift: 5.5 }
Clock { city: "Tokyo"; shift: 9 }
ListView {
id: clockview
anchors.fill: parent
orientation: ListView.Horizontal
cacheBuffer: 2000
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.ApplyRange

delegate: Clock { city: cityName; shift: timeShift }
model: ListModel {
ListElement { cityName: "New York"; timeShift: -4 }
ListElement { cityName: "London"; timeShift: 0 }
ListElement { cityName: "Oslo"; timeShift: 1 }
ListElement { cityName: "Mumbai"; timeShift: 5.5 }
ListElement { cityName: "Tokyo"; timeShift: 9 }
ListElement { cityName: "Brisbane"; timeShift: 10 }
ListElement { cityName: "Los Angeles"; timeShift: -8 }
}
}
QuitButton {

Image {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins: 10
source: "content/arrow.png"
rotation: -90
opacity: clockview.atXBeginning ? 0 : 0.5
Behavior on opacity { NumberAnimation { duration: 500 } }
}

Image {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: 10
source: "content/arrow.png"
rotation: 90
opacity: clockview.atXEnd ? 0 : 0.5
Behavior on opacity { NumberAnimation { duration: 500 } }
}
}
117 changes: 68 additions & 49 deletions examples/declarative/toys/clocks/content/Clock.qml
Expand Up @@ -41,21 +41,34 @@
import QtQuick 2.0

Item {
id: clock
width: 200; height: 230
id : clock
width: {
if (ListView.view && ListView.view.width >= 200)
return ListView.view.width / Math.floor(ListView.view.width / 200.0);
else
return 200;
}

height: {
if (ListView.view && ListView.view.height >= 240)
return ListView.view.height;
else
return 240;
}

property alias city: cityLabel.text
property int hours
property int minutes
property int seconds
property int seconds
property real shift
property bool night: false
property bool internationalTime: true //Unset for local time

function timeChanged() {
var date = new Date;
hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
night = ( hours < 7 || hours > 19 )
minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
seconds = date.getUTCSeconds();
}

Expand All @@ -64,61 +77,67 @@ Item {
onTriggered: clock.timeChanged()
}

Image { id: background; source: "clock.png"; visible: clock.night == false }
Image { source: "clock-night.png"; visible: clock.night == true }
Item {
anchors.centerIn: parent
width: 200; height: 240

Image { id: background; source: "clock.png"; visible: clock.night == false }
Image { source: "clock-night.png"; visible: clock.night == true }

Image {
x: 92.5; y: 27
source: "hour.png"
smooth: true
transform: Rotation {
id: hourRotation
origin.x: 7.5; origin.y: 73;
angle: (clock.hours * 30) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }

Image {
x: 92.5; y: 27
source: "hour.png"
smooth: true
transform: Rotation {
id: hourRotation
origin.x: 7.5; origin.y: 73;
angle: (clock.hours * 30) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
}

Image {
x: 93.5; y: 17
source: "minute.png"
smooth: true
transform: Rotation {
id: minuteRotation
origin.x: 6.5; origin.y: 83;
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
Image {
x: 93.5; y: 17
source: "minute.png"
smooth: true
transform: Rotation {
id: minuteRotation
origin.x: 6.5; origin.y: 83;
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
}

Image {
x: 97.5; y: 20
source: "second.png"
smooth: true
transform: Rotation {
id: secondRotation
origin.x: 2.5; origin.y: 80;
angle: clock.seconds * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
Image {
x: 97.5; y: 20
source: "second.png"
smooth: true
transform: Rotation {
id: secondRotation
origin.x: 2.5; origin.y: 80;
angle: clock.seconds * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
}

Image {
anchors.centerIn: background; source: "center.png"
}
Image {
anchors.centerIn: background; source: "center.png"
}

Text {
id: cityLabel
y: 200; anchors.horizontalCenter: parent.horizontalCenter
color: "white"
font.bold: true; font.pixelSize: 14
style: Text.Raised; styleColor: "black"
Text {
id: cityLabel
y: 210; anchors.horizontalCenter: parent.horizontalCenter
color: "white"
font.family: "Helvetica"
font.bold: true; font.pixelSize: 16
style: Text.Raised; styleColor: "black"
}
}
}
Binary file added examples/declarative/toys/clocks/content/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 16da679

Please sign in to comment.