Control Vera from a web page (not what you think)

Developer's Corner General Dev Discussions
1

Simple thought here. Tried search engine with no love. Lots of info on sending html commands to vera to control stuff. Works great.

What I am trying to do is put up a web page that is pretty and simple to control scenes from a tablet. When I program a button on the web page with a URL it executes the URL great. The problem is it then goes to a web page with status info or sometimes an error.

How do I call a command through a web link or html without leaving the web page that I am on?

Should be simple but I am stumped.

Thanks,
Mike

2

this is accomplished with Ajax calls to Vera from JavaScript in your Web Page.

Here your HTML and associated JavaScript defines a new User Interface.

3

Thanks for replying. Any chance you could give me an example or more clarification?

4

Or you could, perhaps, just use an tag with a hidden target frame on the same page?

5

Look for the word “Ajax” in this code sample (which is from the Combination Switch plugin). Ignore the stuff around it; it’s specific to the plugin.

You need to put such an Ajax request into a function, and then on your or set an onclick attribute to call the function. Pressing the button calls the function, which does the Ajax request, and when it completes later it runs the onSuccess block to update your UI through the web page’s DOM.

This will only work if the web page is served from the Vera. Look up “cross-site scripting” for why this limitation exists.
6

I still think the easiest solution - no Ajax, no JavaScript, just pure HTML - is to target the returned output of the link to a hidden iframe.

To be more explicit, and at its very simplest, the following code will present a link called TOGGLE which toggles a light switch, but doesn’t lose the page:

<a href="http://172.16.42.10:3480/data_request?id=action&output_format=xml&DeviceNum=359&serviceId=urn:micasaverde-com:serviceId:HaDevice1&action=ToggleState" target="statusReturn">TOGGLE</a>

<iframe hidden name="statusReturn"></iframe>

Of course, to be a bit more sophisticated, the link can be styled in any way you like (shapes and colours and mouseover, …)
As a plus, this code will work with the page served from anywhere on your LAN, not just from the Vera in question.
It’s what I use on old iPods and iPads to provide a really simple interface.

7

Thanks for all of the great suggestions. I found this code: I changed ajax_info.txt to my http request and it works. Now I need to figure out how to make better looking buttons and retreive the response.

Question: how do you trigger the pure html approach? Ideally my end goal would be to have a picture (.jpg) be my trigger (button). Then I can make a pretty web page to front end the requests.

Fun stuff!

[code]

Let AJAX change this text

Change Content [/code]
8

Just add an image to the link…

<a href="http://172.16.42.10:3480/data_request?id=action&output_format=xml&DeviceNum=359&serviceId=urn:micasaverde-com:serviceId:HaDevice1&action=ToggleState" target="statusReturn" title="popup help text">
     <img alt="TOGGLE" src="http://whereverYourimageFileResides">
     </a>

<iframe hidden name="statusReturn"></iframe>

You might also want to turn off text decoration (underlining) of the link using CSS.

9

Thank you very much. I appreciate it.

Mike

10

I’m liking the js method. How do I pass a scene number to the script from the html call? In this example I would like to make 25 a variable that I can pass to the script. I would then like to make the script a “.js” file and call it from any page I want and just pass the scene number. I have tried putting it into the () and then putting a variable name in the () in the script name and replacing the 25 with the variable name outside the quotes but that doesn’t seem to work. What am I missing? This should be simple shouldn’t it?

    <img alt="" src="images/on_button.jpg" 
        style="height: 80px; width: 80px" id="imgClickAndChange" onclick="liteon()"  />
11

Figured it out. I did put the variable in the parenthsis and used the + sign to add it to the html outside the quotes. Works perfectly.

Thanks again for the help.