'Trouble using number variable from Firebase on website

I am new to HTML and Firebase but I am working on a simple project to make a small website to display data from my ESP32. I want to receive a variable from firebase and use it in a function. In particular I want to use it to set the value of a gauge on the website. This requires the input to be a numbers.

This is the code I use to get the variable and attach it to "reading-float":

databaseFloat.on('value', (snapshot) => {
    floatReading = snapshot.val();
    console.log(floatReading);
    document.getElementById("reading-float").innerHTML = floatReading;
    }, (errorObject) => {
    console.log('The read failed: ' + errorObject.name);
    });

I can then display it on the website using:

Reading float:

The following line of code lets me update the gauge to display a value of 25%. I would like to enter the variable from firebase here:

setGaugeValue(gaugeElement, .25);

However, using in a function does not work. No error just the function does not perform the operation.

The following link is the tutorial I followed to get the website working: https://randomnerdtutorials.com/esp32-firebase-realtime-database/

The following link is the tutorial I followed to get the gauge working with manually entered numbers: https://www.youtube.com/watch?v=FnUkVcQ_3CQ&ab_channel=dcode

    // Complete Project Details at: https://RandomNerdTutorials.com/

    // Database Paths
    var dataFloatPath = 'test/float';
    var dataIntPath = 'test/int';

    // Get a database reference 
    const databaseFloat = database.ref(dataFloatPath);
    const databaseInt = database.ref(dataIntPath);

    // Variables to save database current values
    var floatReading;
    var intReading;

    // Attach an asynchronous callback to read the data
    databaseFloat.on('value', (snapshot) => {
      floatReading = snapshot.val();
      console.log(floatReading);
      document.getElementById("reading-float").innerHTML = floatReading;
    }, (errorObject) => {
      console.log('The read failed: ' + errorObject.name);
    });

    databaseInt.on('value', (snapshot) => {
      intReading = snapshot.val();
      console.log(intReading);
      document.getElementById("reading-int").innerHTML = intReading;
    }, (errorObject) => {
      console.log('The read failed: ' + errorObject.name);
    });

.gauge{
    width: 100%;
    max-width: 250px;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    color: #262273;
}

.gauge__body{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: #e0d5b4;
    position: relative;
    border-top-left-radius: 100% 200%;
    border-top-right-radius: 100% 200%;
    overflow: hidden;
}

.gauge__fill{
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    height: 100%;
    background: #262273;
    transform-origin: center top;
    transform: rotate(0.25turn);
    transition: transform 0.2s ease-out;
}

.gauge__cover{
    width: 75%;
    height: 150%;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);

    /* Text */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 25%;
    box-sizing: border-box;
}

<!-- Complete Project Details at: https://RandomNerdTutorials.com/ -->
<!-- use "firebase deploy" in terminal to go live -->
<!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>ESP Firebase Demo App</title>
    <link rel="stylesheet" href="styles.css">

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

    <script>
    // REPLACE WITH YOUR web app's Firebase configuration
    var firebaseConfig = {
  apiKey: "adsadfjsalkfljsnacjlancslnlkcmsaa",
  authDomain: "esp32-firebase-demo-345678.firebaseapp.com",
  databaseURL: "https://esp32-firebase-demo-345678-default-rtdb.firebaseio.com",
  projectId: "esp32-firebase-demo-5ce9c",
  storageBucket: "esp32-firebase-demo-5ce9c.appspot.com",
  messagingSenderId: "249642534794",
  appId: "1:249642534794:web:53752b5af17855daf96a73"
};
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
</script>
<script src="app.js" defer></script>

</head>
<body>
    <h1>ESP32 Firebase Web App Example Index</h1> 
    <p>Reading int: <span id="reading-int"></span></p>
    <p>Reading float: <span id="reading-float"></span></p>

    <div class="gauge">
        <div class="gauge__body">
            <div class="gauge__fill"></div>
            <div class="gauge__cover"></div>
        </div>
    </div>

    <script>

        const gaugeElement = document.querySelector(".gauge");

        function setGaugeValue(gauge, value){
            gauge.querySelector(".gauge__fill").style.transform = `rotate(${value/2}turn)`;
            gauge.querySelector(".gauge__cover").textContent = `${Math.round(value*100)}%`;
        }
        setGaugeValue(gaugeElement, .25);
    </script>
    
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Trouble using number variable from Firebase on website

Sources

Related Questions