Create Website Template (Windows)

Create html file.

First, we can create a file named templates, and then we can create a file named index.html inside it.There are several main parts:

• <!DOCTYPE html>: it defines the document type and the character set.
• <html lang="en">: it is the root element of the HTML document. It contains all the other elements. The lang attribute specifies the language of the document.
• <head>: it includes the title of the website and the css file, in which you can also set a style of the web page.
• <body>: it includes the main content of the website, in which we can add scripts and set container.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <title>Title of the Document</title>
    <style>This is the style setting</style>
</head>

<body>
    <div class="container">
	<h1>This is the Heading</h1>
	<p>This is the paragraph</p>
    </div>
    <script>This is the script setting</script>
</body>
</html>

Specify the function used in the html file.

In the last section, we learned how to use the route() function to link a URL to a specific function using id. Now, we also need to use this id to gather data sent by Flask to the server and add it to our webpage. Remember, since the webpage an independent element, we'll need to use special JavaScript to accomplish desired functionality..

For example:
To display the gesture data and img collected by the camera in real time, the browser needs to be continuously updated. As Flask has already sent the data to the server, we just need the browser to regularly check this server URL for new data. Here's the code to accomplish this:

First, we need to create a <div> element to display the data we want to embed.

<div class="right-side">
    <h2>Camera Feed</h2>
    <img id="camera_feed" src="/camera_feed" alt="Camera Feed" width="480" height="360">
    <div id="data_send" style="margin-top: 20px; font-weight: bold; padding: 10px; font-size: 1.2em">Data published: None</div>
</div>

Here:

• <h2> is used to display the heading.
• <img> is used to display img.
• id="camera_feed" means the id of the img.
• src="/camera_feed" means this img will be linked to the URL with the id camera_feed send by Flask.
• alt="Camera Feed" specifies the text to be dispalyed if the img is not loaded.
• <div> is used to display the data.
• id="data_send" is the id of the contains of this division.
• Data published: None is the initial data to be displayed.

Then, we need to create a JavaScript function to update the data in the <div> element.

<script>
    const HumanDataUrl = '/data_send';
    function fetchAndUpdateData() {
        fetch(HumanDataUrl)
            .then(response => response.json())
            .then(data => {
                const DataElement = document.getElementById('data_send');
                DataElement.innerHTML = 'Data published: ' + data.category;
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                const DataElement = document.getElementById('data_send');
                DataElement.innerHTML = 'Error fetching data';
            });
    }
    fetchAndUpdateData();
    setInterval(fetchAndUpdateData, 1000);
</script>

Here:

• const HumanDataUrl defines a constant variable HumanDataUrl which holds the URL from which data will be fetched.
• function fetchAndUpdateData() fetches data from the specified URL using the Fetch API.
• getElementById() defined which <div> element to update.
• setInterval(); is used to update the data every certain time interval.