Part 12 - Update website to have style sheet

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

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

Change the present working directory to be the project directory.

steve@Desktop:~$ cd ~/projects/zedboard_linux

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

steve@Desktop:~/projects/zedboard_linux$ subl os/petalinux/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;
}

Direct download available here :-

steve@Desktop:~/projects/zedboard_linux$ wget https://spacewire.co.uk/tutorial/shared/repos/0013/zedboard_linux/os/petalinux/project-spec/meta-user/recipes-apps/website/files/styles.css -O os/petalinux/project-spec/meta-user/recipes-apps/website/files/styles.css

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

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

Direct download available here :-

steve@Desktop:~/projects/zedboard_linux$ wget https://spacewire.co.uk/tutorial/shared/repos/0013/zedboard_linux/os/petalinux/project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.cgi -O os/petalinux/project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.cgi

Check out the changes.

steve@Desktop:~/projects/zedboard_linux$ git difftool os/petalinux/project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.cgi

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$ subl os/petalinux/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
}

Direct download available here :-

steve@Desktop:~/projects/zedboard_linux$ wget https://spacewire.co.uk/tutorial/shared/repos/0013/zedboard_linux/os/petalinux/project-spec/meta-user/recipes-apps/website/website.bb -O os/petalinux/project-spec/meta-user/recipes-apps/website/website.bb

Check out the changes.

steve@Desktop:~/projects/zedboard_linux$ git difftool os/petalinux/project-spec/meta-user/recipes-apps/website/website.bb

Rebuild the project to include the updated files.

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

Package up the project ready for deployment.

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

If not already, 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.

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

Power cycle the Zedboard and deploy the project via JTAG.

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

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.

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 -a -m "Added Style Sheet and improved webpage layout for website application."
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git push
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 origin v7.0

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

Introduction

Aims

Part 1 - Project Setup

Part 2 - Create & integrate Style Sheet into Website

Part 3 - Build & package PetaLinux

Part 4 - Hardware Deployment

Part 5 - Revision Control

Part 6 - Quickstart

1. Setup environment

2. Change present working directory

3. Create style sheet

styles.css

4. Improve layout of website

index.cgi

5. Modify BitBake recipe

website.bb

6. Build PetaLinux

7. Package PetaLinux

8. Setup Zedboard hardware

9. Launch MiniCom terminal emulator

10. Run PetaLinux on Zedboard via JTAG

11. Check everything is working as expected

12. Commit to repository

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