Now that we have made sure that we can render HTML and can link our CSS to it, lets add in the rest of the HTML for this project and see how that looks. Your index.html
should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Sensor Data</title>
</head>
<body>
<div class="App">
<div id="latest-values_container">
<p class="panel-title">Last 10 values</p>
<section class="content-panel border">
<table>
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
<tbody class="latest-values-table">
<tr>
<td id="hd1">50</td>
<td id="td1">100</td>
</tr>
<tr>
<td id="hd2">50</td>
<td id="td2">100</td>
</tr>
<tr>
<td id="hd3">50</td>
<td id="td3">100</td>
</tr>
<tr>
<td id="hd4">50</td>
<td id="td4">100</td>
</tr>
<tr>
<td id="hd5">50</td>
<td id="td5">100</td>
</tr>
<tr>
<td id="hd6">50</td>
<td id="td6">100</td>
</tr>
<tr>
<td id="hd7">50</td>
<td id="td7">100</td>
</tr>
<tr>
<td id="hd8">50</td>
<td id="td8">100</td>
</tr>
<tr>
<td id="hd9">50</td>
<td id="td9">100</td>
</tr>
<tr>
<td id="hd10">50</td>
<td id="td10">100</td>
</tr>
</tbody>
</table>
</section>
</div>
<div id="statistics_container">
<div class="vertical-center">
<p class="panel-title">Stats on the last 10 values</p>
<section class="content-panel border">
<section id="statistic-table-title" class="margin-top">
<div>Avg</div>
<div>Max</div>
<div>Min</div>
</section>
<section id="statistic-table">
<table>
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="avg-hd">50</td>
<td id="avg-td">100</td>
</tr>
<tr>
<td id="max-hd">50</td>
<td id="max-td">100</td>
</tr>
<tr>
<td id="min-hd">50</td>
<td id="min-td">100</td>
</tr>
</tbody>
</table>
</section>
</section>
</div>
</div>
<div id="status_container">
<div>
<p class="panel-title">Status</p>
<p id="status-message" class="border">Placeholder</p>
</div>
</div>
<div id="alarm_container" class="border">
<div id="current-alarm_container">
<p>Current Alarm Values</p>
<table>
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="current-alarm-h">50</td>
<td id="current-alarm-t">100</td>
</tr>
</tbody>
</table>
</div>
<div id="set-alarm_container">
<div id="humidity-alarm-input">
<p>Humidity <input id="input-h" type="text" />%</p>
</div>
<div id="temperature-alarm-input">
<p>Temperature <input id="input-t" type="text" />F</p>
</div>
<button id="set-alarm-button">Set Alarm</button>
</div>
</div>
<div id="input_container" class="border">
<div id="current-input-value_container">
<p id="current-sensor-title">Current Sensor Values</p>
<p id="sensor-title-h">
Humidity <span id="current-sensor-h">Null</span>%
</p>
<p id="sensor-title-t">
Temperature <span id="current-sensor-t"></span>F
</p>
</div>
<div id="input-button_container">
<button id="random1">1 Random Value</button>
<button id="random10">10 Random Values</button>
</div>
</div>
</div>
</body>
</html>
Now when you start the server again, you will now see this:
Now yes it does look ugly but thats because it's just HTML we will add the CSS shortly.
So that is a lot of HTML but I will attempt to go over all of the components and explain that they are for.
This is the base of every HTML document.
<!DOCTYPE hmtl>
<html lang="en">
...
</html>
The head
element holds more standard metadata, but you can also see that we have a title
element where we give our HTML document a title.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Sensor Data</title>
</head>
The body
element which is what holds eventhing that will be displayed to the user. Inside of that I put a div
element with a class of App
, this is where I'm putting the rest of the HTML code.
<body>
<div class="App">
...
</div>
</body>
Inside of the App div
, I have other div
s, each with their own id
assigned, this will help when I try to style the different them. The id
s provide a way to target a specific div
. By convention, id's
are meant to be unique but classes
can be shared, this will be important when styling.
<div class="App">
<div id="latest-values_container">
...
</div>
<div id="statistics_container">
...
</div>
<div id="status_container">
...
</div>
<div id="alarm_container">
...
</div>
<div id="input_container">
...
</div>
</div>
You can see that the id
s are all unique and kind of describe what is going to be stored in it.
Inside the latest-values_container div
we have a couple of different elements.
<div id="latest-values_container">
<p class="panel-title">Last 10 values</p>
<section class="content-panel border">
<table>
<thead>
...
</thead>
<tbody class="latest-values-table">
...
</tbody>
</table>
</section>
</div>
Here you can see that we have a p
element, this will just give us a small title for section below. You can see that it has a class "latest-values-table"
, and what will be displayed in the UI will be Last 10 values
.
Below that, we have an element called section
with multiple classes, "content-panel"
and "border"
. Again these are classes that I will use for styling. A section
element is pretty much the same thing as the div
tag.
inside the section
we have a table
element, this will allow us to create a table. In a table, you have a thead
which would have the titles for each column and below that, you will have the tbody
element which will hold the all of the rows for the table. I gave it the class "latest-values-table"
.
In the thead
element we are going to add our headings, in this case we will have Humidity (%)
and Temperature (F)
.
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
Notice how inside of head we have a tr
element, this represents a row. Then inside the row we have two th
elements which each hold a heading.
Inside the tbody
you will see ten rows (tr
elements) each with two td
elements. These are similar to th
except they are meant to hold "table data".
<tr>
<td id="hd1">50</td>
<td id="td1">100</td>
</tr>
<tr>
<td id="hd2">50</td>
<td id="td2">100</td>
</tr>
<tr>
<td id="hd3">50</td>
<td id="td3">100</td>
</tr>
...
Above I've only shown 3 rows but in the full HTML, you can see that there are ten of them. You can see that I've added dummy data to start.
Next you will see that we have another div
that similar as it ultimately contains a table
with a title and some rows. However, there are some differences.
<div id="statistics_container">
<div class="vertical-center">
<p class="panel-title">Stats on the last 10 values</p>
<section class="content-panel border">
<section id="statistic-table-title" class="margin-top">
<div>Avg</div>
<div>Max</div>
<div>Min</div>
</section>
<section id="statistic-table">
<table>
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="avg-hd">50</td>
<td id="avg-td">100</td>
</tr>
<tr>
<td id="max-hd">50</td>
<td id="max-td">100</td>
</tr>
<tr>
<td id="min-hd">50</td>
<td id="min-td">100</td>
</tr>
</tbody>
</table>
</section>
</section>
</div>
</div>
First we can see that inside of the div
with id of statistics_container
we have another div
with the class of vertical-center
. Inside that we have a p
element representing a small title. Under that we have a section
with the class content-panel border
which will hold the two other sections.
In the section
with the id statistic-table-title
and class margin-top
, we have three div
's that just have titles for the data.
In the section
with the id statistic-table
will hold the table displaying the data.
In this section we have a div
with the id status_container
that will be used to show us the status.
<div id="status_container">
<div>
<p class="panel-title">Status</p>
<p id="status-message" class="border">Placeholder</p>
</div>
</div>
Inside we see can see we just have two p
elements with some text.
In this section we create the div
which holds the alarm part of the UI.
<div id="alarm_container" class="border">
<div id="current-alarm_container">
<p>Current Alarm Values</p>
<table>
<thead>
<tr>
<th>Humidity (%)</th>
<th>Temperature (F)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="current-alarm-h">50</td>
<td id="current-alarm-t">100</td>
</tr>
</tbody>
</table>
</div>
<div id="set-alarm_container">
<div id="humidity-alarm-input">
<p>Humidity <input id="input-h" type="text" />%</p>
</div>
<div id="temperature-alarm-input">
<p>Temperature <input id="input-t" type="text" />F</p>
</div>
<button id="set-alarm-button">Set Alarm</button>
</div>
</div>
Inside the first div
we have two others, one with the id of current-alarm_container
and the other set-alarm_container
.
The div
with the id current-alarm_container
will have another table where you will be able to see the current threshold values for the alarms.
The div
with the id set-alarm_container
will contain the input
elements where we will set the alarm values.
This final div
has an id of input_container
with a class of border
.
<div id="input_container" class="border">
<div id="current-input-value_container">
<p id="current-sensor-title">Current Sensor Values</p>
<p id="sensor-title-h">
Humidity <span id="current-sensor-h">Null</span>%
</p>
<p id="sensor-title-t">
Temperature <span id="current-sensor-t"></span>F
</p>
</div>
<div id="input-button_container">
<button id="random1">1 Random Value</button>
<button id="random10">10 Random Values</button>
</div>
</div>
The first div
, the one with the id of current-input-value_container
contains a couple of p
elements that will be used for small titles and to display the currently generated values.
The div
with the id of input-button_container
will contain the buttons that will be used to generate the humidity and temperature values.
Next we will speak briefly about completing the styling.