Particle as Remote Control
Wiring
Connect a button to pin D2. Connect the other wire on the button to 3V3.
Particle Arduino Code
void setup() {
pinMode(D2, INPUT_PULLDOWN);
}
void loop() {
if(digitalRead(D2) == HIGH){
Particle.publish("SendMessage","The button was pressed!");
delay(1000);
}
delay(50);
}
Web Page
Sample Mozilla Thimble code here: https://thimbleprojects.org/candu/434799/
If you're using Mozilla Thimble, you MUST publish the page to test your events! Event subscriptions do not work in the Mozilla Thimble editor.
Technical explanation: the Mozilla Thimble editor sends Cache-Control headers with its Particle Photon API requests, which unfortunately violates Particle's cross-origin resource sharing policies. Published pages don't do this, which is why events work there. See https://github.com/mozilla/thimble.mozilla.org/issues/2618 for details.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Particle Message Display</title>
<link rel="stylesheet" href="style.css" />
<script src="https://andyforest.github.io/sparkControl/js/sparkControl.js"></script>
<script type="text/javascript">
// make sure to put your device ID and secret key in here!
var particlePhoton = new sparkControl("YOUR_DEVICE_ID", "YOUR_SECRET_KEY");
particlePhoton.subscribe("SendMessage", messageReceived);
function messageReceived (messageData) {
var $msg = document.getElementById('msg');
$msg.innerText = messageData + ': ' + new Date().toString();
$msg.classList.add('has-message');
}
</script>
</head>
<body>
<h1>Particle Message Display</h1>
<p id="msg">
No message yet
</p>
</body>
</html>
CSS
You don't necessarily need this part, but it will make the changes easier to see!
body {
font-family: sans-serif;
}
#msg.has-message {
font-size: 120px;
}
