Bar
SpaceWire UK
Specialist providers of VHDL Intellectual Property & Design Services
BarBarBarBar
Tutorial
Missing Image!
Part 19 - Add on-the-fly PL firmware load capability & enhance the peek/poke address table (22 February 2024)

Introduction

This tutorial details the steps required to load a new firmware image stored on the SD Card without the need to reboot PetaLinux. The Peek/Poke address table will also be enhanced to include a few new features (range widget, select widget, individual hex/dec display & copy section). Migration from JTAG load to SD Card load will be adapted from here on in so the SD Card can be used to provide extra files (firmware images in this case) to PetaLinux. The tutorial covers quite a range of activities and includes the use of numerous languages; C, HTML & Javascript.

Aims

The aims of this tutorial are as follows :-

    Part 1 - Project Setup

    1. Setup environment
    2. Obtain tutorial files from Bitbucket (optional)

    Part 2 - OS Development

    1. Change present working directory
    2. Bump Version
    3. Fix issue with Apache .bbappend
    4. Package project to produce boot image
    5. Copy files to SD Card
    6. Deploy on Zedboard via SD Card
    7. Launch terminal emulator
    8. Create load firmware C application
    9. Cross compile application
    10. Copy application to PetaLinux
    11. Create loadable binary for bitstream
    12. Check application is working as expected
    13. Modify Makefile & BitBake recipe

    Part 3 - Enhance website application

    1. Update HTML
    2. Update Javascript
    3. Check everything is working as expected

    Part 4 - Revisions Control

    1. Commit new & updated files
    2. Final checks
    #### Part 1 - Project Setup ####

    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. Obtain tutorial files from Bitbucket (optional)

    Starting from this point, having not followed the previous tutorials, can be achieved by obtaining the required files from BitBucket. The only prerequisite is that Part 1 - Installation of tools, setup of environment and creation of project area as been completed.

    Obtain OS source.
    steve@Desktop:~$ cd ~/projects
    steve@Desktop:~/projects$ git clone -b v12.0 https://bitbucket.org/spacewire_firmware/zedboard_linux
    #### Part 2 - OS Development ####

    3. Change present working directory

    Change the present working directory to be the project directory.
    steve@Desktop:~$ cd ~/projects/zedboard_linux/os/petalinux

    4. Bump Version

    Change the version (or revision) number for this new development, this prevents ghost (post-release, same version) builds from appearing.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sed -i 's/12.0/13.0/g' project-spec/meta-user/recipes-apps/website/files/project.txt

    5. Fix issue with Apache .bbappend

    The current location of the apache2_%.bbappend breaks the PetaLinux build process given a fresh clone of the repo (v12.0 tag). Moving this file to a more suitable location fixes the issue.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ mkdir -p project-spec/meta-user/recipes-httpd/apache2
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ git mv components/yocto/layers/meta-openembedded/meta-webserver/recipes-httpd/apache2/apache2_%.bbappend project-spec/meta-user/recipes-httpd/apache2/apache2_%.bbappend
    If step 2 was followed then execute the following to remove the stay directory & also to build PetaLinux.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ rm -r components
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-build

    6. Package project to produce boot image

    Package the project to produce the boot image BOOT.BIN, this will include the first stage boot loader zynq_fsbl.elf, the programmable logic system.bit, the Linux boot loader u-boot.elf and the device tree blob system.dtb.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-package --boot --force --fsbl images/linux/zynq_fsbl.elf --fpga images/linux/system.bit --uboot images/linux/u-boot.elf

    7. Copy files to SD Card

    Mount a FAT32 formatted SD card on the Xubuntu desktop and copy the required files onto it, then unmount the card so that it is ready for use on the Zedboard.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ cp /tftpboot/{BOOT.BIN,boot.scr,image.ub} /media/steve/petalinux

    8. Deploy on Zedboard via SD Card

    Power off the Zedboard, set the boot mode jumpers for SD card boot, insert the SD card and then power on the board. Missing Image!

    9. Launch 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. Create load firmware C application

    Create a new C application to access the FPGA Manager device driver and inform it to load a new bitstream. The FPGA Manager looks for bitstream images in the /lib/firmware directory, however it would be advantageous to load these from the SD Card. This can be achieved by simply creating a symbolic link, done within the C application.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/peekpokecgi/files/loadfirmware.c
    Something similar to the following should do the trick.

    loadfirmware.c

    1. //
    2. // File .......... loadfirmware.c
    3. // Author ........ Steve Haywood
    4. // Website ....... http://www.spacewire.co.uk
    5. // Project ....... SpaceWire UK Tutorial
    6. // Version ....... 1.0
    7. // Conception .... 9 February 2024
    8. // Standard ...... C17 (ISO/IEC 9899:2018)
    9. // Description ...
    10. //   Very simple CGI to load PL bitstream.
    11. //

    13. #include <stdio.h>
    14. #include <stdlib.h>
    15. #include <unistd.h>
    16. #include <fcntl.h>
    17. #include <string.h>

    19. int main()
    20. {
    21.   char *query;
    22.   char *firmware = "/sys/class/fpga_manager/fpga0/firmware";
    23.   char *target = "/lib/firmware";
    24.   int   fd;

    26.   int sl = symlink("/media/sd-mmcblk0p1/firmware", "/lib/firmware");

    28.   printf("Content-Type: text/plain\n\n");

    30.   query = getenv("QUERY_STRING");
    31.   if (query) {
    32.     fd = open(firmware, O_WRONLY);
    33.     if (fd >= 0) {
    34.       write(fd, query, strlen(query));
    35.       close(fd);
    36.     } else printf("Error: Failed to open %s", firmware);
    37.   } else printf("Error: No QUERY_STRING");
    38. }

    11. Cross compile application

    Cross compile the C code targetting the ARM processor.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ arm-linux-gnueabihf-gcc project-spec/meta-user/recipes-apps/peekpokecgi/files/loadfirmware.c -o /tmp/loadfirmware

    12. Copy application to PetaLinux

    Copy the compiled application over to PetaLinux.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ ssh-keygen -f /home/steve/.ssh/known_hosts -R 192.168.2.87
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ ssh-keyscan -H 192.168.2.87 >> ~/.ssh/known_hosts
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root scp /tmp/loadfirmware root@192.168.2.87:/srv/www/cgi-bin

    13. Create loadable binary for bitstream

    Create a bitstream only binary (.bin) to include the zedboard_leds_switches bitstream (.bit). To achieve this a Boot Image File (.bif) is required.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ cd /tmp
    steve@Desktop:/tmp$ printf 'all:\n{\n  system_wrapper.bit\n} ' > system_wrapper.bif

    system_wrapper.bif

    1. all:
    2. {
    3.   system_wrapper.bit
    4. }

    Copy the bitstream and generate the binary.
    steve@Desktop:/tmp$ cp ~/projects/zedboard_leds_switches/fw/vivado/project.runs/impl_1/system_wrapper.bit .
    steve@Desktop:/tmp$ bootgen -arch zynq -image system_wrapper.bif -process_bitstream bin -w
    steve@Desktop:/tmp$ cd -
    Create a firmware directory on the SD Card to hold the loadable firmware images and copy over the newly created binary
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root ssh -t root@192.168.2.87 'mkdir /media/sd-mmcblk0p1/firmware'
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root scp /tmp/system_wrapper.bit.bin root@192.168.2.87:/media/sd-mmcblk0p1/firmware/zedboard_leds_switches.bin

    14. Check application is working as expected

    Change the execute permissions on the loadfirmware application so it executes with root privileges (not recommended).
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root ssh -t root@192.168.2.87 'chmod +s /srv/www/cgi-bin/loadfirmware'
    Using curl enter the following URL to command the poke CGI to write 0x18 to the LED register at 0x40010000. This should light up the two middle LEDs.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ curl -w "\nReceived %{size_download} bytes\n" "http://192.168.2.87/cgi-bin/poke?0x40010000&0x18"
    Using curl enter the following URL to command the loadfirmware CGI to load the firmware.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ curl -w "\nReceived %{size_download} bytes\n" "http://192.168.2.87/cgi-bin/loadfirmware?zedboard_leds_switches.bin"
    All being well the following message should be seen in the MiniCom terminal window and the two LEDs should be turned off (registers inside PL reset to firmware defaults).
    root@petalinux:~# fpga_manager fpga0: writing zedboard_leds_switches.bin to Xilinx Zynq FPGA Manager

    15. Modify Makefile & BitBake recipe

    With confidence that the load firmware application is working OK the Makefile & BitBake recipe can be modified to include the new application in the PetaLinux build process.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/peekpokecgi/files/Makefile

    Makefile

    1. PEEK = peek
    2. POKE = poke
    3. PEEKSTRING = peekstring
    4. LOADFIRMWARE = loadfirmware

    6. # Add any other object files to this list below
    7. PEEK_OBJS = peek.o
    8. POKE_OBJS = poke.o
    9. PEEKSTRING_OBJS = peekstring.o
    10. LOADFIRMWARE_OBJS = loadfirmware.o

    12. all: $(PEEK) $(POKE) $(PEEKSTRING) $(LOADFIRMWARE)

    14. $(LOADFIRMWARE): $(LOADFIRMWARE_OBJS)
    15.   $(CC) $(LDFLAGS) -o $@ $(LOADFIRMWARE_OBJS) $(LDLIBS)

    17. $(PEEKSTRING): $(PEEKSTRING_OBJS)
    18.   $(CC) $(LDFLAGS) -o $@ $(PEEKSTRING_OBJS) $(LDLIBS)

    20. $(POKE): $(POKE_OBJS)
    21.   $(CC) $(LDFLAGS) -o $@ $(POKE_OBJS) $(LDLIBS)

    23. $(PEEK): $(PEEK_OBJS)
    24.   $(CC) $(LDFLAGS) -o $@ $(PEEK_OBJS) $(LDLIBS)

    26. clean:
    27.   -rm -f $(LOADFIRMWARE) $(PEEKSTRING) $(POKE) $(PEEK) *.elf *.gdb *.o

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

    peekpokecgi.bb

    1. #
    2. # This is the peekpokecgi aplication recipe
    3. #
    4. #

    6. SUMMARY = "peekpokecgi application"
    7. SECTION = "PETALINUX/apps"
    8. LICENSE = "MIT"
    9. LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MIT;md5=0835ade698e0bcf8506ecda2f7b4f302"
    10. SRC_URI = "file://peek.c \
    11.            file://poke.c \
    12.            file://peekstring.c \
    13.            file://loadfirmware.c \
    14.            file://Makefile \
    15.           "
    16. FILES_${PN} += "/srv/www/cgi-bin"
    17. S = "${WORKDIR}"
    18. CFLAGS_prepend = "-I ${S}/include"
    19. do_compile() {
    20.         oe_runmake
    21. }
    22. do_install() {
    23.         install -d ${D}/srv/www/cgi-bin
    24.         install -m 0755 ${S}/peek ${D}/srv/www/cgi-bin
    25.         install -m 0755 ${S}/poke ${D}/srv/www/cgi-bin
    26.         install -m 0755 ${S}/peekstring ${D}/srv/www/cgi-bin
    27.         install -m 0755 ${S}/loadfirmware ${D}/srv/www/cgi-bin
    28.         chmod a+s ${D}/srv/www/cgi-bin/peek
    29.         chmod a+s ${D}/srv/www/cgi-bin/poke
    30.         chmod a+s ${D}/srv/www/cgi-bin/peekstring
    31.         chmod a+s ${D}/srv/www/cgi-bin/loadfirmware
    32. }
    #### Part 3 - Enhance website application ####

    16. Update HTML

    Update the webpage to remove the global Number Format option and replace it with an individual option for each row of the peek/poke address table. Also include a table that displays the loadable firmware images as found in the firmware directory on the SD Card.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.php

    index.php

    1. <!--
    2. File .......... index.php
    3. Author ........ Steve Haywood
    4. Website ....... http://www.spacewire.co.uk
    5. Project ....... SpaceWire UK Tutorial
    6. Version ....... 1.1
    7. Conception .... 8 August 2023
    8. Standard ...... PHP 7
    9. Description ...
    10.   Homepage for Zedboard Webserver.
    11. -->

    13. <?php
    14. // Get information
    15. $sys_host = exec('hostname', $retval);
    16. $sys_time = exec('date', $retval);
    17. $sys_load = exec('awk \'{print $1}\' /proc/loadavg', $retval);
    18. $sys_up = exec('awk \'{print $1}\' /proc/uptime', $retval);
    19. $cpu_model = exec('grep model /proc/cpuinfo | cut -d : -f2 | tail -1 | sed \'s/\s//\'', $retval);
    20. $cpu_cores = exec('grep -c ^processor /proc/cpuinfo', $retval);
    21. $mem_total = exec('free -m | awk \'NR==2{print $2}\'', $retval);
    22. $mem_used = exec('free -m | awk \'NR==2{print $3}\'', $retval);
    23. $mem_free = exec('free -m | awk \'NR==2{print $4}\'', $retval);
    24. $net_mac = exec('cat /sys/class/net/eth0/address', $retval);
    25. $net_ip_loc = exec('ip a | grep inet | grep -vw lo | grep -v inet6 | cut -d \/ -f1 | sed \'s/[^0-9\.]*//g\'', $retval);
    26. $net_ip_ext = exec('wget -q -O- http://ipecho.net/plain', $retval);
    27. ?>

    29. <!DOCTYPE html>
    30. <html lang="en">
    31. <head>
    32. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    33. <link href="../styles.css" rel="stylesheet">
    34. <title>Zedboard Webserver</title>
    35. </head>
    36. <body onload="add_register()">

    38. <div class="section"><h2>Zedboard Webserver</h2></div>

    40. <div class="section">
    41. <table>
    42. <thead>
    43. <tr><th colspan="3">Operating System Information <button onclick="read_os_ids()">Read ID</button></th>
    44. </tr>
    45. </thead>
    46. <tbody>
    47. <tr>
    48. <td style="text-align:right">Description :</td>
    49. <td style="text-align:left" id="oid_0">Unknown</td>
    50. <td><img id="osid_0" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    51. </tr>
    52. <tr>
    53. <td style="text-align:right">Company :</td>
    54. <td style="text-align:left" id="oid_1">Unknown</td>
    55. <td><img id="osid_1" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    56. </tr>
    57. <tr>
    58. <td style="text-align:right">Author :</td>
    59. <td style="text-align:left" id="oid_2">Unknown</td>
    60. <td><img id="osid_2" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    61. </tr>
    62. <tr>
    63. <td style="text-align:right">Version :</td>
    64. <td style="text-align:left" id="oid_3">Unknown</td>
    65. <td><img id="osid_3" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    66. </tr>
    67. <tr>
    68. <td style="text-align:right">Timestamp :</td>
    69. <td style="text-align:left" id="oid_4">Unknown</td>
    70. <td><img id="osid_4" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    71. </tr>
    72. <tr>
    73. <td style="text-align:right">Hash :</td>
    74. <td style="text-align:left" id="oid_5">Unknown</td>
    75. <td><img id="osid_5" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    76. </tr>
    77. </tbody>
    78. </table>
    79. <table>
    80. <thead>
    81. <tr><th colspan="3">Firmware Information <input type="submit" value="Read ID" id="read_ids" onclick="read_ids()"></th>
    82. </tr>
    83. </thead>
    84. <tbody>
    85. <tr>
    86. <td style="text-align:right">Description :</td>
    87. <td style="text-align:left" id="id_0">Unknown</td>
    88. <td><img id="sid_0" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    89. </tr>
    90. <tr>
    91. <td style="text-align:right">Company :</td>
    92. <td style="text-align:left" id="id_1">Unknown</td>
    93. <td><img id="sid_1" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    94. </tr>
    95. <tr>
    96. <td style="text-align:right">Author :</td>
    97. <td style="text-align:left" id="id_2">Unknown</td>
    98. <td><img id="sid_2" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    99. </tr>
    100. <tr>
    101. <td style="text-align:right">Version :</td>
    102. <td style="text-align:left" id="id_3">Unknown</td>
    103. <td><img id="sid_3" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    104. </tr>
    105. <tr>
    106. <td style="text-align:right">Timestamp :</td>
    107. <td style="text-align:left" id="id_4">Unknown</td>
    108. <td><img id="sid_4" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    109. </tr>
    110. <tr>
    111. <td style="text-align:right">Hash :</td>
    112. <td style="text-align:left" id="id_5">Unknown</td>
    113. <td><img id="sid_5" style="vertical-align:middle" src="../amber.gif" title="Unknown!" alt="Missing Image!"></td>
    114. </tr>
    115. </tbody>
    116. </table>
    117. <table>
    118. <thead>
    119. <tr><th colspan="3">Loadable Firmware</th></tr>
    120. </thead>
    121. <tbody>
    122. <?php
    123.   $dirPath = "/media/sd-mmcblk0p1/firmware";
    124.   $files = scandir($dirPath);
    125.   foreach ($files as $file) {
    126.     $filePath = $dirPath . '/' . $file;
    127.     if (is_file($filePath)) {
    128.       echo "<tr><td style=\"text-align:left\">";
    129.       echo $file;
    130.       echo "</td><td><button onclick=\"loadfirmware('$file')\">Load</button></td><td><img id=\"fm_$file\" style=\"vertical-align:middle\" src=\"../amber.gif\" title=\"Unknown!\" alt=\"Missing Image!\"></td></tr>";
    131.     }
    132.   }
    133. ?>
    134. </tbody>
    135. </table>
    136. </div>

    138. <div class="section"><img src="../zedboard.png" alt="Missing Image!"></div>

    140. <div class="section">

    142. <table>
    143. <tr><th colspan="2">System</th></tr>
    144. <tr><td>Hostname</td>
    145. <td><?php echo $sys_host ?></td>
    146. </tr><tr><td>Time</td><td><?php echo $sys_time ?></td></tr>
    147. <tr><td>Uptime</td><td><span id="uptime_text"><?php echo $sys_up ?></span> seconds <button onclick="get_uptime()">Refresh</button> Auto :
    148. <select id="uptime" onchange="uptime();">
    149.   <option value="0">Off</option>
    150.   <option value="1">1s</option>
    151.   <option value="5">5s</option>
    152. </select>
    153. </td></tr>
    154. </table>

    156. <table>
    157. <tr><th colspan="2">CPU</th></tr>
    158. <tr><td>Model</td>
    159. <td><?php echo $cpu_model ?></td></tr>
    160. <tr><td>Cores</td><td><?php echo $cpu_cores ?></td></tr>
    161. <tr><td>Load</td><td><?php echo $sys_load ?></td></tr>
    162. </table>

    164. <table>
    165. <tr><th colspan="2">Memory</th></tr>
    166. <tr><td>Total</td><td><?php echo $mem_total ?> Mb</td></tr>
    167. <tr><td>Used</td><td><?php echo $mem_used ?> Mb</td></tr>
    168. <tr><td>Free</td><td><?php echo $mem_free ?> Mb</td></tr>
    169. </table>

    171. <table>
    172. <tr><th colspan="2">Network</th></tr>
    173. <tr><td>MAC Address</td><td><?php echo $net_mac ?></td></tr>
    174. <tr><td>Internal IP</td><td><?php echo $net_ip_loc ?></td></tr>
    175. <tr><td>External IP</td><td><?php echo $net_ip_ext ?></td></tr>
    176. </table>

    178. </div>

    180. <div class="section">
    181. <table id="registers">
    182. <tr>
    183. <th>Address</th>
    184. <th>Hex</th>
    185. <th>Peek Value</th>
    186. <th>Sel</th>
    187. <th>Peek</th>
    188. <th>Status</th>
    189. <th>Copy</th>
    190. <th colspan="2">Poke Value</th>
    191. <th>Sel</th>
    192. <th>Poke</th>
    193. <th>Status</th>
    194. <th>Description</th>
    195. </tr>
    196. </table>
    197. <br><br>
    198. <input title="Add new row to end of address table" type="button" value="Add" onclick="add_row()">
    199. <select title="Set type of row to add to address table" id="type">
    200.   <option value="0">Register</option>
    201.   <option value="1">Section</option>
    202. </select>
    203. <input title="Remove last address from table" type="button" value="Remove" onclick="rem_register()">
    204. <input title="Peek all selected addresses in table" type="button" value="Peek All" onclick="peek_all()">
    205. <input title="Copy all table peek values into poke values" type="button" value="Copy All" onclick="copy_all()">
    206. <input title="Poke all selected addresses in table" type="button" value="Poke All" onclick="poke_all()">
    207. Peek Refresh :
    208. <select title="Set timer interval for automatic peek of table addresses" id="timer" onchange="timer()">
    209.   <option value="0">Off</option>
    210.   <option value="1">1s</option>
    211.   <option value="5">5s</option>
    212. </select>
    213. Configuration :
    214. <button title="Create configuration file from table" onclick="create_config()">Create...</button> <a title="Right click and Save Link As... to locate and rename this file" download="config.txt" id="download" href="" style="display: none">config.txt</a>
    215. <input title="Read configuration file into table" type="file" id="load_config">
    216. </div>

    218. <div class="section">Designed by Steve Haywood @ 2021</div>

    220. <script src="../uptime.js"></script>

    222. </body>
    223. </html>

    17. Update Javascript

    Update the Javascript to include support for the new features; range widget, select widget, individual hex/dec display & copy section.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/uptime.js

    uptime.js

    1. //
    2. // File .......... uptime.js
    3. // Author ........ Steve Haywood
    4. // Website ....... http://www.spacewire.co.uk
    5. // Project ....... SpaceWire UK Tutorial
    6. // Version ....... 1.6
    7. // Conception .... 17 January 2022
    8. // Standard ...... ECMA-262
    9. // Description ...
    10. //   Javascript functions for the dynamic webpage.
    11. //

    13. // Constants
    14. const c_uns = 0; // Unsigned string
    15. const c_hex = 1; // Hexadecimal string

    17. // Requests
    18. var timer_uptime;
    19. var timer_peek_all;

    21. // Load PL Firmware
    22. function loadfirmware(filename) {
    23.   var url = "/cgi-bin/loadfirmware?" + filename;
    24.   if (window.XMLHttpRequest) {
    25.     var ajaxReq = new XMLHttpRequest();
    26.     ajaxReq.onreadystatechange = function() {
    27.       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    28.         var respText = ajaxReq.responseText;
    29.         var img_obj = document.getElementById("fm_" + filename);
    30.         // Unique number is added to image to avoid caching issues on separate animations
    31.         const now = Date.now();
    32.         if (respText.substr(0,6) == "Error:") {
    33.           img_obj.src = "../red.png?" + now;
    34.           img_obj.title = "Last loadfirmware failed : " + respText.substr(7);
    35.         } else {
    36.           img_obj.src = "../green.gif?" + now;
    37.           img_obj.title = "Last loadfirmware successful";
    38.         }
    39.       }
    40.     }
    41.     ajaxReq.open("POST", url, true);
    42.     ajaxReq.send(null);
    43.   }
    44. }

    46. // Download OS information file & display result
    47. async function read_os_ids() {
    48.   let response = await fetch("/project.txt");
    49.   if (response.status == 200) {
    50.     let ids = await response.text();
    51.     fields = ids.split(/\r?\n/);
    52.   }
    53.   for (var i = 0; i < 6; i++) {
    54.     const now = Date.now();
    55.     const txt_obj = document.getElementById("oid_" + i);
    56.     const img_obj = document.getElementById("osid_" + i);
    57.     if (response.status == 200) {
    58.       if (i < fields.length && fields[i] != "") {
    59.         img_obj.src = "../green.gif?" + now;
    60.         img_obj.title = "Last file fetch successful";
    61.         txt_obj.innerHTML = fields[i];
    62.       } else {
    63.         img_obj.src = "../red.gif?" + now;
    64.         img_obj.title = "Missing field information";
    65.         txt_obj.innerHTML = "Unknown";
    66.       }
    67.     } else {
    68.       img_obj.src = "../red.gif?" + now;
    69.       img_obj.title = "Last file fetch failed";
    70.       txt_obj.innerHTML = "Unknown";
    71.     }
    72.   }
    73. }

    75. // Peek all strings
    76. function read_ids() {
    77.   read_id(0x000, 0);
    78.   read_id(0x080, 1);
    79.   read_id(0x0C0, 2);
    80.   read_id(0x100, 3);
    81.   read_id(0x120, 4);
    82.   read_id(0x140, 5);
    83. }

    85. // Peek string & display result
    86. function read_id(offset, reg) {
    87.   var url = "/cgi-bin/peekstring?0x40000000&4096&" + offset + "&128";
    88.   if (window.XMLHttpRequest) {
    89.     var ajaxReq = new XMLHttpRequest();
    90.     ajaxReq.onreadystatechange = function() {
    91.       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    92.         var respText = ajaxReq.responseText;
    93.         var img_obj = document.getElementById("sid_" + reg);
    94.         // Unique number is added to image to avoid caching issues on separate animations
    95.         const now = Date.now();
    96.         if (respText.substr(0,6) == "Error:") {
    97.           img_obj.src = "../red.png?" + now;
    98.           img_obj.title = "Last peekstring failed : " + respText.substr(7);
    99.         } else {
    100.           const now = Date.now();
    101.           img_obj.src = "../green.gif?" + now;
    102.           img_obj.title = "Last peekstring successful";
    103.           document.getElementById("id_" + reg).innerHTML = respText;
    104.         }
    105.       }
    106.     }
    107.     ajaxReq.open("POST", url, true);
    108.     ajaxReq.send(null);
    109.   }
    110. }

    112. // Get uptime
    113. function get_uptime(reg) {
    114.   var url = "/cgi-bin/uptime.cgi";
    115.   if (window.XMLHttpRequest) {
    116.     var ajaxReq = new XMLHttpRequest();
    117.     ajaxReq.onreadystatechange = function() {
    118.       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    119.         var respText = ajaxReq.responseText;
    120.         txtObj = document.getElementById("uptime_text");
    121.         if (txtObj) {
    122.           txtObj.innerHTML = respText;
    123.         }
    124.       }
    125.     }
    126.     ajaxReq.open("POST", url, true);
    127.     ajaxReq.send(null);
    128.   }
    129. }

    131. // Update uptime timer
    132. function uptime() {
    133.   clearInterval(timer_uptime);
    134.   var uptime = document.getElementById("uptime");
    135.   var interval = uptime.value;
    136.   if (interval > 0) {
    137.     timer_uptime = setInterval("get_uptime()", 1000 * interval);
    138.   }
    139. }

    141. // Update peek_all timer
    142. function timer() {
    143.   clearInterval(timer_peek_all);
    144.   var timer = document.getElementById("timer");
    145.   interval = timer.value;
    146.   if (interval > 0) {
    147.     timer_peek_all = setInterval("peek_all()", 1000 * interval);
    148.   }
    149. }

    151. // Convert unsigned/hexadecimal number string into a specified number string.
    152. function fmtUnsignedLong(string, format) {
    153.   var hexStr;
    154.   const value = parseInt(string);
    155.   switch(format) {
    156.     case c_uns:
    157.       hexStr = value.toString(10);
    158.       break;
    159.     case c_hex:
    160.       hexStr = value.toString(16).toUpperCase();
    161.       hexStr = "0x" + "00000000".substr(0, 8 - hexStr.length) + hexStr;
    162.       break;
    163.     default:
    164.       break;
    165.   }
    166.   return hexStr;
    167. }

    169. // Call fmtUnsignedLong with type setting from row in peek/poke address table.
    170. function fmtUnsignedLongReg(reg, value) {
    171.   const disp_obj = document.getElementById("display_" + reg);
    172.   var hexStr = "0xNaN";
    173.   if (disp_obj) {
    174.     const format = (disp_obj.checked) ? (c_hex) : (c_uns);
    175.     hexStr = fmtUnsignedLong(value, format);
    176.   }
    177.   return hexStr;
    178. }


    181. // Copy peek to poke & update any associated widgets
    182. function copy(reg) {
    183.   const peek_obj = document.getElementById("peek_" + reg);
    184.   if (peek_obj) {
    185.     const poke_obj = document.getElementById("poke_" + reg);
    186.     if (poke_obj) {
    187.       poke_obj.value = peek_obj.value;
    188.     }
    189.     const range_obj = document.getElementById("poke_range_" + reg);
    190.     if (range_obj) {
    191.       range_obj.value = parseInt(peek_obj.value);
    192.     }
    193.     const select_obj = document.getElementById("poke_select_" + reg);
    194.     if (select_obj) {
    195.       select_obj.value = peek_obj.value;
    196.     }
    197.   }
    198. }

    200. // Copy selected peek to poke in section
    201. function copy_section(row) {
    202.   var obj_sel;
    203.   do {
    204.     row++;
    205.     obj_sel = document.getElementById("peek_sel_" + row);
    206.     if (obj_sel) {
    207.       if (obj_sel.checked) {
    208.         copy(row);
    209.       }
    210.     }
    211.   } while (obj_sel);
    212. }

    214. // Copy all peek to poke
    215. function copy_all() {
    216.   var table = document.getElementById("registers");
    217.   var rows = table.rows.length - 1;
    218.   for (var index = 0; index < rows; index++) {
    219.     copy(index);
    220.   }
    221. }

    223. // Peek address & display result
    224. function peek(reg) {
    225.   var url = "/cgi-bin/peek?" + document.getElementById("addr_" + reg).value;
    226.   if (window.XMLHttpRequest) {
    227.     var ajaxReq = new XMLHttpRequest();
    228.     ajaxReq.onreadystatechange = function() {
    229.       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    230.         var respText = ajaxReq.responseText;
    231.         var img_obj = document.getElementById("speek_" + reg);
    232.         // Unique number is added to image to avoid caching issues on separate animations
    233.         const now = Date.now();
    234.         if (respText.substr(0,6) == "Error:") {
    235.           img_obj.src = "../red.gif?" + now;
    236.           img_obj.title = "Last peek failed : " + respText.substr(7);
    237.         } else {
    238.           img_obj.src = "../green.gif?" + now;
    239.           img_obj.title = "Last peek successful";
    240.           document.getElementById("peek_" + reg).value = fmtUnsignedLongReg(reg, respText);
    241.         }
    242.       }
    243.     }
    244.     ajaxReq.open("POST", url, true);
    245.     ajaxReq.send(null);
    246.   }
    247. }

    249. // Peek all selected addresses in section
    250. function peek_section(row) {
    251.   var obj_sel;
    252.   do {
    253.     row++;
    254.     obj_sel = document.getElementById("peek_sel_" + row);
    255.     if (obj_sel) {
    256.       if (obj_sel.checked) {
    257.         peek(row);
    258.       }
    259.     }
    260.   } while (obj_sel);
    261. }

    263. // Peek all selected addresses in table
    264. function peek_all() {
    265.   var table = document.getElementById("registers");
    266.   var rows = table.rows.length - 1;
    267.   for (var index = 0; index < rows; index++) {
    268.     const obj_sel = document.getElementById("peek_sel_" + index);
    269.     if (obj_sel) {
    270.       if (obj_sel.checked) {
    271.         peek(index);
    272.       }
    273.     }
    274.   }
    275. }

    277. // Poke address & display result
    278. function poke(reg) {
    279.   var url = "/cgi-bin/poke?" + document.getElementById("addr_" + reg).value + "&" + document.getElementById("poke_" + reg).value;
    280.   if (window.XMLHttpRequest) {
    281.     var ajaxReq = new XMLHttpRequest();
    282.     ajaxReq.onreadystatechange = function() {
    283.       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    284.         var respText = ajaxReq.responseText;
    285.         var img_obj = document.getElementById("spoke_" + reg);
    286.         // Unique number is added to image to avoid caching issues on separate animations
    287.         const now = Date.now();
    288.         if (respText.substr(0,6) == "Error:") {
    289.           img_obj.src = "../red.gif?" + now;
    290.           img_obj.title = "Last poke failed : " + respText.substr(7);
    291.         } else {
    292.           img_obj.src = "../green.gif?" + now;
    293.           img_obj.title = "Last poke successful";
    294.         }
    295.       }
    296.     }
    297.     ajaxReq.open("POST", url, true);
    298.     ajaxReq.send(null);
    299.   }
    300. }

    302. // Poke value from input widget & update any associated widgets
    303. function poke_widget(reg) {
    304.   const poke_obj = document.getElementById("poke_" + reg);
    305.   if (poke_obj) {
    306.     const range_obj = document.getElementById("poke_range_" + reg);
    307.     if (range_obj) {
    308.       range_obj.value = parseInt(poke_obj.value);
    309.     }
    310.     const select_obj = document.getElementById("poke_select_" + reg);
    311.     if (select_obj) {
    312.       select_obj.value = poke_obj.value;
    313.     }
    314.   }
    315.   poke(reg);
    316. }

    318. // Poke value on Enter key from within input widget
    319. // Holding down Enter keeps on poking which is not desired - needs improvement!
    320. function poke_key(reg) {
    321.   if (event.key === 'Enter') {
    322.     poke_widget(reg);
    323.   }
    324. }

    326. // Update radix for peek & poke input widgets
    327. function update_radix(reg) {
    328.   const poke_obj = document.getElementById("poke_" + reg);
    329.   if (poke_obj) {
    330.     poke_obj.value = fmtUnsignedLongReg(reg, poke_obj.value);
    331.   }
    332.   const peek_obj = document.getElementById("peek_" + reg);
    333.   if (peek_obj) {
    334.     peek_obj.value = fmtUnsignedLongReg(reg, peek_obj.value);
    335.   }
    336. }

    338. // Poke value from range widget & update any associated widgets
    339. function poke_range(reg) {
    340.   const range_obj = document.getElementById("poke_range_" + reg);
    341.   if (range_obj) {
    342.     const poke_obj = document.getElementById("poke_" + reg);
    343.     if (poke_obj) {
    344.       poke_obj.value = fmtUnsignedLongReg(reg, range_obj.value);
    345.     }
    346.   }
    347.   poke(reg);
    348. }

    350. // Poke value from select widget & update any associated widgets
    351. function poke_select(reg) {
    352.   const select_obj = document.getElementById("poke_select_" + reg);
    353.   if (select_obj) {
    354.     const poke_obj = document.getElementById("poke_" + reg);
    355.     if (poke_obj) {
    356.       poke_obj.value = fmtUnsignedLongReg(reg, select_obj.value);
    357.     }
    358.   }
    359.   poke(reg);
    360. }

    362. // Poke all selected addresses in section
    363. function poke_section(row) {
    364.   var obj_sel;
    365.   do {
    366.     row++;
    367.     obj_sel = document.getElementById("poke_sel_" + row);
    368.     if (obj_sel) {
    369.       if (obj_sel.checked) {
    370.         poke_widget(row);
    371.       }
    372.     }
    373.   } while (obj_sel);
    374. }

    376. // Poke all selected addresses in table
    377. function poke_all() {
    378.   var table = document.getElementById("registers");
    379.   var rows = table.rows.length - 1;
    380.   for (var index = 0; index < rows; index++) {
    381.     const obj_sel = document.getElementById("poke_sel_" + index);
    382.     if (obj_sel) {
    383.       if (obj_sel.checked) {
    384.         poke_widget(index);
    385.       }
    386.     }
    387.   }
    388. }

    390. // Add row to table
    391. function add_row() {
    392.   const obj_type = document.getElementById("type");
    393.   const row_type = obj_type.value;
    394.   switch(row_type) {
    395.     case "0":
    396.       add_register();
    397.       break;
    398.     case "1":
    399.       add_section();
    400.       break;
    401.     default:
    402.       break;
    403.   }
    404. }

    406. // Add peek/poke row to table
    407. function add_register(reg) {
    408.   const table = document.getElementById("registers");
    409.   const next = table.rows.length - 1;
    410.   var addr = 0x40010000;
    411.   if (next > 0) {
    412.     const obj_addr = document.getElementById("addr_" + (next - 1));
    413.     if (obj_addr) {
    414.       addr = parseInt(obj_addr.value) + 4;
    415.     }
    416.   }
    417.   const fields = ["reg", addr.toString(), "true", "true", "0x00000000", "true", "Register @ " + fmtUnsignedLong(addr.toString(), c_hex)];
    418.   add_row_raw(fields);
    419. }

    421. // Add section row to table
    422. function add_section(reg) {
    423.   const fields = ["sec", "Section Description"];
    424.   add_row_raw(fields);
    425. }

    427. // Add row to table
    428. function add_row_raw(fields) {
    429.   const table = document.getElementById("registers");
    430.   const next = table.rows.length - 1;
    431.   const row = table.insertRow(-1);
    432.   var newcell;

    434.   // Separate out fields
    435.   var type            = fields[0];
    436.   if (type == "sec") {
    437.     var description   = fields[1];
    438.   } else {
    439.     var address       = fields[1];
    440.     var display_type  = fields[2];
    441.     var peek_select   = fields[3];
    442.     var options       = fields[4].split("#");
    443.     var poke_select   = fields[5];
    444.     var description   = fields[6];
    445.     // Decode fields
    446.     var disp_checked  = (display_type == "true") ? ("checked") : ("");
    447.     var format        = (display_type == "true") ? (c_hex) : (c_uns);
    448.     var peek_checked  = (peek_select == "true") ? ("checked") : ("");
    449.     var poke_checked  = (poke_select == "true") ? ("checked") : ("");
    450.   }

    452.   newcell = row.insertCell(-1);
    453.   if (type == "sec") {
    454.     newcell.colSpan = "4";
    455.     newcell.innerHTML = "--- Section ---";
    456.   } else {
    457.     newcell.innerHTML = '<input title="Address to peek/poke" type="text" id="addr_' + next + '" value="' + fmtUnsignedLong(address, c_hex) + '" size="10">';

    459.     newcell = row.insertCell(-1);
    460.     newcell.innerHTML = '<input title="Select peak/poke display type (unsigned/hexadecimal)" type="checkbox" id="display_' + next + '" ' + disp_checked + ' onchange="update_radix(' + next + ')">';

    462.     newcell = row.insertCell(-1);
    463.     newcell.innerHTML = '<input title="Value peeked at address" type="text" id="peek_' + next + '" value="'+ fmtUnsignedLong("0x0", format) +'" size="10" readonly="readonly">';

    465.     newcell = row.insertCell(-1);
    466.     newcell.innerHTML = '<input title="Select address for peeking" type="checkbox" id="peek_sel_' + next + '" ' + peek_checked + '>';
    467.   }

    469.   newcell = row.insertCell(-1);
    470.   if (type == "sec") {
    471.     newcell.innerHTML = '<input title="Peek all selected addresses in section" type="submit" value="Peek" onclick="peek_section(' + next + ')">';
    472.   } else {
    473.     newcell.innerHTML = '<input title="Peek address" type="submit" value="Peek" onclick="peek(' + next + ')">';
    474.   }

    476.   newcell = row.insertCell(-1);
    477.   if (type == "sec") {
    478.     newcell.innerHTML = '<img style="vertical-align:middle" src="../amber.gif" alt="Missing Image!">';
    479.   } else {
    480.     newcell.innerHTML = '<img title="Peek status" id="speek_' + next + '" style="vertical-align:middle" src="../amber.gif" alt="Missing Image!">';
    481.   }

    483.   newcell = row.insertCell(-1);
    484.   if (type == "sec") {
    485.     newcell.innerHTML = '<input title="Copy all selected peek values into poke values in section" type="submit" value=">>" onclick="copy_section(' + next + ')">';
    486.   } else {
    487.     newcell.innerHTML = '<input title="Copy peek value into poke value" type="submit" value=">>" onclick="copy(' + next + ')">';
    488.   }

    490.   newcell = row.insertCell(-1);
    491.   switch (type) {
    492.     case "sec":
    493.       newcell.colSpan = "3";
    494.       newcell.innerHTML = "--- Section ---";
    495.       break;
    496.     case "reg":
    497.       const poke_value    = fields[4];
    498.       newcell.innerHTML = '<input title="Value to poke at address" type="text" id="poke_' + next + '" value="'+ fmtUnsignedLong(poke_value, format) +'" size="10" onkeydown="poke_key(' + next + ')">';
    499.       newcell = row.insertCell(-1);
    500.       newcell.style.padding = "0";
    501.       break;
    502.     case "range":
    503.       var range_value   = options[0];
    504.       var range_min     = options[1];
    505.       var range_max     = options[2];
    506.       newcell.innerHTML = '<input title="Value to poke at address" type="text" id="poke_' + next + '" value="'+ fmtUnsignedLong(range_value, format) +'" size="10" onkeydown="poke_key(' + next + ')">';
    507.       newcell = row.insertCell(-1);
    508.       newcell.innerHTML = '<input title="Value to poke at address" style="width:100%" type="range" min="'+ range_min +'" max="'+ range_max +'" value="'+ range_value +'" id="poke_range_' + next + '" oninput="poke_range(' + next + ')">';
    509.       break;
    510.     case "select":
    511.       var opt_str = "";
    512.       var opt_sel;
    513.       var opt_pair;
    514.       const sel = options[0];
    515.       for (var index = 1; index < options.length; index++) {
    516.         opt_pair = options[index].split("^");
    517.         opt_sel = (sel == index - 1) ? (" selected") : ("");
    518.         opt_str = opt_str.concat('<option value="', opt_pair[0], '"', opt_sel + '>', opt_pair[1], '</option>');
    519.       }
    520.       newcell.innerHTML = '<input title="Value to poke at address" type="text" id="poke_' + next + '" value="'+ fmtUnsignedLong(sel, format) +'" size="10" onkeydown="poke_key(this, ' + next + ')">';
    521.       newcell = row.insertCell(-1);
    522.       newcell.innerHTML = '<select title="Value to poke at address" style="width:100%" id="poke_select_' + next + '" onchange="poke_select(' + next + ')">' + opt_str + '</select>';
    523.       break;
    524.     default:
    525.       break;
    526.   }

    528.   if (type == "sec") {
    529.     newcell = row.insertCell(-1);
    530.     newcell.innerHTML = '<input title="Poke all selected addresses in section" type="submit" value="Poke" onclick="poke_section(' + next + ')">';

    532.     newcell = row.insertCell(-1);
    533.     newcell.innerHTML = '<img style="vertical-align:middle" src="../amber.gif" alt="Missing Image!">';

    535.     newcell = row.insertCell(-1);
    536.     newcell.innerHTML = '<input title="Description of section" type="text" id="name_' + next + '" value="' + description + '" size="40">';
    537.   } else {
    538.     newcell = row.insertCell(-1);
    539.     newcell.innerHTML = '<input title="Select address for poking" type="checkbox" id="poke_sel_' + next + '" ' + poke_checked + '>';

    541.     newcell = row.insertCell(-1);
    542.     newcell.innerHTML = '<input title="Poke address" type="submit" value="Poke" onclick="poke_widget(' + next + ')">';

    544.     newcell = row.insertCell(-1);
    545.     newcell.innerHTML = '<img title="Poke status" id="spoke_' + next + '" style="vertical-align:middle" src="../amber.gif" alt="Missing Image!">';

    547.     newcell = row.insertCell(-1);
    548.     newcell.innerHTML = '<input title="Description of address" type="text" id="name_' + next + '" value="' + description + '" size="40">';
    549.   }
    550. }

    552. // Remove row from table
    553. function rem_register(reg) {
    554.   var table = document.getElementById("registers");
    555.   if (table.rows.length > 1) {
    556.     table.deleteRow(-1);
    557.   }
    558. }

    560. // Remove all rows from table
    561. function remove_all() {
    562.   var table = document.getElementById("registers");
    563.   var rows = table.rows.length - 1;
    564.   for (var index = 0; index < rows; index++) {
    565.     table.deleteRow(-1);
    566.   }
    567. }

    569. // Note: browser file access is made difficult for security reasons - there maybe a better way of doing file read & write.

    571. var config_file = null;

    573. // Create virtual configuration file from address table for user to download
    574. function create_config() {
    575.   var text = "";
    576.   var table = document.getElementById("registers");
    577.   const rows = table.rows.length - 1;
    578.   for (var index = 0; index < rows; index++) {
    579.     const obj_addr = document.getElementById("addr_" + index);
    580.     if (obj_addr) { // Register type
    581.       var addr = document.getElementById("addr_" + index).value;
    582.       var display = document.getElementById("display_" + index).checked;
    583.       var peek_sel = document.getElementById("peek_sel_" + index).checked;
    584.       var poke = document.getElementById("poke_" + index).value;
    585.       var poke_sel = document.getElementById("poke_sel_" + index).checked;
    586.       var name = document.getElementById("name_" + index).value;
    587.       text += "reg" + "|" + addr + "|" + display + "|" + peek_sel + "|" + poke + "|" + poke_sel + "|"+ name + "\n";
    588.     } else { // Section type
    589.       var name = document.getElementById("name_" + index).value;
    590.       text += "sec" + "|" + name + "\n";
    591.     }
    592.   }
    593.   const data = new Blob([text], {type: 'text/plain'});
    594.   if (config_file !== null) {
    595.     URL.revokeObjectURL(config_file);
    596.   }
    597.   config_file = URL.createObjectURL(data);
    598.   var link = document.getElementById('download');
    599.   link.href = config_file;
    600.   link.style.display = 'inline';
    601. }

    603. // Read configuration file and update address table
    604. function load_config(input) {
    605.   var file = input.target.files[0];
    606.   if (file) {
    607.     var reader = new FileReader();
    608.     reader.onload = function(input) {
    609.       var contents = input.target.result;
    610.       const lines = contents.split(/\r\n|\n/);
    611.       remove_all();
    612.       lines.forEach((line) => {
    613.         if (line.length > 0) {
    614.           var table = document.getElementById("registers");
    615.           var next = table.rows.length - 1;
    616.           const values = line.split("|");
    617.           switch(values[0]) {
    618.             case "reg":
    619.             case "sec":
    620.             case "range":
    621.             case "select":
    622.               add_row_raw(values);
    623.               break;
    624.             default:
    625.               alert("Error: Unrecognized table type found (" + values[0] + "), ignoring.");
    626.           }
    627.         }
    628.       });
    629.     };
    630.     reader.readAsText(file);
    631.   }
    632. }

    634. document.getElementById('load_config').addEventListener('change', load_config, false);

    18. Check everything is working as expected

    Copy the updated HTML & Javascript files over to PetaLinux.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root scp project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.php root@192.168.2.87:/srv/www/cgi-bin
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root scp project-spec/meta-user/recipes-apps/website/files/uptime.js root@192.168.2.87:/srv/www
    Access the webserver running on the Zedboard using a browser pointing at the Zedboard's IP address (192.168.2.87/cgi-bin/index.php). All being well something akin to the following webpage should be displayed. Missing Image! Update the LEDs & Switches configuration file to include the newly created range & select HTML widgets.

    Note the changes :-
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl ../../os/src/other/zedboard_leds_switches.txt

    zedboard_leds_switches.txt

    1. sec|AXI General Purpose IO - Zedboard Specific
    2. range|0x40010000|false|true|0#0#255|true|LEDs
    3. reg|0x40010008|true|true|0x00000000|false|DIP Switches
    4. reg|0x40010010|true|true|0x00000000|false|Push Buttons
    5. select|0x4001011C|true|true|0#0x00000000^Disabled#0x80000000^Enabled|true|Interrupt Enable
    6. select|0x40010128|false|true|0#0^No Channel#1^Channel 1 (LEDs)#2^Channel 2 (DIP Switches)#4^Channel 3 (Push Buttons)|true|Interrupt Enable
    7. select|0x40010120|false|true|0#0^No Channel#1^Channel 1 (LEDs)#2^Channel 2 (DIP Switches)#4^Channel 3 (Push Buttons)|true|Interrupt Status

    9. sec|AXI Register Bank
    10. reg|0x40020000|true|true|0x00000000|true|Register 0
    11. reg|0x40020004|true|true|0x456789AB|true|Register 1
    12. reg|0x40020008|true|true|0x00000000|true|Register 2
    13. reg|0x4002000C|true|true|0x0000FF00|true|Register 3

    Use the Browse button on the Webpage to select the updated zedboard_leds_switches.txt from /home/steve/os/src/others. All being well a more user friendly peek/poke address interface should be displayed.

    The video below shows the following sequence of evens.
    1. LEDs counting up from 0 (none illuminated) to 255 (all illuminated).
    2. DIP switches 0 & 7 changing from off to on.
    3. Interrupts being enabled for channel 3 (push buttons).
    4. Centre push button being pressed to trigger an interrupt.
    5. Triggered interrupt and button state being cleared.
    6. Interrupts being disabled.
    7. Left push button being pressed (no interrupt this time).
    #### Part 4 - Revisions Control ####

    19. Commit new & updated files

    Remove legacy configuration file & add new load firmware source file.
    steve@Desktop:~/projects/zedboard_linux$ git rm os/src/other/axi_gpio_zed.txt
    steve@Desktop:~/projects/zedboard_linux$ git add os/petalinux/project-spec/meta-user/recipes-apps/peekpokecgi/files/loadfirmware.c
    Check GIT status to make sure all is well and there are no spurious elements.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ cd ../..
    steve@Desktop:~/projects/zedboard_linux$ git status
    On branch master
    Your branch is up-to-date with 'origin/master'.

    Changes to be committed:
      (use "git restore --staged <file>..." to unstage)
            new file:   os/petalinux/project-spec/meta-user/recipes-apps/peekpokecgi/files/loadfirmware.c
            renamed:    os/petalinux/components/yocto/layers/meta-openembedded/meta-webserver/recipes-httpd/apache2/apache2_%.bbappend -> os/petalinux/project-spec/meta-user/recipes-httpd/apache2/apache2_%.bbappend
            deleted:    os/src/other/axi_gpio_zed.txt
    Changes not staged for commit:
      (use "git add <file>..." to update what will be committed)
      (use "git restore <file>..." to discard changes in working directory)
            modified:   os/petalinux/project-spec/meta-user/recipes-apps/peekpokecgi/files/Makefile
            modified:   os/petalinux/project-spec/meta-user/recipes-apps/peekpokecgi/peekpokecgi.bb
            modified:   os/petalinux/project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.php
            modified:   os/petalinux/project-spec/meta-user/recipes-apps/website/files/project.txt
            modified:   os/petalinux/project-spec/meta-user/recipes-apps/website/files/uptime.js
            modified:   os/src/other/zedboard_leds_switches.txt
    Looks good!

    Commit the updates, create an annotated tag and push the commit & tag up to the remote repository.
    steve@Desktop:~/projects/zedboard_linux$ git commit -am "Added the ability to load new PL firmware without a rebuild or reboot of PetaLinux. Updated the peek/poke address table to include range & select HTML elements."
    steve@Desktop:~/projects/zedboard_linux$ git push
    steve@Desktop:~/projects/zedboard_linux$ git tag -a v13.0 -m "PetaLinux, Peek/Poke, LED Runner, LAMP (Apache, SQLite, PHP & myLiteAdmin), Peek/Poke CGI, Load Firmware CGI, PL Access, Style Sheet, Register Bank & ID Strings with XSA from zedboard_leds_switches v5.0"
    steve@Desktop:~/projects/zedboard_linux$ git push origin v13.0

    20. Final checks

    Rebuild PetaLinux to include the updated GIT status, package it and deploy on the Zedboard.
    steve@Desktop:~/projects/zedboard_linux$ cd os/petalinux
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-build
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-package --boot --force --fsbl images/linux/zynq_fsbl.elf --fpga images/linux/system.bit --uboot images/linux/u-boot.elf
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ sshpass -p root scp /tftpboot/{BOOT.BIN,boot.scr,image.ub} root@192.168.2.87:/media/sd-mmcblk0p1
    root@petalinux:~# reboot
    Access the webserver running on the Zedboard using a browser pointing at the Zedboard's IP address (192.168.2.87/cgi-bin/index.php). Click the Read ID buttons in both the Operating System Information & Firmware Information sectons to read the Identification information from the OS filesystem & PL address space. All being well the following should be displayed in the Operating System Information & Firmware Information sections.

    There should be no unsavoury comments after the version numbers!

    Copyright © 2004-2024 SpaceWire UK. All rights reserved.