Using JQuery with Agents

Agent Code
1

This isn’t a question so much as making a discussion post around JQuery and Agents, and hoping others toss in ideas.

I just started using JQuery in my agents, and it seems to work really well. I wanted to make two points in case anyone else is also doing this.

First, make sure your single and double quotes are properly set up in your HTML code, and doubled up where necessary. Find and Replace is your friend.

Second, I found this comment by @beardedinventor tucked away in another post, and it is crucial.
Browsers don’t like mixing HTTP, and HTTPS, so if you reference CSS or JS from a CDN, make sure you use HTTPS. I couldn’t figure out why things weren’t working until I read that.

Just as an example, for anyone working through this like I am… here is some working agent code using a JQuery color picker. Note the HTTPS in the CDN references.

If any of you web guru’s have additional comments… please do.

2

Ok, now I do have a question. I want to build an HTML Pan & Tilt control that I can run from the agent using JQuery sliders. I added XMLHTTPRequest function from the Snackbot code, and I have it working right up to receiving the key:value pairs in http.onrequest().
I’m trying to send JSON through the XMLHTTPRequest… can I do that? or do I need to do something like:
devInfoReq.send(key, value);

This is what I have right now…my body has something like JSON, but it is undecodeable.

`local html = @"<!doctype html>

jQuery UI Slider - Vertical slider

Tilt:

Pan:

";

http.onrequest(function(request,res){
if (request.body == “”) {
res.send(200, html);
}else{
server.log("Body: " + request.body);
//local json = http.jsondecode(request.body);
//server.log("JSON: " + json);
if(“pan” in request.body){
server.log(“Agent: Panning”);
device.send(“pan”, request.body.pan);
}else if(request.body == “medium”){
server.log(“Agent: Tilting”);
device.send(“tilt”, request.body.tilt);
}else{
server.log("Unrecognized Body: "+request.body);
}
res.send(200, “”);
}
});`

3

Yes I’ve done this for someone else of the forum. Code for web/agent/imp is at https://gist.github.com/industrialinternet/6262728
I fire the jqm ajax request on slider.stop someone found that you can overflow the agent buffer if you send on change. Please note I’m not a programmer so there might be a more correct way of doing it.

4

Thanks… figuring out how to send on control release was my next task. I moved the control 5 or 6 segments and was fine, but I know better than to throw 50 requests at the agent at once. :slight_smile:

5

@controlCloud and @jwehr what IDE or application are you guys using to develop your JQM?

6

I’ve been using the Electric Imp IDE, since I’m not doing a lot more than just modifying existing code. I’m pretty familiar with Dreamweaver and Visual Studio, so I use those on occasion, but I’m really interested in the new Web IDE’s like Codio. The more things I can do from a browser, the better.

7

@jwehr I’m a little baffled by this thread, how are you using the agent to develop a web app? I see in your code above that you have html and what looks like agent code together, is that just for convenience?

8

Technically, it is all “agent” code. Here is what is happening in the code above. Whenever a browser makes a request to the agents URL, the agent checks to see if it is programmed with anything to respond to the browser with. You use the http.onrequest() function to do this. If you notice in the code, there is an if statement that basically says, If I get a request, and the body of the request contains nothing (request.body == “”), then reply with this HTML code. The code that we reply with is just a string that contains properly formatted HTML. The browser receives that HTML and displays it just like it would from any web server.

Back to your actual question… The Electric Imp IDE is just a web IDE, you can develop anything you like in either the agent or the device pane, you just can’t compile or run that code to anything except your agent or Imp, but you could copy it out of there and compile it somewhere else if you really wanted to.

So there is HTML and Javascript in the Agent, but it really is just a string of text within a variable. You never have a .html file or a .js file… that’s why we are referencing them from CDN’s… there is no local file storage for the agent.

9

Essentially, you are building an API within the agent, that will reply with whatever you program it to. That could be as simple as a static HTML page, or JSON information for device control… ect.

10

@jwehr I understand now, so in your example above the first time you direct your browser to your imp url you will receive a webpage (html) that you can then use to control the imp. Clever, thanks for the help