# Tutorial: Spark Variable and Function on One Web Page

**URL:** <https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181>\
**Category:** Tutorials\
**Created:** [May 5, 2014, 2:00am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181 "2014-05-05T02:00:28Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![shoaibuddin](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/shoaibuddin/32/20837_2.png) [@shoaibuddin](https://community.particle.io/u/shoaibuddin)\
**Post date:** [July 15, 2014, 6:00pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/21 "2014-07-15T18:00:14Z")

</div>

@bko I’m a newbie. So the total power should be +5V? I tried but its not powering up. What kind of power supply are you using, Can you please suggest?

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [July 16, 2014, 7:23pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/22 "2014-07-16T19:23:49Z")

</div>

Hi @shoaibuddin

I am away right now but briefly the servo needs +5v to operate but the Spark core can handle 3.3v or 5v depending on how you hook it up.

If look at the picture in the tutorial I am using a 5v supply for the servo and connecting it to the Vin pin which is the input side of the 3.3v regulator so the core gets 3.3 just like when you are using USB for power.

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [July 17, 2014, 12:23pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/23 "2014-07-17T12:23:43Z")

</div>

Hi bko!

Hi,  
My code seems to run fine. I can post a function and I can get a variable. However after a while, it appears that the core stops talking to the cloud. I have collected data for hours but this AM as soon as I jumped on my webpage, I get an “error timeout”. I believe it is tied to the functions via the variables. I am wondering if this is similar to the issue with “Variables with strings longer than 9 chars”?

here is what I have in my code (4 different settings)

int setReset(String resetValue);  
int myReset = 0;

void(setup)  
Spark.function(“setreset”, setReset);  
Spark.variable(“getreset”, &myReset, INT);

void loop()  
int setReset(String resetValue) {  
myReset= resetValue.toInt();  
return 0;

anything will help!  
thanks

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [July 20, 2014, 2:51am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/24 "2014-07-20T02:51:01Z")

</div>

Hi @Dup

Sorry I was away for a while.

How fast are you running the update on the web side? The second argument to `window.setInterval` which is 1000 in the example above is the time in milliseconds between calls to the function to updated the web page side of the variables. It is possible to do this too quickly and overload the Spark cloud host, so 1 sec (1000 ms) is a good minimum.

Which browser are you using? I like Chrome–it seems to run well for me both on PC and Mac.

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [July 20, 2014, 9:42pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/25 "2014-07-20T21:42:47Z")

</div>

Hi bko,  
thanks!

Chrome works best!

Also, I have many buttons (function + variable) which may be causing problems. I will try to clean things up and see if it helps. Currently, the time is set at 1000ms but I will try to increase slightly and test.  
I will have a look later this week as we are on vacation and I will let you know how I make out!

Dup!  
Thanks!

---

<div class="post-metadata">

**Author:** ![yugnats](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/yugnats/32/7508_2.png) [@yugnats](https://community.particle.io/u/yugnats)\
**Post date:** [July 24, 2014, 10:31pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/26 "2014-07-24T22:31:40Z")

</div>

Thank you so much for this tutorial! I am having some trouble and hope you can help:

I am using chrome on a mac. It’s a basic tutorial and you’ve done a great job explaining so I’m sure it’s something silly 😉 I have copied the code from my SC and webpage editor directly.

So, I first wired up everything according to your picture. To test my configuration I first ran the test code from here: [http://community.spark.io/t/servo-h-library-included-with-arduino-solved/1209/12](http://community.spark.io/t/servo-h-library-included-with-arduino-solved/1209/12)

It worked fine. Here is the test code copied directly from my Spark Build page (I changed the pin to A0 so I didn’t have to move any wires):

```
Servo myservo; // create servo object to control a servo 
                // a maximum of eight servo objects can be created 

int pos = 0; // variable to store the servo position 

void setup() 
{ 
  myservo.attach(A0); // attaches the servo on pin A0 to the servo object 
} 

void loop() 
{ 
  for(pos = 0; pos < 180; pos += 1) // goes from 0 degrees to 180 degrees 
  { // in steps of 1 degree 
    myservo.write(pos); // tell servo to go to position in variable 'pos' 
    delay(10); // waits 15ms for the servo to reach the position 
  } 
  for(pos = 180; pos>=1; pos-=1) // goes from 180 degrees to 0 degrees 
  {                                
    myservo.write(pos); // tell servo to go to position in variable 'pos' 
    delay(10); // waits 15ms for the servo to reach the position 
  } 
}

```

Like I said that code works fine and the servo moves like it should.

So then I flashed the SC with the actual tutorial code:

```
Servo myservo; // create servo object to control a servo
    
int pos = 0; // variable to store the servo position

void setup()
{
  myservo.attach(A0); // attaches the servo on the A0 pin to the servo object
  Spark.function("setpos", setPosition);
  Spark.variable("getpos", &pos, INT);
}

void loop()
{
}

int setPosition(String posValue) {
    pos = posValue.toInt();
    myservo.write(pos);
    return 0;
}

```

And then created a webpage with my token and device name filled in (not on here, of course- I put in fake ones):

```
<!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>
<body>
    <P>Set Servo Position:<br><br>
    <input type="range" name="degBox" id="degBoxId" min="0" max="180" step="1" value="90" list="myData" onchange="setValue(this)">
    <!-- This adds the tick marks to the range but does not in Safari -->
    <datalist id="myData">
       <option value="0">
       <option value="30">
       <option value="60">
       <option value="90">
       <option value="120">
       <option value="150">
       <option value="180">
    </datalist>
    <br><br>
    <button id="minusbutton" onclick="fineAdjust(-5)">&lArr; -5 &deg;</button>
    <button id="plusbutton" onclick="fineAdjust(+5)">+5 &deg; &rArr;</button>
    <br><br>
    <P>Current Position: <span id="curPos"></span><br>

    <script type="text/javascript">
      var deviceID = "HARRY_POTTER";
      var accessToken = "hg45ghg45hg5hg45hg45hg45hg54hg5hg";
      var setFunc = "setpos";
      var getFunc = "getpos";

      window.setInterval(function() {
        requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("curPos").innerHTML = json.result + "&deg;";
                 document.getElementById("curPos").style.fontSize = "28px";
                 document.getElementById("degBoxId").value = parseInt(json.result);
                 });
      }, 1000);

      function setValue(obj) {
        var newValue = document.getElementById('degBoxId').value;
        sparkSetPos(newValue);
      }

      function fineAdjust(value) {
        var currentValue = parseInt(document.getElementById('curPos').innerHTML);
        var setValue = value + currentValue;
        sparkSetPos(setValue);
        document.getElementById("degBoxId").value = setValue;
      }

      function sparkSetPos(newValue) {
	var requestURL = "https://api.spark.io/v1/devices/" +deviceID + "/" + setFunc + "/";
        $.post( requestURL, { params: newValue, access_token: accessToken });
      }

    </script>
</body>
</html>

```

And I refreshed and re-flashed and saved several times and no luck. Any ideas at all? I also noticed on the webpage that the “Current Position” isin’t showing- not sure if that helps or not? Here is a screenshot of the webpage:

![](https://community.particle.io/uploads/particle/2711/8b4c70658ba8506c.png)

Thanks again for the tut and any suggestions appreciated 🙂

---

<div class="post-metadata">

**Author:** ![yugnats](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/yugnats/32/7508_2.png) [@yugnats](https://community.particle.io/u/yugnats)\
**Post date:** [July 24, 2014, 10:36pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/27 "2014-07-24T22:36:47Z")

</div>

OK I just realized the name of the device is not what I should be putting in there- I should have clicked on the device name to get the actual device ID…DUH!! OH well it works fine now, sorry for the trouble 🙂

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [August 18, 2014, 11:09pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/28 "2014-08-18T23:09:38Z")

</div>

Hi!  
I seem to be having difficulty with Spark.variables. Sometimes I get it and most of the time not {  
“error”: “Timed out.”}. I am using the example above. My code stays up because Spark.publish continues to work. I wonder if it is similar to the 9 char String issue?

any ideas will help!  
Dup!

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 18, 2014, 11:52pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/29 "2014-08-18T23:52:12Z")

</div>

```auto
window.setInterval(function() {
        requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("curPos").innerHTML = json.result + "&deg;";
                 document.getElementById("curPos").style.fontSize = "28px";
                 document.getElementById("degBoxId").value = parseInt(json.result);
                 });
      }, 1000);

```

The 1000 above is 1000ms or 1 second–that may be too fast if you have slow link or are far away from the Spark Cloud server.

What happens if you change 1000 to 2000?

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [August 19, 2014, 1:02am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/30 "2014-08-19T01:02:06Z")

</div>

Hi bko!  
Same thing. I tried up to 10000ms.  
There is something in my code that must be hanging things up! My core is always connected and continues to publish. How often does the variable get pulled onto the cloud?

Perhaps a workaround is to use a function then publish the result?

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 19, 2014, 1:10am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/31 "2014-08-19T01:10:39Z")

</div>

A function that triggers a publish will work great, but I am not having the same problems you are with variables so it is probably worth figuring it out.

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [August 19, 2014, 1:17am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/32 "2014-08-19T01:17:48Z")

</div>

yes, thanks  
something else that may be related is that I cannot flash a second time OTA without a factory reset. I will keep investigating

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 19, 2014, 2:08am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/33 "2014-08-19T02:08:13Z")

</div>

There is another thread and github issue where publishing too quickly causes the OTA flash to fail. Are you publishing events at 1 per second or similar speed?

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [August 19, 2014, 2:22am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/34 "2014-08-19T02:22:46Z")

</div>

every 5 second at the moment, I will try 10 s to see the effect. I also noticed that the cyan will flash rapidly every 60 seconds give or take. I am wondering if it is my code having too many unsigned long LastUpTime1, LastUpTime2, 3, etc… ?  
thanks!

---

<div class="post-metadata">

**Author:** ![Dup](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dup](https://community.particle.io/u/Dup)\
**Post date:** [August 20, 2014, 1:16am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/36 "2014-08-20T01:16:29Z")

</div>

bko,  
It works! By separating when each publish is performed by 2s, it allows the variables and the OTA to work 😄

Now that my functions work as well, how would I make something turn “on” referenced to time of day? Outdoor lights ON between 7 to 11 pm?

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 20, 2014, 1:21am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/37 "2014-08-20T01:21:08Z")

</div>

You should check out this post where I wrote some code for a pump controller with a web page interface:

> **[Looking for some help to control spark via web](https://community.particle.io/t/looking-for-some-help-to-control-spark-via-web/4419/29)**
>
> OK guys I have something working, but it is not quite where I wanted it to be. I wanted to have the current values automatically refresh from the core, but it is just not stable and I don’t know what is wrong. So for now, you have to hit a...

---

<div class="post-metadata">

**Author:** ![pattersonc](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/pattersonc/32/6674_2.png) [@pattersonc](https://community.particle.io/u/pattersonc)\
**Post date:** [September 1, 2015, 4:22am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/38 "2015-09-01T04:22:51Z")

</div>

Thank you for this post! Helped me out a lot 🙂

---

<div class="post-metadata">

**Author:** ![part\_io](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@part\_io](https://community.particle.io/u/part_io)\
**Post date:** [October 22, 2015, 12:56pm UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/39 "2015-10-22T12:56:59Z")

</div>

@bko Great tutorial. Thank you.

---

<div class="post-metadata">

**Author:** ![KarinaMendez](https://avatars.discourse-cdn.com/v4/letter/k/8baadc/32.png) [@KarinaMendez](https://community.particle.io/u/KarinaMendez)\
**Post date:** [November 4, 2015, 7:45am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/40 "2015-11-04T07:45:03Z")

</div>

Hi, how can I acces it from my phone?

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [November 4, 2015, 11:54am UTC](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181/41 "2015-11-04T11:54:48Z")

</div>

Hi @KarinaMendez

What I do is put the HTML file on a service like Dropbox where I can access it from my phone.

There are lots of other more professional options such as the Particle iOS and Android SDKs–this is just meant to show you how it works and provide the basic functionality.

[Previous page](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181.md?page=1)

[Next page](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181.md?page=3)