Changeset View
Changeset View
Standalone View
Standalone View
plasmoid/contents/ui/LeftBarAnim.qml
- This file was added.
1 | import QtQuick 2.7 | ||||
---|---|---|---|---|---|
2 | import QtQuick.Controls 2.0 | ||||
3 | import QtQuick.Layouts 1.3 | ||||
4 | | ||||
5 | Item { | ||||
6 | | ||||
7 | //anchors.fill: parent | ||||
8 | | ||||
9 | property bool wsocketMsg: false | ||||
10 | function wsocmsganimtoggle() { onreadyanim.running = true; } | ||||
11 | | ||||
12 | SequentialAnimation { | ||||
13 | id: onconanim | ||||
14 | ParallelAnimation{ | ||||
15 | PropertyAnimation { | ||||
16 | target: canvascentersmallgraphic | ||||
17 | property: "anchors.horizontalCenterOffset" | ||||
18 | from: 0 | ||||
19 | to: 9 | ||||
20 | duration: 300 | ||||
21 | } | ||||
22 | | ||||
23 | PropertyAnimation { | ||||
24 | target: canvascentersmallgraphic | ||||
25 | property: "anchors.verticalCenterOffset" | ||||
26 | from: -13 | ||||
27 | to: -9 | ||||
28 | duration: 300 | ||||
29 | } | ||||
30 | } | ||||
31 | | ||||
32 | ParallelAnimation{ | ||||
33 | PropertyAnimation { | ||||
34 | target: canvascentersmallgraphic | ||||
35 | property: "anchors.horizontalCenterOffset" | ||||
36 | from: 9 | ||||
37 | to: 10.5 | ||||
38 | duration: 300 | ||||
39 | } | ||||
40 | | ||||
41 | PropertyAnimation { | ||||
42 | target: canvascentersmallgraphic | ||||
43 | property: "anchors.verticalCenterOffset" | ||||
44 | from: -9 | ||||
45 | to: -6 | ||||
46 | duration: 300 | ||||
47 | } | ||||
48 | } | ||||
49 | ParallelAnimation{ | ||||
50 | | ||||
51 | PropertyAnimation { | ||||
52 | target: canvascentersmallgraphic | ||||
53 | property: "anchors.horizontalCenterOffset" | ||||
54 | from: 10.5 | ||||
55 | to: 11.5 | ||||
56 | duration: 300 | ||||
57 | } | ||||
58 | | ||||
59 | PropertyAnimation { | ||||
60 | target: canvascentersmallgraphic | ||||
61 | property: "anchors.verticalCenterOffset" | ||||
62 | from: -6 | ||||
63 | to: 6 | ||||
64 | duration: 300 | ||||
65 | } | ||||
66 | } | ||||
67 | | ||||
68 | ParallelAnimation{ | ||||
69 | | ||||
70 | PropertyAnimation { | ||||
71 | target: canvascentersmallgraphic | ||||
72 | property: "anchors.horizontalCenterOffset" | ||||
73 | from: 11.5 | ||||
74 | to: 10.5 | ||||
75 | duration: 300 | ||||
76 | } | ||||
77 | | ||||
78 | PropertyAnimation { | ||||
79 | target: canvascentersmallgraphic | ||||
80 | property: "anchors.verticalCenterOffset" | ||||
81 | from: 6 | ||||
82 | to: 9 | ||||
83 | duration: 300 | ||||
84 | } | ||||
85 | } | ||||
86 | | ||||
87 | ParallelAnimation{ | ||||
88 | | ||||
89 | PropertyAnimation { | ||||
90 | target: canvascentersmallgraphic | ||||
91 | property: "anchors.horizontalCenterOffset" | ||||
92 | from: 10.5 | ||||
93 | to: 0 | ||||
94 | duration: 300 | ||||
95 | } | ||||
96 | | ||||
97 | PropertyAnimation { | ||||
98 | target: canvascentersmallgraphic | ||||
99 | property: "anchors.verticalCenterOffset" | ||||
100 | from: 9 | ||||
101 | to: 13 | ||||
102 | duration: 300 | ||||
103 | } | ||||
104 | } | ||||
105 | | ||||
106 | ParallelAnimation{ | ||||
107 | | ||||
108 | PropertyAnimation { | ||||
109 | target: canvascentersmallgraphic | ||||
110 | property: "anchors.horizontalCenterOffset" | ||||
111 | from: 0 | ||||
112 | to: -9 | ||||
113 | duration: 300 | ||||
114 | } | ||||
115 | | ||||
116 | PropertyAnimation { | ||||
117 | target: canvascentersmallgraphic | ||||
118 | property: "anchors.verticalCenterOffset" | ||||
119 | from: 13 | ||||
120 | to: 9 | ||||
121 | duration: 300 | ||||
122 | } | ||||
123 | } | ||||
124 | | ||||
125 | ParallelAnimation{ | ||||
126 | | ||||
127 | PropertyAnimation { | ||||
128 | target: canvascentersmallgraphic | ||||
129 | property: "anchors.horizontalCenterOffset" | ||||
130 | from: -9 | ||||
131 | to: -10.5 | ||||
132 | duration: 300 | ||||
133 | } | ||||
134 | | ||||
135 | PropertyAnimation { | ||||
136 | target: canvascentersmallgraphic | ||||
137 | property: "anchors.verticalCenterOffset" | ||||
138 | from: 9 | ||||
139 | to: 6 | ||||
140 | duration: 300 | ||||
141 | } | ||||
142 | } | ||||
143 | | ||||
144 | ParallelAnimation{ | ||||
145 | | ||||
146 | PropertyAnimation { | ||||
147 | target: canvascentersmallgraphic | ||||
148 | property: "anchors.horizontalCenterOffset" | ||||
149 | from: -10.5 | ||||
150 | to: -11.5 | ||||
151 | duration: 300 | ||||
152 | } | ||||
153 | | ||||
154 | PropertyAnimation { | ||||
155 | target: canvascentersmallgraphic | ||||
156 | property: "anchors.verticalCenterOffset" | ||||
157 | from: 6 | ||||
158 | to: -6 | ||||
159 | duration: 300 | ||||
160 | } | ||||
161 | } | ||||
162 | ParallelAnimation{ | ||||
163 | | ||||
164 | PropertyAnimation { | ||||
165 | target: canvascentersmallgraphic | ||||
166 | property: "anchors.horizontalCenterOffset" | ||||
167 | from: -11.5 | ||||
168 | to: -10.5 | ||||
169 | duration: 300 | ||||
170 | } | ||||
171 | | ||||
172 | PropertyAnimation { | ||||
173 | target: canvascentersmallgraphic | ||||
174 | property: "anchors.verticalCenterOffset" | ||||
175 | from: -6 | ||||
176 | to: -9 | ||||
177 | duration: 300 | ||||
178 | } | ||||
179 | } | ||||
180 | ParallelAnimation{ | ||||
181 | | ||||
182 | PropertyAnimation { | ||||
183 | target: canvascentersmallgraphic | ||||
184 | property: "anchors.horizontalCenterOffset" | ||||
185 | from: -10.5 | ||||
186 | to: 0 | ||||
187 | duration: 300 | ||||
188 | } | ||||
189 | | ||||
190 | PropertyAnimation { | ||||
191 | target: canvascentersmallgraphic | ||||
192 | property: "anchors.verticalCenterOffset" | ||||
193 | from: -9 | ||||
194 | to: -13 | ||||
195 | duration: 300 | ||||
196 | } | ||||
197 | } | ||||
198 | } | ||||
199 | | ||||
200 | SequentialAnimation { | ||||
201 | id: onreadyanim | ||||
202 | PropertyAnimation { | ||||
203 | target: canvascentersmallgraphic | ||||
204 | property: "anchors.verticalCenterOffset" | ||||
205 | from: -8 | ||||
206 | to: 0 | ||||
207 | duration: 200 | ||||
208 | } | ||||
209 | | ||||
210 | ParallelAnimation { | ||||
211 | PropertyAnimation { | ||||
212 | target: canvascenterhalfgraphic; | ||||
213 | property: "mpie"; | ||||
214 | from: 3 | ||||
215 | to: 4 | ||||
216 | duration: 600 | ||||
217 | } | ||||
218 | | ||||
219 | PropertyAnimation { | ||||
220 | target: canvascentersmallgraphic; | ||||
221 | property: "mpie"; | ||||
222 | from: 1 | ||||
223 | to: 6 | ||||
224 | duration: 600 | ||||
225 | } | ||||
226 | | ||||
227 | RotationAnimator { | ||||
228 | target: canvascenterbiggraphic; | ||||
229 | from: 0; | ||||
230 | to: 720; | ||||
231 | duration: 2000 | ||||
232 | } | ||||
233 | | ||||
234 | RotationAnimator { | ||||
235 | target: canvascenterbggraphic; | ||||
236 | from: 0; | ||||
237 | to: 90; | ||||
238 | duration: 1000 | ||||
239 | } | ||||
240 | } | ||||
241 | | ||||
242 | ParallelAnimation{ | ||||
243 | PropertyAnimation { | ||||
244 | target: canvascentersmallgraphic | ||||
245 | property: "anchors.verticalCenterOffset" | ||||
246 | from: 0 | ||||
247 | to: -8 | ||||
248 | duration: 200 | ||||
249 | } | ||||
250 | PropertyAnimation { | ||||
251 | target: canvascentersmallgraphic; | ||||
252 | property: "mpie"; | ||||
253 | from: 6 | ||||
254 | to: 1 | ||||
255 | duration: 200 | ||||
256 | } | ||||
257 | | ||||
258 | PropertyAnimation { | ||||
259 | target: canvascenterhalfgraphic; | ||||
260 | property: "mpie"; | ||||
261 | from: 4 | ||||
262 | to: 3 | ||||
263 | duration: 600 | ||||
264 | } | ||||
265 | | ||||
266 | RotationAnimator { | ||||
267 | target: canvascenterbggraphic; | ||||
268 | from: 90; | ||||
269 | to: 0; | ||||
270 | duration: 1000 | ||||
271 | } | ||||
272 | | ||||
273 | } | ||||
274 | } | ||||
275 | | ||||
276 | | ||||
277 | | ||||
278 | Canvas { | ||||
279 | id:canvascenterbggraphic | ||||
280 | width: parent.width | ||||
281 | height: parent.height | ||||
282 | anchors.verticalCenter: parent.verticalCenter | ||||
283 | anchors.horizontalCenter: parent.horizontalCenter | ||||
284 | | ||||
285 | property color strokeStyle: Qt.darker(fillStyle, 1.5) | ||||
286 | property color fillStyle: Qt.darker("deepskyblue", 1.1) | ||||
287 | property real lineWidth: 1.6 | ||||
288 | property bool fill: true | ||||
289 | property bool stroke: false | ||||
290 | property real alpha: 1.0 | ||||
291 | property real scale : 1 | ||||
292 | property real rotate : 0 | ||||
293 | antialiasing: true | ||||
294 | smooth: true | ||||
295 | | ||||
296 | onLineWidthChanged:requestPaint(); | ||||
297 | onFillChanged:requestPaint(); | ||||
298 | onStrokeChanged:requestPaint(); | ||||
299 | //onScaleChanged:requestPaint(); | ||||
300 | onRotateChanged:requestPaint(); | ||||
301 | | ||||
302 | renderTarget: Canvas.FramebufferObject | ||||
303 | renderStrategy: Canvas.Cooperative | ||||
304 | | ||||
305 | | ||||
306 | onPaint: { | ||||
307 | var ctxside = canvascenterbggraphic.getContext('2d'); | ||||
308 | var hCenter = width * 0.5 | ||||
309 | var vCenter = height * 0.5 | ||||
310 | var numberOfSides = 6 | ||||
311 | var size = 12 | ||||
312 | | ||||
313 | ctxside.save(); | ||||
314 | ctxside.clearRect(0, 0, canvascenterbggraphic.width, canvascenterbggraphic.height); | ||||
315 | ctxside.globalAlpha = canvascenterbggraphic.alpha; | ||||
316 | ctxside.strokeStyle = canvascenterbggraphic.strokeStyle; | ||||
317 | ctxside.fillStyle = canvascenterbggraphic.fillStyle; | ||||
318 | ctxside.lineWidth = canvascenterbggraphic.lineWidth; | ||||
319 | ctxside.scale(canvascenterbggraphic.scale, canvascenterbggraphic.scale); | ||||
320 | ctxside.rotate(canvascenterbggraphic.rotate); | ||||
321 | ctxside.lineJoin = "round"; | ||||
322 | ctxside.lineCap = "round"; | ||||
323 | | ||||
324 | ctxside.beginPath(); | ||||
325 | ctxside.moveTo(hCenter + size * Math.sin(0), vCenter + size * Math.cos(0)); | ||||
326 | | ||||
327 | for (var i = 1; i <= numberOfSides;i += 1) { | ||||
328 | ctxside.lineTo(hCenter + size * Math.sin(i * 2 * Math.PI / numberOfSides), vCenter + size * Math.cos(i * 2 * Math.PI / numberOfSides)); | ||||
329 | } | ||||
330 | ctxside.closePath(); | ||||
331 | ctxside.fill(); | ||||
332 | ctxside.stroke(); | ||||
333 | | ||||
334 | if (canvascenterbggraphic.fill) | ||||
335 | ctxside.fill(); | ||||
336 | if (canvascenterbggraphic.stroke) | ||||
337 | ctxside.stroke(); | ||||
338 | ctxside.restore(); | ||||
339 | } | ||||
340 | } | ||||
341 | | ||||
342 | Canvas { | ||||
343 | id:canvascenterbiggraphic | ||||
344 | width: parent.width | ||||
345 | height: parent.height | ||||
346 | anchors.verticalCenter: parent.verticalCenter | ||||
347 | anchors.horizontalCenter: parent.horizontalCenter | ||||
348 | anchors.horizontalCenterOffset: 0; | ||||
349 | anchors.verticalCenterOffset: 0; | ||||
350 | transformOrigin: Item.Center | ||||
351 | //anchors.left: canvasleftline.left | ||||
352 | | ||||
353 | //property real viewScale: base.parent.scale | ||||
354 | | ||||
355 | property color strokeStyle: "white"//Qt.darker("white", 1.4) | ||||
356 | property color fillStyle: "lightsteelblue" // red | ||||
357 | property real lineWidth: 1.2 | ||||
358 | property bool fill: false | ||||
359 | property bool stroke: false | ||||
360 | property real alpha: 1.0 | ||||
361 | property real scale : 1 | ||||
362 | property real rotate : 0 | ||||
363 | property real mpie: 5 | ||||
364 | antialiasing: true | ||||
365 | smooth: true | ||||
366 | | ||||
367 | onLineWidthChanged:requestPaint(); | ||||
368 | onFillChanged:requestPaint(); | ||||
369 | onStrokeChanged:requestPaint(); | ||||
370 | onScaleChanged:requestPaint(); | ||||
371 | onRotateChanged:requestPaint(); | ||||
372 | onFillStyleChanged:requestPaint(); | ||||
373 | | ||||
374 | renderTarget: Canvas.FramebufferObject | ||||
375 | renderStrategy: Canvas.Cooperative | ||||
376 | | ||||
377 | | ||||
378 | onPaint: { | ||||
379 | var ctxcircle = canvascenterbiggraphic.getContext('2d'); | ||||
380 | var offleftcenter = width * 0.50 | ||||
381 | var offrightcenter = width * 0.50 | ||||
382 | var vCenter = height * 0.5 | ||||
383 | var vDelta = height / 6 | ||||
384 | | ||||
385 | ctxcircle.save(); | ||||
386 | ctxcircle.clearRect(0, 0, canvascenterbiggraphic.width, canvascenterbiggraphic.height); | ||||
387 | ctxcircle.globalAlpha = canvascenterbiggraphic.alpha; | ||||
388 | ctxcircle.strokeStyle = canvascenterbiggraphic.strokeStyle; | ||||
389 | ctxcircle.fillStyle = canvascenterbiggraphic.fillStyle; | ||||
390 | ctxcircle.lineWidth = canvascenterbiggraphic.lineWidth; | ||||
391 | ctxcircle.scale(canvascenterbiggraphic.scale, canvascenterbiggraphic.scale); | ||||
392 | ctxcircle.rotate(canvascenterbiggraphic.rotate) | ||||
393 | | ||||
394 | ctxcircle.beginPath(); | ||||
395 | ctxcircle.arc(offleftcenter, vCenter, mpie, 10 * Math.PI, false); | ||||
396 | ctxcircle.stroke(); | ||||
397 | | ||||
398 | if (canvascenterbiggraphic.stroke) | ||||
399 | ctxcircle.stroke(); | ||||
400 | ctxcircle.restore(); | ||||
401 | | ||||
402 | } | ||||
403 | } | ||||
404 | Canvas { | ||||
405 | id:canvascenterhalfgraphic | ||||
406 | width: parent.width | ||||
407 | height: parent.height | ||||
408 | anchors.verticalCenter: parent.verticalCenter | ||||
409 | anchors.horizontalCenter: parent.horizontalCenter | ||||
410 | anchors.horizontalCenterOffset: 0; | ||||
411 | anchors.verticalCenterOffset: 0; | ||||
412 | //anchors.left: canvasleftline.left | ||||
413 | | ||||
414 | //property real viewScale: base.parent.scale | ||||
415 | | ||||
416 | property color strokeStyle: "white"//Qt.darker("white", 1.4) | ||||
417 | property color fillStyle: "white" // red | ||||
418 | property real lineWidth: 1.2 | ||||
419 | property bool fill: false | ||||
420 | property bool stroke: false | ||||
421 | property real alpha: 1.0 | ||||
422 | property real scale : 1 | ||||
423 | property real rotate : 0 | ||||
424 | property real mpie: 3 | ||||
425 | antialiasing: true | ||||
426 | smooth: true | ||||
427 | | ||||
428 | onLineWidthChanged:requestPaint(); | ||||
429 | onFillChanged:requestPaint(); | ||||
430 | onStrokeChanged:requestPaint(); | ||||
431 | onScaleChanged:requestPaint(); | ||||
432 | onRotateChanged:requestPaint(); | ||||
433 | onFillStyleChanged:requestPaint(); | ||||
434 | onMpieChanged: requestPaint(); | ||||
435 | | ||||
436 | renderTarget: Canvas.FramebufferObject | ||||
437 | renderStrategy: Canvas.Cooperative | ||||
438 | | ||||
439 | | ||||
440 | onPaint: { | ||||
441 | var ctxcircle = canvascenterhalfgraphic.getContext('2d'); | ||||
442 | var offleftcenter = width * 0.50 | ||||
443 | var offrightcenter = width * 0.50 | ||||
444 | var vCenter = height * 0.5 | ||||
445 | var vDelta = height / 6 | ||||
446 | | ||||
447 | ctxcircle.save(); | ||||
448 | ctxcircle.clearRect(0, 0, canvascenterhalfgraphic.width, canvascenterhalfgraphic.height); | ||||
449 | ctxcircle.globalAlpha = canvascenterhalfgraphic.alpha; | ||||
450 | ctxcircle.strokeStyle = canvascenterhalfgraphic.strokeStyle; | ||||
451 | ctxcircle.fillStyle = canvascenterhalfgraphic.fillStyle; | ||||
452 | ctxcircle.lineWidth = canvascenterhalfgraphic.lineWidth; | ||||
453 | ctxcircle.scale(canvascenterhalfgraphic.scale, canvascenterhalfgraphic.scale); | ||||
454 | ctxcircle.rotate(canvascenterhalfgraphic.rotate); | ||||
455 | | ||||
456 | ctxcircle.beginPath(); | ||||
457 | ctxcircle.arc(offleftcenter, vCenter, mpie, 2.5 * Math.PI, 3.5 * Math.PI , false); | ||||
458 | ctxcircle.fill(); | ||||
459 | ctxcircle.closePath(); | ||||
460 | ctxcircle.stroke(); | ||||
461 | | ||||
462 | if (canvascenterhalfgraphic.stroke) | ||||
463 | ctxcircle.stroke(); | ||||
464 | ctxcircle.restore(); | ||||
465 | } | ||||
466 | } | ||||
467 | | ||||
468 | Canvas { | ||||
469 | id:canvascentersmallgraphic | ||||
470 | width: parent.width | ||||
471 | height: parent.height | ||||
472 | anchors.verticalCenter: parent.verticalCenter | ||||
473 | anchors.horizontalCenter: parent.horizontalCenter | ||||
474 | anchors.horizontalCenterOffset: 0; | ||||
475 | anchors.verticalCenterOffset: -8; | ||||
476 | //anchors.left: canvasleftline.left | ||||
477 | | ||||
478 | //property real viewScale: base.parent.scale | ||||
479 | | ||||
480 | property color strokeStyle: "white"//Qt.darker("white", 1.4) | ||||
481 | property color fillStyle: "white" // red | ||||
482 | property real lineWidth: 0.4 | ||||
483 | property bool fill: false | ||||
484 | property bool stroke: false | ||||
485 | property real alpha: 1.0 | ||||
486 | property real scale : 1 | ||||
487 | property real rotate : 0 | ||||
488 | property real mpie: 1 | ||||
489 | antialiasing: true | ||||
490 | | ||||
491 | onLineWidthChanged:requestPaint(); | ||||
492 | onFillChanged:requestPaint(); | ||||
493 | onStrokeChanged:requestPaint(); | ||||
494 | onScaleChanged:requestPaint(); | ||||
495 | onRotateChanged:requestPaint(); | ||||
496 | onFillStyleChanged:requestPaint(); | ||||
497 | onMpieChanged: requestPaint(); | ||||
498 | | ||||
499 | renderTarget: Canvas.FramebufferObject | ||||
500 | renderStrategy: Canvas.Cooperative | ||||
501 | | ||||
502 | | ||||
503 | onPaint: { | ||||
504 | var ctxcircle = canvascentersmallgraphic.getContext('2d'); | ||||
505 | var offleftcenter = width * 0.50 | ||||
506 | var offrightcenter = width * 0.50 | ||||
507 | var vCenter = height * 0.5 | ||||
508 | var vDelta = height / 6 | ||||
509 | | ||||
510 | ctxcircle.save(); | ||||
511 | ctxcircle.clearRect(0, 0, canvascentersmallgraphic.width, canvascentersmallgraphic.height); | ||||
512 | ctxcircle.globalAlpha = canvascentersmallgraphic.alpha; | ||||
513 | ctxcircle.strokeStyle = canvascentersmallgraphic.strokeStyle; | ||||
514 | ctxcircle.fillStyle = canvascentersmallgraphic.fillStyle; | ||||
515 | ctxcircle.lineWidth = canvascentersmallgraphic.lineWidth; | ||||
516 | ctxcircle.scale(canvascentersmallgraphic.scale, canvascentersmallgraphic.scale); | ||||
517 | ctxcircle.rotate(canvascentersmallgraphic.rotate); | ||||
518 | | ||||
519 | ctxcircle.beginPath(); | ||||
520 | ctxcircle.arc(offleftcenter, vCenter, mpie, 10 * Math.PI , false); | ||||
521 | ctxcircle.fill(); | ||||
522 | ctxcircle.closePath(); | ||||
523 | ctxcircle.stroke(); | ||||
524 | | ||||
525 | if (canvascentersmallgraphic.stroke) | ||||
526 | ctxcircle.stroke(); | ||||
527 | ctxcircle.restore(); | ||||
528 | } | ||||
529 | } | ||||
530 | } |