Differential D23520 Diff 65457 Modules/energy/package/contents/ui/Graph.qml

Changeset View

Standalone View

View Options

Modules/energy/package/contents/ui/Graph.qml

Show All 31 Lines
32Canvas 32​Canvas
33{ 33​{
34 width: 500 34​ width: 500
35 height: 500 35​ height: 500
36 id: canvas 36​ id: canvas
37 antialiasing: true 37​ antialiasing: true
38 38​
39 property int xPadding: 45 39​ property int xPadding: 45
40 property int yPadding: 10 40​ property int yPadding: 40
41 41​
42 property var data //expect an array of QPointF 42​ property var data //expect an array of QPointF
43 43​
44 property real yMax: 100 44​ property real yMax: 100
45 property real xMax: 100 45​ property real xMax: 100
46 property real yMin: 0 46​ property real yMin: 0
47 property real xMin: 0 47​ property real xMin: 0
48 property real yStep: 20 48​ property real yStep: 20
49 49​
50 property string yUnits: "" 50​ property string yUnits: ""
51 property string xUnits: "" 51​ property string xUnits: ""
52 52​
53​ property real xDuration: 3600
54​ property real xDivisions: 6
55​ property real xDivisionWidth: 600000
56​ property real xTicksAt: xTicksAtDontCare
57​
53 //internal 58​ //internal
54 59​
55 property real plotWidth: width - xPadding 60​ property real plotWidth: width - xPadding * 1.5
56 property real plotHeight: height - yPadding *2 61​ property real plotHeight: height - yPadding * 2
57 62​
58 onDataChanged: { 63​ onDataChanged: {
59 canvas.requestPaint(); 64​ canvas.requestPaint();
60 } 65​ }
61 66​
62 //take a QPointF 67​ //take a QPointF
63 function scalePoint(plot) { 68​ function scalePoint(plot) {
64 var scaledX = (plot.x - xMin) * plotWidth / (xMax-xMin); 69​ var scaledX = (plot.x - xMin) * plotWidth / (xMax - xMin);
65 var scaledY = (plot.y - yMin) * plotHeight / (yMax-yMin); 70​ var scaledY = (plot.y - yMin) * plotHeight / (yMax - yMin);
66 71​
67 return Qt.point(xPadding + scaledX, 72​ return Qt.point(xPadding + scaledX,
68 height - yPadding - scaledY); 73​ height - yPadding - scaledY);
69 } 74​ }
70 75​
71 SystemPalette { 76​ SystemPalette {
72 id: palette; 77​ id: palette;
73 colorGroup: SystemPalette.Active 78​ colorGroup: SystemPalette.Active
Show All 9 Lines82 onPaint: {
83 c.fillStyle = palette.base 88​ c.fillStyle = palette.base
84 c.fillRect(xPadding, yPadding, plotWidth, plotHeight); 89​ c.fillRect(xPadding, yPadding, plotWidth, plotHeight);
85 90​
86 //reset for fonts and stuff 91​ //reset for fonts and stuff
87 c.fillStyle = palette.text 92​ c.fillStyle = palette.text
88 93​
89 //Draw the lines 94​ //Draw the lines
90 95​
91 c.lineWidth = 2; 96​ c.lineWidth = 1;
92 c.lineJoin = 'round'; 97​ c.lineJoin = 'round';
93 c.lineCap = 'round'; 98​ c.lineCap = 'round';
94 c.strokeStyle = 'rgba(255, 0, 0, 1)'; 99​ c.strokeStyle = 'rgba(255, 0, 0, 1)';
95 var gradient = c.createLinearGradient(0,0,0,height); 100​ var gradient = c.createLinearGradient(0,0,0,height);
96 gradient.addColorStop(0, 'rgba(255, 0, 0, 0.2)'); 101​ gradient.addColorStop(0, 'rgba(255, 0, 0, 0.2)');
97 gradient.addColorStop(1, 'rgba(255, 0, 0, 0.05)'); 102​ gradient.addColorStop(1, 'rgba(255, 0, 0, 0.05)');
98 c.fillStyle = gradient; 103​ c.fillStyle = gradient;
99 104​
100 // Draw the line graph 105​ // Draw the line graph
101 c.beginPath(); 106​ c.beginPath();
102 var point = scalePoint(data[0]); 107​ var point = scalePoint(data[0]);
103 c.moveTo(point.x, point.y); 108​ c.moveTo(point.x, point.y);
104 for(var i = 1; i < data.length; i ++) { 109​ for(var i = 1; i < data.length; i ++) {
105 point = scalePoint(data[i]) 110​ point = scalePoint(data[i])
106 c.lineTo(point.x, point.y); 111​ c.lineTo(point.x, point.y);
107 } 112​ }
108 c.stroke(); 113​ c.stroke();
109 c.lineTo(point.x, height-yPadding); 114​ c.lineTo(point.x, height - yPadding);
110 c.lineTo(xPadding, height-yPadding); 115​ c.lineTo(xPadding, height - yPadding);
111 c.fill(); 116​ c.fill();
112 117​
113 c.closePath() 118​ c.closePath()
114 119​
115 120​
116 // Draw the frame on top 121​ // Draw the frame on top
117 122​
118 //draw an outline 123​ //draw an outline
119 c.strokeStyle = 'rgba(0,0,0,0.02)'; 124​ c.strokeStyle = 'rgba(0,0,0,0.02)';
120 c.lineWidth = 1; 125​ c.lineWidth = 1;
121 c.rect(xPadding-1, yPadding-1, plotWidth+2, plotHeight+2); 126​ c.rect(xPadding - 1, yPadding - 1, plotWidth + 2, plotHeight + 2);
122 127​
123 // Draw the Y value texts 128​ // Draw the Y value texts
124 c.fillStyle = palette.text; 129​ c.fillStyle = palette.text;
125 c.textAlign = "right" 130​ c.textAlign = "right"
126 c.textBaseline = "middle"; 131​ c.textBaseline = "middle";
127 for(var i = 0; i <= yMax; i += yStep) { 132​ for(var i = 0; i <= yMax; i += yStep) {
128 var y = scalePoint(Qt.point(0,i)).y; 133​ var y = scalePoint(Qt.point(0,i)).y;
129 134​
130 c.fillText(i + canvas.yUnits, xPadding - 10, y); 135​ c.fillText(i + canvas.yUnits, xPadding - 10, y);
131 136​
132 //grid line 137​ //grid line
133 c.moveTo(xPadding,y) 138​ c.moveTo(xPadding, y)
134 c.lineTo(canvas.width, y) 139​ c.lineTo(plotWidth + xPadding, y)
140​ }
135 c.stroke() 141​ c.stroke()
142​
143​ // Draw the X value texts
144​ c.textAlign = "center"
145​ c.lineWidth = 1
146​ c.strokeStyle = 'rgba(0, 0, 0, 0.15)'
147​
148​ var xDivisions = xDuration / xDivisionWidth * 1000
149​ var xGridDistance = plotWidth / xDivisions
150​ var xTickPos
151​ var xTickDateTime
152​ var xTickDateStr
153​ var xTickTimeStr
154​
155​ var currentUnixTime = Date.now()
156​ var currentDateTime = new Date()
157​ var lastDateStr = currentDateTime.toLocaleDateString(Qt.locale(), Locale.ShortFormat)
158​
159​ var hours = currentDateTime.getHours()
160​ var minutes = currentDateTime.getMinutes()
161​ var seconds = currentDateTime.getSeconds()
162​
163​ var diff = 0
164​
165​ if (xTicksAt == xTicksAtTwelveOClock) {
mevenUnsubmitted
Not Done

A switch statement should be clearer here.

meven: A switch statement should be clearer here.
166​ diff = ((hours - 12) * 60 * 60 + minutes * 60 + seconds) * 1000 // ms
167​ }
168​
169​ if (xTicksAt == xTicksAtFullHour) {
170​ diff = (minutes * 60 + seconds) * 1000 // ms
171​ }
172​
173​ if (xTicksAt == xTicksAtFullSecondHour) {
174​ diff = (minutes * 60 + seconds) * 1000 // ms
175​ }
176​
177​ if (xTicksAt == xTicksAtHalfHour) {
178​ diff = ((minutes - 30) * 60 + seconds) * 1000 // ms
179​ }
180​
181​ if (xTicksAt == xTicksAtTenMinutes) {
182​ diff = ((minutes - 10) * 60 + seconds) * 1000 // ms
183​ }
184​
185​ var xCanvasWidth = plotWidth
186​ var xGridOffset = plotWidth * (diff / 1000) / xDuration
187​ var dateChanged = false
188​
189​ var dashedLines = 50
190​ var dashedLineLength = plotHeight / dashedLines
191​ var dashedLineDutyCycle
192​
193​ for (var i = xDivisions; i >= -1; i--) {
194​ xTickPos = i * xGridDistance + xPadding - xGridOffset
195​
196​ if ((xTickPos > xPadding) && (xTickPos < plotWidth + xPadding))
197​ {
198​ xTickDateTime = new Date(currentUnixTime - (xDivisions - i) * xDivisionWidth - diff)
199​ xTickDateStr = xTickDateTime.toLocaleDateString(Qt.locale(), Locale.ShortFormat)
200​ xTickTimeStr = xTickDateTime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
201​
202​ if (lastDateStr != xTickDateStr) {
203​ dateChanged = true
204​ }
205​
206​ if ((i % 2 == 0) || (xDivisions < 10))
207​ {
208​ // Display the time
209​ c.fillText(xTickTimeStr, xTickPos, canvas.height - yPadding / 2)
210​
211​ // If the date has changed and is not the current day in a <= 24h graph, display it
212​ // Always display the date for 48h and 1 week graphs
213​ if (dateChanged || (xDuration > (60*60*48))) {
214​ c.fillText(xTickDateStr, xTickPos, canvas.height - yPadding / 4)
215​ dateChanged = false
136 } 216​ }
217​
218​ // Tick markers
219​ c.moveTo(xTickPos, canvas.height - yPadding)
220​ c.lineTo(xTickPos, canvas.height - (yPadding * 4) / 5)
221​
222​ dashedLineDutyCycle = 0.5
223​ } else {
224​ dashedLineDutyCycle = 0.1
225​ }
226​
227​ for (var j = 0; j < dashedLines; j++) {
228​ c.moveTo(xTickPos, yPadding + j * dashedLineLength)
229​ c.lineTo(xTickPos, yPadding + j * dashedLineLength + dashedLineDutyCycle * dashedLineLength)
230​ }
231​ lastDateStr = xTickDateStr
232​ }
233​ }
234​ c.stroke()
137 } 235​ }
138} 236​}