# Problem of web control

**URL:** <https://community.particle.io/t/problem-of-web-control/19262>\
**Category:** General\
**Created:** [January 20, 2016, 5:55am UTC](https://community.particle.io/t/problem-of-web-control/19262 "2016-01-20T05:55:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [January 20, 2016, 5:55am UTC](https://community.particle.io/t/problem-of-web-control/19262/1 "2016-01-20T05:55:54Z")

</div>

I am currently try to use the web control led code template to control the motor. The setup is to connect the photon with L293D motor module . My logic is 😄

When I click “on” in html = the motor moves clockwise & anticlockwise motion interchanging  
When I clixk “off” in html = it stops

the code is like

```cpp
// -----------------------------------
// Controlling LEDs over the Internet
// -----------------------------------

// First, let's create our "shorthand" for the pins
// Same as in the Blink an LED example:
// led1 is D0, led2 is D7

int led1 = D2;
int led2 = D3;

// Last time, we only needed to declare pins in the setup function.
// This time, we are also going to register our Spark function

void setup()
{

   // Here's the pin configuration, same as last time
   pinMode(led1, OUTPUT);
   pinMode(led2, OUTPUT);

   // We are also going to declare a Spark.function so that we can turn the LED on and off from the cloud.
   Spark.function("led",ledToggle);
   // This is saying that when we ask the cloud for the function "led", it will employ the function ledToggle() from this app.

   // For good measure, let's also make sure both LEDs are off when we start:
   digitalWrite(led1, LOW);
   digitalWrite(led2, LOW);

}

// Last time, we wanted to continously blink the LED on and off
// Since we're waiting for input through the cloud this time,
// we don't actually need to put anything in the loop

void loop()
{
   // Nothing to do here
}

// We're going to have a super cool function now that gets called when a matching API request is sent
// This is the ledToggle function we registered to the "led" Spark.function earlier.

int ledToggle(String command) {
    /* Spark.functions always take a string as an argument and return an integer.
    Since we can pass a string, it means that we can give the program commands on how the function should be used.
    In this case, telling the function "on" will turn the LED on and telling it "off" will turn the LED off.
    Then, the function returns a value to us to let us know what happened.
    In this case, it will return 1 for the LEDs turning on, 0 for the LEDs turning off,
    and 1 if we received a totally bogus command that didn't do anything to the LEDs.
    */

    if (command=="on") {
        for (int x =0 ; x < 1000 ; x++){
        digitalWrite(led1,HIGH);
        digitalWrite(led2,LOW);
        delay (500);
        digitalWrite(led1,LOW);
        digitalWrite(led2,HIGH);
        delay (500);
        }
    }
    else if (command=="off") {
        digitalWrite(led1,LOW);
        digitalWrite(led2,LOW);
        return ;
    }
    
}

```

However, when I tried to operate, like first i click on, it can perform correctly with interchanging direction, but i try to click off, it stops for 1 second and continue to start moving interchanging

May I ask whether i can stop the motion by improving the code?

---

<div class="post-metadata">

**Author:** ![CuriousTech](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/curioustech/32/3315_2.png) [@CuriousTech](https://community.particle.io/u/CuriousTech)\
**Post date:** [January 20, 2016, 6:31am UTC](https://community.particle.io/t/problem-of-web-control/19262/2 "2016-01-20T06:31:11Z")

</div>

I didn’t test it but give it go. The main loop toggles the output if run is high. So an off command will disable it within 500ms. I didn’t put the 1000 count back in though, but it should get you started.

Edit: Oops. Forgot to stop it. So, I added the count too.

```
int led1 = D2;
int led2 = D3;
bool run;
bool toggle;
int count;

void setup()
{
     pinMode(led1, OUTPUT);
     pinMode(led2, OUTPUT);

     Spark.function("led", ledToggle);

     digitalWrite(led1, LOW);
     digitalWrite(led2, LOW);
}

void loop()
{
   if(run)
   {
      if(millis() - last >= 500)
      {
        last = millis();
        if(toggle = !toggle)
        {
           digitalWrite(led1, HIGH);
           digitalWrite(led2, LOW);
        }
        else
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, HIGH);
        }
        if--count == 0)
           run = false;
   }
}

int ledToggle(String command)
{
   run = (command == "on") ? true : false;
   if(run)
   {
        count = 2000;
    }
   else
   {
        digitalWrite(led1, LOW);
        digitalWrite(led2, LOW);
   }
}
```

---

<div class="post-metadata">

**Author:** ![ScruffR](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/scruffr/32/6952_2.png) [@ScruffR](https://community.particle.io/u/ScruffR)\
**Post date:** [January 20, 2016, 9:02am UTC](https://community.particle.io/t/problem-of-web-control/19262/3 "2016-01-20T09:02:55Z")

</div>

@leslietsz, when you call `on` once, you are starting a 1000x (500+500) millisecond loop - more than quater of an hour!  
By calling `delay()` inside that loop you also implicitly call the cloud task once per second which allows cloud calls to be processed (e.g. your stop call), but you are still trapped inside your 1000sec loop, which will carry on doing its job once `delay()` and its implicitly triggered task return.

So a rule of thumb:  
**_Don’t use long delays or long running loops inside a `Particle.function()`_**

Also use `Particle` instead of the depricated `Spark`.

**_And_** when a function is declared `int someFunction()` it **_has to_** return an `int`!

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [January 22, 2016, 9:11am UTC](https://community.particle.io/t/problem-of-web-control/19262/4 "2016-01-22T09:11:51Z")

</div>

Thank you guys, it works, but I have one question , is that anyway to modify the html coding , such that it will not show the return value page, after i click it?

---

<div class="post-metadata">

**Author:** ![Moors7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/moors7/32/588_2.png) [@Moors7](https://community.particle.io/u/Moors7)\
**Post date:** [January 22, 2016, 9:29am UTC](https://community.particle.io/t/problem-of-web-control/19262/5 "2016-01-22T09:29:22Z")

</div>

Yup, use javascript. There’s an SDK in the docs, and there are tutorials in the tutorials category.  
I’ve got a page over [here](http://jordymoors.nl/interface) that does just that.

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [February 15, 2016, 8:05am UTC](https://community.particle.io/t/problem-of-web-control/19262/6 "2016-02-15T08:05:57Z")

</div>

Hi, may i know which tutorial is suitatble? Thanks

---

<div class="post-metadata">

**Author:** ![Moors7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/moors7/32/588_2.png) [@Moors7](https://community.particle.io/u/Moors7)\
**Post date:** [February 15, 2016, 8:32am UTC](https://community.particle.io/t/problem-of-web-control/19262/7 "2016-02-15T08:32:17Z")

</div>

Had you looked, you would've known...

> [@Tutorial: Spark Variable and Function on One Web Page](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181):
>
> Let’s say you have a Spark core with both a Spark variable and a Spark function. In my case, I have the world’s simplest servo control sketch, using the nice miniature servo in the Spark Maker Kit. Using these parts, we will build a servo that you can control from a web page anywhere and monitor the position of the servo too! Here’s a preview of the finished tutorial: [image] There is a coarse adjust slider, two fine adjust buttons, and the current position of the servo is displayed. That…

This uses the SDK for function calls, right click to see the source: [http://jordymoors.nl/particle/demos/function\_button.html](http://jordymoors.nl/particle/demos/function_button.html)

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [February 15, 2016, 8:35am UTC](https://community.particle.io/t/problem-of-web-control/19262/8 "2016-02-15T08:35:07Z")

</div>

Thanks I will have a look

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [February 17, 2016, 5:27am UTC](https://community.particle.io/t/problem-of-web-control/19262/9 "2016-02-17T05:27:04Z")

</div>

Dear Moors7,

I have read the tutorials, but i dont quite understand the coding, for my case, I have 4 buttons, representing 4 direction.\

When I click the button, it will post the value to the server, right?

For function functionPost(functionName, functionArgument) this part, should i use

document.getElementById(’ object’).value to find the value?

Also, spark.callFunction(deviceID, functionName, functionArgument, callback); , it only contains deviceID, so no access token is required?

I am really very very beginner in programming, so sorry for those troublesome , 😄

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [February 17, 2016, 6:05am UTC](https://community.particle.io/t/problem-of-web-control/19262/11 "2016-02-17T06:05:49Z")

</div>

Here is my coding

 ![](https://us1.discourse-cdn.com/flex026/uploads/particle/original/2X/2/277f7a78fdb5a74c92269451a5ec81c44a12e2f6.png)

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [February 17, 2016, 1:14pm UTC](https://community.particle.io/t/problem-of-web-control/19262/12 "2016-02-17T13:14:03Z")

</div>

Previously I have asked the question on web control for my project, thanks to some nice people, I can finally build my code and test the website control

I am currently try to use the web control led code template to control the motor. The setup is to connect the photon with L293D motor module .

When I click “foward” in html = the motor moves clockwise & anticlockwise motion interchanging  
When I click “left” in html = it moves in one side, stop and start back  
When I click “right” in html = it moves in another side, stop and start back  
When I click stop, it stops

Here is the coding

```
int led1 = D2;
int led2 = D3;
bool forward ;
bool left;
bool right;
bool toggle;
int count;
int last = 0;

void setup()
{

   pinMode(led1, OUTPUT);
   pinMode(led2, OUTPUT);    

   Particle.function("led",ledToggle);

   digitalWrite(led1, LOW);
   digitalWrite(led2, LOW);

}

 void loop()
{
   if(forward)
   {
      if(millis() - last >= 500)
      {
        last = millis();
        
        if(toggle = !toggle)
        {
           digitalWrite(led1, HIGH);
           digitalWrite(led2, LOW);
        }
        else
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, HIGH);
        }
        if(--count == 0){
           forward = false;
        digitalWrite(led1, LOW);
        digitalWrite(led2, LOW);
        }
      }
   }
   
   if(left)
   {
      if(millis() - last >= 500)
      {
        last = millis();
        
        if(toggle = !toggle)
        {
           digitalWrite(led1, HIGH);
           digitalWrite(led2, LOW);
        }
        else
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, LOW);
        }
        if(--count == 0){
           left = false;
        digitalWrite(led1, LOW);
        digitalWrite(led2, LOW);
        }
      }
   }
   
   if(right)
   {
      if(millis() - last >= 500)
      {
        last = millis();
        
        if(toggle = !toggle)
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, HIGH);
        }
        else
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, LOW);
        }
        if(--count == 0){
           right = false;
        digitalWrite(led1, LOW);
        digitalWrite(led2, LOW);
        }
      }
   }
}

int ledToggle(String command) {
if(command == "forward")
   {
        forward = true;
        count = 2000;
        return 0;
    }
   else if(command == "left")
   {
       left = true;
       count = 2000;
        return -1;
   }
   else if(command == "right")
   {
       right = true;
       count = 2000;
        return 2;
   }
   else
   {
       forward = false ;
       left = false;
       right = false;
       
        digitalWrite(led1, LOW);
        digitalWrite(led2, LOW);
        return 1;
   }
}

```

The html file coding is as follow

```
/* Paste the code between the dashes below into a .txt file and save it as an .html file. Replace your-device-ID-goes-here with your actual device ID and your-access-token-goes-here with your actual access token.

---------------------------
<!-- Replace your-device-ID-goes-here with your actual device ID
and replace your-access-token-goes-here with your actual access token-->
<!DOCTYPE>
<html>
  <body>
  <center>
  <br>
  <br>
  <br>
  <form action="https://api.particle.io/v1/devices/xxxxxx/led?access_token=yyyyyy" method="POST">
    Tell your device what to do!<br>
    <br>
    <input type="radio" name="args" value="forward">Forward motion.
    <br>
    <input type="radio" name="args" value="left">Left motion.
    <br>
    <input type="radio" name="args" value="right">Right motion.
    <br>
    <input type="radio" name="args" value="stop">Stop motion.
    <br>
    <br>
    <input type="submit" value="Do it!">
  </form>
  </center>
  </body>
</html>
---------------------------
*/

```

I can use html file to run it, however, it is quite troublesome to have the feedback message each time I choose the action

Thanks to Moors7, he provided a tutorial from bko,

[Tutorial: Spark Variable and Function on One Web Page](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181?redirected=true)

Also here

[Controlling the Spark Core pins with webpage buttons](https://community.particle.io/t/controlling-the-spark-core-pins-with-webpage-buttons/4506/10)

I still cannot understand the java programming code, can anyone please teach me how to implement it?

Thanks

---

<div class="post-metadata">

**Author:** ![Moors7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/moors7/32/588_2.png) [@Moors7](https://community.particle.io/u/Moors7)\
**Post date:** [February 17, 2016, 1:20pm UTC](https://community.particle.io/t/problem-of-web-control/19262/13 "2016-02-17T13:20:29Z")

</div>

Please don’t open new topics for the same questions, it gets confusing.

That said, give this HTML a try, and see if you understand it. Enter your DeviceID where it’s declared. Then, open the page, log in with your Particle credentials, and press the buttons 😄  
If there’s something you don’t understand, feel free to ask, but please try to keep that to this topic, no need to open new ones.

```auto
<html>
  <head>
      <title>Spark function buttons Example</title>
	  <script src="http://cdn.jsdelivr.net/sparkjs/1/spark.min.js"></script>
  </head>

  <body>
    <div id="login">
		<input type="email" class="form-control" placeholder="Emai" id="email"> </br>
		<input type="password" class="form-control" placeholder="Password" id="password">
		</br>
		<button type="button" onclick="login()">Login</button>
	</div>
    <button type="button" onclick="functionPost('led', 'forward')">Forward</button>
    <button type="button" onclick="functionPost('led', 'left')">Left</button>
	<button type="button" onclick="functionPost('led', 'right')">Right</button>
    <button type="button" onclick="functionPost('led', 'stop')">Stop</button>
    
    
    
    <script>
      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

      //var userAccessToken = "blabla";
      var deviceID = "deviceID here";
      
      // callback to be executed by each core
      var callback = function(err, data) {
        if (err) {
          console.log('An error occurred:', err);
        } else {
          console.log('Device action successfull:', data);
        }
      };
	  
	
      function functionPost(functionName, functionArgument){
        // The function needs to be defined in the firmware uploaded to the
        // the Spark core/Particle photon and registered to the Particle cloud, same thing we do
        // with variables. You pass along the name of the function and the params.
        spark.callFunction(deviceID, functionName, functionArgument, callback);  
      }	  
  
      spark.on('login', function(response) {           
        console.log(response);
      });
	  
	  function login(){
        emailInput = document.getElementById('email');
        passwordInput = document.getElementById('password');
        
		console.log(emailInput.value + ", " + passwordInput.value);
		spark.login({ username: emailInput.value, password: passwordInput.value });
		
        emailInput.value = '';
        passwordInput.value = '';
      }
	  
      // Uncomment a line below depending on your preferred log-in method.   
      //spark.login({ username: 'email@example.com', password: 'password' });  
      //spark.login({ accessToken: userAccessToken });
      
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [March 4, 2016, 8:33am UTC](https://community.particle.io/t/problem-of-web-control/19262/14 "2016-03-04T08:33:47Z")

</div>

Dear Moors7,

I have tested with your script, however, it shows a blank page when I turn on the html file, may I know what is happening?

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [March 4, 2016, 9:00am UTC](https://community.particle.io/t/problem-of-web-control/19262/15 "2016-03-04T09:00:54Z")

</div>

Updated : My fault, I have tested and it works thank you!

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [April 4, 2016, 6:35am UTC](https://community.particle.io/t/problem-of-web-control/19262/16 "2016-04-04T06:35:36Z")

</div>

> [@CuriousTech](#):
>
> toggles the output

Dear CuriousTech, I am not quite understand the toggle usage, can you please tech me?

---

<div class="post-metadata">

**Author:** ![CuriousTech](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/curioustech/32/3315_2.png) [@CuriousTech](https://community.particle.io/u/CuriousTech)\
**Post date:** [April 4, 2016, 7:35am UTC](https://community.particle.io/t/problem-of-web-control/19262/17 "2016-04-04T07:35:15Z")

</div>

A toggle flips a bool each time. Using the logical not (!) like **bool = !bool;** it will flip the logical state of the variable each time it executes. It can also be used for if expressions as well, or any logic, like

```
fwd = !fwd;
DigitalWrite(pin1, fwd);
DigitalWrite(pin2, !fwd);

```

So each time **fwd** will be reversed. But that assumes HIGH and LOW are the same as true and false, so it would be safer as

```
DigitalWrite(pin1, fwd ? HIGH:LOW);
DigitalWrite(pin2, fwd ? LOW:HIGH);
```

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [April 4, 2016, 7:42am UTC](https://community.particle.io/t/problem-of-web-control/19262/18 "2016-04-04T07:42:28Z")

</div>

In the code you provided, is that mean  
at first 500ms

if (Toggle = !Toggle) mean toggle value is flip from HIGH to LOW, it execute HIGH,LOW in 2 pins

then for next 500ms

I dont understand how to execute the else function

---

<div class="post-metadata">

**Author:** ![CuriousTech](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/curioustech/32/3315_2.png) [@CuriousTech](https://community.particle.io/u/CuriousTech)\
**Post date:** [April 4, 2016, 8:28am UTC](https://community.particle.io/t/problem-of-web-control/19262/19 "2016-04-04T08:28:49Z")

</div>

Let me unpack it a little more and remove the flip from the if condition so it’s easier.

```
    toggle = !toggle; // flips the boolean (true/false) value each time
    if(toggle == true) // do this if true
    {
       digitalWrite(led1, HIGH);
       digitalWrite(led2, LOW);
    }
    else // do this if false
    {
       digitalWrite(led1, LOW);
       digitalWrite(led2, HIGH);
    }

```

So it should start out false, so it will be true the first time it runs. You could set the state of toggle to false in the ledToggle function to set it up though. But it will have up to 500ms delay if it was turned off and back on in less than 500ms.

---

<div class="post-metadata">

**Author:** ![leslietsz](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/leslietsz/32/8345_2.png) [@leslietsz](https://community.particle.io/u/leslietsz)\
**Post date:** [April 4, 2016, 8:36am UTC](https://community.particle.io/t/problem-of-web-control/19262/20 "2016-04-04T08:36:49Z")

</div>

Thank you very much, it looks much better to understand

---

<div class="post-metadata">

**Author:** ![ScruffR](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/scruffr/32/6952_2.png) [@ScruffR](https://community.particle.io/u/ScruffR)\
**Post date:** [April 4, 2016, 9:43am UTC](https://community.particle.io/t/problem-of-web-control/19262/21 "2016-04-04T09:43:50Z")

</div>

```cpp
//[quote="leslietsz, post:12, topic:19262"]
if(toggle = !toggle)
        {
           digitalWrite(led1, HIGH);
           digitalWrite(led2, LOW);
        }
        else
        {
           digitalWrite(led1, LOW);
           digitalWrite(led2, HIGH);
        }

```

An even easier to understand version IMHO would be

```cpp
bool state;
...
  state = !state; // flip or toggle the current state 
  // since true is equivalent HIGH and false is equivalent LOW, just use it
  digitalWrite(led1, state); // same as state
  digitalWrite(led2, !state); // invers state

```

* * *

I see @CuriousTech had already shown you that 👍