Controlling the Spark Core pins with webpage buttons

@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.

Hi @speedgoofy and @BDub

I use emacs. At this point the key bindings are hard-wired into my brain.

For debugging and testing, I use Chrome, Firefox and Safari/Mobile Safari.

Thanks for the reply, i wish my brain was wired like yours.

emacs looks pretty cool, but would totally confuzzle my brain with those “new to me” key bindings. Basically the answer is, any decent text editor :wink:

2 Likes

YESH!! this is the 1 i wanted… thx @bko!! i use the led as digital pin control the spark relay shield. it works!!

1 Like

Hi @mstelt

I’m trying to do the “control leds over the net” example from my windows computer, but it doesn’t work, can you tell me how you do it from the windows cmd?

Thank you.

Hi,

It’s geen over a year when i was playing with the core so you have to be a bit more specific of you can :wink:

Greetz!

Thank you for the reply.

Ok, I’ve been trying to turn on and off two leds, with the api request, from the windows cmd but it doesn’t work, do I have to change something on the code? and where do i have to put this:
“POST /v1/devices/{DEVICE_ID}/led”

I saw the beginning of the conversation, and you say you already did this from the windows cmd, i was hoping you can help me.

Hi,

Yeah i got it to work but I dont remember how xd have you installed cURL? The line at the bottom is the command as far as i know the rest is comments.

Try some curl tutorials so you know how the commands work

Is there a reason you absolutely need to use the command line, or is it simply because it’s in the example? There are easier tools available that will allow you to make the required API calls. Try Postman for Chrome for example. You could also take a look at the tutorial section here to find guides on how to do it with a webpage. I made a page with the SparkJS library for testing purposes. You could use that to call functions and/or variables if you’d like.

1 Like

ok thanks guys

Hello,

Wondering how should I modify the original code to use a checkbox (which is working like a toggle switch like in iOS (formatted by CSS)?

In the HTML:

  <label class="switch" name="ledControl">
  <input type="checkbox" name="LED1" value="1" onclick="switchLED(7,1)" id="ledCheck1" class="switch-input" unchecked enabled>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
  </label>

The checkbox switches the D7 LED on, but it never switches it off.
I’m using the same Particle code and Javascript.
:scream: honestly respect to the programmers who understand the logic of these codes… I can understand max 60%.

            int led1 = D7;
            int led = D0;

            void setup() {
            pinMode(led1, OUTPUT);
            pinMode(led,OUTPUT);
           
            Spark.function("led",ledToggle);
            digitalWrite(led1, LOW);

            }

            void loop() {
                           
                digitalWrite(led,HIGH);
                delay(1000);
                digitalWrite(led,LOW);
                delay(1000);
                
           }
           
           int ledToggle(String command) {

                int state = 0;
                int pinNumber = (command.charAt(1) - '0') -1;
                if(pinNumber < 0 || pinNumber > 7) return -1;
                if(command.substring(3,7) == "HIGH") state = 1;
                else if(command.substring(3,6) == "LOW") state = 0;
                else return -1;
                
                digitalWrite(7, state);
                
                return 1;
            }

Also my Javascript in the HTML is:

<script type="text/javascript">
   var deviceID = "" 

   /*new String(document.getElementById("photonID").value);  
   in the comment this meant to be an input field to manually input deviceID and tokenID -- couldn't get it work though.... */

   var accessToken = "" /*new String(document.getElementById("tokenID").value);*/
   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 });
     }

This line says that you are always calling switchLED with 7 and 1, so pin 7 to HIGH.

What you want to do is pass the checkbox object and test its checked property.

<input type="checkbox" name="LED1" value="1" onclick="switchLED(this,7)" id="ledCheck1" class="switch-input" unchecked enabled>
...

and later

   function switchLED(obj,ledn) {
     var newValue = obj.checked;
     var paramStr = "l" + ledn.toString();
...
1 Like

Thank you. It worked properly.
:+1:

1 Like

It should be: int pinNumber = (command.charAt(1) - ‘0’);