Difference between revisions of "Web Page as Remote Control Example"

From STEAMwiki
Jump to: navigation, search
m (Particle Arduino Code)
m
 
(One intermediate revision by the same user not shown)
Line 30: Line 30:
 
In the following code, replace "Your Device ID Here", "Your Access Token here" with the values specific to your Particle device and your account. You can get your DEVICE ID from the DEVICES tab on the left of spark IDE and the ACCESS TOKEN under SETTINGS.
 
In the following code, replace "Your Device ID Here", "Your Access Token here" with the values specific to your Particle device and your account. You can get your DEVICE ID from the DEVICES tab on the left of spark IDE and the ACCESS TOKEN under SETTINGS.
  
<pre>
+
<syntaxhighlight lang="HTML">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Line 58: Line 58:
 
</body>
 
</body>
 
</html>
 
</html>
</pre>
+
</syntaxhighlight>

Latest revision as of 20:19, 27 September 2019

In this example, you will make a simple web page that will activate a function on a Particle microcontroller to flash the built in LED on pin D7.


Particle Arduino Code

void setup()
{
  // register the cloud function
  Particle.function("turnOnLight", turnOnLight);
  pinMode(D7, OUTPUT);
}
 
void loop()
{
 
}
 
int turnOnLight(String command)
{
   digitalWrite(D7, HIGH);
   delay(1000);
   digitalWrite(D7, LOW);
}

Web Code

In the following code, replace "Your Device ID Here", "Your Access Token here" with the values specific to your Particle device and your account. You can get your DEVICE ID from the DEVICES tab on the left of spark IDE and the ACCESS TOKEN under SETTINGS.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Made with Thimble</title>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://andyforest.github.io/sparkControl/js/sparkControl.js"></script>
  <script type="text/javascript">
    var particlePhoton = new sparkControl("Your Device ID Here", "Your Access Token here");
  </script>
</head>
<body>

  <h1>Remote control interface</h1>
  
  <p>
    <button onclick="particlePhoton.callFunction('turnOnLight', '');">Activate LED</button>
  </p>
  
  
  <p>
    <a href="javascript:particlePhoton.callFunction('turnOnLight', '');">Activate LED</a>
  </p>

</body>
</html>