Part 11 - Update website to allow access to Programmable Logic address space

Introduction

This tutorial details the steps required to add form elements to the existing website such that the Programmable Logic address space can be accessed from a webpage.

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. Add form elements to website

Edit the existing dynamic webpage file to add read & write register functionality using HTML forms linked to Javascript functions. Lines 59-77 show the additions.

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 '<script src="../uptime.js"></script>';
printf '<title>Zedboard webserver</title>'
printf '</head>'
printf '<body>'
printf 'Hello from your Zedboard webserver...'
printf '<br>'
printf '<img src="../zedboard.png" alt="Missing Image!">'
printf '<br>System<br>'
printf 'Honstname: %s<br>' "${sys_host}"
printf 'Time: %s<br>' "${sys_time}"
printf 'Uptime: <span id="uptime_text">%.2f</span> seconds ' ${sys_up}
printf '<button onclick="GetUpTime()">Refresh</button>'
printf ' Auto : <select onchange="SetTimeout(this)">'
printf '<option value="0">Off</option>'
printf '<option value="1">1s</option>'
printf '<option value="5">5s</option>'
printf '</select><br>'
printf '<br>CPU<br>'
printf 'Model: %s<br>' "${cpu_model}"
printf 'Cores: %d<br>' ${cpu_cores}
printf 'Load: %.2f<br>' ${sys_load}
printf '<br>Memory<br>'
printf 'Total: %d Mb<br>' ${mem_total}
printf 'Used: %d Mb<br>' ${mem_used}
printf 'Free: %d Mb<br>' ${mem_free}
printf '<br>Network<br>'
printf 'MAC Address: %s<br>' "${net_mac}"
printf 'Local IP: %s<br>' "${net_ip_loc}"
printf 'External IP: %s<br>' "${net_ip_ext}"
printf '<br>';
printf '<form onsubmit="return false;">'
printf ' <label for="waddr">Write : address</label>'
printf ' <input type="text" id="waddr" name="waddr" value="0x41200000" size="10">'
printf ' <label for="wdata">data </label>'
printf ' <input type="text" id="wdata" name="wdata" value="0x00000000" size="10">'
printf ' <input type="submit" value="Write" onclick="WebWrite(this.form)">'
printf ' Status : <span id="wstatus">None</span>';
printf '</form>';
printf '<br>';
printf '<form onsubmit="return false;">'
printf ' <label for="raddr">Read : address</label>'
printf ' <input type="text" id="raddr" name="raddr" value="0x41200000" size="10">'
printf ' <label for="rdata">data</label>'
printf ' <input type="text" id="rdata" name="rdata" value="0x00000000" size="10" readonly>'
printf ' <input type="submit" value="Read" onclick="WebRead(this.form)">'
printf ' Status : <span id="rstatus">None</span>';
printf '</form>';
printf '</body>'
printf '</html>'

4. Add extra Javascript functions

Edit the existing Javascript file to add read and write register requests that call the peek & poke CGI scripts and update the webpage accordingly. Lines 37-80 show the additions.

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/uptime.js

uptime.js

// Requests
var uptime_req;
var timer_req;
var write_req;
var read_req;
// Receive data & update webpage accordingly
function GotUptime() {
if (uptime_req.readyState == 4 && uptime_req.status == 200) {
txtObj = document.getElementById("uptime_text");
if (txtObj !== null) {
txtObj.innerHTML = uptime_req.responseText;
}
}
}
// Setup request and ask for data return
function GetUpTime() {
if (window.XMLHttpRequest) {
uptime_req = new XMLHttpRequest();
uptime_req.abort();
uptime_req.onreadystatechange = GotUptime;
uptime_req.open("POST", "/cgi-bin/uptime.cgi", true);
uptime_req.send(null);
}
}
// Setup/Cancel timer request
function SetTimeout(obj) {
clearInterval(timer_req);
var interval = obj.value;
if (interval > 0) {
timer_req = setInterval("GetUpTime()", 1000 * interval);
}
}
// Receive data & update webpage accordingly
function GotWrite() {
if (write_req.readyState == 4 && write_req.status == 200) {
if (write_req.responseText.substr(0,6) == "Error:") {
document.getElementById("wstatus").innerHTML = "Failed";
} else {
document.getElementById("wstatus").innerHTML = "Success";
}
}
}
// Setup request and ask for data return
function WebWrite(form) {
if (window.XMLHttpRequest) {
write_req = new XMLHttpRequest();
write_req.abort();
write_req.onreadystatechange = GotWrite;
write_req.open("POST", "/cgi-bin/poke?" + form.waddr.value + "&" + form.wdata.value, true);
write_req.send(null);
}
}
// Receive data & update webpage accordingly
function GotRead() {
if (read_req.readyState == 4 && read_req.status == 200) {
if (read_req.responseText.substr(0,6) == "Error:") {
document.getElementById("rstatus").innerHTML = "Failed";
} else {
document.getElementById("rstatus").innerHTML = "Success";
document.getElementById("rdata").value = read_req.responseText.toUpperCase();
}
}
}
// Setup request and ask for data return
function WebRead(form) {
if (window.XMLHttpRequest) {
read_req = new XMLHttpRequest();
read_req.abort();
read_req.onreadystatechange = GotRead;
read_req.open("POST", "/cgi-bin/peek?" + form.raddr.value, true);
read_req.send(null);
}
}

5. Build PetaLinux

Rebuild the project to include the updated files.

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

6. Package PetaLinux

Package up the project ready for deployment.

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

7. 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.

8. 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

9. 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

10. 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!

Registers within the Programmable Logic can now be accessed directly using the Read & Write forms at the bottom of the webpage. To write a register set the write address, write data and press the Write button. Likewise to read a register set the read address and press the Read button. As before the LED register is located at 0x41200000 and the slide switch register at 0x41200008. The status of the executed request is shown next the the Status text. Note the Javascript functions do not contain any timeout functionality so if the CGI scripts do not respond with anything then no error status will be reported.

11. Commit to repository

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

steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git commit -am "Added peek/poke CGI access to website application."
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git tag -a v6.0 -m "PetaLinux, Peek/Poke, LED Runner, Webserver, Peek/Poke CGI & PL Access with XSA from zedboard_leds_switches v1.0"
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git push

12. 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