Changeset View
Changeset View
Standalone View
Standalone View
applets/analog-clock/contents/ui/analogclock.qml
Show First 20 Lines • Show All 87 Lines • ▼ Show 20 Line(s) | 87 | MouseArea { | |||
---|---|---|---|---|---|
88 | anchors.fill: parent | 88 | anchors.fill: parent | ||
89 | onClicked: plasmoid.expanded = !plasmoid.expanded | 89 | onClicked: plasmoid.expanded = !plasmoid.expanded | ||
90 | } | 90 | } | ||
91 | 91 | | |||
92 | 92 | | |||
93 | PlasmaCore.Svg { | 93 | PlasmaCore.Svg { | ||
94 | id: clockSvg | 94 | id: clockSvg | ||
95 | imagePath: "widgets/clock" | 95 | imagePath: "widgets/clock" | ||
96 | function estimateHorizontalHandShadowOffset() { | ||||
97 | var id = "hint-hands-shadow-offset-to-west"; | ||||
98 | if (hasElement(id)) { | ||||
99 | return -elementSize(id).width; | ||||
100 | } | ||||
101 | id = "hint-hands-shadows-offset-to-east"; | ||||
102 | if (hasElement(id)) { | ||||
103 | return elementSize(id).width; | ||||
104 | } | ||||
105 | return 0; | ||||
106 | } | ||||
107 | function estimateVerticalHandShadowOffset() { | ||||
108 | var id = "hint-hands-shadow-offset-to-north"; | ||||
109 | if (hasElement(id)) { | ||||
110 | return -elementSize(id).height; | ||||
111 | } | ||||
112 | id = "hint-hands-shadow-offset-to-south"; | ||||
113 | if (hasElement(id)) { | ||||
114 | return elementSize(id).height; | ||||
115 | } | ||||
116 | return 0; | ||||
117 | } | ||||
118 | property double naturalHorizontalHandShadowOffset: estimateHorizontalHandShadowOffset() | ||||
119 | property double naturalVerticalHandShadowOffset: estimateVerticalHandShadowOffset() | ||||
120 | onRepaintNeeded: { | ||||
121 | naturalHorizontalHandShadowOffset = estimateHorizontalHandShadowOffset(); | ||||
122 | naturalVerticalHandShadowOffset = estimateVerticalHandShadowOffset(); | ||||
123 | } | ||||
96 | } | 124 | } | ||
97 | 125 | | |||
98 | Item { | 126 | Item { | ||
99 | id: clock | 127 | id: clock | ||
100 | width: parent.width | 128 | width: parent.width | ||
101 | anchors { | 129 | anchors { | ||
102 | top: parent.top | 130 | top: parent.top | ||
103 | bottom: showTimezone ? timezoneBg.top : parent.bottom | 131 | bottom: showTimezone ? timezoneBg.top : parent.bottom | ||
104 | } | 132 | } | ||
133 | readonly property double svgScale: face.width / face.naturalSize.width | ||||
134 | readonly property double horizontalShadowOffset: | ||||
135 | Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) % 2 | ||||
136 | readonly property double verticalShadowOffset: | ||||
137 | Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) % 2 | ||||
105 | 138 | | |||
106 | PlasmaCore.SvgItem { | 139 | PlasmaCore.SvgItem { | ||
107 | id: face | 140 | id: face | ||
108 | anchors.centerIn: parent | 141 | anchors.centerIn: parent | ||
109 | width: Math.min(parent.width, parent.height) | 142 | width: Math.min(parent.width, parent.height) | ||
110 | height: Math.min(parent.width, parent.height) | 143 | height: Math.min(parent.width, parent.height) | ||
111 | svg: clockSvg | 144 | svg: clockSvg | ||
112 | elementId: "ClockFace" | 145 | elementId: "ClockFace" | ||
113 | } | 146 | } | ||
114 | 147 | | |||
115 | Hand { | 148 | Hand { | ||
116 | anchors.topMargin: -6 | | |||
117 | elementId: "HourHandShadow" | 149 | elementId: "HourHandShadow" | ||
150 | rotationCenterHintId: "hint-hourhandshadow-rotation-center-offset" | ||||
151 | horizontalRotationOffset: clock.horizontalShadowOffset | ||||
152 | verticalRotationOffset: clock.verticalShadowOffset | ||||
118 | rotation: 180 + hours * 30 + (minutes/2) | 153 | rotation: 180 + hours * 30 + (minutes/2) | ||
119 | svgScale: face.width / face.naturalSize.width | 154 | svgScale: clock.svgScale | ||
120 | 155 | | |||
121 | } | 156 | } | ||
122 | Hand { | 157 | Hand { | ||
123 | elementId: "HourHand" | 158 | elementId: "HourHand" | ||
159 | rotationCenterHintId: "hint-hourhand-rotation-center-offset" | ||||
124 | rotation: 180 + hours * 30 + (minutes/2) | 160 | rotation: 180 + hours * 30 + (minutes/2) | ||
125 | svgScale: face.width / face.naturalSize.width | 161 | svgScale: clock.svgScale | ||
126 | } | 162 | } | ||
127 | 163 | | |||
128 | Hand { | 164 | Hand { | ||
129 | anchors.topMargin: 3 | | |||
130 | elementId: "MinuteHandShadow" | 165 | elementId: "MinuteHandShadow" | ||
166 | rotationCenterHintId: "hint-minutehandshadow-rotation-center-offset" | ||||
167 | horizontalRotationOffset: clock.horizontalShadowOffset | ||||
168 | verticalRotationOffset: clock.verticalShadowOffset | ||||
131 | rotation: 180 + minutes * 6 | 169 | rotation: 180 + minutes * 6 | ||
132 | svgScale: face.width / face.naturalSize.width | 170 | svgScale: clock.svgScale | ||
133 | } | 171 | } | ||
134 | Hand { | 172 | Hand { | ||
135 | elementId: "MinuteHand" | 173 | elementId: "MinuteHand" | ||
174 | rotationCenterHintId: "hint-minutehand-rotation-center-offset" | ||||
136 | rotation: 180 + minutes * 6 | 175 | rotation: 180 + minutes * 6 | ||
137 | svgScale: face.width / face.naturalSize.width | 176 | svgScale: clock.svgScale | ||
138 | } | 177 | } | ||
139 | 178 | | |||
140 | Hand { | 179 | Hand { | ||
141 | anchors.topMargin: 2 | | |||
142 | elementId: "SecondHandShadow" | 180 | elementId: "SecondHandShadow" | ||
181 | rotationCenterHintId: "hint-secondhandshadow-rotation-center-offset" | ||||
182 | horizontalRotationOffset: clock.horizontalShadowOffset | ||||
183 | verticalRotationOffset: clock.verticalShadowOffset | ||||
143 | rotation: 180 + seconds * 6 | 184 | rotation: 180 + seconds * 6 | ||
144 | visible: showSecondsHand | 185 | visible: showSecondsHand | ||
145 | svgScale: face.width / face.naturalSize.width | 186 | svgScale: clock.svgScale | ||
146 | } | 187 | } | ||
147 | Hand { | 188 | Hand { | ||
148 | elementId: "SecondHand" | 189 | elementId: "SecondHand" | ||
190 | rotationCenterHintId: "hint-secondhand-rotation-center-offset" | ||||
149 | rotation: 180 + seconds * 6 | 191 | rotation: 180 + seconds * 6 | ||
150 | visible: showSecondsHand | 192 | visible: showSecondsHand | ||
151 | svgScale: face.width / face.naturalSize.width | 193 | svgScale: clock.svgScale | ||
152 | } | 194 | } | ||
153 | 195 | | |||
154 | PlasmaCore.SvgItem { | 196 | PlasmaCore.SvgItem { | ||
155 | id: center | 197 | id: center | ||
156 | width: naturalSize.width * face.width / face.naturalSize.width | 198 | width: naturalSize.width * clock.svgScale | ||
157 | height: naturalSize.height * face.width / face.naturalSize.width | 199 | height: naturalSize.height * clock.svgScale | ||
158 | anchors.centerIn: clock | 200 | anchors.centerIn: clock | ||
159 | svg: clockSvg | 201 | svg: clockSvg | ||
160 | elementId: "HandCenterScrew" | 202 | elementId: "HandCenterScrew" | ||
161 | z: 1000 | 203 | z: 1000 | ||
162 | } | 204 | } | ||
163 | 205 | | |||
164 | PlasmaCore.SvgItem { | 206 | PlasmaCore.SvgItem { | ||
165 | anchors.fill: face | 207 | anchors.fill: face | ||
166 | svg: clockSvg | 208 | svg: clockSvg | ||
167 | elementId: "Glass" | 209 | elementId: "Glass" | ||
168 | width: naturalSize.width * face.width / face.naturalSize.width | 210 | width: naturalSize.width * clock.svgScale | ||
169 | height: naturalSize.height * face.width / face.naturalSize.width | 211 | height: naturalSize.height * clock.svgScale | ||
170 | } | 212 | } | ||
171 | } | 213 | } | ||
172 | 214 | | |||
173 | PlasmaCore.FrameSvgItem { | 215 | PlasmaCore.FrameSvgItem { | ||
174 | id: timezoneBg | 216 | id: timezoneBg | ||
175 | anchors { | 217 | anchors { | ||
176 | horizontalCenter: parent.horizontalCenter | 218 | horizontalCenter: parent.horizontalCenter | ||
177 | bottom: parent.bottom | 219 | bottom: parent.bottom | ||
Show All 22 Lines |