Controlling the Spark Core pins with webpage buttons

Hi everyone!

I’m just received my Spark Core today and i’m learning al kind of things today. The one problem is that I want to control my pins with a webpage with buttons. I have little knowledge of API’s and other related subjects and I have searched around the forums and Google to give me some insight on sending and receving data.

Unfortunatly I still can’t understand how everything works. I tried some examples like https://community.spark.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181 but I cant get a grip on the HTML part and the connection between the code for the Spark Core and the webpage.

Can someone help me understand all this? Some simple examples to switch pins and how to use the API? It would be a real help.

Thank you in advance!

1 Like

Hi @mstelt

Welcome to Spark! Have you tried the simple tutorials yet like controlling and LED over the net?

http://docs.spark.io/#/examples/control-leds-over-the-net

These are about as simple as it gets on the core side and use a cross-platform tool called curl to do HTML requests like a web browser but from the command line. It’s a great debugging tool.

Thank you for the quick reply @bko .

I got the command line sending working from Windows cmd and I can switch the LED on and off.

How do I put this in a website? With a FORM function for example?

Thank you in advance

Ok, so now you need to go back and look at the Spark Variable and Function on One Web Page and make some minor edits. You don’t want the slider, but you do want four buttons (you could do it with two, I just did four).

Add your device id and access token to this HTML and save it as a local file. Open it in a web browser with the file:///path/to/file/filename.html URL and click away! Remember to keep your access_token private since that identifies you.

<!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>

    <br><br>
    <button id="led1onbutton"  onclick="switchLED(1,1)">LED 1 On</button>
    <button id="led1offbutton"  onclick="switchLED(1,0)">LED 1 Off</button>
    <br><br>
    <button id="led2onbutton"  onclick="switchLED(2,1)">LED 2 On</button>
    <button id="led2offbutton"  onclick="switchLED(2,0)">LED 2 Off</button>
    <br><br>
    <script type="text/javascript">
      var deviceID    = "<<device id>>";
      var accessToken = "<<access token>>";
      var setFunc = "led";

      function switchLED(ledn,newValue) {
        var paramStr = "l" + ledn.toString();
        if (newValue==1) { 
           paramStr = paramStr + ",HIGH";
        } else {
          paramStr = paramStr + ",LOW";
        }
	var requestURL = "https://api.spark.io/v1/devices/" +deviceID + "/" + setFunc + "/";
        $.post( requestURL, { params: paramStr, access_token: accessToken });
      }
    </script>
</body>
</html>

[EDIT] if you do want to put this on the net on a public server, you should use a PHP proxy or other service to keep your access token private.

See here for an example:

7 Likes

This works great!

I have very little knowledge about jquery and javascript programming so I couldn’t figure it out. Mostly how to send a CURL command wasn’t that clear.

I’ll will be using this in my house so I don’t want it on a public server.

I’ll tinker with this some more to use in my project and as a debug tool. I have Windows Phone so no Tinker App for me at them moment :frowning:

Many thanks!

2 Likes

Im not working. Spark has cyan throbing light. Enclosed all my code

Hi @kiwibird1

I think you are missing some of the HTML file, there are more lines below the last line in your file. I think you need to copy-paste again from the forum and scroll down a bit in the code window, which has its own little scroll bar.

1 Like

Almost fixed :smile:
The devils in the details. It worked, but my 2nd led doest work.

my code is

// name the pins
int led1 = D0;
int led2 = D7;

Wanted to get the led going which I thought was on d7. regardless d7 doesnt go high.
Later note. fixed this code
if (pinNumber < 0 || pinNumber > 7) return -1; //(the 7 was a 1)
still not going on pin 7

Hi again,

You need to change the web side as well--the second of buttons send 2 not 7 in the code I posted, so in the lines above you want:

    <button id="led2onbutton"  onclick="switchLED(7,1)">LED 2 On</button>
    <button id="led2offbutton"  onclick="switchLED(7,0)">LED 2 Off</button>

STILL NOT WORKING ON PIN 7.
Dare I ask, how do we read a0 pin on the web.

this makes it work (same is pin0) so the problem is in the lines above
 digitalWrite(pinNumber, state);
   digitalWrite(7, state);// hard coded as a test. works!

I don’t fully understand the code above and not sure how to do a simple print to console so I can dig into the code

Not sure what the problem was, but i have it going on 3 pins now.
Would love to read analogue pin to web now.

Hi @kiwibird1

You should look at this tutorial:

2 Likes

Hi! @BDub due to use of ur projects but with some modifications I did marked you and I guess that you’ll probably know where’s the problem in my case.

I will just jump into this topic because of similar issues on my own project and for not “spamming” by opening new topic :smiley:
So, as I manage to control output pins with my web app and I’ve even added the variables with state like (ON, OFF) (see pic below), therefore a quite strange issues is appearing.
As I click on D0 button first time, it changes the state of pin to high as it changes the variable state to “ON” and than again when button D0 is presses for second time the pin output is still HIGH and only the variable state changes as it should, so after that the state of variable “ON/OFF” is no more same as the pin output.
So where’s the problem or do i need somehow do this in the code area??
If anyone could help I’d appriciate :wink:

Hi there!

It seems like your state variable isn’t resetting. Do you mind to post your code here so I can check?

I’m changing my states like this each time I press a button: (I’m using a state machine atm)

    case 2:
    digitalWrite(led2, state2);
    state2 = !(state2);
    break;

cheers!

@mstelt yup here’s the code :smiley:

int testFunction(String args) {
if(lightState != ON)
{
    lightState = ON;
    state = !state;
    digitalWrite(D0, state);
}
else {
    lightState = OFF;
}
return 200;
}

I guess that was not so understandable explained above :blush:

The state variable is going “ON/OFF” on each press but the state of OUTPUT pin is not good on every click.
start default variable OFF, output pin low (led off),

  1. click variable ON, output pin high (led on),
  2. click variable OFF, output pin high (led on),
  3. click variable ON, output pin low (led off),
  4. click variable OFF, output pin low (led off),
    and so on…

Ok, I looked over your code and I think I understand what you are trying to accomplish. In the function testFunction you are sending the string “args” as a variable but you are not using this in your function. I will assume that you only use the button to change the states of the variables and you then read back the states to display “ON” or “OFF” on the website accordingly.

Mayby you should try something more like this:

//Variables declared at the start
int stateD0 = 0; 
int stateD7 = 0;      

void testFunction(String outputPin) {
    if(outputPin == "D0")
    {
        stateD0 = !stateD0;
        digitalWrite(D0, stateD0);
    }
    if(outputPin == "D7")
    {
        stateD7 = !stateD7;
        digitalWrite(D7, stateD7);
    }
  }

So when you press the button you need to call the function as follows:

 testFunction("D0");

or

testFunction("D7");

Hope this helps. If not, send me your full code so I can how you handle the buttons.

1 Like

@mstelt
Heh after modification, idk what have happend but nor the outputPin works nor the ON/OFF state :smiley:
So I’d put back old code and here it is and if is needed i can send the web app too.

#define ON 1
#define OFF 0

bool state = LOW;
int lightState = 0;
//int LIGHTPIN = D0;

void setup()
{
     Spark.function("RoomLight", testFunction);
     Spark.function("GarageDoor", test2Function);
     //Spark.function("light", lightFunction);
     Spark.variable("lightstate", &lightState, INT);

     pinMode(D0, OUTPUT);
     pinMode(D7, OUTPUT);
     //pinMode(LIGHTPIN, OUTPUT);

     digitalWrite(D0, LOW);
     digitalWrite(D7, LOW); // turn on D7 by default
     //digitalWrite(LIGHTPIN, LOW);
}

void loop() {
// do nothing
}

//testFunction modificating only for oneOUTPUT pin (D0)
int testFunction(String args)
{
  if(lightState != ON)
  {
     lightState = ON; //light ON
     state = !state; // toggle the state
     digitalWrite(D0, state); // update the LED to see some action
  }
  else {
     lightState = OFF;
     }
  return 200; // This is checked in the web app controller for validation
}

//test2Function without variable state change ON/OFF works fine
int test2Function(String args) {
     state = !state;
     digitalWrite(D7, state);
     return 200;
}

Aah I see what you are doing now. Try this:

    #define ON 1
    #define OFF 0
    
    
    int lightState = 0;
    //int LIGHTPIN = D0;
    
    void setup()
    {
         Spark.function("RoomLight", testFunction);
         Spark.function("GarageDoor", test2Function);
         //Spark.function("light", lightFunction);
         Spark.variable("lightstate", &lightState, INT);
    
         pinMode(D0, OUTPUT);
         pinMode(D7, OUTPUT);
         //pinMode(LIGHTPIN, OUTPUT);
    
         digitalWrite(D0, LOW);
         digitalWrite(D7, LOW); // turn on D7 by default
         //digitalWrite(LIGHTPIN, LOW);
    }
    
    void loop() {
    // do nothing
    }
    
    //testFunction modificating only for oneOUTPUT pin (D0)
    int testFunction(String args)
    {
      if(lightState == OFF)
      {
         lightState = ON; //light ON
         digitalWrite(D0, lightState); // update the LED to see some action
      }
      else
      {
         lightState = OFF; //light OFF
         digitalWrite(D0, lightState); // update the LED to see some action
      }
         
      return 200; // This is checked in the web app controller for validation
    }
    
    //test2Function without variable state change ON/OFF works fine
    int test2Function(String args) {
         state = !state;
         digitalWrite(D7, state);
     

    return 200;
}

Still, when you call the “int testFunction(String args)” the variable “args” doesn’t do anything in the code. Depending or your webapp you can either call the function without argumentes (if you want different functions for different buttons) or you could use the “args” to choose a OUTPUT pin for example.

Perfect!!! :smiley:

Works great and is no issue neither bettwen buttons.

@mstelt Thanks alot!

About args variable that will maybe be experimented if not than removed. But finally I can go on next step :smiley:

2 Likes

No problem, glad I could help!

I’m stull struggling with the GET part to update my webpage so I’m still learning to :wink:

2 Likes