Web Page Development using HTML, CSS, and JavaScript

Introduction

In the previous tutorial, we have configured Linux OS, Ethernet connection, and also installed libraries on ZYBO. In this tutorial, we are going to build a web page (front-end) for the GCD accelerator UI. The following figure shows the web page. To build this web page, we are going to use HTML, CSS (Bootstrap), and JavaScript (jQuery).

First, the user types the input A and B in the text box. Then, the user clicks the calculate button. After that, the result C is displayed. Furthermore, the chart displays the execution time of hardware and software GCD, and also the speed up.

Prerequisites

We are going to use the following CSS and JavaScript libraries:

You can download the full source code of this tutorial from here.

Web Page

The web page project is organized as in the following figure. Inside the gcd_accelerator folder, we have static and templates folder. Put all of the library files inside the static folder and put the index.html inside the templates folder.

HTML

First, the following figure shows the layout of the web page. We are going to use Bootstrap grid system to layout the web page. It uses a series of containers, rows, and columns to layout and align content.

This is how the HTML code works:

  • First, in line 9-14, we include the CSS and JavaScript libraries.
  • Then, in line 17 and 89, we include our custom CSS and JavaScript.
  • In line 21, we use the container class. This is required when using Bootstrap default grid system.
  • In line 24, we use the row class and h-100 class. The h-100 makes the row have a height of 100% of the web browser.
  • in line 25, we use the col-8, offset-2, and my-auto class. The col-8 defines the column size, and the offset-2 defines the offset size. The my-auto class makes the column vertically center.
  • In line 28, we use a nested Bootstrap grid system. It has two columns with a size of col-6.
  • After that, inside these columns, we define our contents.
  • The contents consists of several HTML components, such as form, input, button, span, p, and svg.
  • Finally, don’t forget to add ID to several HTML components. So, that we can access these HTML components from our custom JavaScript code.

CSS

The following listing shows our custom CSS code. The function of this code is for styling the chart.

JavaScript

The following listing shows our custom JavaScript code. In line 1-78, it is the code for the chart. They initialize the chart. Then, in line 81-105, we define the on-click function for the button calculate. So, when we click the button this function will be executed.

In line 82-87, we construct the HTTP request data that consists of input A and B of the GCD operation. Then, in line 91, we send HTTP POST request to the web server along with the data. We also defines a function that will process the HTTP response in line 92-103. It will display the result to the web page.

In line 81-105, the function of the reset button is defined. Basically, it clears the HTML components.

Summary

In this tutorial, we have built the web page for the GCD accelerator. We use HTML, CSS (Bootstrap), and JavaScript (jQuery). We use these libraries in order to speed up our development time. We have created a function for the buttons’ on-click event. When we click the button calculate, it will send HTTP POST request to the web server, which we are going to build in the next tutorial.

Next: Embedded Web Server Development using Python and Flask Framework

Leave a Reply

Your email address will not be published. Required fields are marked *