Mobile Web App with Screenshots (Updated)

[dman]

Love the new layout – like the weather panel. Now all the buttons fit nicely on the single page of my Galaxy S3.

[Samer]

@kenbob What do you mean by same line as current status? Do you think the status should be inside the list of buttons?

@djagerif I don’t think I want to add UI options especially since the UI is constantly changing. I understand you and @kenbob prefer it the old way however I am considering the current layout a stepping stone so hopefully we can reach a better compromise rather then just adding options.

@dman Exactly why I love it!

[kenbob]

salbahra wrote:

@kenbob What do you mean by same line as current status? Do you think the status should be inside the list of buttons?

Yes. I was wondering what that would look like. But, I do get why you put it at the bottom. Either way it is a great addition.

[Samer]

I love your ideas haha! Okay so this has me thinking: I will make the current status/station on the home page become a slide down box from behind the header. This way when a program is found running, a panel animates down from the header (dark gray background similar to now). I basically have this working while still keeping everything on one page. Will share soon (working on styling a bit more and also checking stations in between the station delay time). Once I have these fixed/worked on I will push this and show some screenshots!

Update: Added a screenshot, the slide animation is pretty nice up/down. The cool thing in this update is I got the station delay passed from PHP to javascript. This allows me to set a timeout based on the station delay therefore knowing exactly when to probe the server for a new station running instead of constant HTTP request. I also got to keep everything on one page for the iPhone 5 and most Android devices.

[kenbob]

After testing the latest rev. I like it! Have you also thought of adding the countdown to the Current Status page? I think that would be cool.

Everything looks good on my iPhone 4S. I also noticed that Firefox does some weird things with the Weather and Header on my desktop. (Just an FYI) 😯

[attachment=0:37fopp9o]Capture.JPG[/attachment:37fopp9o]

Maybe you should rethink careers, you really have a knack for this. Or at least a hobby that could make some good money. 🙂

[wyone]

The new layout looks great on my Galaxy Nexus! I have looked at the current status title over and over and it has me thinking. I know dangerous right?? lol The tab is not as much status as settings with the exception of the log of the last run sprinkler and the current running sprinkler. So I was thinking, and of course just an idea I am throwing out, it would be awesome to see that log or the current running sprinkler on the front page and the other things on a different tab that is labeled more along the lines of current settings.

Far be it from me to be critical because I think it is great what you have created, so please consider this as just suggestions.

😀 😀 😀 😀

[Samer]

@wyone I am glad you brought this up! Current status page was my second page developed and hasn’t been touched since then (minus the timer for running programs). Your suggestion is a much needed one! What I can do is make the current status highlight the current stations as shown on the bottom half along with the last run and rain delay if set everything else can be a button to show current settings nested inside the current status. I will whip this up and play with it see what works best and let you know!

Thanks!

[Samer]

@kenbob Thank you! I noticed the Firefox issue actually but its on the back burner for now, haha. The issue is the min-height on the content after the status bar scrolls in. That will fix the green dot. The other thing is zoom not working on Firefox which is probably just a browser specific prefix issue I should sort out soon.

Update: I fixed the weather for now, the green icon will get fixed soon.

[wyone]

Ok.. so I guess I had a decent idea as I see your latest version has the countdown timer. lol. I had not tried it and it just started and I can see it. VERY cool… but just an idea… a different color?? like the green you use for the current status? I also cannot get the weather to load on my HP Touchpad, running android, but everything else is working.

again… thanks for your good work!

[Samer]

@wyone another great suggestion! Just changed the color to green and I like it a lot better! Thanks!

[sjarvis]

I have a recently installed OSPi system. I can run Dan interval program (on port 8080) and control my sprinklers just fine from that. I have the latest version installed.

I have install the web app, but I can do nothing more than login and view pages. I can’t see my stations. On the Current Status page, it reports the Device Time as Thu, 01 Jan 1970 00:00:00 (running date on my RPi returns Sun Jul 7 23:49:48 CDT 2013). It returns no data for Firmware version, and System Enabled says “No.”

I had no crontab installed, so I did that manually.

I tried to run watcher.php at the command line and got a series of PHP Error Notices (mostly about undefinded offsets and indexes), with 1 Warning: “PHP Warning: file_get_contents(http://10.0.1.24/sn0): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found” which seems to be an issue.

Any advice for getting this running?

Thanks,

Steven

[PabloS]

Odd. I installed the same last night and have the same problems you describe. Makes me think we may have a common solution. I’m using a different port because port 8080 was already assigned to a different computer…

I bet the solution is something obvious and easy!

[Samer]

I will take a look at this tonight. It’s possible I broke the installer recently and haven’t tested a new install situation in a while. Once I do some testing ill hopefully be able to put a finger on the problem.

Thanks!

Update: The 404 error typically means the IP or requested URL is incorrect. Is 10.0.1.24 correct? Try navigating to http://10.0.1.24/sn0 in your browser tell me if you get a reply.

[PabloS]

When I type the IP address port and “sn0”, e.g., 192.168.1.12:8086/sn0, I get one line displayed. It has 32 zeros, “00000000000000000000000000000000”.

I am using Ray’s OpenSprinkler Pi and I do have three expansion modules for 32 zones. I’m currently using 27 of them. Do these 32 zeros indicate something to you?

[Samer]

Yes, means everything is working properly on your OSPi the question now becomes: why can’t PHP access the same URL?

[PabloS]

I’m showing my ignorance, but I have no clue as to what PHP is. I performed the steps in the README file and installed apache, PHP, et al.

Is there something I can do on the RPi to provide you some data for analysis?

BTW: I started a station running and saw a ‘1’ among the 32 zeros that seemed to reflect the zone position I turned on… I’m assuming the ‘1’ means a zone is running.

[Samer]

I just installed a fresh copy of OSPi from Dan’s repo and a fresh copy of my webapp from my repo and it ran no problems. I am now starting to think you both ran into a network issue at the same time so let’s try to treat them differently, for now.

@PabloS Is your OSPi hosting the interval program and the mobile web app?
If not, is the server in the same house or network as the RPi?
If yes, are you using 127.0.0.1 for the IP (try this if your not) or it’s LAN IP?

It seems your setup of the interval program went well, and yes the sn0 is an API call to get the station status for all stations. The problem is your web server (the language my program uses is PHP thats executed by the web server) communicating with the RPi. The most common problem is the server and RPi aren’t on the same network. This means you have to open ports and ensure your using the device’s WAN IP’s.

[Samer]

@sjarvis The problem is you have the wrong port setup in my mobile app. I suggest deleting config.php and starting over but this time when putting in the IP add :8080 so it looks like this:

10.0.1.24:8080

@sjarvis wrote:

I can run Dan interval program (on port 8080) and control my sprinklers just fine from that.
…file_get_contents(http://10.0.1.24/sn0): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found

The last part shows which IP:Port my mobile app tried to use. It doesn’t show the :8080 which your saying is the port used by interval application.

@PabloS this might be your issue as well. In my mobile app your IP should be followed by :8086.

192.168.1.12:8086

Edit: You can also edit your config.php and add the :8080/:8086 manually after the IP.

[PabloS]

Aha! With nothing to lose (SD card backed-up) I decided to start over on installing the /var/www/sprinklers directory.

I typed into the RPi ssh remote terminal:
sudo /bin/rm -rf /var/www/sprinklers
sudo git clone https://github.com/salbahra/OpenSprinkler-Controller.git /var/www/sprinklers
cd /var/www/sprinklers
sudo chmod 777 *

In my iPhone browser I typed: 192.168.1.12/sprinklers

In the New Install screen I noticed the text, “You can also specify a port by using IP:Port”, above the “Open Sprinkler IP” field. So, I typed: 192.168.1.12:8086.

And it seem to have grabbed all the info and seems to be working! NOW the fun begins! Looking forward to this user interface. AMAZING!

[Samer]

Awesome! Glad it was a simple fix 😀

Thanks!

[PabloS]

YOU ARE MOST WELCOME!

It is simply amazing what you have created and what you and your associates in this forum have developed and refined. KEEP UP THE GOOD WORK.

[Samer]

Very glad it’s working! You have exactly the right idea about using your outside IP (which works fine inside since your router know’s its IP and never let your requests leave the house).

By the way, as residency picks up my pace will slow down here. I still want to work out kinks and improve on others. With that said I want to list in priority what I plan to work on.

1) Current status page (needs to focus on status and not random variables)
2) Add active timers in status page
3) Fix firefox bug with green light image being dropped below the text box (caused by a scroll bar appearing because the content has a min-height in place by JQM)
4) Improve user management (add, drop, edit)

If there is anything I am missing please remind me.

Thanks!

[sjarvis]

@salbahra wrote:

@sjarvis The problem is you have the wrong port setup in my mobile app. I suggest deleting config.php and starting over but this time when putting in the IP add :8080 so it looks like this:

10.0.1.24:8080

@sjarvis wrote:

I can run Dan interval program (on port 8080) and control my sprinklers just fine from that.
…file_get_contents(http://10.0.1.24/sn0): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found

The last part shows which IP:Port my mobile app tried to use. It doesn’t show the :8080 which your saying is the port used by interval application.

That did it! Thanks! All appears to be working now.

I just had it in my mind that the interval program and your mobile interface needed to be running on different ports. Not sure why I formed that assumption.

Thanks again!

Steven

[Samer]

No problem and just to clarify the interval program and the web app DO run on different ports. In your example, the web app is on port 80 and the interval application is on port 8080.

Glad it’s working now!

[sjarvis]

@salbahra wrote:

No problem and just to clarify the interval program and the web app DO run on different ports. In your example, the web app is on port 80 and the interval application is on port 8080.

Sorry. I misspoke.

During setup, it looks like you’re entering the IP and port for the mobile app not the interval app, so it looks like you’re putting them on the same IP. Maybe the language in the install screen could clarify that. Or, maybe it’s just me. 🙂

Thanks again!

[Author]

Posts