- post by: Owen Martin
- September 04, 2018
Graphical Data Display with Arduino and HTML5
Most Arduino-based projects use LCDs to show data, but this project instead uses webpage so that more details can be displayed in a graphical form and accessed from anywhere through the Internet. The project takes variable analogue inputs from Arduino and displays results in graphical form on a webpage that supports HTML5.
The project presented here includes four webpages coded in four .htm files, which are stored in a memory card and then hyperlinked with each other.
Circuit and working
The Ethernet shield with microSD card is shown in Fig. 1. The circuit for Arduino-based graphical data display is shown in Fig. 2. It is built around an Arduino Uno board along with some potentiometers (VR1 through VR6), resistors (R1 through R4) and tactile switches (S1 through S4).
Arduino web server
The web server is implemented by stacking Ethernet shield on top of Arduino board. The Ethernet shield used in this project has W5100 Ethernet controller and an onboard microSD card slot. Transfer HTML5 files required for this project (gauge.htm, bargraph.htm, analog.htm and digital.htm) to an SD card. Now insert the SD card in the onboard microSD card slot of Ethernet shield.
Arduino communicates with both W5100 and SD card using the SPI bus through the ICSP header, and hence only one of these can be active at a time. Arduino sketch (Arduino_html5.ino) in this project uses SPI, Ethernet and SD libraries to function. These libraries manage sharing of the SPI bus so that both W5100 and SD card can be utilised.
Connecting Ethernet shield to the PC
Connect Ethernet shield to the PC using Ethernet cable. The IP address assigned to Ethernet shield in Arduino code is 192.168.1.1. So assign an IP address to the PC’s Ethernet connection, say, 192.168.1.10, with subnet mask 255.255.255.0 (refer Fig. 3). After connecting Ethernet shield to the computer with Ethernet cable, open the web browser (for example, Google Chrome) and type the address as http://192.168.1.1.
By default, this will load gauge.htm file from the SD card. To load other files or webpages, menu bars or links are given in the default webpage. It is possible to seamlessly switch between displays with hyperlinks given in each page. If files are not loaded, open the serial monitor of Arduino IDE to check any error message and take appropriate action.
Getting data from Arduino
XML is much like HTML. It is designed to describe data with tags organised in a tree structure. The tree structure contains root (parent) elements and child elements as defined by the user. Here the XML file is created by Arduino code with as the root element and and as child elements for analogue and digital inputs, respectively. The XML file created by Arduino is given below:
where the first line is XML declaration.
Displaying graphical data on webpage
Four types of displays are designed with canvas code as explained below.
A gauge meter consists of a circular graduated dial and a pointer actuated by a measured input value. Here, the gauge meter is designed by plotting basic circles and lines (refer Fig. 4) in the HTML5 canvas with a few lines of code (gauge.html). The needle is rotated from left to right when the input value is increased.
A mobile signal booster amplifies a mobile phone signal sent to and from the phone to the nearby tower. A mobile signal booster is basically a repeater system, which takes the existing mobile phone signal, amplifies that signal and rebroadcasts to a nearby area. Thus helping the user to hear properly on a phone when the signal is […]
LabVIEW, or Laboratory Virtual Instrument Engineering Workbench, is a system design platform and development environment for graphical language programming. It is a visual programming language from National Instruments (NI). LabVIEW programs or virtual instruments (VIs) have front panels and block diagrams. The front panel is the user interface (UI), and the block diagram contains the […]
In this project, we will be connecting and controlling our ES32 Wi-Fi based module from our mobile phone’s Google Assistant Application. The charisma here is that your google assistant will take voice commands in Hindi and perform actions on ESP32. It will then perform actions based on our voice commands. This project is amazing and […]
Electronics design engineers require a number of software to create and verify their designs digitally, before moving to production. KiCad brings all these tools together under one platform, making their tasks simpler. This free electronic design automation (EDA) software suite mainly comprises a schematic creation and capture suite, and a PCB layout tool. It enables […]
There are various applications where the developers need to design a highly complex embedded system. In complex applications requiring sophisticated algorithms, frequently one team is focused on developing the time-critical control code while another is working on the code for housekeeping, diagnostics and communication functions. In this type of scenario, a microcontroller with an extra […]