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:

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:

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

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

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.

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

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

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.

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

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

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

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

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

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