to build this basic website, I used firebase
I followed this tutorial (the VS code version) to set up the Firebase, this tutorial for the web app, and this tutorial to read data from Firebase.
I haven't been able to set it up with an output device (was traveling until last night) but have the website up and running which should reduce the rest of the work
this is the code i used for the landing page of the website
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
<title>LED Light Strip Controller</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#color-picker { width: 100%; max-width: 300px; }
</style>
<script>
// REPLACE WITH YOUR web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBuGDHKqCCG50TiNqMtkVqp-4Z-z5RPu6E",
authDomain: "htmaa-leds.firebaseapp.com",
databaseURL: "https://htmaa-leds-default-rtdb.firebaseio.com",
projectId: "htmaa-leds",
storageBucket: "htmaa-leds.firebasestorage.app",
messagingSenderId: "760817120841",
appId: "1:760817120841:web:78e480ab0ec58fb6dbf198",
measurementId: "G-Q9M0F7932M"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.database();
// login anonymously
auth.signInAnonymously().then((cred) => {
console.log("logged in anonymously!");
})
.catch((error) =>{
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage);
});
</script>
</head>
<body>
<h1>Led Light Controller</h1>
<!-- <input type="color" id="color-picker" value="#FF0000"> -->
<button id="toggleOn">On</button>
<button id="toggleOff">Off</button>
<script>
const toggleOn = document.getElementById("toggleOn");
const toggleOff = document.getElementById("toggleOff");
var dbPath = "ledState";
var dbRef = db.ref().child(dbPath);
toggleOn.onclick = () => {
dbRef.set(true);
}
toggleOff.onclick = () => {
dbRef.set(false);
}
</script>