tank.js (0206)

// 🟢 Initialize Tippy.js tooltips for UI hints
tippy('[title]', {
    theme: 'custom',
    arrow: false,
    followCursor: true,
    delay: 100,
    placement: 'top',
    zIndex: 9999999999,
    maxWidth: 400,
    content(reference) {
        const title = reference.getAttribute('title');
        reference.removeAttribute('title'); // Remove default browser tooltips
        return title;
    },
});

// 🟢 Firebase Configuration
const firebaseConfig = {
    apiKey: "AIzaSyAjG_MOsClpLU7N7o-D1PkI08_tFO84w-c",
    authDomain: "facerecognition-tank.firebaseapp.com",
    databaseURL: "https://facerecognition-tank-default-rtdb.firebaseio.com",
    projectId: "facerecognition-tank",
    storageBucket: "facerecognition-tank.appspot.com",
    messagingSenderId: "253443593668",
    appId: "1:253443593668:web:735fa5d04d8138cb3d4091",
    measurementId: "G-SQ0XBX3MN2"
};

// 🟢 Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const database = firebase.database();

// Authentication Handling
auth.onAuthStateChanged((user) => {
    if (!user) {
        alert("Please log in to access.");
        window.location.href = "index.html";
    } else {
        loggedOutContent.style.display = "none";
        loggedInContent.style.display = "block";
        loggedInContent.parentElement.style.height = "80px";
    }
});

const loggedOutContent = document.getElementById("logged-out-content");
const loggedInContent = document.getElementById("logged-in-content");
const logoutButton = document.getElementById("logout-btn");

logoutButton.addEventListener("click", () => {
    auth.signOut()
        .then(() => {
            alert("You have logged out.");
            window.location.href = "index.html";
        })
        .catch((error) => {
            alert("Logout error: " + error.message);
        });
});

// 🟢 UI Elements for Sensor Data
const totalSumDisplay = document.getElementById("total-sum-display");
const distanceDisplay = document.getElementById("distance-display");
const speedDisplay = document.getElementById("speed-display"); // New speed display element

// 🟢 Tracks active commands (Ensures only one per node)
const activeCommands = { movement: 0, servo: 0, stepper: 0, laser: 0 };

// 🟢 Map keys and buttons to their respective nodes
const keyMappings = {
    "w": { value: 1, node: "movement", button: "btn-up" },
    "a": { value: 2, node: "movement", button: "btn-left" },
    "s": { value: 3, node: "movement", button: "btn-down" },
    "d": { value: 4, node: "movement", button: "btn-right" },
    "+": { value: 7, node: "movement", button: "btn-speed-up" }, // Speed Up
    "-": { value: 6, node: "movement", button: "btn-speed-down" }, // Speed Down
    "j": { value: 64, node: "servo", button: "btn-servo-left" },
    "l": { value: 128, node: "servo", button: "btn-servo-right" },
    "r": { value: 16, node: "stepper", button: "btn-stepper-left" },
    "t": { value: 48, node: "stepper", button: "btn-stepper-right" },
    " ": { value: 8, node: "laser", button: "btn-fire" }
};

// 🟢 Remove "active" class from all buttons in the same node
function clearActiveButtons(node) {
    Object.values(keyMappings).forEach(mapping => {
        if (mapping.node === node) {
            document.getElementById(mapping.button)?.classList.remove("active-btn");
        }
    });
}

// 🟢 Toggle a command ON/OFF (Ensures only one active per node)
function toggleCommand(key) {
    if (!keyMappings[key]) return;

    const { value, node, button } = keyMappings[key];

    clearActiveButtons(node); // Remove active class from other buttons in the same node

    // Toggle the command
    if (activeCommands[node] === value) {
        activeCommands[node] = 0; // Turn OFF
    } else {
        activeCommands[node] = value; // Turn ON
        document.getElementById(button)?.classList.add("active-btn");
    }

    updateCommand(node); // Update Firebase
}

// 🟢 Send updated command to Firebase
function updateCommand(node) {
    database.ref(`tank/${node}`).set({ key: activeCommands[node] });
    updateTotalSum(); // Update sum after change
}

// 🟢 Calculate and update the total sum
function updateTotalSum() {
    let totalSum = Object.values(activeCommands).reduce((acc, val) => acc + val, 0);

    database.ref("Node/RX").set({ value: totalSum }); // Update Firebase
    totalSumDisplay.innerText = totalSum; // Update UI
}

// 🟢 Keyboard Control: Toggle command when key is pressed
document.addEventListener("keydown", (event) => toggleCommand(event.key.toLowerCase()));

// 🟢 Button Click Handling
document.querySelectorAll("button").forEach(button => {
    button.addEventListener("click", event => {
        const buttonMapping = {
            "btn-up": "w",
            "btn-left": "a",
            "btn-down": "s",
            "btn-right": "d",
            "btn-speed-up": "+",
            "btn-speed-down": "-",
            "btn-servo-left": "j",
            "btn-servo-right": "l",
            "btn-stepper-left": "r",
            "btn-stepper-right": "t",
            "btn-fire": " "
        };
        const key = buttonMapping[event.target.id];
        if (key) toggleCommand(key);
    });
});

// 🟢 Fetch Sensor Data from Firebase (A & B -> Distance, C -> Speed in HEX)
function updateSensorData() {
    database.ref("Node/TX").on("value", (snapshot) => {
        const data = snapshot.val();
        if (data) {
            const distanceA = data.A;
            const distanceB = data.B;
            const speed = data.C;

            // Display distance (concatenated as two hex values)
            distanceDisplay.innerText = `A: ${distanceA}, B: ${distanceB}`;

            // Display speed as hex
            speedDisplay.innerText = `${speed}`;
        }
    });
}

updateSensorData(); // Run sensor update function

// 🟢 Sync Total Sum with Firebase in Real-time
database.ref("Node/RX").on("value", (snapshot) => {
    if (snapshot.val()) {
        totalSumDisplay.innerText = snapshot.val().value;
    }
});