Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WFH messaging system front end HTML
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js"></script>
<script>
var particle = new Particle();
// This is incredibly insecure, and only ideal for local tasks of no consequence if things go wrong.
const accessToken = 'ENTER YOUR ACCESS TOKEN HERE';
const deviceId = 'ENTER YOUR DEVICE ID HERE';
function ledControl(cmd) {
// Used to turn on or off the LED by using the Particle.function "led"
document.getElementById("statusSpan").innerHTML = '';
particle.callFunction({deviceId, name:'led', argument: cmd, auth:accessToken}).then(
function(data) {
document.getElementById("statusSpan").innerHTML = 'Message sent.';
},
function(err) {
document.getElementById("statusSpan").innerHTML = 'Error calling device: ' + err;
}
);
}
</script>
</head>
<body>
<div id="mainDiv">
<h3>WFH Messaging System</h3>
<p><button id="ledOnButton" onclick="ledControl('D1On')">Working Alone.</button>&nbsp;
<button id="ledOffButton" onclick="ledControl('D0On')">In a meeting - DND.</button></p>
<button id="ledOnButton" onclick="ledControl('D2On')">I need coffee!</button>&nbsp;
<button id="ledOffButton" onclick="ledControl('D3On')">Please bring me some water.</button></p>
<button id="ledOnButton" onclick="ledControl('D4On')">Finished for the day.</button>&nbsp;
<p>&nbsp;</p>
<p><span id="statusSpan"></span></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment