Background


By default, the OpenSprinkler firmware directs the browser to retrieve Javascript files stored on a cloud server to render the UI on your device. The default UI path is at ui.opensprinkler.com. To customize the UI, or to access OpenSprinkler without Internet at all, please follow the instructions below. 

Option 1: Download the UI / App files locally to a computer


The UI / App code is publicly available at: https://github.com/OpenSprinkler/OpenSprinkler-App


Download the repository to a computer (by clicking Code -> Download Zip), unzip it to a local folder; or you can do a git clone of the repository. Then navigate to the www subfolder, and open the index.html there in a web browser. This will show you the same UI as the OpenSprinkler mobile app, or at ui.opensprinkler.com


You may add a controller by using its IP address, or by using its OTC token. This way the UI files exist locally on your computer. You can customize the UI files, as well as accessing the controller without Internet at all.


If you want to customize the UI, such as changing the color theme, adding a new button etc., most likely you will make changes in the www/css/main.css and www/js/main.js files. Then refresh your browser window to load the changes you've made.


The main advantage of this approach is that it's easy to set up; the main downside is that the UI files exist on a local computer which may not be accessible elsewhere.

Option 2: Run the UI / App on a remote server


You can upload the modified UI files to a remote server, that way you can access them remotely as well. To do so you need to set up a web server (such as on a Linux computer or Raspberry Pi). The instructions will be outside the scope of this guide, however you may use any web server such as Apache, nginx, lighthttpd, etc. Make sure to modify your web server configuration for the path hosting the UI files and add the following configuration (example in Apache):

  1. Header set Access-Control-Allow-Origin "*"
  2. AddEncoding x-gzip .cgz .jgz
  3. AddType text/css cgz
  4. AddType text/javascript jgz


This is how the server ui.opensprinkler.com is set up. There are two ways to use the remote server. First, you can open the UI server link directly in a browser, there you can add OpenSprinkler controllers and access them. Please note that if you are adding a controller using its IP address, then you need to use a browser other than Chrome, such as Firefox (this is because Chrome forbids mixing HTTPs and HTTP content). For that reason we recommend setting up your OpenSprinkler to use OTC token, because accessing the controller via OTC is through the secure OpenThings cloud server. This way it works in all browsers.


Another way to use the remote server is by baking its path into the OpenSprinkler homepage. To do so, 

  1. Open a browser and navigate to your OpenSprinkler's /su page. For example, if your controller's IP is os_ip, then type in http://os_ip/su which brings up the script URL page. 
  2. Change the UI source to point to your own server. It should look like https://your_UI_server/js
    For example, the default is https://ui.opensprinkler.com/js
  3. Once the UI path is changed, it will automatically load the UI files from your own server whenever you access the controller, either using its IP address or via OTC token.