Created
June 20, 2016 09:22
-
-
Save rockos/f0c346beeb6dc37ff5f15515052da61f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var socket; | |
var temperatureData, humidityData; | |
var temperatureOptions, humidityOptions; | |
var temperatureChart, humidityChart; | |
// Google Gauge | |
google.load("visualization", "1", {packages:["gauge"]}); | |
google.setOnLoadCallback(drawChart); | |
function drawChart() { | |
// Data for temperature chart | |
temperatureData = google.visualization.arrayToDataTable([ | |
['Label', 'Value'], | |
['Temperature', 0], | |
['Object Temperature', 0] | |
]); | |
// Data for humidity chart | |
humidityData = google.visualization.arrayToDataTable([ | |
['Label', 'Value'], | |
['Humidity', 0] | |
]); | |
// Option for temperature chart | |
// If you want to set other options, please refer to https://developers.google.com/chart/interactive/docs/gallery/gauge | |
temperatureOptions = { | |
width: 400, height: 120, | |
min: 0, max: 60, | |
redFrom: 50, redTo: 60, | |
yellowFrom:40, yellowTo: 50, | |
minorTicks: 5 | |
}; | |
// Option for humidity chart | |
humidityOptions = { | |
width: 400, height: 120, | |
min: 0, max: 100, | |
redFrom: 90, redTo: 100, | |
yellowFrom:75, yellowTo: 90, | |
minorTicks: 5 | |
}; | |
temperatureChart = new google.visualization.Gauge(document.getElementById('temperatureChart')); | |
humidityChart = new google.visualization.Gauge(document.getElementById('humidityChart')); | |
temperatureChart.draw(temperatureData, temperatureOptions); | |
humidityChart.draw(humidityData, humidityOptions); | |
}; | |
function connect(wsUrl) { | |
socket = new WebSocket(wsUrl); | |
socket.onmessage = function(e) { | |
var sensorData = JSON.parse(e.data); | |
// Update temperature data | |
temperatureData.setValue(0, 1, sensorData.temp); | |
temperatureData.setValue(1, 1, sensorData.objectTemp); | |
// Update humidity data | |
humidityData.setValue(0, 1, sensorData.humidity); | |
temperatureChart.draw(temperatureData, temperatureOptions); | |
humidityChart.draw(humidityData, humidityOptions); | |
}; | |
}; | |
function disconnect() { | |
socket.close(); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment