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

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.

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/os/petalinux

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$ 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 '<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>'

Direct download available here :-

steve@Desktop:~/projects/zedboard_linux$ wget https://spacewire.co.uk/tutorial/shared/repos/0012/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 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$ subl os/petalinux/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);
  }
}

Direct download available here :-

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

Check out the changes.

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

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!

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.

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 -a -m "Added peek/poke CGI access to website application."
steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git push
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 origin v6.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 - Enchance website application

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

index.cgi

4. Add extra Javascript functions

uptime.js

5. Build PetaLinux

6. Package PetaLinux

7. Setup Zedboard hardware

8. Launch MiniCom terminal emulator

9. Run PetaLinux on Zedboard via JTAG

10. Check everything is working as expected

11. Commit to repository

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