1 | function drawDiagramm(mylabels, myvalues) {
|
2 | "use strict";
|
3 |
|
4 | var lineChartData = {
|
5 | labels : mylabels,
|
6 | datasets : [
|
7 | {
|
8 | label: "Druckmessung",
|
9 | fillColor : "rgba(151,187,205,0.2)",
|
10 | strokeColor : "rgba(151,187,205,1)",
|
11 | pointColor : "rgba(151,187,205,1)",
|
12 | pointStrokeColor : "#fff",
|
13 | pointHighlightFill : "#fff",
|
14 | pointHighlightStroke : "rgba(151,187,205,1)",
|
15 | data : myvalues
|
16 | }
|
17 | ]
|
18 | };
|
19 | var ctx = document.getElementById("diagrammMessung").getContext("2d");
|
20 | window.myLine = new Chart(ctx).Line(lineChartData, {
|
21 | responsive: true,
|
22 | pointDot: false
|
23 | });
|
24 | }
|
25 |
|
26 | function changeSignal(auswertung) {
|
27 | "use strict";
|
28 | if (auswertung === 1) {
|
29 | document.getElementById("Auswertung").style.background = "green";
|
30 | document.getElementById("Auswertung").value = "Ergebnis: GUT";
|
31 | } else if (auswertung === 0) {
|
32 | document.getElementById("Auswertung").style.background = "red";
|
33 | document.getElementById("Auswertung").value = "Ergebnis: SCHLECHT";
|
34 | }
|
35 | }
|
36 |
|
37 | function changeTableValues(mittelwert, flaeche, max, zeitGesamt, stoesselZeit) {
|
38 | "use strict";
|
39 | document.getElementById("DruckMittelwert").firstChild.nodeValue = mittelwert;
|
40 | document.getElementById("DruckFlaeche").firstChild.nodeValue = flaeche;
|
41 | document.getElementById("DruckMax").firstChild.nodeValue = max;
|
42 | document.getElementById("DruckZeit").firstChild.nodeValue = zeitGesamt;
|
43 | document.getElementById("DruckStoesselZeit").firstChild.nodeValue = stoesselZeit;
|
44 | }
|
45 |
|
46 | function changeTableColor(mittelwert, flaeche, max, zeitGesamt, stoesselZeit) {
|
47 | "use strict";
|
48 | if (mittelwert === 1) {
|
49 | document.getElementById("DruckMittelwert").style.backgroundColor = "rgba(0,255,0,0.5)";
|
50 | } else if (mittelwert === 0) {
|
51 | document.getElementById("DruckMittelwert").style.backgroundColor = "rgba(255,0,0,0.5)";
|
52 | }
|
53 | if (flaeche === 1) {
|
54 | document.getElementById("DruckFlaeche").style.backgroundColor = "rgba(0,255,0,0.5)";
|
55 | } else if (flaeche === 0) {
|
56 | document.getElementById("DruckFlaeche").style.backgroundColor = "rgba(255,0,0,0.5)";
|
57 | }
|
58 | if (max === 1) {
|
59 | document.getElementById("DruckMax").style.backgroundColor = "rgba(0,255,0,0.5)";
|
60 | } else if (max === 0) {
|
61 | document.getElementById("DruckMax").style.backgroundColor = "rgba(255,0,0,0.5)";
|
62 | }
|
63 | if (zeitGesamt === 1) {
|
64 | document.getElementById("DruckZeit").style.backgroundColor = "rgba(0,255,0,0.5)";
|
65 | } else if (zeitGesamt === 0) {
|
66 | document.getElementById("DruckZeit").style.backgroundColor = "rgba(255,0,0,0.5)";
|
67 | }
|
68 | if (stoesselZeit === 1) {
|
69 | document.getElementById("DruckStoesselZeit").style.backgroundColor = "rgba(0,255,0,0.5)";
|
70 | } else if (stoesselZeit === 0) {
|
71 | document.getElementById("DruckStoesselZeit").style.backgroundColor = "rgba(255,0,0,0.5)";
|
72 | }
|
73 | }
|
74 |
|
75 | function getValues() {
|
76 | "use strict";
|
77 | var request = false,
|
78 | mylabels = [],
|
79 | myvalues = [];
|
80 | function measureComplete() {
|
81 | if (request.readyState === 4) {
|
82 | if (request.status === 200) {
|
83 | var data = JSON.parse(request.responseText),
|
84 | i = 0;
|
85 | for (i = 0; i < data.Anzahl; i += 1) {
|
86 | mylabels.push(data.Zeit[i]);
|
87 | myvalues.push(data.Messwert[i]);
|
88 | }
|
89 | drawDiagramm(mylabels, myvalues);
|
90 | changeSignal(data.Auswertung);
|
91 | changeTableColor(data.Mittelwert[1], data.Flaeche[1], data.Max[1], data.ZeitGesamt[1], data.StoesselZeit[1]);
|
92 | changeTableValues(data.Mittelwert[0], data.Flaeche[0], data.Max[0], data.ZeitGesamt[0], data.StoesselZeit[0]);
|
93 | }
|
94 | }
|
95 | }
|
96 | request = new XMLHttpRequest();
|
97 | if (request) {
|
98 | request.open("GET", "/getvalues?id=" + Math.random(), true);
|
99 | request.onreadystatechange = measureComplete;
|
100 | request.send(null);
|
101 | }
|
102 | }
|
103 |
|
104 | function startMeasure() {
|
105 | "use strict";
|
106 | var request = false;
|
107 | window.myLine.destroy();
|
108 | request = new XMLHttpRequest();
|
109 | if (request) {
|
110 | request.open("GET", "/startmeasure?id=" + Math.random(), true);
|
111 | request.send(null);
|
112 | getValues();
|
113 | }
|
114 | }
|
115 |
|
116 | function resizeCanvas() {
|
117 | "use strict";
|
118 | window.myLine.destroy();
|
119 | var canvas = document.getElementById('diagrammMessung'),
|
120 | parent = document.getElementById('diagramm');
|
121 | canvas.width = parent.offsetWidth;
|
122 | canvas.height = parent.offsetHeight;
|
123 | /**
|
124 | * Your drawings need to be inside this function otherwise they will be reset when
|
125 | * you resize the browser window and the canvas goes will be cleared.
|
126 | */
|
127 | getValues();
|
128 | }
|
129 |
|
130 | // resize the canvas to fill browser window dynamically
|
131 | window.addEventListener('resize', resizeCanvas, false);
|
