Kretsloppsodling: EnvDAQ uppgradering med vattentemperaturavkännare (växa säng DAQ) (4 / 5 steg)
Steg 4: GetChartData: JavaScript och miljö Request Handler
Gemensamma aspekter Huvudregistret Diagram Gauge funktion drawWTempTable() { Tilldela nya visualisering till DOM-element Rita tabell funktion updateWTempTable (tid, TempValue, MinTemp, MaxTemp) { Hämta värdet på den sista raden Alert (timeStamp + "" + TempValue); wtempChartData.addRow ([tid, TempValue, MinTemp, MaxTemp]); } ///////////////////////////////////////////////////////////////////////////////////////////////// funktion drawWTempChart() { funktion updateWTempChart() { /////////////////////////////////////////////////////////////////////////////////////////////// Alert ("MinTemp:" + String(minTemp) + "" + "MaxTemp:" + String(maxTemp)); wtempGaugeData = google.visualization.arrayToDataTable([ wtempGauge = ny google.visualization.Gauge(document.getElementById('wtempGauge')); funktion updateWTempGauge (TempValue, tröskel) { }
var WTData = [['Tid', 'WaterTemp', 'Min', 'Max']]; Data för alla vatten temp visualiseringar
var wtempChartData;
var wtempTable;
var wtempChart;
var wtempChartOptions;
var wtempGauge;
var wtempGaugeData;
var wtempGaugeOptions;
Diagramdata
wtempChartData = google.visualization.arrayToDataTable(WTData);
wtempTable = ny google.visualization.Table(document.getElementById('wtempTable'));
wtempTable.draw(wtempChartData);
}
Få den sista radens nummer
var lastRow = wtempChartData.getNumberOfRows();
var tidsstämpel = wtempChartData.getValue (lastRow - 1, 0);
om (timeStamp == 'Nu') {
wtempChartData.removeRow(0);
}
wtempTable.draw(wtempChartData);
wtempChart = ny google.visualization.LineChart(document.getElementById('wtempChart'));
wtempChartOptions = {
animering: {längd: 1000, lätta: "ut"},
backgroundColor: {fyllning: "ingen"}
};
wtempChart.draw (wtempChartData, wtempChartOptions);
}
wtempChart.draw (wtempChartData, wtempChartOptions);
}
/ * Drar vatten temperaturmätare med vatten temperatur diagramdata * /
funktion drawWTempGauge() {
var lastRow = wtempChartData.getNumberOfRows();
var lastTemp = wtempChartData.getValue (lastRow - 1, 1);
var minTemp = wtempChartData.getValue (lastRow - 1, 2);
var maxTemp = wtempChartData.getValue (lastRow - 1, 3);
["Vatten"],
[lastTemp]
]);
wtempGaugeOptions = {
min: 0,
Max: 100,
redFrom: 0, redTo: minTemp,
greenFrom: minTemp, greenTo: maxTemp,
yellowFrom: maxTemp, yellowTo: 100,
minorTicks: 5
};
wtempGauge.draw (wtempGaugeData, wtempGaugeOptions);
}
wtempGaugeData.setValue (0, 0, TempValue, ingång);
wtempGauge.draw (wtempGaugeData, wtempGaugeOptions);
Figur 15. Den nya skriften måste laddas med andra. Öppna /templates/main/scripts.html och sätt i den nya skriften under ljus. Gör inte sätta detta skript först - temp.js måste vara först.
Figur 16. GCT sektionen för vattentemperaturen måste läggas till /templates/main/content.html.
Figur 17. I /static/scripts/main.js, redigera funktionen getChartData() för att hantera det nya vatten temperatur argumentet. Det finns två ställen det behöver ändras. Den första platsen (figur 17) är att driva dummy data i händelse av att data inte har returnerats från servern.
Figur 18. Om faktiska data skickas, driva dessa data till matrisen.
Figur 19. Lägg till uppmaningarna att dra vatten temperatur listorna i slutet av drawCharts() .
Figur 20. Handläggare för att få diagramdata är i environment.py. Redigera GetChartData så att den returnerar vatten temperaturdata och inställningar.
Figur 21. På denna punkt bör du kunna ladda om huvudsidan för webapp och presenteras med de nya diagrammen för vattentemperatur.