Part 12 - 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 :-

1. Setup environment

Setup Xilinx design environment for the 2021.2 toolset.

steve@Desktop:~$ xilinx
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@Desktop:~$ cd ~/projects/zedboard_linux/os/petalinux

3. Create style sheet

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

steve@Desktop:~/projects/zedboard_linux/os/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@Desktop:~/projects/zedboard_linux/os/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@Desktop:~/projects/zedboard_linux/os/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 PetaLinux

Rebuild the project to include the updated files.

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-build

7. Package PetaLinux

Package up the project ready for deployment.

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-package --prebuilt --force

8. Setup Zedboard hardware

Connect up the hardware as follows :-

Xubuntu PC USB ⇄ Zedboard USB JTAG/Debug
Xubuntu PC USB ⇄ Zedboard USB UART
Zedboard Ethernet ⇄ Router
Xubuntu PC Ethenet ⇄ Router
Router ⇄ Internet

Set the boot mode jumpers on the Zedboard for JTAG. Missing Image!

Power on the Zedboard.

9. Launch MiniCom terminal emulator

If not already running, open up a new terminal and launch the MiniCom terminal emulator.

steve@Desktop:~$ minized

Welcome to minicom 2.7.1

OPTIONS: I18n
Compiled on Dec 23 2019, 02:06:26.
Port /dev/ttyACM0, 06:34:25

Press CTRL-A Z for help on special keys

10. Run PetaLinux on Zedboard via JTAG

Power cycle the Zedboard and deploy the project via JTAG.

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-boot --jtag --prebuilt 3

11. Check everything is working as expected

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

Functionally of the website is exactly the same as before.

12. Commit to repository

Add and commit the new & updated files, create an annotated tag and push the commit & tag up to the remote repository.

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git add project-spec/meta-user/recipes-apps/website/files/styles.css
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git commit -am "Added Style Sheet and improved webpage layout for website application."
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git tag -a v7.0 -m "PetaLinux, Peek/Poke, LED Runner, Webserver, Peek/Poke CGI, PL Access & Style Sheet with XSA from zedboard_leds_switches v1.0"
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git push

13. Obtain tutorial files from Bitbucket, create & build project, deploy on Zedboard

The source files relating to this tutorial for the OS can be obtained from Bitbucket. The OS repository contains both PetaLinux and a local copy of the exported hardware (firmware).

The instructions below assume that Part 1 - Installation of tools, setup of environment and creation of project area has been completed in full and that the environment has been setup as per 1. Setup environment. The root project area ~/projects should be present and contain the common project. The zedboard_linux projects should NOT be present. Adjust the commands below to suit if the above differs.

Obtain OS source, build & deploy on Zedboard.

steve@Desktop:~$ cd ~/projects
steve@Desktop:~/projects$ git clone -b v4.0 https://bitbucket.org/spacewire_firmware/zedboard_linux
steve@Desktop:~/projects$ cd zedboard_linux/os/petalinux

Do something with the OS (if required) then perform the following steps :-

Build PetaLinux
Package PetaLinux
Setup Zedboard hardware
Launch MiniCom terminal emulator
Run PetaLinux on Zedboard via JTAG
Check everything is working as expected