OpenSprinkler with Custom Web App (Updated)

I recently purchased an OpenSprinkler from Ray’s Hobby and am very impressed thus far! The device has accomplished its primary task of moving the controls away from a central box in the garage to any networked device (iPhone, iPad, laptop, etc.). It comes provided with a wonderful web interface out of the box. The install was very easy! I already had a Hunter irrigation control system and simply unplugged everything from it and moved over the connections to the OpenSprinkler. I even used the housing of the old system to house the new system. Below is a picture of the final physical install:

IMG_0656 IMG_0657

There are plenty of instructions available online on how to use the provided web interface but I have decided to make my own web app that is more mobile device friendly (iPhone and iPad). I decided to use jQuery Mobile and used the same boilerplate that I have used for my other web apps. The app is completed and released on Github.

All of the programs settings come directly from the OpenSprinkler HTTP interface so no need to re-enter all your settings again.

Discussion for the web app development can be found on Ray’s forums.

For assistance understanding how features work/mean please refer to the documentation on Ray’s website. Everything in this web app is based on his interface but simply adapted for the mobile interface.

Below are some screenshots:

iOS Simulator Screen shot Jul 27, 2013 5.48.29 PM iOS Simulator Screen shot Jul 27, 2013 5.48.49 PM

On first run, the app notices this is a new install and will assist in configuring everything! If everything is entered correctly you should see a success message similar to the one above. If an error occurs a message similar to the one below will appear to help you figure out what might be wrong

iOS Simulator Screen shot Jun 11, 2013 10.02.05 AM

iOS Simulator Screen shot Jun 8, 2013 11.27.14 PM

After the configuration setup you will be presented with this log in screen

iOS Simulator Screen shot Jul 18, 2013 6.36.17 PM iOS Simulator Screen shot Jul 18, 2013 6.36.32 PM

This is the home screen which gives the main options available to the sprinkler system. The weather is updated from Yahoo using the location set on OpenSprinkler.

iOS Simulator Screen shot Jul 2, 2013 10.26.18 PM

This is the side panel with various options including exporting/importing the configuration, all programs, station names, etc.

iOS Simulator Screen shot Aug 1, 2013 6.54.45 PM iOS Simulator Screen shot Aug 1, 2013 6.52.25 PM iOS Simulator Screen shot Aug 1, 2013 6.54.39 PM

This is the settings page which allows you to change device settings and edit the settings on the OpenSprinkler. Omitted from this list are two things though: the http port and the password. This is to prevent a lockout from the device

iOS Simulator Screen shot Jul 23, 2013 6.24.41 PM

This is the current status window which shows the device information as well as the stations. The background color behind each station signifies if that station is currently on/off. The program running is displayed underneath each station along with the scheduled or remaining time.

iOS Simulator Screen shot Jul 2, 2013 10.29.37 PM iOS Simulator Screen shot Jul 2, 2013 10.30.53 PM

This is the manual control screen which shows all the zones and allows a tap on/off for each zone. A green color after a zone has been tapped indicating that station is active

iOS Simulator Screen shot Jul 31, 2013 8.40.23 PM

The run once program selector. Each zone is shown with its own range slider

iOS Simulator Screen shot Jul 2, 2013 10.56.03 PM

This is the rain delay page which allows you to set a manual or automatic delay

iOS Simulator Screen shot Jul 27, 2013 5.39.39 PM iOS Simulator Screen shot Jul 27, 2013 5.39.53 PM

This is the log viewer that is inspired by David B. Gustavson script and in fact uses almost the same code but reflowed jQuery Mobile

iOS Simulator Screen shot Jun 9, 2013 10.56.29 PM iOS Simulator Screen shot Jun 9, 2013 11.00.37 PM iOS Simulator Screen shot Jul 27, 2013 5.55.42 PM

The main screen inside the programs section. Programs are expandable to display/edit settings. Scrolling down from program 1 (from above) shows the remainder of the settings available. The switch on the top between weekly/interval automatically shows/hides the appropriate settings. Also notice a slider selector for the duration (making this input easy!). The start/end time are also appropriately labeled in iOS to make time selection very easy as shown below along with the add new program screen

iOS Simulator Screen shot Jul 27, 2013 5.56.50 PM iOS Simulator Screen shot Jul 27, 2013 5.57.01 PM iOS Simulator Screen shot Jul 27, 2013 5.57.07 PM

iOS Simulator Screen shot Jul 2, 2013 10.46.37 PM

The program preview page which plots all of the interpreted programs on a timeline

1 thought on “OpenSprinkler with Custom Web App (Updated)”

Leave a Reply

Your email address will not be published. Required fields are marked *