precipiSTATION Web Page Control
A web page was built to control all functions of precipiSTATION. It is made up of several files that must be hosted under your own domain name, and either on your own server, or by an ISP.
The web page is based on placing the communication with the Particle Photon on a server within PHP files, uisng AJAX and JSON to send data from web page to server. In this way, the core ID and API token are not obviously available after hitting the browser's "show source". Note PHP files may not have the security you desire - It was good enough me, and was what I was able to code. Note also that you will need to edit the PHP files, inserting your own core ID and API Token where required.
If you wish to modify or troubleshoot the files behind the web pages, the software that you should be familiar with (or learn enough about) includes HTML, CSS, PHP, JavaScript, jQuery, and Bootstrap. Some familiarity with the Document Object Model (DOM) might be helpful. My best friend was www.stackoverflow.com.
You should also know that this was my first web site so that while I was able to come up to speed on these, I am sure some of the code and architecture most certainly show novice to intermediate knowledge. Below is a screenshot of the opening page of the web site.
The web page is based on placing the communication with the Particle Photon on a server within PHP files, uisng AJAX and JSON to send data from web page to server. In this way, the core ID and API token are not obviously available after hitting the browser's "show source". Note PHP files may not have the security you desire - It was good enough me, and was what I was able to code. Note also that you will need to edit the PHP files, inserting your own core ID and API Token where required.
If you wish to modify or troubleshoot the files behind the web pages, the software that you should be familiar with (or learn enough about) includes HTML, CSS, PHP, JavaScript, jQuery, and Bootstrap. Some familiarity with the Document Object Model (DOM) might be helpful. My best friend was www.stackoverflow.com.
You should also know that this was my first web site so that while I was able to come up to speed on these, I am sure some of the code and architecture most certainly show novice to intermediate knowledge. Below is a screenshot of the opening page of the web site.
The hosted files:
- index.php: Main routine containing CSS, HTML, divs, Bootstrap modals, and JavaScript
- pstation.php: POST/GET routine that requests wide range of data from precipiSTATION, and then unpacks and de-serializes the returned JSON data into usable arrays and variables to pass back to index.php
- setupPgmData: Particle POST that gets precipiSTATION to organize program data for a specific program into a String for subsequent getPgmData GET request.
- functionCall.php: Generic POST routine used from many segments of index.php to call Particle functions, using parameters passed from index.php.
- getPgmData.php: Particle GET request to get operational parameter for a specific program
- fetchPgmNames.php: Particle GET request to get the names of all Programs
- uploadStationNames.php: Particle POST used to upload text names of all 16 stations
- uploadProgramData.php: Particle POST to upload program name and run time operational parameters that program.
- Font and image files: Various image and font files
pstn_web_app_files_14aug2016.zip | |
File Size: | 830 kb |
File Type: | zip |
YouTube Video of Web Page in Action