Test Page

Image Map

Disadvantage: when the image is rescaled, the image map is not. So the hot spots with the links are not where they are supposed to be.

Relative Positions (for smartphones etc.)

Advantage: position of the hot spots scales with the size of the image displayed.

Lists

Testing Lists with HTML

As mentioned before, the data that is transmitted consists of 40 bits. 2 bytes for the relative humidity, 2 bytes for the temperature and 1 byte (check-sum) to check for finding errors in the transmission. The principle becomes clearer when looking at an example transmission:
\[\mathrm{0000\; 0010\; 1000\; 1100\;\; 0000\; 0001\; 0101\; 1111\;\; 1110\; 1110}\] \[\mathrm{\;\;\;\;\;\;\;\;\; Humidity \;\;\;\;\;\;\;\;\;|\;\;\;\;\;Temperature \;\;\;\;\;\;\;|\; check-sum}\]

The first two bytes contain the relative humidity data, converted to decimal, that gives:
\[\mathrm{0000\; 0010\;\; 1000\; 1100_{2}} → 652_{10}\] To obtain the relative humidity RH in percent, the value must be divided by 10:
\[RH = \frac{\mathrm{652}}{\mathrm{10}} = \mathrm{65.2\;\%}\]
For the temperature it works in a similar way. The binary gets converted to decimal and is divided by 10 to obtain the temperature in °C:
\[\mathrm{0000\; 0001\;\; 0101\; 1111_2 → 351_{10}}\] \[T = \mathrm{\frac{351}{10} = 35.1 °C}\] Unlike relative humidity, the temperature can be below 0 (negative). If that is the case, the first digit of the first temperature byte (byte 3) is a 1.

The last byte contains the 8 least significant bits (LSB) of the sum of both humidity and both temperature bytes:
\[\mathrm{0000\; 0010 + 1000\; 1100 + 0000\; 0001 + 0101\; 1111 = 1110\; 1110}\] After receiving the data, if the last byte (check-sum) is different from the 8 LSBs of the sum of the other 4 bytes, there was an error in the transmission. The MCU can thus check if the data was transmitted correctly.

Changing Fonts and Colours in the text

The function Serial.begin() starts the serial connection.

Arduino IDE style Fonts for functions etc:

Reoccurring Functions, Templates

<html><HTMLElement</html>
<span>InlineText</span>
<b>bold</b>
<font face="Courier New">TextInCourierNew</font>
<font style="color:#CD5307">TextInOrange</font>

Black:
<b><font face="Courier New">TextInBlack</font></b>

Orange:
<b><font face="Courier New"><font style="color:#CD5307">TextInOrange</font></font></b>

Blue:
<b><font face="Courier New"><font style="color:#0098A3">TextInBlue</font></font></b>

Green:
<b><font face="Courier New"><font style="color:#5A6B0F">TextInGreen</font></font></b>




Hexadecimal Color Codes: 
Orange (Objects, functions): #CD5307
Blue (Variables): #0098A3
Green (preprocessor commands): #5A6B0F

Basic: Text

Methods

Class.method()
Class.method()
Class.method()

Loops and control structures
for()
if()
setup()
loop()

Variables

const int
String
long
unsigned int
uint8_t