PowerSwitchTail example

Guys, I could really use some help. Honestly I was not that impressed with how to control things via the browser. I just about gave up. Then I ran into this VERY COOL example by beardedinventor here.
https://github.com/electricimp/examples/tree/master/PowerSwitchTail

Has anyone written up something that explains how this was done. How one can create their own page like this ?
This has gotten me excited, and I am very curious how this was accomplished.

The key thing to realize is that you’re not controlling things with the browser… you’re controlling things with HTTP requests.

Let’s back up a bit… the htt.onrequest function spins up a web server in your agent that can process arbitrary HTTP requests.

HTTP requests are how things on the Internet communicate (usually, at least). When you open up your browser and type www.google.com into your address bar, you are making a GET request to that URL. That request eventually gets routed to Google’s server, where an application (the web server) responds with some HTML that your browser renders as the webpage.

But other things cause HTTP requests as well… for example, when click the “Post Comment” button on our forums, your browser makes an HTTP request to a web server that’s also running our forum software…

So the examples you’ve seen that tell you to just “browse to this url to control your imp” are really saying “make an HTTP request to this url to control your imp” and doing it by typing a URL into your browser is the quickest and simplest way to make that request.

We’re actually working on a tutorial right now that goes beyond simply browsing to a URL to cause your imp to do something, and look at how you can create basic webpages to interact with your imp.

It can get pretty complex pretty quickly if you’re new to web development, because you’re working with HTML, Javascript, and Squirrel at the same time… but it’s certainly possible, and once you figure out the basics, it’s very powerful!

So stay tuned - I’ll be sure to update this thread when the tutorial goes live :slight_smile:

@beardedinventor, Thank you so much for the reply! I eagerly look forward to the update!

@seulater not sure if you came across this excellent article written by @smittytone on the imp blog https://community.electricimp.com/blog/how-to-serve-an-html-form-via-an-agent-and-deal-with-the-results/

This demonstrates how to handle a data “post” using a form submit button. The powertail example sends password and data using “get” request to the imp agent using javascript.

In both cases the examples show how to develop a web browser interface within the agent code itself which I think is very handy.

Not sure if you went through the snackbot example as that also offers further insight into how to control things through webpage. This example uses different techniques to say using ajax.

As @beardedinventor says, it can get pretty complex with mixing all the html, javascript, ajax (or even angular js) up with squirrel.

I too look forward to reading the tutorial goes live.

@gerriko, thanks I will give that a look at.