Controlling the Spark Core pins with webpage buttons

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

@darek_student it looks like you are all set with all problems solved. Just reviewing the discussion I’d like to point out what I think happened.

It looks like you merged the testFunction() from my Simple Spark Controller demo app and the trunkFunction() in my Remote Spark demo app. They look something like this:

int trunkFunction(String args) {
    if(trunkState == OFF) {
        trunkState = ON; // trunk popped
        digitalWrite(TRUNKPIN, HIGH); // Single press the trunk pop button
        delay(500);
        digitalWrite(TRUNKPIN, LOW);
    }
    else {
        trunkState = OFF; // trunk closed
    }
    return 200; // This is checked in the web app controller for validation
}
int testFunction(String args) {
    state = !state; // toggle the state
    digitalWrite(D7,state); // update the LED so we can see some action
    return 200; // This is checked in the web app controller for validation
}

The testFunction() more or less does what you want without the variable feedback. It just toggles a state on the spark core and updates the digital output in both cases.

The trunkFunction() is designed to toggle the trunkState variable for feedback, but only do something on the Spark Core when the state changes from OFF to ON. In that case, it sends the key sequence to the remote keyfob to open the trunk. The state will then show as ON, or in the web app OPEN so that you know your trunk is open. This requires you to physically go out to your car to close it, so in the case of the ON to OFF state we don’t do anything on the Spark Core except update the state variable. The idea is you close your trunk, and then tap the trunk button on the web app again to toggle the state variable back to OFF, effectively resetting the whole “system”.

1 Like

Yup thanks for the replay :smiley:
Eventho I didn’t think at that before as you said that the trunk should be manualy closed, no wonder that my light did not go off or on when i pressed the button :wink:

1 Like

@BDub one more question because this now is out of my league and every help I will appreciate.
So as the web app is created and i don’t want to post it on some server eventho works without it :smiley: but how can I make that application to work over android mobile so that it is not needed to go over some web browser and so on?
As i saw that people do create some apps same as the web app and controlling it over smartphone, if im wrong and that all is the web app on mobile too than please corect me and guide me to make it functional over smartphone :smiley:

Yes you can build a native Android App such as this open source Tinker app from Spark that can serve as your interface:

There are a bunch of discussions on the forum already for developing android apps… just search for “android” and possibly add “app” if there are too many hits.

1 Like

@bko What do you use to write your HTML code above?

I’m going to take a guess… Notepad, or Sublime Text. Personally I just use Sublime Text and code it by hand, no visual editor, then tweak it in Chrome using F12 if needed.