The front-end for the Water System project. Using Angular and Redux. The GUI is a JavaScript page (after angular 'compiles' the TypeScript to JavaScript) that talks to REST servers on the ESP8266.
Clone from git -
git clone https://github.com/ism-hub/WaterSystemGUI.git
Install dependencies, in the terminal type -
npm install
Install Angular CLI -
npm install -g @angular/cli
Start the development server -
ng serve -o
In order to use the GUI to control the ESP chip you need to connect them, this is done by simply connecting the ESP (REST Server) to the same network you view the GUI page. If you followed the above steps you already have a window running the GUI on your browser. Now all you have to do is to connect the ESP to the same network your computer is on.
- Follow the instructions on how to run the back-end (compile and upload it to the ESP).
- Connect your computer to the ESP Access-Point SSI: ESP8266123 Pass: ESP8266123
- Now the GUI controlling the ESP (your PC and the ESP are on the same network (The ESP network)). In the GUI go to the 'Station View -> Scanner View' and choose your home network and connect to it (make sure you check the 'auto connect' box to avoid repeating these steps again)
- Done, connect your PC back to your home network and use the GUI to control the ESP from there.
Can navigate to different views from here -
Shows information about the network our ESP is connected to -
Shows information about nearby networks and the possibility to connect to them -
Information about the ESP as an Access-Point -
Can view and change the Access-Point settings -
Can set water programs add flowers etc. (needs a little visual update..)
token= "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"
token= "ghp_CpkO5B1J7tW1iRJokfhY1onweJCFze31T7O2"