Application shows two buttons, on and off initially shaded gray. Clicking/pressing the on button turned on the Electron’s LED and turns the on button green and the off button to a lighter gray. Clicking/pressing the off button turns off the Electrons LED and turns the on and off button to a darker gray. Yet to be resolved, changing the botton’s colors as a response to the JSON code response. This example utilizes the concept of CSS classes for the buttons.
Visual Studio Code used as the editor. Great for color selection and many other editor functions for HTML and CSS etc.
I had to dig into HTML, CSS, JavaScript, and JQuery to do this and to understand the above example.
Any suggestions on how to read the response before changing the button colors?
How is the security with this setup?
<!DOCTYPE HTML>
<html>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=“text/javascript” charset=“utf-8”></script>
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>LED/BUTTON DEMO 1</title>
<style>
container {
display: flex;
flex-direction: row;
}
button {
width: .6in;
height: 0.4in;
}
/* classes */
.onbutton {
background-color: #d8d4d4;
}
.offbutton {
background-color: #d8d4d4;
}
</style>
</head>
<body>
<br><br>
<button class=“onbutton” value=“on” onclick=“turnon(on)”>ON</button>
<button class=“offbutton” value=“off” onclick=“turnoff(off)”>OFF</button>
<script type=“text/javascript”>
var deviceID = “myDeviceID”;
var accessToken = “myAccessToken”;
var setFunc = “led”;
var on = “on”;
var off = “off”;
function particleSetLED(newValue) {
var requestURL = “https://api.particle.io/v1/devices/” + deviceID + “/” + setFunc + “/”;
$.post( requestURL, { params: newValue, access_token: accessToken });
}
function turnon(onstate) {
particleSetLED(onstate);
$(".onbutton").css(“background-color”, “#83fc73”);
$(".offbutton").css(“background-color”, “#f1f1f1”);
}
function turnoff(offstate) {
particleSetLED(offstate);
$(".onbutton").css(“background-color”, “#d8d4d4”);
$(".offbutton").css(“background-color”, “#d8d4d4”);
}
</script>
</body>
</html>