Aquaponics : EnvDAQ mise à jour avec sonde de température de l’eau (Grow lit DAQ) (4 / 5 étapes)

Étape 4: GetChartData : JavaScript et environnement demande Handler

Aspects communs
var WTData = [[« Time », « Commande », 'Min', 'Max']] ;       Données pour toutes les visualisations de temp de l’eau
var wtempChartData ;

Table principale
var wtempTable ;

Tableau
var wtempChart ;
var wtempChartOptions ;

Jauge
var wtempGauge ;
var wtempGaugeData ;
var wtempGaugeOptions ;

function drawWTempTable() {}
Données du graphique
wtempChartData = google.visualization.arrayToDataTable(WTData) ;

Attribuer la nouvelle visualisation pour l’élément DOM
wtempTable = new google.visualization.Table(document.getElementById('wtempTable')) ;

Dessiner un tableau
wtempTable.draw(wtempChartData) ;
}

fonction updateWTempTable (temps, TempValue, MinTemp, MaxTemp) {}
Téléchargez le dernier numéro de la ligne
var lastRow = wtempChartData.getNumberOfRows() ;

Obtenir la valeur de la dernière rangée
timeStamp var = wtempChartData.getValue (lastRow - 1, 0) ;

alerte (horodatage + ' ' + TempValue) ;
Si (timeStamp == « Maintenant ») {}
wtempChartData.removeRow(0) ;
}


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

}

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

function drawWTempChart() {}
wtempChart = new google.visualization.LineChart(document.getElementById('wtempChart')) ;
wtempChartOptions = {}
Animation: {Durée : 1000, assouplissement: « out »},
backgroundColor: {fill: « aucun »}
};
wtempChart.draw (wtempChartData, wtempChartOptions) ;
}

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

///////////////////////////////////////////////////////////////////////////////////////////////
/ * Attire l’indicateur de température de l’eau à l’aide de données de graphique de température eau * /
function drawWTempGauge() {}
var lastRow = wtempChartData.getNumberOfRows() ;
var lastTemp = wtempChartData.getValue (lastRow - 1, 1) ;
var minTemp = wtempChartData.getValue (lastRow - 1, 2) ;
maxTemp var = wtempChartData.getValue (lastRow - 1, 3) ;

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


wtempGaugeData = google.visualization.arrayToDataTable([
[« L’eau »],
[lastTemp]
]);

wtempGauge = new 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) ;
}

fonction updateWTempGauge (TempValue, seuil) {}
wtempGaugeData.setValue (0, 0, TempValue, seuil) ;
wtempGauge.draw (wtempGaugeData, wtempGaugeOptions) ;

}

La figure 15.  Le nouveau script doit être chargé avec les autres.  Ouvrez /templates/main/scripts.html et insérer le nouveau script sous feu.  Faire pas mettre ce script en premier - temp.js doit être le premier.

La figure 16.  La section GCT pour température de l’eau doit être ajouté à /templates/main/content.html.

La figure 17.  Dans /static/scripts/main.js, modifiez la fonction getChartData() pour gérer le nouvel argument de température de l’eau.  Il y a deux endroits, qu'il doit être modifié.  La première place (Figure 17) consiste à envoyer des données factices en cas de données ne sont pas retournées par le serveur.

La figure 18.  Si les données réelles sont envoyées, pousser ces données dans le tableau.

La figure 19.  À la fin de drawCharts() ajouter les appels pour dessiner les cartes de température de l’eau.

La figure 20.  Le gestionnaire de demandes pour obtenir les données du graphique est en environment.py.  Modifier GetChartData de sorte qu’elle retourne les données de température de l’eau et les préférences.

La figure 21.  À ce stade, vous devriez être en mesure de recharger la page d’accueil de l’application Web et être présenté avec les nouvelles cartes de température de l’eau.