Pulse Oximeter datafångst med Raspberry Pi (7 / 8 steg)
Steg 7: Lägga till mätare med Google visualisering
Nu när jag har våra 4 bitar av data (bpm, spo2, avg bpm, avg spo2), kan jag använda mätare för att visualisera resultaten i förhållande till värdeintervall som vår dotter vanligtvis har. Efter att ha tittat på olika bibliotek, valde jag att använda Google visualisering för detta. Det verkade ganska enkelt Javascript att använda, hade de funktioner jag ville, och inte kräver någon lokal installation på webbservern.
Php-koden i föregående steg som genererade data kommer att användas för att ange värden på dessa mätare. Nedan är den kod som konverterar php resultaten till ett format som Google visualisering kan förstå. Denna kod anger också textetiketten för varje mätare.
var bpm_data = google.visualization.arrayToDataTable ([["etikett", "Värde"], ["BPM", <? php echo $chart_bpm_data;? >]]);
var spo2_data = google.visualization.arrayToDataTable ([["etikett", "Värde"], ['SPO2', <? php echo $chart_spo2_data;? >]]);
var avg_bpm_data = google.visualization.arrayToDataTable ([["etikett", "Värde"], ["AVG BPM", <? php echo $chart_avg_bpm_data;? >]]);
var avg_spo2_data = google.visualization.arrayToDataTable ([["etikett", "Värde"], ['AVG SPO2', <? php echo $chart_avg_spo2_data;? >]]);
Nästa upp är att färgområdena på mätarna - kom ihåg det högre är bättre för syrehalten, men lägre är (i allmänhet) bättre puls:
var BPM_Chart_Options = {
min: 0, max: 200,
greenFrom: 60, greenTo: 130,
redFrom: 160, redTo: 200,
yellowFrom:130, yellowTo: 160,
minorTicks: 5,
};
var SPO2_Chart_Options = {
min: 0, max: 100,
greenFrom: 90, greenTo: 100,
redFrom: 50, redTo: 80,
yellowFrom:80, yellowTo: 90,
minorTicks: 5,
};
Slutligen jag använda följande Javascript för att skapa de faktiska mätarna, och sedan tilldela varje dataalternativ från ovan:
var bpm_chart = ny google.visualization.Gauge(document.getElementById('chart1'));
bpm_chart.draw (bpm_data, BPM_Chart_Options);
var spo2_chart = ny google.visualization.Gauge(document.getElementById('chart2'));
spo2_chart.draw (spo2_data, SPO2_Chart_Options);
var avg_bpm_chart = ny google.visualization.Gauge(document.getElementById('chart3'));
avg_bpm_chart.draw (avg_bpm_data, BPM_Chart_Options);
var avg_spo2_chart = ny google.visualization.Gauge(document.getElementById('chart4'));
avg_spo2_chart.draw (avg_spo2_data, SPO2_Chart_Options);
Som i föregående steg finns hela innehållet i denna fil (gpulse.php) i zip kopplad till "Programvara" steg ovan. Jag lägga filen i min web server hemkatalog och sedan öppnas sidan från min telefon. Skärmdumpen återfinns ovan.