Reading HTML form name in Spark Core programming

Firmware
1

Hello I’m trying to make a form online that will be able to input various values into a movable robot. This will require an HTML form that I am making, however because there are multiple motors being controlled it has lead me to create a new form for each of them, leading to more submit buttons, which also navigate away from the original html page. I’ve seen code where the form name has been changed and supposedly differentiates the command, however I can not find a way for the Core programming to read the name from the form. Is there any way to do this so i can use an if statement and the name related to the input to do determine which motors are being controlled?

2

Hi @jtarlo

Have you seen this tutorial I wrote some time ago:

You could expand the methods here to control a large number of motors.

3

Basically, don’t use forms :wink: JavaScript is great for this since it doesn’t require page reloads, but can trigger stuff in “the background”.
I put together this example, which works really well for me. have a look, but do definitely check out the tutorial linked above. That’s what taught me to be able to create the example below (thanks again @bko :wink: !)

HTML:


<html>
  <head>
    <title>Spark Login Example</title>
  </head>

  <body>
    <div id="spark-login" />

    
    <div id="direction" style="font-size:50px; font-weight:bolder;"></div>
    
    <script src="http://cdn.jsdelivr.net/sparkjs/0.5.10/spark.min.js"></script>
    <script>
      var direction;
      var directionContainer = document.getElementById("direction");
      
      var deviceID = "PUT_YOUR_DEVICE_ID_BETWEEN_THESE";
    
      var callback = function(err, data) {
        if (err) {
          console.log('An error occurred while getting core attrs:', err);
        } else {
          console.log('Core attr retrieved successfully:', data);
        }
      };
    
    
      sparkLogin(function(data) {
        console.log(data);
        
        document.onkeydown = function(e) {
          switch (e.keyCode) {
            case 37:
              direction = 3;
              directionContainer.innerHTML = "left (white)";
              //alert('left');
              break;
            case 38:
              direction = 0;
              directionContainer.innerHTML = "up (red)";
              //alert('up');
              break;
            case 39:
              direction = 1;
              directionContainer.innerHTML = "right (green)";
              //alert('right');
              break;
            case 40:
              direction = 2;
              directionContainer.innerHTML = "down (blue)";
              //alert('down');
              break;
          }
            
          spark.callFunction(deviceID, 'keypress', direction, callback);
        };
        
        
      });      
    </script>
  </body>
</html>

Core/photon:

int whichKey;

void setup() {
    RGB.control(true);
}

void loop() {
    Spark.function("keypress", keypress);
}

int keypress(String key){
    whichKey = key.toInt();
    Serial.println(key);
    
    switch(whichKey){
        case 0:
            RGB.color(255,0,0);
            break;
        case 1:
            RGB.color(0,255,0);
            break;
        case 2:
            RGB.color(0,0,255);
            break;
        case 3:
            RGB.color(255,255,255);
            break;
    }
    
}
2 Likes
4

Hey, I’m attempting to make a program to use arrow keys in javascript in order to start a function in the code for the core. However, the program is not functioning, and I’ve deduced the issue to be coming from the Javascript program(I am completely new to it). Here is the code I have for the core with filename motorcontroller:

int motor1 = D0;
int motor2 = D1;
int ms = 1.5; //ms for logic


void setup() {
    pinMode(motor1, OUTPUT);
    pinMode(motor2, OUTPUT);
    Spark.function("motor1drive", motor1drive);
    Spark.function("motor1stop", motor1stop);
    Spark.function("motor2drive", motor2drive);
    Spark.function("motor2stop", motor2stop);
    
}

void loop() {
}

int motor1drive(String command) {
    if(command=="motor1drive") {
        for(int i=0; i<255; i++) {
        analogWrite(motor1,255); 
        delay(ms);
        analogWrite(motor1,0);
        delay(ms);
        }
    }
}
int motor1stop(String command) {
    if(command=="motor1stop") {
        analogWrite(motor1,0);  
        delay(ms);
        analogWrite(motor1,0);
        delay(ms);
    }
}

and here is the code I have for Javascript:

<html>
	<script src="https://api.particle.io/v1/devices/DEVICEID/motorcontroller?access_token=ACCESSTOKEN" ></script>
	
	<script>
	document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');  
            document.forms["motor1drive"].submit();
            break;
        case 38:
            alert('up');
            document.forms["motor1stop"].submit();
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};
</script>

</html>

I believe the issue is this:

                document.forms["motor1drive"].submit();

but I dont know what to change it to. Thanks.

PS Im not sure if any of the Javascript is correct

5

What’s wrong with the code I’ve posted above?

7

Sorry about the multiple posts… I’m trying out your code but I havent been able to login to spark through it…

Update: I got it to work… thank you very much!

1 Like