Sander van Vliet

@Fablab Amsterdam

Interface and Application Programming

Week 16 (18 may - 25 may)


This weeks class took us through a list of programming languages like C, Java, Arduino, Python and many more with which you can build interfaces and applications. We were also introduced to several device-, data-, and user interfaces which store, present and interact with data.
See the overview of the lecture here.


What to make

I first had the plan to make something using Processing; a software application and language with which you can program visual interfaces and do many more things. I checked it out and watched some tutorials, but I had another idea.

Switch an led via WiFi from a web interface

When I was playing around with one of my esp8266 wifi boards again, I thought it would be nice to use them and try to make a web interface. So an HTML coded interface which can be operated with a browser.
I connected an led to gpio 5 of esp8266 wifi board and found an example sketch that I started from and changed it for my setup.
The sketch uses the ESP8266WiFi.h library and I configured the code to let the esp8266 connect to my local WiFi network as a client (station mode). Then it obtains an IP address from the dhcp server (my internet modem/router) and with the "server.begin" command a webserver is started on the esp8266. Then the webserver awaits data on TCP port 80 (http/internet browser port). Another client can send data to this port only when it is located in the same local network, so in this case in the network subnet, meaning this client should have an IP address starting with 192.168.2. If the client's TCP request matches the given string in the code, the esp interprets this and the module switches the value of the output to the gpio 5 pin to either low or high / 0 or 3.3Volt.

switch led off and on via WiFi with web interface source file - Arduino IDE

Web interface buttons

If the device that is running this browser (computer/smartphone) is connected to the same LAN (local network) as the wifi module is currently connected to, you can switch the led off and on with the buttons below.