Changeset View
Changeset View
Standalone View
Standalone View
Modules/energy/package/contents/ui/Graph.qml
Show All 31 Lines | |||||
32 | Canvas | 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 | ||
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 39 Lines | 82 | onPaint: { | |||
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(canvas.width, y) | ||
135 | c.stroke() | 140 | c.stroke() | ||
136 | } | 141 | } | ||
142 | | ||||
143 | // Draw the X value texts | ||||
144 | c.textAlign = "center" | ||||
145 | c.lineWidth = 1 | ||||
146 | c.strokeStyle = 'rgba(0, 0, 0, 0.02)' | ||||
147 | | ||||
148 | var xDivisions = xDuration / xDivisionWidth * 1000 | ||||
149 | var xTickPadding = (canvas.width - xPadding) / 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) { | ||||
166 | diff = ((hours - 12) * 60 * 60 + minutes * 60 + seconds) * 1000 // ms | ||||
167 | } | ||||
meven: A switch statement should be clearer here. | |||||
168 | | ||||
169 | if (xTicksAt == xTicksAtFullHour) { | ||||
170 | diff = (minutes * 60 + seconds) * 1000 // ms | ||||
171 | } | ||||
172 | | ||||
173 | if (xTicksAt == xTicksAtHalfHour) { | ||||
174 | diff = ((minutes - 30) * 60 + seconds) * 1000 // ms | ||||
175 | } | ||||
176 | | ||||
177 | var xCanvasWidth = (canvas.width - xPadding) | ||||
178 | var xTickOffset = plotWidth * (diff / 1000) / xDuration | ||||
179 | var dateChanged = false | ||||
180 | | ||||
181 | for (var i = xDivisions; i >= 0; i--) { | ||||
182 | xTickPos = i*xTickPadding + xPadding - xTickOffset | ||||
183 | | ||||
184 | if ((xTickPos > xPadding) && (xTickPos < canvas.width - 0.25 * xPadding)) | ||||
185 | { | ||||
186 | xTickDateTime = new Date(currentUnixTime - (xDivisions - i) * xDivisionWidth - diff) | ||||
187 | xTickDateStr = xTickDateTime.toLocaleDateString(Qt.locale(), Locale.ShortFormat) | ||||
188 | xTickTimeStr = xTickDateTime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) | ||||
189 | | ||||
190 | if (( (i + 1) % 2 == 0) || (xDivisions < 10)) | ||||
191 | { | ||||
192 | // Display the time | ||||
193 | c.fillText(xTickTimeStr, xTickPos, canvas.height - yPadding / 2) | ||||
194 | | ||||
195 | // If the date has changed and is not the current day in a <= 24h graph, display it | ||||
196 | // Always display the date for 48h and 1 week graphs | ||||
197 | if ((xTickDateStr != lastDateStr)|| (dateChanged) || (xDuration > (60*60*24))) { | ||||
198 | c.fillText(xTickDateStr, xTickPos, canvas.height - yPadding / 4) | ||||
199 | dateChanged = false | ||||
200 | } | ||||
201 | | ||||
202 | // Tick markers | ||||
203 | c.moveTo(xTickPos, canvas.height - yPadding) | ||||
204 | c.lineTo(xTickPos, canvas.height - (yPadding * 4) / 5) | ||||
205 | c.stroke() | ||||
206 | } | ||||
207 | // Vertical grid line | ||||
208 | c.moveTo(xTickPos, yPadding) | ||||
209 | c.lineTo(xTickPos, canvas.height - yPadding) | ||||
210 | c.stroke() | ||||
211 | if (lastDateStr != xTickDateStr) { | ||||
212 | dateChanged = true | ||||
213 | } | ||||
214 | lastDateStr = xTickDateStr | ||||
215 | } | ||||
216 | } | ||||
137 | } | 217 | } | ||
138 | } | 218 | } |
A switch statement should be clearer here.