On the internet you can find a lot of tutorials on how to program NodeMCU and how to manage modules through a web browser. They are all with a dynamic IP address, which is not bad as a tutorial, but it's not good to create a stand-alone project. Each reset of the router in this case, the IP address changes and it happens that every time after resetting you, we connect NodeMCU from the computer to see the new IP address. The solution is in a static IP address within the home network.
The ingredients for this recipe are:
Connection according to schema. Pins, of course, can be used as desired. I used D7 and D8, or better say GPIO13 and GPIO15. Only pay attention when connecting LEDs. Anode is longer (+) and the cathode is shorter (-).
Step 1: Sketch
Time for sketch. On the start we add a library to work with the ESP8266 module. Further we fill the SSID and the password lines of our home network. The next lines are the addresses. In the first place, we set up a static IP address. When selecting this address, one should keep in mind the limit of the router and the number of connected wi-fi devices. We set gateway and subnet addresses to our router. Next is the definition of output pins and variables that we will need later. Finally, we run the WIfi server. In the void setup section we set the output pins to LOW, we connect the module to the network and all of it is printed on the serial monitor. Serial.println (ip) should print the same address that we set above. In the void loop section except for printing the current state of the module on the serial monitor, which is important for removing any errors, we change the state of the output pins. Depending on what is sent over the web browser, we change each pin from LOW to HIGH and vice versa. The next step is to set up the html page. For this, we use the client.println function. The page can be formatted as desired, but the quotation (") should be keep in mind.
Step 2: Code
You can download .ino file here.
Step 3: Conclusion
By typing the IP address in the web browser's URL, we get to the html page we made. We can access it via any computer, tablet, mobile phone ... as long as they use the same router. Regardless of whether the router will be restarted for some reason, the IP address will remain the same.
As you can see, it's a simple project with plenty of room for expansion. With the basic knowledge of web programming languages, GUI can be made as desired. As an example I added basic CSS, support for UTF8 letters, but in principle the page can be formatted as you like. For a potential project that will be used in the long run, one should consider the responsive template because of the screen of mobile devices. My small flaw is to print the LED status of a web browser, where there is a small bug when another LED is lit after the first one. This requires the use of the sessions and time for necessary programming, and my long-awaited vacation is finally coming. Be free to edit the sketch at will and place the updates below. I wont be mad.
So much from me until the next sketch.