Mobile Web App with Screenshots (Updated)

[Samer]

Hello everyone!

I received my OpenSprinkler few days ago and developed a web app to control it. The app is hosted on a server in the same LAN as the OpenSprinkler and is tailored for mobile devices (anything supported by jQuery Mobile). The app is complete and links are available below. I also posted some screenshots below and on my blog which is also available below.

The app has an authentication system and can be added to the homescreen on iOS devices (iPhone, iPad, and iPod touch) for a full screen app experience. The app has been tested in iOS, Chrome, and Safari.

Technical details are as follows: the app is written in PHP (backend) and HTML5/Javascript/CSS (frontend). The frontend leverages jQuery and jQuery Mobile for design elements. The backend is personally hosted in Linux but can be in any environment that supports PHP (no special extensions or SQL database needed). While the web server needs to be able to speak to OpenSprinkler the client won’t. This means your server can be forwarded over the Internet making the app accessible from anywhere while keeping OpenSprinkler relatively secure on the LAN only.

To get started simply drop the files in your server’s web directory and fire up any modern browser or mobile device to get started!

This works for both OpenSprinkler users and OpenSprinkler with Raspberry Pi (The RPi must be using the interval program: https://github.com/rayshobby/opensprinkler/tree/master/OpenSprinkler%20Pi/software/demos/interval_program).

Web applications can be pinned to the home screen on iOS and Android. Once added to the home screen, the web application behaves much like a native application with it’s own icon. On iOS, you also get a splash screen and hidden Safari UI. Instructions can be found here: https://www.mavenlink.com/community/blogs/785-add-to-home-screen-for-iphone-ios-and-android

Please post any problems/bugs and I will try to hammer them out. The app has currently only been tested on my setup. With all of that said, Enjoy!

My Blog post (w/more screenshots): http://albahra.com/journal/2013/06/opensprinkler-with-custom-web-app
Ray’s Blog posts: http://rayshobby.net/?p=6749 http://rayshobby.net/?p=6409
Github: https://github.com/salbahra/OpenSprinkler-Controller
Zip File: https://github.com/salbahra/OpenSprinkler-Controller/archive/master.zip

Change log can be viewed here: https://github.com/salbahra/OpenSprinkler-Controller/commits/master

If you enjoy this web app please donate to [email protected] using PayPal. You can also follow this link https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&item_name=OpenSprinkler%20Controller&page_style=PayPal&no_shipping=1&currency_code=USD&lc=US&bn=OS_Donations&charset=UTF%2d8

Screenshots:

Update: Ray is also hosting a copy of the web app available at http://rayshobby.net/apps/sprinklers/. This copy is slightly modified to save the settings in the browser’s local storage and saves nothing on the server. As a result, logging and automatic rain delay is not available in this version. Since it is hosted outside of the LAN a port needs to be opened on the home router to allow communication between the OpenSprinkler and Ray’s server. When you first open the hosted web app you will be asked to enter your OpenSprinkler IP[:Port] and password. After that, the app functions in a very similar fashion.

Update 2: Please note this post is no longer updated. Please check Github for the latest screenshots and program information.

[djagerif]

I Like !!!

Any chance of a future Android version?

[Samer]

Already works on Android! Great thing about jQuery Mobile is the support. It is supported on virtually every mobile device and degrades gracefully on older devices.

I went ahead and tested the web app in Android 4.2.2 (via emulator) and everything works great! The only bug I found specifically on Android is the time input isn’t as fancy as iOS but the keyboard input works fine.

Thanks for the interest!

[Ray]

@salbahra: awesome. I like your post and pictures. Very neat. And the app interface is very clean. As soon as you have a version that you are satisfied with, let me know and I’d be happy to blog about it. Thanks!

[Samer]

At this point I am comfortable with you trying the app out, Ray. Let me know if you have any problems installing or configuring it. I was not 100% sure the best way to grab the variables from the OpenSprinkler to ensure compatibility down the road with future updates. If you have any suggestions please let me know. I have firmware 2.0.0 but I suspect based on the HTTP GET API documentation for 1.8.3 that it should work perfectly well on both firmwares.

[Samer]

Just posted another update. This one brings full OpenSprinkler setting support. I explicitly omitted two settings however to prevent a lock out (HTTP port and password change).

At this point I believe it is fair to say the web app is feature complete and, if time allows, I will begin refactoring the code to optimize and condense it. I have been playing with it, changing settings, adding programs and have not experienced any problems, so far.

As usual, screenshots have been updated on the blog and code updated on Github!

[Samer]

Ray, been working on the settings input and changed most of the input forms to a non-text input to prevent errors and make it easier (screenshots updated). One thing I noticed however is the master station can only be on the main board and not the extension board. I personally do not use a master station however for my app’s purposes should I limit the master station index to the first 8 zones?

Thanks!

[Ray]

Yes, it’s true that the master station can only be one of the first 8 stations. so please add this constraint to your app too. Thanks.

I am very impressed by the interface you designed. Now, I haven’t tried it yet, but I am a bit confused how to get it running. From your instructions, I am guessing that this is a front end that runs on a local server which talks to OpenSprinkler and outputs a mobile webpage, is this correct? I would like to give it a try and blog about it. Thanks!

[Samer]

That is exactly right. I suppose I should try to improve the install process next!

Updated: See below for install instructions

[Samer]

I added an installer to streamline the process.

If you already have a web server this can be deployed in two easy steps:

mkdir -m 777 /var/www/sprinklers



git clone https://github.com/salbahra/OpenSprinkler-Controller.git /var/www/sprinklers

If you do not have git installed you can simply grab the zip and extract it. Download here: https://github.com/salbahra/OpenSprinkler-Controller/archive/master.zip

The permissions are to allow the installer to make new files inside the directory (config and log files). Your welcome to chmod 644 after the install process.

All you have to do is put the files in your web server’s directory and open the website! The default configuration options are already filled out at the bare minimum you just need to put a user name, password, and your OpenSprinkler IP and password.

Once the install is done a popup will come up notifying you of an error or success. There isn’t much info if it fails at this point but most likely a permission error somewhere. Also, the script automatically adds the crontab to log valves for you, if it can.

Some screenshots of the install process:

Enjoy!

[ubestbsteppin]

Very cool. Is it possible to run this from an external web server? If so, how?

[Samer]

*** UDATE ***

If your using an external server, you might be better of just using the hosted web app available here: http://rayshobby.net/apps/sprinklers

*** UPDATE ***

Absolutely, you would need to forward the HTTP port on the OpenSprinkler so that it is accessible by the external server.

For example, if your OpenSprinkler is on your home LAN at IP 192.168.1.30 and using port 80. Then you would goto your router’s configuration and forward port 80 for 192.168.1.30. After that you would use your home’s WAN IP for the OpenSprinkler on the external server. The WAN IP can be found by visiting http://wimi.com inside your home.

A few recommendations for this setup:

1) Ensure your OpenSprinkler has a static IP using the menu settings on the device OR by setting a static DHCP reservation through your router against the MAC address

2) You should use a secure password on your OpenSprinkler since it is now accessible outside of your home

3) You should double check the ‘Ignore Password’ option is unchecked

4) If it is a shared server, ensure permissions are properly set to prevent unwanted viewing of the config.php.

If you need any assistance feel free to ask, hope this helps!

[ubestbsteppin]

Thanks. Do you have an example config file? For some reason the submit button on the install.php page won’t work. I figure if I manually upload a config file it won’t force me over to the install.php from index.php.

[Samer]

Sure, I just posted an example configuration file for this situation.

The file is available here: https://github.com/salbahra/OpenSprinkler-Controller/blob/master/config-example.php

[Samer]

I would like to troubleshoot why the installer is failing though. If you can give me any errors you might encounter inside error.log from /var/logs/apache2/ I would appreciate it.

After hitting submit, do you see any popup? If so, what is the general gist of the message? “Settings NOT saved”?

If you are getting a quick popup or no popup I suspect it might be related to my forced SSL setting. When index.php loads it checks if the base url is an https or http. If it is http it forces over to https and if your web server is not configured for SSL that might be the error. I figured it would be safer to send authentication information over SSL and I just realized I do not currently force the installer to use SSL.

Thank you!

[Samer]

I am currently in the process of developing a program preview option which is almost complete at this point. I am able to update the data live using a date picker and show the proper data. My only problem at this point is how to best visualize this information and would love any feedback. I want to avoid a table view since that is hard to read on an iPhone and I also want to avoid the default OpenSprinkler program preview because it would be crammed on a small screen.

My thoughts have been displaying an up/down scrolling view similar to calendar view on the iPhone for a specific day. I would just plot the days on the view similar to calendar events for the day. I think this would work fine but would love feedback from others before I develop the UI for it.

Update: I found this http://almende.github.io/chap-links-library/timeline.html which might be a very nice way to implement the preview. Specifically http://almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html is what I think would look very well. I will begin incorporating this timeline and push it as soon as it works well.

[ubestbsteppin]

I don’t currently have a access to the apache logs. I wasn’t receiving any error when clicking submit. I do see that I am being forced to use SSL. Unfortunately I don’t have SSL setup on my server.

[Samer]

I just updated the code to allow non-SSL connection. The code has been pushed to Github and the example configuration has been updated in case the installer is still giving problems.

The installer will give a checkbox option to force SSL now.

Hope this helps!

Edit: I actually tested the updated installer and fixed some bugs. The new option should work properly at this point. Please note without SSL the username/password will be sent plain text to the server.

[Vaughano]

Great effort Salbhara!

I downloaded and tried this out before your most recent changes, and struck the issue with SSL not being configured in my apache2 server. I shall get the latest and have another go.

Thanks again.
Vaughano

[Samer]

Thank you!

Keep me posted on your results with the new update!

[slobrewer]

Salbhara,
On your blog post (http://albahra.com/journal/2013/06/opensprinkler-with-custom-web-app) you mention that you think this should work fine with the Raspberry Pi version of OpenSprinkler as long at the Interval program is installed. I have the Interval program installed but your web app isn’t able to reach it. I dove a little into the code to see if there was anything obvious and it looks like your code is relying on non-user-interface features that may not have been ported to the OSPi version of Interval. For example, when you go to get the station names you’re looking for a pn.js file in Interval:

$stations = file_get_contents(“http://”.$os_ip.”/pn.js”);

It doesn’t appear that exists. Have you looked at this and have it working with a Raspberry Pi OpenSprinkler or were you just hoping all of that got ported?

Thanks for your work so far on the much snazzier interface.

Dave.

[Samer]

Fantastic find! You are absolutely correct, I made an assumption that it would work and unfortunately have no means to try it (lack the hardware).

I appreciate you digging into the code and finding the problem!

Edit: I looked through the interval program for the RPi and you are absolutely correct, there is no pn.js. I updated the code to use /vs which is available in the RPi along with the normal OS. I am sure other problems exist and would appreciate more feedback. Thank you!

[slobrewer]

I already tried hitting snames.txt and data/snames.txt paths on the web server without luck. The file itself on the Raspberry Pi’s file system does have a list of station names (e.g [“S00”, “S01”, “S02”, “S03”, “S04”, “S05”, “S06”, “S07”]) I haven’t looked closely enough at the ported code to see how those are actually exposed. I think the Python code is registering some handlers for the various pages. If so that may be quick to deal with by either adjusting the handlers or augmenting with additional handlers to expose the data.

Do you have a list of the assumptions you made about the Interval web app interface or is that spread through the code?

Dave.

[Samer]

I updated my previous post but noticed I did so right after your reply. Thank you for the rapid reply and the solid attempt. I ended up solving it a different way by using the view stations page rather then a specific call to the name data. I hope this resolves it and would love your continued feedback!

Also, I have no specific list but rather a quick scan at the RPi interval program code.

Edit: I am running the OSPi interval program on my Mac now (removed the GPIO dependency) and noticed a lot of differences in how the data is sent (in the head). I am going to try and change my code to better support the RPi but it will take a little while to develop and test. I will post an update once I have completed the required work.

Edit 2: Just to give an example of the varations I will post the OS and RPi versions of the home page. My problem is developing a proper regex to parse either case in one go.

OS:

RPi:

I will hopefully find a solution soon that selects everything between a comma that has an equal sign in it. Then I could use the PHP to split by the = and save the array key as the left side and value as right side. The biggest obstacle in this solution are the arrays which also have commas inside so the regex must select each variable independently. The long and short of all this is, I should have a solution soon however if anyone with more experience knows anything that would help I would appreciate it.

[Vaughano]

I forgot to mention my setup is OSPi. I have retrieved the latest code from git and the $force_ssl flag was useful; thanks.

I got to the same point as above, where app is almost working but not retrieving station names correctly. I’ve run out of time for now (Sunday night in Australia), but will come back ASAP to check the latest development and help in testing. Really like this interface!

Cheers
Vaughano

[Author]

Posts