Send a value to a variable from a webpage [SOLVED]

Getting Started
7

Sorry, had to type the link out of my head, because I couldn’t connect to my server for some reason. I fixed the typo :smile:

However, I think you’ll find this more interesting:
HTML:

<html>
  <head>
      <title>Spark function buttons Example</title>
  </head>

  <body>
    
    <input type="text" class="form-control" placeholder="Start Hour?" id="startHour">
    <input type="text" class="form-control" placeholder="Start Minute?" id="startMinute">
    <input type="text" class="form-control" placeholder="Stop Hour?" id="stopHour">
    <input type="text" class="form-control" placeholder="Stop Minute?" id="stopMinute">
    
    <br>
    
    <button type="button" onclick="sendValues()">Send values</button>
    <!--
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 1</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 2</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 3</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 4</button>
    -->
    
    
    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
    <script>
      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

      var accessToken = "accesstoken_here";
      var deviceID = "deviceID_here";
      
      var startHour;
      var startMinute;
      var stopHour;
      var stopMinute;
      
      var combinedTime;
      
      //console.log(startHour + startMinute + stopHour + stopMinute);
      
      function sendValues(){
        startHour = document.getElementById('startHour');
        startMinute = document.getElementById('startMinute');
        stopHour = document.getElementById('stopHour');
        stopMinute = document.getElementById('stopMinute');
        
        combinedTime = startHour.value + '~' + startMinute.value + '~' + stopHour.value + '~' + stopMinute.value;
        console.log(combinedTime);
        
        functionCall('parse', combinedTime);
        
        startHour.value = '';
        startMinute.value = '';
        stopHour.value = '';
        stopMinute.value = '';
      }
      
      
      spark.on('login', function(response) {           
        console.log(response);        
      });

      // callback to be executed by each core
      var callback = function(err, data) {
        if (err) {
          console.log('An error occurred while getting device attrs:', err);
        } else {
          console.log('Device attr retrieved successfully:', data);
        }
      };
      
      function functionCall(functionName, functionArgument){
        // The function needs to be defined  in the firmware uploaded to the
        // the Spark core and registered to the Spark cloud, same thing we do
        // with variables. You pass along the name of the function and the params.
        spark.callFunction(deviceID, functionName, functionArgument, callback);  
      }
      
      // Uncomment a line below depending on your preferred log-in method.   
      //spark.login({ username: 'email@example.com', password: 'password' });  
      spark.login({ accessToken: accessToken });
      
    </script>
  </body>
</html>

Device code:

int startHour = 0;
int startMinute = 0;
int stopHour = 0;
int stopMinute = 0;

void setup() {
    Serial.begin(9600);
    Particle.function("parse",parse);
}

void loop() {

}

int parse(String command){
    char charBuf[20];
    command.toCharArray(charBuf, 20);
    
    //Begin black magic supplied by @mdma at:
    // https://community.spark.io/t/gpio-control-via-gui/6310/7
    const int value_count = 8;  // the maximum number of values
    int values[value_count];    // store the values here
    
    char string[20];
    strcpy(string, charBuf);  // the string to split
    int idx = 0;
    for (char* pt=strtok(string, "~"); pt && idx<value_count; pt=strtok(NULL, "~")) {
       values[idx++] = atoi(pt);
    }
    //End black magic.
    
    startHour = values[0];
    startMinute = values[1];
    stopHour = values[2];
    stopMinute = values[3];

    Serial.println(startHour);
    Serial.println(startMinute);
    Serial.println(stopHour);
    Serial.println(stopMinute);
    
    return 0;
}

Give it a try, and let me know if that works for you :smile:

4 Likes