Category Archives: Software Development

Show Arduino Sensor Data on a Web Page in Real Time

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 sensor data on a web page refreshing at a fixed interval

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.

Showing Arduino sensor data on a web page
Showing Arduino sensor data on a web page

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:

  1. Identify the router’s WAN IP address. This can be found be doing an internet search for ‘what is my IP’
  2. 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).
  3. 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.

High Performance Arduino Web Server

Web API built using high performance Arduino web server

Check out the new high performance Arduino Web Server based on an MVC framework implementation.

Build web pages (views) using a server-side scripting syntax, and use or integrate a free view builder tool to convert ASP views to native C++. Deploy your web projects to Arduino Uno R3/R4, Mega 2560, ESP8266 or ESP32 boards. Build starter projects that have a responsive menu, user authentication and web APIs, using a free command line tool. Build sophisticated ethernet or Wi-Fi based web projects using a professional approach to software design.

Watch the clip to see how easy it is to create new web projects for the Arduino platform.