Sketch To Html

Html

Created on: 29 January 2013

Part 5 of the Arduino Ethernet Shield Web Server Tutorial

Thus, adopting result-driven modern design practices and trends for website development is a thoughtful step, and Sketch to HTML conversion is a key to attain it. This conversion process transforms your static image into a dynamic, secure, and fast loading website. Gone are the days when designing for the web was passionless and insipid. Download pencil sketch stock photos. Affordable and search from millions of royalty free images, photos and vectors. Transform sketches into HTML using AI. This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use. In this tutorial you will learn the all the secrets to using SketchUp's Tape Measure tool. What it can and cannot do. How to speed up measuring objects in SketchUp and how to easily create guides for accurate modelling.

In this part of the tutorial, the Arduino and Ethernet shield serves up a web page that allows an LED to be switched on and off. The LED is connected to one of the Arduino pins – this simple circuit can be built on a breadboard.

This video shows the LED being controlled from the web page:

Arduino Web Server LED Controller Hardware

The LED is interfaced to the Arduino as shown in the circuit diagram in the Starting with Arduino tutorial. It is simply an LED and series resistor connected between Arduino pin 2 and GND.

An SD card is not used in this web server.

The hardware is shown in the image below.

LED Web Server Hardware

How the LED is Controlled

Web Page and HTML

Web Page and HTML Code with Checkbox Unchecked

The Arduino web server serves up a page that allows the user to click a check box to switch the LED on and off. The web page is shown here:

LED Web Server Web Page - Checkbox Unchecked


The HTML code that the Arduino web server sends to the web browser is shown below.

LED Web Server Web Page HTML Code - Checkbox Unchecked


Web Page and HTML Code with Checkbox Checked

After clicking the checkbox to switch the LED on, the web page and HTML code now look as follows:

LED Web Page with Checkbox Checked


Take note in the above image that the web browser added /?LED2=2 to the end of the URL field after the checkbox was clicked.


LED Web Page HTML Code with Checkbox Checked


Sketch

In the above image, the Arduino changed the HTML page that it sent to the browser so that the checkbox will be shown with a check mark in it. The change to the code is highlighted in the image and it can be seen that checked was added.

New HTML Tags

Export Sketch To Html

Two new HTML tags are introduced in the above HTML code, namely <form> and <input>.

HTML <form> Tag

A form tag contains form controls, such as the checkbox used in this example. In this form, method='get' in the opening form tag will result in the form being submitted using an HTTP GET request. This also results in the /?LED2=2 text being added in the URL field of the web browser.

HTML <input> Tag

A single control is added to the HTML form using the <input> tag. The input tag does not have a corresponding closing tag.

In this example, the input tag is used to create a checkbox. The following fields are included in the input tag:

  • type='checkbox' – displays this input control as a checkbox
  • name='LED2' – user defined name of the control
  • value='2' – user defined value of the control
  • onclick='submit();' – submit the form when the checkbox control is clicked
  • checked – when present the checkbox is checked, otherwise it is blank

HTTP Request and Response

When the checkbox is clicked, it will generate an HTTP GET request that sends the name and value from the checkbox to the Arduino server.

The following is an example of an HTTP request sent from the Firefox browser to the Arduino server after clicking the checkbox:

When unchecking the checkbox, the following HTTP request is sent from the browser to the Arduino web server:

The Arduino sketch in this example reads the HTTP request header and checks for the text LED2=2 and if found, the Arduino will toggle the LED from off to on or on to off.

Both of the above requests contain the LED2=2 text although in different places. When checking the box, the text is part of the GET request line. When unchecking the box, the text is part of the Referer: header.

With this background information, we can now see how the Arduino sketch works.

LED Web Server Sketch

The Arduino sketch for the LED web server is shown below.


Modification to Sketch

Sketch To Html Plugin

This sketch is a modified version of the eth_websrv_page sketch from the basic Arduino web server.

The sketch creates the HTML page as usual, but calls the ProcessCheckbox() function to take care of the line that draws the checkbox.

Sketch To Html Free

The ProcessCheckbox() function checks to see if the HTTP request contains the text LED2=2. If the HTTP request does contain this text, then the LED will be toggled (switched from on to off or from off to on) and the web page is sent again with the checkbox control also toggled to reflect the state of the LED.

Improvements

The sketch has been kept simple for learning purposes, but some improvements can be made to this sketch to make it more reliable.

Sketch To Html Plugin

The sketch currently only checks for the presence of the text LED2=2 in the HTTP request to see if the checkbox was clicked. It would be more reliable to check where the LED2=2 text is in the HTTP message to determine whether the checkbox is being checked or unchecked. This would then make it impossible for the state of the LED and the state of the checkbox to become unsynchronized.

Donate to Starting Electronics

Arduino Ethernet Shield Tutorial