Getting sensor-values from firebase realtime down on website using js (using ESP32)

Question

I am fairly new to this, but I have searched (I think) all questions and I am starting to get a tiny bit insane.

My end-goal is to use a gyroscope placed on the leg, to use the leg as a joystick for moving an object up and down in three.js.

I want to understand firebase, so I have succeeded with sending data from my sensor via arduino IDE to firebase. Now I want to get gyroX, gyroY and gyroZ values down on my website, so I can see them in realtime. I want to save them as a variable, but for now I really just want to see it in the console.log, so that I know there is a connection from website to the database.

What am I doing wrong? I get no errors, but no data is logged.

I provide how the database look like, the html file(nothing really in it other than a div) and my js file where by firebase is configured. The api is deleted for this photo :-)

HELP!

firebase dataabse

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js";
import { getDatabase, ref, onValue, set, get, update, remove, child } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";


const firebaseConfig = {
    apiKey: "",
    authDomain: "kneegame-38ffc.firebaseapp.com",
    databaseURL: "https://kneegame-38ffc-default-rtdb.firebaseio.com",
    projectId: "kneegame-38ffc",
    storageBucket: "kneegame-38ffc.appspot.com",
    messagingSenderId: "530439761061",
    appId: "1:530439761061:web:2dbf36768df808667e714c",
    measurementId: "G-DZSP9X586F"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const db = getDatabase();

  //get gyroX value

  const gyroxReading = ref(db, "UsersData/rQmuMKv9tgewbq6m5gwH9BmxN8U2/gyroX");
  function readxValue() {
    onValue(gyroXReading, (snapshot) => {
      snapshot.forEach(snap => {
        const xValue = snap.val();
        console.log(xValue);
      })
    });
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

</head>
<body>
    <div id="container"></div>
    <script type="module" src="index.js"></script>
</body>
</html>

hmm that makes sense. If I call the function i get the error ''gyroxReading' not defined. — MajaN, May 16 '22 at 14:48
Wops, there was a typo, I corrected that, but still get the same. It says 'live reload enabled' but no values showing — MajaN, May 16 '22 at 14:54

score 0 · Answer 1 · answered May 17 '22 at 19:30

0

SOLVED - To those running into the same problem, the issue was that I was deniied access under 'rules' in firebase. By changing false to true, I could see and edit the code :-)

answered May 17 '22 at 19:30

MajaN

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 18 '22 at 08:43

Getting sensor-values from firebase realtime down on website using js (using ESP32)

1 Answers1