Particle as Remote Control

From STEAMwiki
Jump to: navigation, search

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;
}