Web form text area to Particle

Hello! I’m looking to do something very simple and I don’t know much about web programming so I’d like to be able to do a just a text area and then send the content to the particle dashboard…
I found some example online but nothing that deal with text area and they all seems to use old spark function and not be safe (device id and token visible)
any pointers !?
thanks

What exactly do you want to achieve by sending it to the dashboard? Or do you want to send it to a device?

They might still be applicable if you swap out whatever they use for a text area. It’s just a multi-line text input, basically.

You can swap those for Particle.function. It’s only a name change, the functionality is the same. Function calls are limited to 63 characters though, so mind that. If you need more, you might need to look into publish/subscribe or other means entirely.

Generally, most tutorials show you the basics to get things going. Delving into how to obfuscate credentials might be out of the way for the purpose of some tutorials. That said, you could make it so you’d have to log in with your credentials first, which will then retrieve an access token that can be used for further communications. That’s how the JavaScript SDK does it.
Adding this makes it a bit more complicated though, since you’d have to program everything to be dynamic. Seeing as you’re not that familiar with web development I suggest first trying to make it work using hard coded data, and only move beyond that once that works as expected.

2 Likes

hello Moors7! thanks for the quick response ! :smile:
I’m trying to send that text to the photon and then through the serial port to another microcontroller where I’ll do parsing and drive some big display with the text…

For testing purposes you can have a look at how I did it with functions here: http://jordymoors.nl/interface
You can call functions with an argument with that, allowing you to test the code. Changing the text input to a text area should be a one-line change.

2 Likes

that s exactly it Moors!
just can’t figure out the inner workings of what you’re showing me… when I look at the code on the page there’s a lot going on…
I guess at that point it’s just how to send the content of the text input as a variable in the click function…
here what I have so far

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  function switch_light(value) {
    $.post("https://api.spark.io/v1/devices/--id--/led",
    {
      access_token:"--token--",
      params:value
    },
    function(data,status){
      //alert("Light: " + value + "\nStatus: " + status);
    });
  }

  $("#on").click(function(){
    switch_light("HIGH")

  });
  $("#off").click(function(){
    switch_light("LOW")
			});
			
	$("#doit").click(function(){
    switch_light(send_msg)

  });
			
 
});
</script>
</head>
<body>

<button id="on">ON</button>
<button id="off">OFF</button>

<form>
Message: <input type="text" name="msg" value="send_msg"><br>
<input id="doit" type="submit" value="Submit">
</form>

</body>
</html>

the led toggle works ok but the text input does not get send

Have you worked through this tutorial already?

1 Like

That’s why I suggested taking it slow, since it’s rather involved what you’re asking (due to the credentials aspect). The link I showed you does exactly the thing you want to do though, and considering a function can only take 63 characters I don’t see the benefit of a text area over a normal text input. How much text are you expecting to send exactly?

This example might be a bit easier to understand :smile:
http://jordymoors.nl/particle/demos/function_input_button.html

1 Like

Hey Moors…fiouu we’re getting there… last example is just what I’m talking about… scratch the credentials I’m just looking for the simplest of the text box to send to the photon… :wink:
when I save the source code of your page I can’t seem to make it work… I don’t get how anything get sent since I don’t see any POST request or URL ?.. is it in the spark.min.js that it’s happening ?
could you look at the code and tell me what I’m doing wrong ?
thanks !


<!-- saved from url=(0062)http://jordymoors.nl/particle/demos/function_input_button.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>Spark function buttons Example</title>
</head>

<body>

<input type="text" class="form-control" placeholder="Message" id="msg">

<br>

<button type="button" onclick="sendValues()">Send values</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 = "token";
  var deviceID = "id";
  
  var msg;
    
  function sendValues(){
    msg = document.getElementById('msg');        
    msg.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>

You’re correct in assuming the library makes the actual calls, it’s just a way of simplifying the process. But to do so, you’ll need to at least call the library function, which is what you cut out by removing functionCall('parse', combinedTime);. That calls a function which in turn will call the library function.

Also, this: msg = document.getElementById('msg'); is getting the textbox object, not the actual text.
This: msg.value = ''; does set the text to empty, but you’re not actually doing anything with it before clearing it. In between those two lines, add a call to the function mentioned above, passing it the contents of the textbox and the function name you’d like to trigger.

1 Like

Hey Moors thanks for the pointers!
here is the working code for the most basic text input sending raw data to the particle dashboard in case it could be usefull for someone like me :wink:

WEB (Moors7)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Spark function buttons Example</title>
</head>

<body>

<input type="text" class="form-control" placeholder="Message" id="msg">

<br>

<button type="button" onclick="sendValues()">Send values</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 = "--token--";
  var deviceID = "--id--";
  
  var msg;
    
  function sendValues(){
    msg = document.getElementById('msg');    

	console.log(msg);
    
    functionCall('led', msg.value);
	
    msg.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>

PHOTON

void setup(){
Particle.function("led", msg);
}

 void loop(){}


int msg(String command){
 Particle.publish("Console", command);
 }
1 Like