Part 19 - Update website to have style sheet

Introduction

This tutorial details the steps required to add a style sheet to the website and edit the HTML to improve its overall appearance.

Aims

The aims of this tutorial are as follows :-

Setup environment
Change present working directory
Create style sheet
Improve layout of website
Modify BitBake recipe
Build, package & deploy on Zedboard
Check everything is working

1. Setup environment

Setup Xilinx design environment for the 2021.2 toolset.

steve@Linux-Steve:/home/steve$ source xilinx.sh
Xilinx tools available tools at /opt/Xilinx :-
1) 2021.2 - Vivado - SDK - Vitis - PetaLinux
0) Exit
Please select tools required or exit : 1

Tools are as follows :-
vivado @ /opt/Xilinx/Vivado/2021.2/bin/vivado
vitis @ /opt/Xilinx/Vitis/2021.2/bin/vitis
petalinux-build @ /opt/Xilinx/PetaLinux/2021.2/tool/tools/common/petalinux/bin/petalinux-build

2. Change present working directory

Change the present working directory to be the project directory.

steve@Linux-Steve:/home/steve$ cd /home/steve/projects/petalinux

3. Create style sheet

Create a style sheet to adjust the HTML elements used in the website.

steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/styles.css

styles.css

body
{
font-family: "Muli", sans-serif;
}
h2
{
margin: 0;
}
.section
{
margin: 0.2em;
padding: 1em;
background-color: #EFEFFF;
border-color: #CCCCFF;
border-width: 1px;
border-style: solid;
text-align: center;
}
table, th, td {
border: 1px solid #AAA;
border-collapse: collapse;
padding: 0.1em 0.5em;
}
table {
display: inline-block;
border: 0;
}
th {
background-color: #E0E0FF;
}
th, td {
height: 1.4em;
}
form {
display: inline-block;
}

4. Improve layout of website

Edit the existing dynamic webpage adding in elements to improve its overall appearance.

steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.cgi

index.cgi

#!/bin/sh
# Output Header
printf "Content-type: text/html\r\n\r\n"
# Get information
sys_host=$(hostname)
sys_time=$(date)
sys_load=$(awk '{print $1}' /proc/loadavg)
sys_up=$(awk '{print $1}' /proc/uptime)
cpu_model=$(grep model /proc/cpuinfo | cut -d : -f2 | tail -1 | sed 's/\s//')
cpu_cores=$(grep -c ^processor /proc/cpuinfo)
mem_total=$(free -m | awk 'NR==2{print $2}')
mem_used=$(free -m | awk 'NR==2{print $3}')
mem_free=$(free -m | awk 'NR==2{print $4}')
net_mac=$(cat /sys/class/net/eth0/address)
net_ip_loc=$(ip a | grep inet | grep -vw lo | grep -v inet6 | cut -d \/ -f1 | sed 's/[^0-9\.]*//g')
net_ip_ext=$(wget -q -O- http://ipecho.net/plain)
# Output HTML
printf '<!DOCTYPE html>'
printf '<html lang="en">'
printf '<head>'
printf '<meta http-equiv="content-type" content="text/html; charset=UTF-8">'
printf '<link href="../styles.css" rel="stylesheet">';
printf '<script src="../uptime.js"></script>';
printf '<title>Zedboard Webserver</title>'
printf '</head>'
printf '<body>'
printf '<div class="section"><h2>Zedboard Webserver</h2></div>'
printf '<div class="section"><img src="../zedboard.png" alt="Missing Image!"></div>'
printf '<div class="section">'
printf '<table>'
printf '<tr><th colspan="2">System</th></tr>'
printf '<tr><td>Hostname</td>'
printf '<td>%s</td>' "${sys_host}"
printf '</tr><tr><td>Time</td><td>%s</td></tr>' "${sys_time}"
printf '<tr><td>Uptime</td><td><span id="uptime_text">%.2f</span> seconds <button onclick="GetUpTime()">Refresh</button> Auto : ' ${sys_up}
printf '<select onchange="SetTimeout(this);">'
printf ' <option value="0">Off</option>'
printf ' <option value="1">1s</option>'
printf ' <option value="5">5s</option>'
printf '</select>'
printf '</td></tr>'
printf '</table>'
printf '<table>'
printf '<tr><th colspan="2">CPU</th></tr>'
printf '<tr><td>Model</td>'
printf '<td>%s</td></tr>' "${cpu_model}"
printf '<tr><td>Cores</td><td>%d</td></tr>' ${cpu_cores}
printf '<tr><td>Load</td><td>%.2f</td></tr>' ${sys_load}
printf '</table>'
printf '<table>'
printf '<tr><th colspan="2">Memory</th></tr>'
printf '<tr><td>Total</td><td>%d Mb</td></tr>' ${mem_total}
printf '<tr><td>Used</td><td>%d Mb</td></tr>' ${mem_used}
printf '<tr><td>Free</td><td>%d Mb</td></tr>' ${mem_free}
printf '</table>'
printf '<table>'
printf '<tr><th colspan="2">Network</th></tr>'
printf '<tr><td>MAC Address</td><td>%s</td></tr>' "${net_mac}"
printf '<tr><td>Internal IP</td><td>%s</td></tr>' "${net_ip_loc}"
printf '<tr><td>External IP</td><td>%s</td></tr>' "${net_ip_ext}"
printf '</table>'
printf '</div>'
printf '<div class="section">'
printf '<form onsubmit="return false;">'
printf '<table>'
printf '<tr><th colspan="4">Poke Memory Location</th></tr>'
printf '<tr>'
printf '<td><label for="waddr">Address : </label>'
printf '<input type="text" id="waddr" name="waddr" value="0x41200000" size="10"></td>'
printf '<td><label for="wdata">Data : </label>'
printf '<input type="text" id="wdata" name="wdata" value="0x00000000" size="10"></td>'
printf '<td><input type="submit" value="Poke" onclick="WebWrite(this.form)"></td>'
printf '<td><span id="wstatus">Unknown</span></td>'
printf '</tr>'
printf '</table>'
printf '</form>'
printf '<form onsubmit="return false;">'
printf '<table>'
printf '<tr><th colspan="4">Peek Memory Location</th></tr>'
printf '<tr>'
printf '<td><label for="raddr">Address : </label>'
printf '<input type="text" id="raddr" name="raddr" value="0x41200008" size="10"></td>'
printf '<td><label for="rdata">Data : </label>'
printf '<input type="text" id="rdata" name="rdata" value="0X00000000" size="10" readonly="readonly"></td>'
printf '<td><input type="submit" value="Peek" onclick="WebRead(this.form)"></td>'
printf '<td><span id="rstatus">Unknown</span></td>'
printf '</tr>'
printf '</table>'
printf '</form>'
printf '</div>'
printf '<div class="section">Designed by Steve Haywood @ 2021</div>'
printf '</body>'
printf '</html>'

5. Modify BitBake recipe

Edit the BitBake recipe to add in the entries for styles.css such that it will be installed into /srv/www.

steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/website.bb

website.bb

#
# This file is the website recipe.
#
SUMMARY = "Simple website application"
SECTION = "PETALINUX/apps"
LICENSE = "MIT"
LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MIT;md5=0835ade698e0bcf8506ecda2f7b4f302"
SRC_URI = "file://index.html"
SRC_URI += "file://uptime.js"
SRC_URI += "file://zedboard.png"
SRC_URI += "file://styles.css"
SRC_URI += "file://cgi-bin/index.cgi"
SRC_URI += "file://cgi-bin/uptime.cgi"
FILES_${PN} += "/srv/www"
S = "${WORKDIR}"
do_install() {
install -d ${D}/srv/www
install -m 0644 ${S}/index.html ${D}/srv/www/index_original.html
install -m 0644 ${S}/uptime.js ${D}/srv/www
install -m 0644 ${S}/zedboard.png ${D}/srv/www
install -m 0644 ${S}/styles.css ${D}/srv/www
install -d ${D}/srv/www/cgi-bin
install -m 0755 ${S}/cgi-bin/index.cgi ${D}/srv/www/cgi-bin
install -m 0755 ${S}/cgi-bin/uptime.cgi ${D}/srv/www/cgi-bin
}

6. Build, package & deploy on Zedboard

Rebuild the project to include the updated files, package it up ready for deployment, power cycle the Zedboard and deploy via JTAG.

steve@Linux-Steve:/home/steve/projects/petalinux$ petalinux-build
steve@Linux-Steve:/home/steve/projects/petalinux$ petalinux-package --prebuilt --force
steve@Linux-Steve:/home/steve/projects/petalinux$ petalinux-boot --jtag --prebuilt 3

7. Check everything is working

Access the webserver running on the Zedboard using a browser pointing at the Zedboard's IP address. All being well something akin to the following webpage should be displayed. Missing Image!

Functionally of the website is exactly the same as before.