Show Arduino sensor data on a web page in real time, using the MVC framework. This web server project can be deployed to range of network enabled Arduino boards, either with Wi-Fi or ethernet shield.
Arduino as a Web Server
The presentation above uses an Uno R3 with integrated ethernet and a 9 in 1 sensor shield. The benefit of this approach is that it keeps the component count low and is a great introduction to Arduino web development for beginners. Be sure to connect the Arduino to a network using an ethernet cable.
Here, the Arduino has the responsibility for collecting sensor data, and the responsibility of being a web server. A web client connects to the Arduino and makes HTTP GET requests using AJAX, and the Arduino renders all or part of the web page.
The Arduino project is implemented using a Model View Controller (MVC) design. A HTTP request is forwarded to the controller, which interacts with a model, then serves a view (i.e. web page). The MVC framework library and associated utilities support a highly productive development environment that is suited to both beginner and advanced Arduino web developers.
Read Sensor Data Over the Internet
If the project is built and run as is, the Arduino will act as a local web server, accessible only within the LAN (Local Area Network) it is directly connected to. To read the sensor data over the internet, it will be necessary to use an internet facing router and a method known as port forwarding. Configuring a router to use port forwarding will require a variation of the following steps:
- Identify the router’s WAN IP address. This can be found be doing an internet search for ‘what is my IP’
- Log in to the router and navigate to the Port Forwarding settings. Create a virtual server using the TCP protocol. Use port 80 and the Arduino’s IP address (which is set in the web project source code).
- Configure the Firewall Settings to allow inbound requests on port 80.
Typing the WAN IP in to a web browser will display an auto-refreshing web page with the Arduino sensor data. It is likely that the WAN IP is dynamically assign by the internet service provider and will change over time. DNSExit have a free dynamic DNS service that will make it possible to connect to the Arduino using a domain name.
Want to Know More?
There are many more web projects in addition to showing Arduino sensor data on a web page, and they can be downloaded from this web site. Learn more about building web projects in the book Arduino Web Development: Pushing the Limits.