Differential D23520 Diff 66055 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, currentUnixTime) {
64 var scaledX = (plot.x - xMin) * plotWidth / (xMax-xMin); 69​ var scaledX = (plot.x - (currentUnixTime / 1000 - xDuration)) / xDuration * plotWidth
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​
105​ // For scaling
106​ var currentUnixTime = Date.now()
107​ var xMinUnixTime = currentUnixTime - xDuration * 1000
108​
100 // Draw the line graph 109​ // Draw the line graph
101 c.beginPath(); 110​ c.beginPath();
102 var point = scalePoint(data[0]); 111​
103 c.moveTo(point.x, point.y); 112​ var index = 0
104 for(var i = 1; i < data.length; i ++) { 113​ while (data[index].x < (xMinUnixTime / 1000)) {
105 point = scalePoint(data[i]) 114​ index++
106 c.lineTo(point.x, point.y); 115​ }
116​
117​ var firstPoint = scalePoint(data[index], currentUnixTime)
118​ c.moveTo(firstPoint.x, firstPoint.y)
119​
120​ var point
121​ for (var i = index + 1; i < data.length; i++) {
122​ if (data[i].x > (xMinUnixTime / 1000)) {
123​ point = scalePoint(data[i], currentUnixTime)
124​ c.lineTo(point.x, point.y)
125​ }
107 } 126​ }
127​
108 c.stroke(); 128​ c.stroke();
129​ c.strokeStyle = 'rgba(0, 0, 0, 0)';
109 c.lineTo(point.x, height-yPadding); 130​ c.lineTo(point.x, height - yPadding);
110 c.lineTo(xPadding, height-yPadding); 131​ c.lineTo(firstPoint.x, height - yPadding);
111 c.fill(); 132​ c.fill();
112 133​
113 c.closePath() 134​ c.closePath()
114 135​
115 136​
116 // Draw the frame on top 137​ // Draw the frame on top
117 138​
118 //draw an outline 139​ //draw an outline
119 c.strokeStyle = 'rgba(0,0,0,0.02)'; 140​ c.strokeStyle = 'rgba(0,50,0,0.02)';
120 c.lineWidth = 1; 141​ c.lineWidth = 1;
121 c.rect(xPadding-1, yPadding-1, plotWidth+2, plotHeight+2); 142​ c.rect(xPadding - 1, yPadding - 1, plotWidth + 2, plotHeight + 2);
122 143​
123 // Draw the Y value texts 144​ // Draw the Y value texts
124 c.fillStyle = palette.text; 145​ c.fillStyle = palette.text;
125 c.textAlign = "right" 146​ c.textAlign = "right"
126 c.textBaseline = "middle"; 147​ c.textBaseline = "middle";
127 for(var i = 0; i <= yMax; i += yStep) { 148​ for(var i = 0; i <= yMax; i += yStep) {
128 var y = scalePoint(Qt.point(0,i)).y; 149​ var y = scalePoint(Qt.point(0,i)).y;
129 150​
130 c.fillText(i + canvas.yUnits, xPadding - 10, y); 151​ c.fillText(i + canvas.yUnits, xPadding - 10, y);
131 152​
132 //grid line 153​ //grid line
133 c.moveTo(xPadding,y) 154​ c.moveTo(xPadding, y)
134 c.lineTo(canvas.width, y) 155​ c.lineTo(plotWidth + xPadding, y)
156​ }
135 c.stroke() 157​ c.stroke()
158​
159​ // Draw the X value texts
160​ c.textAlign = "center"
161​ c.lineWidth = 1
162​ c.strokeStyle = 'rgba(0, 0, 0, 0.15)'
163​
164​ var xDivisions = xDuration / xDivisionWidth * 1000
165​ var xGridDistance = plotWidth / xDivisions
166​ var xTickPos
167​ var xTickDateTime
168​ var xTickDateStr
169​ var xTickTimeStr
170​
171​ var currentDateTime = new Date()
172​ var lastDateStr = currentDateTime.toLocaleDateString(Qt.locale(), Locale.ShortFormat)
173​
174​ var hours = currentDateTime.getHours()
175​ var minutes = currentDateTime.getMinutes()
176​ var seconds = currentDateTime.getSeconds()
177​
178​ var diff // ms
179​
180​ switch (xTicksAt) {
181​ case xTicksAtTwelveOClock:
mevenUnsubmitted
Not Done

A switch statement should be clearer here.

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