Simple Servo/LED Ajax Demo

Projects
1

@esi915 via YouTube (http://youtu.be/ev45JqWW35Y): This is the code you asked about. I’ve since switched to using the new IDE with separate agent code which is much more versatile than the old planner.

Web app code:

I’m using JQuery, Bootstrap, modernizer, and bootstrap slider (http://www.eyecon.ro/bootstrap-slider).
`LED Off 

$('.slider1').slider()
  		.on('slide', function(e){
		
		var url = 'https://api.electricimp.com/v1/.../...';
		cmd_value = parseFloat(e.value).toFixed(2);
		
		$.post(url, JSONout);
  	});

$("#led_button").click(function() {	
	if ($(this).text() == "LED Off")
	{
		$(this).text("LED On");
		$(this).removeClass("btn-default");
		$(this).addClass("btn-success");
		cmd_value = 1;
	}
	else
	{
		$(this).text("LED Off");
		$(this).removeClass("btn-success");
		$(this).addClass("btn-default");
		cmd_value = 0;
	}
	
    	var JSONout = {
		value: {
			"c"	: "l",
			"v" : cmd_value
		}
		};

	var url = 'https://api.electricimp.com/v1/.../...';	
	$.post(url, JSONout);	
});

`

Device Code:
`// Configure hardware

// Set up PWM on both pins at a period of 20 ms, and initialize the duty cycle
hardware.pin1.configure(PWM_OUT, 0.02, 0.085);
hardware.pin9.configure(DIGITAL_OUT_OD_PULLUP);
server.log(“Hardware Configured”);

class servo extends InputPort
{

name = "Servo position"
type = "number"

function set(value) {
    hardware.pin1.write(0.04 + (value * 0.09));
    server.show(format("%s = %.2f", name, value));
    
    if(value)
    {
        hardware.pin9.write(0);
    }
    else
    {
        hardware.pin9.write(1);
    }
}

}

class TableIn extends InputPort
{
name = "HTTP Data"
type = “array”

function set(value) {
    server.show("c: "+value.c+" v: "+value.v);
    
    if (value.c == "s")
    {
        hardware.pin1.write(0.04 + (value.v.tofloat() * 0.09));
    }
    else if (value.c == "l")
    {
        if (value.v == "1")
        {
            hardware.pin9.write(0);
        }
        else if (value.v == "0")
        {
            hardware.pin9.write(1);
        }
    }
}

};

imp.configure(“Servo Controller”, [servo(), TableIn()], []);
`

2

I’ve done some successful tests using JQuery / JQuery Mobile. It works good, and is fast enough, etc. The problem for me is, anyone can see your Imp URL when you use javascripting (client-side). To me that’s a security issue. So I’ve been using PHP to handle all of the POSTing. In addition to that, the user must log-in, creating a PHP SESSION. Nobody can see my Imp URL, as the scripting is server-side. Just a thought.

It’s great to see people posting examples on here. There are a ton of new Imp users that benefit from seeing real projects.

3

Your right about the client side code being to exposed in examples like these. They are just for testing the capabilities and obviously would not be implemented in any way that would publicize your imp device or agent api codes. I would expect to see electric imp come up with a better way to handle the interface as well between web applications and devices in the near future. If not, it’s not difficult to implement something like you were saying, having the client side send messages back to a server who in turn sends them on to the agent/imp after verifying the client. I’m excited to see where this goes in the next couple years.

4

Sorry to hijack this thread, but I stumbled across it while trying to solve my own AJAX problems. In the end, I made a solution that doesn’t require jQuery, PHP, or Agents access. It’s just a single static HTML page with some javascript:
`

UID of electric impee:

`

See my blog for more details, including the corresponding imp code.