Connecting web app to imp

Hi, working on this project and need some advise and how to proceed from here.

I have a bootstrap web page which has buttons for different elements of a model house that im using. eg lights: on or off, front door: open or close etc. When you click these buttons it updates a database with json which contains the name of the device and current state.

I then also have the model house which has 3 imps in it controlling various elements eg lights, front door as well as some analog inputs like internal and external temperature. This all works when calling the agent url directly.

I now need to connect these 2 so I can control the house via my web app. Basically how do I connect the agent URL to the button click so it open/closes the door (without redirecting the page obviously) and same but for the analog_in so I can get the temperature reading displayed on the web page.

Not very complicated but struggling to find some basic examples of this and get my head around it.
Involving ajax, post, php?

Thanks in advance.


Comments

  • Yes not very complicated. Sounds like you have server/imp side sorted. This just leaves client / web app side.

    You can POST data directly to all 3 of your Imps or use Ajax from your web page without the need for php. However this will expose the Imp Agent URLs in your web-browser code, so recommend that you should tighten up how each of the 3 Imp agents respond to these http requests. This is really where php comes in handy, if you want to add in this additional layer, as you can use PHP server side code as a bridge between your web app and the imp agents. You can use either POST and Ajax to link your web app with a PHP server side script.

    Another difference between Ajax and POST is that a POST or form submit event will cause your web page to refresh. In many cases you do not want this, so this is where Ajax is probably better - especially handy if you are polling at regular intervals to get auto updates on web page from the server.

    For these sort of web apps I have found that Angularjs version 1.# framework works really well. There are plenty of tutorials and info online to help. Otherwise just use jquery / ajax to manage your web page updates and in transferring / receiving data from Imp agent (in json format).
  • edited February 24
    Just thought to mention that you need to handle Cross-Origin Resource Sharing (CORS) when sending info from web page to imp agents - basically means setting up the right headers etc. I had this problem before, that when posting json data it did not like it as makes a preflight OPTIONS request first. I used json stringify method to resolve and used content type as application/x-www-form-urlencoded.
  • edited February 24
    Thanks for your reply, some useful information but for some reason still struggling to find a basic example of this.

    My page looks like this: http://imgur.com/a/0Ug0Y
    I have the url to directly add the link to open the front door but of course it opens a new tab and says ok, I would like a ajax solution so I can stay on the same page, not worried about exposing agentURL for this particular project.

    Basically need to attach this html code:
    a href="#" class="btn btn-primary" onclick="updateJSON('frontdoor', '1')" >Open a

    to this agent code:

    "server.log("Front door : " + http.agenturl() + "?led=4");"




  • Cameron,
    How familiar are you with PHP?

    With PHP and JQuery (ajax) you use PHP CURL to do POSTing to your agent. You can send the request you want (door open or close), and then the agent can report back what the REAL status is ... assuming you have some prox switches on your door. You need to know the status of your door, physically. If neither the closed switch or the open switch are active, the door would be ajar.

    Send me a private message and I'll help you work-up some ajax using PHP (and JQuery), aka bootstrap which is related. We can also discuss your physical hardware.
  • Great thanks, messaged you (I think!)
  • edited February 27
    For the sake of others, I've hacked together a basic html5 template using Bootstrap CSS and JQuery/Ajax to GET and POST data to up to 3 separate Imp Agents (personally I prefer Angular as more elegant). The index.html file should work without need for local server / other web server. Should hopefully be enough to get someone going with home automation using Imp... please don't expect perfection here... its just enough to get one started.

    https://github.com/Gerriko/imp_HttpBootstrapTemplateWithAjaxJQuery

Sign In or Register to comment.