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.
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.
If you’re looking for an easy to use and memory efficient Arduino LCD menu library that can be adapted for keypads and rotary encoders, check out our menu library. View the accompanying video clip that demonstrates how you can build a hierarchical menu in a few simple steps.
An Arduino metronome sketch is available for the Multi-function shield. It allows music students to work on their timing skills by displaying and sounding a beat, where the BPM rate and time signature are configurable by the user. The sketch is also accompanied by a short video demonstrating its features.
It focuses on a specially developed library and real world applications for a simple Arduino multi-function shield that is great for beginners learning to code on the Arduino. The applications featured are;
Digital alarm clock
There is also an eBook covering all the applications is also available with additional library help information.
Welcome to our new look website and new blog. We hope to regularly update the site and blog, and share with you our experiences of the wonderful world of technology. If there is anything you like, please share with your colleagues. If there is anything you would like to share with us, we welcome that too.