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

Setup environment
Change present working directory
Add form elements to website
Add extra Javascript functions
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. 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@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 '<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@Linux-Steve:/home/steve/projects/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 === "failed") {
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.sh?addr=" + form.waddr.value + "&val=" + 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 === "failed") {
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.sh?addr=" + form.raddr.value, true);
read_req.send(null);
}
}

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

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

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.