99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
let db = firebase.firestore()
|
|
|
|
var logRef = db.collection("logs")
|
|
|
|
// var ySeries = []
|
|
// var querySnapshot = await logRef.get()
|
|
// querySnapshot.forEach((doc) => {
|
|
// var docData = doc.data()
|
|
// console.log("Document data:", docData)
|
|
// ySeries.push(docData.value2)
|
|
// })
|
|
|
|
|
|
function init(){
|
|
var ySeries = []
|
|
logRef.orderBy("timestamp", "asc").get().then(querySnapshot=> {
|
|
querySnapshot.forEach((doc) => {
|
|
var docData = doc.data()
|
|
console.log("Val ", docData.value2)
|
|
ySeries.push(docData.value2)
|
|
})
|
|
createGraph(ySeries)
|
|
})
|
|
}
|
|
|
|
function createGraph(yArray){
|
|
var trace1 = {
|
|
type: 'line',
|
|
y: yArray,
|
|
name: "Marker One",
|
|
marker: {
|
|
color: '#77EEEE',
|
|
line: {
|
|
width: 5
|
|
}
|
|
}
|
|
}
|
|
var data = [ trace1 ]
|
|
|
|
var layout = {
|
|
title: 'Graph 1',
|
|
font: {size: 18}
|
|
}
|
|
|
|
var config = {responsive: true}
|
|
|
|
Plotly.newPlot('chart', data, layout, config)
|
|
}
|
|
|
|
init()
|
|
|
|
var counter = 0
|
|
logRef.onSnapshot(function(querySnapshot) {
|
|
var updates = querySnapshot.docChanges()
|
|
if (updates.length < 5){
|
|
updates.forEach(function(change) {
|
|
var docData = change.doc.data()
|
|
Plotly.extendTraces('chart', {y:[[docData.value2]]}, [0])
|
|
counter++
|
|
if (counter > 50) {
|
|
Plotly.relayout('chart', {
|
|
xaxis: {
|
|
range: [counter - 50, counter]
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
function realtimeUpdates(){
|
|
let apiRef = db.collection("apiData")
|
|
let toggleDiv = document.getElementById('toggle')
|
|
let intensityDiv = document.getElementById('intensity')
|
|
let colorDiv = document.getElementById('color')
|
|
let lightDiv = document.getElementById('light')
|
|
|
|
apiRef.doc("toggle").onSnapshot(function(doc) {
|
|
var data = doc.data()
|
|
toggleDiv.innerHTML = "Toggle: " + data.state
|
|
})
|
|
|
|
apiRef.doc("intensity").onSnapshot(function(doc) {
|
|
var data = doc.data()
|
|
intensityDiv.innerHTML = "Intensity: " + data.value
|
|
})
|
|
|
|
apiRef.doc("color").onSnapshot(function(doc) {
|
|
var data = doc.data()
|
|
colorDiv.innerHTML = "Color: " + data.hex
|
|
})
|
|
|
|
apiRef.doc("light").onSnapshot(function(doc) {
|
|
var data = doc.data()
|
|
lightDiv.innerHTML = "Object Light:<div style='padding-left: 20px;'>State: "+data.isOn+"<br>Color: "+data.color+"<br>Intensity: "+data.brightness+"</div>"
|
|
})
|
|
}
|
|
|
|
realtimeUpdates() |