Aquaponics: EnvDAQ upgrade met Water temperatuursensor (groeien Bed DAQ) (4 / 5 stap)

Stap 4: GetChartData: JavaScript en milieu Handler aanvragen

Gedeelde aspecten
var WTData = [['Tijd', 'WaterTemp', 'Min', 'Max']];       Gegevens voor alle water temp visualisaties
var wtempChartData;

Hoofdtabel
var wtempTable;

Grafiek
var wtempChart;
var wtempChartOptions;

Gauge
var wtempGauge;
var wtempGaugeData;
var wtempGaugeOptions;

functie drawWTempTable() {}
Grafiekgegevens
wtempChartData = google.visualization.arrayToDataTable(WTData);

Nieuwe visualisatie aan DOM-element toewijzen
wtempTable = nieuwe google.visualization.Table(document.getElementById('wtempTable'));

Tabel tekenen
wtempTable.draw(wtempChartData);
}

functie updateWTempTable (tijd, TempValue, MinTemp, MaxTemp) {}
Krijg het laatste rijnummer
var lastRow = wtempChartData.getNumberOfRows();

De waarde van de laatste rij ophalen
var timeStamp = wtempChartData.getValue (lastRow - 1, 0);

waarschuwing (tijdstempel + "" + TempValue);
Als (tijdstempel == 'Nu') {}
wtempChartData.removeRow(0);
}


wtempChartData.addRow ([tijd, TempValue, MinTemp, MaxTemp]);
wtempTable.draw(wtempChartData);

}

/////////////////////////////////////////////////////////////////////////////////////////////////

functie drawWTempChart() {}
wtempChart = nieuwe google.visualization.LineChart(document.getElementById('wtempChart'));
wtempChartOptions = {}
animatie: {duur: 1000, versoepeling: 'out'},
backgroundColor: {vulling: "none"}
};
wtempChart.draw (wtempChartData, wtempChartOptions);
}

functie updateWTempChart() {}
wtempChart.draw (wtempChartData, wtempChartOptions);
}

///////////////////////////////////////////////////////////////////////////////////////////////
/ * Trekt Water temperatuurmeter met behulp van de gegevens van de grafiek van de temperatuur van de Water * /
functie 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);

waarschuwing ('MinTemp: ' + String(minTemp) + "" + "MaxTemp:" + String(maxTemp));


wtempGaugeData = google.visualization.arrayToDataTable([
['Water'],
[lastTemp]
]);

wtempGauge = nieuwe google.visualization.Gauge(document.getElementById('wtempGauge'));
wtempGaugeOptions = {}
min: 0,
Max: 100,
redFrom: 0, redTo: minTemp,
greenFrom: minTemp, greenTo: maxTemp,
yellowFrom: maxTemp, yellowTo: 100,
minorTicks: 5
};
wtempGauge.draw (wtempGaugeData, wtempGaugeOptions);
}

functie updateWTempGauge (TempValue, drempel) {}
wtempGaugeData.setValue (0, 0, TempValue, drempel);
wtempGauge.draw (wtempGaugeData, wtempGaugeOptions);

}

Figuur 15.  Het nieuwe script moet worden geladen met de anderen.  Open /templates/main/scripts.html en plaats van het nieuwe script onder licht.  Doen niet eerst dit script - temp.js moet eerst worden.

Figuur 16.  De GCT sectie voor de temperatuur van het water moet worden toegevoegd aan de /templates/main/content.html.

Figuur 17.  Bewerken in de /static/scripts/main.js, de getChartData() -functie voor het afhandelen van het nieuwe argument dat water temperatuur.  Er zijn twee plaatsen die het dient te worden gewijzigd.  De eerste plaats (figuur 17) is te duwen dummy gegevens in het geval gegevens niet van de server wordt geretourneerd.

Figuur 18.  Als er werkelijke gegevens wordt verzonden, duwen die gegevens aan de matrix.

Figuur 19.  Toevoegen aan het einde van drawCharts() de oproepen tot het opstellen van de water temperatuur grafieken.

Figuur 20.  De aanvraag-handler voor het verkrijgen van de gegevens in de grafiek is in environment.py.  GetChartData bewerken zodat deze de water temperatuur gegevens en voorkeuren retourneert.

Figuur 21.  Op dit punt moet u zitten kundig voor reload naar de belangrijkste pagina van de webapp en worden gepresenteerd met de nieuwe grafieken voor de temperatuur van het water.