HTML dashboard based on Vera JSON file: retrieve with javascript or PHP?

Developer's Corner General Dev Discussions
1

Hi,

I am an intermediate DIY user, so please bear with me ;D

I am trying to develop a simple HTML dashboard and control page for my vera. One that I could display on in-wall tablets in my home.
I know, there are apps out there, but none is perfect…actually, some are very good, but they aren’t compatible with both iOS and Android tablets.

I am doing things in a very “primitive manner”: pure text editing (TextWrangler Mac), and integrated Mac OS server function.
Works all good (see attachment, for a very primitive test page):
I have my webpage, I can control devices (javascript HTTP get requests to my Vera)…

Now I am trying to get the status of the devices.
I have no problem getting the “sdata” JSON status file (Luup Requests - MiOS), so far, i get it ;D

PROBLEM:
On a Mac (safari, firefox)… I can parse the JSON and display the status of the devices on my web page.
BUT

  • on mobile devices (iPhone, iPad and even the experimental browser on an Amazon Kindle), the JSON refuses to load from the Vera
  • if I manually load the .json file in the root of my sever, and point my HTML page to it, then it works…on ALL devices above + desktops

My conclusion is, after much online research, that mobile browsers refuse to interrogate external servers via javascript. Obviously my Vera and my test server have different local IPs, so iDevices and Kindles refuse to retrieve the Json for security reasons.

Do any of you experts have a tip?
One option would be: instead of dynamically reading the JSON with Javascript on the client side, I could maybe use PHP to retrieve the JSON file from the Vera, save it on my home server, and then all devices will accept reading it (JSON file on same server as web page).
But I played with PHP as a kid…I must admit I was keen on keeping things pure HTML and javascript 8)

Any tip is welcome, many thanks!

2

I must add one thing: the reason I am using the JSON file is because it seems less resource intensive to me.

I could interrogate each device individually with HTTP get requests, this would work from any device. But that would mean dozens of simultaneous requests to my Vera when the web page loads.
I am not an expert and I may be wrong, but using the JSON file once and for all devices at the same time seems the “cleanest” solution to me…

3

Hello,
I’m the author of MyVera, a web interface which run on ios and android (see my post).
You can use the json of the Vera with Ajax but you will have to use php (because of cross domain restrictions).

Envoy? de mon iPad ? l’aide de Tapatalk HD

4

Hi sb_domo, your project looks promising, I’ll be sure to get a look.

I was hoping I could avoid starting from scratch with anything else than Javascript…I am not a professional coder and this is a hobby project.
But if I have time I’ll be sure to check out those options. Your post my Vera – une interface Ipad pour la Vera – partie 1 | SB domotique is already very instructive!

Thanks,

5

Replying to myself:
Thanks again sb_domo, after your reply, I overcame my fear with PHP. Took only an hour to find the answers online.

It’s actually extremely simple.
A 3 line-PHP script saves the JSON file on the local server, when loading the page.
After that, I can use regular javascript to read/parse the JSON. Works fine on iDevices, and even on my Kindle ;D

Now off to finding fancy graphics for my interface 8) , though it won’t be as fancy as your MyVera!

Best,
Pierre

6

Hi pierre,

I have been trying to do the same. I’ve built a metro looking UI. It’s able to control the lights but not able to get the status of the devices. If I key in the request url in the browser I’m able to see the json response but I’m not able to get a json response using JavaScript. All my HTML and JavaScript files are stored and run from my Mac.

From the discussion here am I right to say its a cross domain problem and can be solved by running them as php pages?

Do you mind sharing snippets of your JavaScript codes here to show how you retrieve the status of the devices?

7

Hi Limkopi,

It seems it’s a cross domain issue as well, there is no way you can do that with JS alone. I’m happy to share what I did, but before, let me remind that I am a hobby coder. I’ve never opened a JS/PHP manual, and what I did is basically the dirty result of hundreds of google searches ;D

Basically, my browser-side JS calls the a PHP (server side) function. The server sends the PHP request to Vera, gets the JSON data, and forwards it back to the JS of the client/browser.
On a side note (but you probably know that), you will need your MAC server to be able to run PHP. I opted for ‘MAMP’, which works better than the integrated Mac OS server for testing purposes. It’s installed in less than a minute.

Here is my PHP side request:

$url = 'http://' . $_POST['veraip'] . ':3480/data_request?id=sdata&output_format=json';
$jsondata = file_get_contents($url);
return $jsondata;

Now on the client/Javascript side, I am using a jquery (AJAX) request as it was advised. (You’ll notice I am passing the vera IP address from JS to the PHP file:

$.post('vera/vera.php',data = {veraip:thisveraip},function(data,status){createObjectsFromJson(data);});

Now again, anyone with basic JS knowledge will know that, but I didn’t ::slight_smile: , so I am writing this just in case:

  • jQuery is a simple JS ‘plugin’ that can easily be downloaded.
  • This ‘post’ request, if successful (PHP returns the JSON string), calls another function. This is where the JSON string is parsed, then transformed into a standard JS object. Here is an excerpt of my ‘createObjectsFromJson’ function:
jsonObjects = JSON && JSON.parse(data) || $.parseJSON(data);

After that, you have full access to all devices details in JS. You’ll need to reverse engineer the JSON data to understand it, but basically:

  • Each device is accessible as a JS object: jsonObjects.devices[i]
  • For example to get the name of a device: jsonObjects.devices[i].name

I can’t repeat enough that this is dirty, and I barely know what I am doing. But it works ;D

1 Like
8

Hi Pierre,

Thanks for the quick and detailed response. I’ve been trying all ways in JavaScript for days. At least now I have a new direction to explore.

Don’t worry, I’m also someone who pick up codes from everywhere without learning the best way to do something. I also tried Siri Proxy with raspberry Pi to control Vera … Managed to get to work with messy ruby codes without really knowing ruby. Haha…

But it was great help!

1 Like
9

Sorry if it is off topic. Is there anyway to have a ‘list’ of devices in the dashboard, instead of a rectangle for each device.

Thanks

10

Doesn’t the Overview tab on the dashboard do just that?

11

It does, to some extent. Except that I’d like to be able to:
1- Control the module from the list without opening another dialog box
2- See the last time module’s status has changed (maybe few more info)
3-Have a list rather than categorized in a box

12

Seems like you are asking for too much ;D

There might be an app out there (if you’re on Android), that provides that. Otherwise if you’re into development and DIYing, you’ll have to end up building your own front end with a server, as I am trying too :cry:

13

Hello. What Android app are you referring to? I searched but found nothing. I have a triplex and I need an application (or a web “dashboard”) that will allow my clients / tenants to only see / control certain zwave devices, only the devices in their apartment that i allow them to see, basically a subset of devices over the whole thing … and so far i haven’t found anything to help me do that other than google-home (but now google-home and vera don’t talk anymore :unamused:) so I’m VERY interested to see if you are successful with that (even though I don’t know anything about HTML programming, I can definitely try to learn (and copy some code :wink:) if that can meet my needs