OpenSprinkler › Forums › OpenSprinkler Mobile and Web App › Mobile Web App with Screenshots (Updated)
- This topic is empty.
June 7, 2013 at 6:33 pm #22462
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.
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
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¤cy_code=USD&lc=US&bn=OS_Donations&charset=UTF%2d8
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.June 8, 2013 at 6:14 am #23839
I Like !!!
Any chance of a future Android version?June 8, 2013 at 1:04 pm #23840
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!June 8, 2013 at 2:57 pm #23841
@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!June 9, 2013 at 3:29 pm #23842
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.June 9, 2013 at 10:31 pm #23843
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!June 10, 2013 at 2:40 pm #23844
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!June 10, 2013 at 3:01 pm #23845
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!June 10, 2013 at 4:03 pm #23846
That is exactly right. I suppose I should try to improve the install process next!
Updated: See below for install instructionsJune 10, 2013 at 7:08 pm #23847
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!June 14, 2013 at 8:42 pm #23848
Very cool. Is it possible to run this from an external web server? If so, how?June 15, 2013 at 3:32 am #23849
*** 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!June 15, 2013 at 4:55 pm #23850
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.June 15, 2013 at 4:58 pm #23851
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.phpJune 15, 2013 at 5:02 pm #23852
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!June 15, 2013 at 5:16 pm #23853
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.June 15, 2013 at 5:19 pm #23854
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.June 15, 2013 at 5:31 pm #23855
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.June 16, 2013 at 4:40 am #23856
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.
VaughanoJune 16, 2013 at 7:15 am #23857
Keep me posted on your results with the new update!June 16, 2013 at 7:43 am #23858
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.June 16, 2013 at 7:51 am #23859
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!June 16, 2013 at 8:02 am #23861
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.June 16, 2013 at 8:07 am #23860
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.
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.June 16, 2013 at 10:30 am #23862
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!
- You must be logged in to reply to this topic.
OpenSprinkler › Forums › OpenSprinkler Mobile and Web App › Mobile Web App with Screenshots (Updated)