RA WebApp

[lnevo]

Hey all,

So I've been working for a while to create my own portal view on my web server for my RA. I actually did this because I wanted to combine a few shortcuts for sites and my webcam (before Roberto added that to the RA portal...) and use some cooler gauges.

Anyway, I finally got the Ajax code working to control my relays and stuff, but I also use this as a means to organize, view and track all the memory variables I've setup for my functions in my INO. I still need to convert the memory updates to use the Ajax functions, and make it look better on the iphone.

So, without further-ado, here's the link for you to see. This is a read-only version (I hope) so you can click whatever you like.

http://www.easte.net/RA/demo

and if anyone wants the html code and wants to help make it cooler looking, I'm up for some help I am far from an HTML guru.

http://www.easte.net/RA/demo/ra_portal_demo.tar.gz

[binder]

pretty sweet.

Sent from my Nexus 7

[rimai]

Nice

[Appleseed]

WoW

Im so jealous!

[lnevo]

WoW

Im so jealous!

The source is linked above. Feel free to use it for your own RA. Do you have a webserver or a Mac

[Appleseed]

I already downloaded it and have a linux server running apache that I have copied the files to but am not sure where to start as I am not a web/php person :/

I saw a url in the index.php (http://reefangelwifi:2000/) file and changed it to my ra's ip address but was not sure what needs to be changed etc.

[lnevo]

I guess I should add some comments. Yeah, once you change the address from reefangelwifi to whatever you use for your reefangel that should get things working.

You will also need to modify the links that point to http://www.easte.net/~lnevo/data/XXXX.txt to point to your live version. ie (r99.txt to reefangelwifi:2000/r99) I setup files that cache the data every minute so I wasn't hammering my controller when debugging, plus it's quicker for me that way...

That should get you most of the generic stuff working. I'm not an http guy either, my brother helped me with a lot of the php, javascript, ajax and bootstrap.

[jjdezek]

So is this customizing the RA website portal page?

[lnevo]

No. It's completely independent. It's just some javascript/php/ajax stuff that got thrown together to make my own page. Figured someone could use some example code to do something similar. I did most of this to start giving me a front end for all the custom memory locations I was using that were not part of the portal.

[lnevo]

So I have all commands now executing through ajax which allows feedback for all updates. I also added customized screens for the phones. Thanks to my brother (my web guru), I now have the tags included to bookmark this to your home screen and it acts like an app. I have all the relays updating, I have to work on the calls to have the other live elements (temp, ph, pump speeds, etc.) get refreshed. I'm also going to create a tab for all the standard memory locations so in theory you would only need to go on the portal to setup your labels. At some point I'll get around to releasing this new version

In lamen's terms, if you have the ability to run a webserver and code code some html, you can have your own customized iphone app / web portal for your RA. That means you can order any progress bars, relays, etc with just a bit of html skill.

It could also be used as a template for a rasberry pi implementation if anyone were to work on that.

It's not the neatest, greatest html code, but hey it works.

[binder]

is it going to have the ability to return data from it like the portal does? i ask because i can implement the ability to add in your own "Lee's custom portal" (or whatever you want to call the general name of it) option for communication with my android app. then you could choose to receive data from it.


Sent from my iPad

[lnevo]

No, it has no database back-end, it's strictly a front end. It currently get's the label's from the portal, it uses cached files that I use a cron job for the initial loading and then it gets live data from either the controller directly or from the portal (I'm currently using the proxy.aspx on the portal to communicate with my controller, since port 2000 is blocked from my office)

I know I labeled the thread custom portal, but it's more of a portal front-end, so I'd consider it a client rather than a server. However, it wouldn't be that difficult to do. I believe I do have an r99.php file in the (only because Mobile Safari / Chrome do not parse the r99 directly) so in theory it could be a proxy from the Android app..

However the overall the goal is to be a standalone "go-to" version that you can use from your android, iOS, IE, Safar, Mozilla, whatever browser and have a consistent interface.

[binder]

ok cool. just curious. thanks for the info about it.

Sent from my Galaxy Nexus

[Sacohen]

Very Cool.
I like the gauges

[lnevo]

Thats my next problem...how to get the gauges to update...

[Sacohen]

Yeah. That's a problem.
there cool and all, but if they don't update then what's the point.
Maybe Roberto can point you in the right direction, obviously he got it working on the main portal

[lnevo]

No they are capable...i just need to figure out how. Theres plenty of sample code for those gaugrs...I just need to get the right details...

[lnevo]

Thats one thing nice about the phone specific ones..was easy to update a progress bar

[lnevo]

Woohoo. Got the cache manifest working so now the page loads just as fast as the native app on the iphone...

If I can just get those gauges to refresh, it will be feature complete

I promise to get a new version out there soon, but for now it takes a bit of cleanup to package, otherwise everyone's playing with my tank

[lnevo]

So seems I have a bit more work to do. Now too much is being cached since I'm getting a lot of values in php. I need to convert all the memory stuff I'm doing to use JavaScript so I can populate it with an Ajax call. Anyway, definitely getting closer. I was able to get full screen on iPhone 5, didn't even notice it was boxed in. So much more real estate ow anyway, my biggest complaint was load time which has been solved. Getting closer.

[lnevo]

I got all the content issues resolved now and I've been able to put the URLs into a config file.

I still have to work out the gauges issue for refreshing and I have a bit of cleanup. I also want to add a tab for the standard memory stuff for people that don't have all my convoluted custom memory locations the new version is coming and hopefully useful for others...

I would say confidently that if you have a web server that you can use (or a Mac then you can effectively replace the iPhone app with this. And you'll be able to customize your GUI with just a bit of HTML code. Since its HTML5 it should work great on Android and desktops as well

For anyone thinking of the PI and a web interface to sit on it this would be a great drop in portal.

[lnevo]

Heres some teaser screenshots on the iphone.




Sorry for the dark webcam images...it's way past my bedtime

[lnevo]

Daytime shot looks much better

[rimai]

That looks awesome!!!
What if we had an optional feature to output json data instead of XML??
Would you be able to make it work too?
The advantage of json is that it is cross domain friendly and doesn't need any proxy, which would give this portal the ability to be hosted in any server, instead of a private one
I would be able to host on the reefangel server for everyone to use

[lnevo]

For r99 i'm converting to a json already. You'll have to forgive me, i just look like the web developer here i'm just the persistent guy trying to piece together the tidbits i make my brother show me...

I love the idea of you hosting it, but the big driver was being able to jump in and customize it. Thats why I thought more alone the lines of the PI implementation, but I'm open to whatever used we want to explore. The fun of open source of course.

[rimai]

I just can't see many having their own webserver to play around with

[binder]

I just can't see many having their own webserver to play around with

The only way this would happen for most people would be if we were to create a custom option / installable package to be placed onto a PI or something like that.

[lnevo]

If you have a Mac its as easy as turning on web sharing. Drop the files in your Sites directory. For Windows I'm sure you could find an easily installed apache or lamp installation. Opening port 80 isn't any harder than opening 2000. But yes this is the challenge of it being an html based option. I think for the mass of users the PI option would be ideal or if we can adapt it and have roberto host it...let's just see how it evolves

[lnevo]

OK, the new version is posted. There is a file config.php where you can set your URL paths. It will use mine as a starting point if you install it which is fine. However if you use the live demo inside your network it will control your RA.... since the default URL is pointed at http://reefangelwifi:2000 so try it out

I added the css / js to add the popup button to add to your iOS home screen. That's where this shines. The caching should work so after you relaunch it *should* be fast. If you install this on your own web server make sure to look at the appcache file as it's very finicky.

I'm curious if anyone who installs it is able to use it Please keep me posted.

Live Demo:
http://www.easte.net/RA/demo

Source:
http://www.easte.net/RA/demo/ra_portal_demo.tar.gz

[Sacohen]

It looks great.
I may try hosting it on my MAC, but I don't usually keep that on all the time.
I only use it when I have some freelance video editing work to do.