RA WebApp

Related to the Portal
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

RA WebApp

Post by 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
Posts: 2871
Joined: Fri Mar 18, 2011 6:20 pm
Location: Illinois
Contact:

Re: Custom Portal

Post by binder »

pretty sweet.

Sent from my Nexus 7
rimai
Posts: 12881
Joined: Fri Mar 18, 2011 6:47 pm

Re: Custom Portal

Post by rimai »

Nice :)
Roberto.
Appleseed
Posts: 86
Joined: Sat Jun 30, 2012 9:21 am

Re: Custom Portal

Post by Appleseed »

WoW

Im so jealous!
:mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen:
Image
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by lnevo »

Appleseed wrote:WoW

Im so jealous!
:mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen:
The source is linked above. Feel free to use it for your own RA. Do you have a webserver or a Mac :)
Appleseed
Posts: 86
Joined: Sat Jun 30, 2012 9:21 am

Re: Custom Portal

Post by Appleseed »

I already downloaded it :oops: 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.
Image
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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
Posts: 329
Joined: Fri May 17, 2013 1:35 pm

Re: Custom Portal

Post by jjdezek »

So is this customizing the RA website portal page?
Image
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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.
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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
Posts: 2871
Joined: Fri Mar 18, 2011 6:20 pm
Location: Illinois
Contact:

Re: Custom Portal

Post by 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
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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
Posts: 2871
Joined: Fri Mar 18, 2011 6:20 pm
Location: Illinois
Contact:

Re: Custom Portal

Post by binder »

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

Sent from my Galaxy Nexus
User avatar
Sacohen
Posts: 1833
Joined: Sun Apr 21, 2013 6:25 am
Location: Davie, FL

Re: Custom Portal

Post by Sacohen »

Very Cool.
I like the gauges :)
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by lnevo »

Thats my next problem...how to get the gauges to update...
User avatar
Sacohen
Posts: 1833
Joined: Sun Apr 21, 2013 6:25 am
Location: Davie, FL

Re: Custom Portal

Post by 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
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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...
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by lnevo »

Thats one thing nice about the phone specific ones..was easy to update a progress bar :)
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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 :)
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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.
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: Custom Portal

Post by 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.
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: RA WebApp

Post by lnevo »

Heres some teaser screenshots on the iphone.

Image
Image

Sorry for the dark webcam images...it's way past my bedtime ;)
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: RA WebApp

Post by lnevo »

Daytime shot looks much better :)

Image
rimai
Posts: 12881
Joined: Fri Mar 18, 2011 6:47 pm

Re: RA WebApp

Post by 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 :)
Roberto.
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: RA WebApp

Post by 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
Posts: 12881
Joined: Fri Mar 18, 2011 6:47 pm

Re: RA WebApp

Post by rimai »

I just can't see many having their own webserver to play around with :(
Roberto.
binder
Posts: 2871
Joined: Fri Mar 18, 2011 6:20 pm
Location: Illinois
Contact:

Re: RA WebApp

Post by binder »

rimai wrote: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.
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: RA WebApp

Post by 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 :)
User avatar
lnevo
Posts: 5430
Joined: Fri Jul 20, 2012 9:42 am

Re: RA WebApp

Post by 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
User avatar
Sacohen
Posts: 1833
Joined: Sun Apr 21, 2013 6:25 am
Location: Davie, FL

Re: RA WebApp

Post by 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.
Post Reply