Bar
SpaceWire UK
Specialist providers of VHDL Intellectual Property & Design Services
BarBarBarBar
Tutorial
Missing Image!
Part 12 - Update website to have style sheet

Introduction

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

Aims

The aims of this tutorial are as follows :-

    Part 1 - Project Setup

    1. Setup environment
    2. Change present working directory

    Part 2 - Create & integrate Style Sheet into Website

    1. Create style sheet
    2. Improve layout of website
    3. Modify BitBake recipe

    Part 3 - Build & package PetaLinux

    1. Build PetaLinux
    2. Package PetaLinux

    Part 4 - Hardware Deployment

    1. Setup Zedboard hardware
    2. Launch MiniCom terminal emulator
    3. Run PetaLinux on Zedboard via JTAG
    4. Check everything is working as expected

    Part 5 - Revision Control

    1. Commit to repository

    Part 6 - Quickstart

    1. Obtain tutorial files from Bitbucket, create & build project, deploy on Zedboard
    #### 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. Change present working directory

    Change the present working directory to be the project directory.
    steve@Desktop:~$ cd ~/projects/zedboard_linux/os/petalinux
    #### Part 2 - Create & integrate Style Sheet into Website ####

    3. Create style sheet

    Create a style sheet to adjust the HTML elements used in the website.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/styles.css

    styles.css

    1. body
    2. {
    3.   font-family: "Muli", sans-serif;
    4. }

    5. h2
    6. {
    7.   margin: 0;
    8. }

    9. .section
    10. {
    11.   margin: 0.2em;
    12.   padding: 1em;
    13.   background-color: #EFEFFF;
    14.   border-color: #CCCCFF;
    15.   border-width: 1px;
    16.   border-style: solid;
    17.   text-align: center;
    18. }

    19. table, th, td {
    20.   border: 1px solid #AAA;
    21.   border-collapse: collapse;
    22.   padding: 0.1em 0.5em;
    23. }

    24. table {
    25.   display: inline-block;
    26.   border: 0;
    27. }


    28. th {
    29.   background-color: #E0E0FF;
    30. }

    31. th, td {
    32.   height: 1.4em;
    33. }

    34. form {
    35.   display: inline-block;
    36. }

    4. Improve layout of website

    Edit the existing dynamic webpage adding in elements to improve its overall appearance.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/cgi-bin/index.cgi

    index.cgi

    1. #!/bin/sh

    2. # Output Header
    3. printf "Content-type: text/html\r\n\r\n"

    4. # Get information
    5. sys_host=$(hostname)
    6. sys_time=$(date)
    7. sys_load=$(awk '{print $1}' /proc/loadavg)
    8. sys_up=$(awk '{print $1}' /proc/uptime)
    9. cpu_model=$(grep model /proc/cpuinfo | cut -d : -f2 | tail -1 | sed 's/\s//')
    10. cpu_cores=$(grep -c ^processor /proc/cpuinfo)
    11. mem_total=$(free -m | awk 'NR==2{print $2}')
    12. mem_used=$(free -m | awk 'NR==2{print $3}')
    13. mem_free=$(free -m | awk 'NR==2{print $4}')
    14. net_mac=$(cat /sys/class/net/eth0/address)
    15. net_ip_loc=$(ip a | grep inet | grep -vw lo | grep -v inet6 | cut -d \/ -f1 | sed 's/[^0-9\.]*//g')
    16. net_ip_ext=$(wget -q -O- http://ipecho.net/plain)

    17. # Output HTML
    18. printf '<!DOCTYPE html>'
    19. printf '<html lang="en">'
    20. printf '<head>'
    21. printf '<meta http-equiv="content-type" content="text/html; charset=UTF-8">'
    22. printf '<link href="../styles.css" rel="stylesheet">';
    23. printf '<script src="../uptime.js"></script>';
    24. printf '<title>Zedboard Webserver</title>'
    25. printf '</head>'
    26. printf '<body>'

    27. printf '<div class="section"><h2>Zedboard Webserver</h2></div>'

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

    29. printf '<div class="section">'

    30. printf '<table>'
    31. printf '<tr><th colspan="2">System</th></tr>'
    32. printf '<tr><td>Hostname</td>'
    33. printf '<td>%s</td>' "${sys_host}"
    34. printf '</tr><tr><td>Time</td><td>%s</td></tr>' "${sys_time}"
    35. printf '<tr><td>Uptime</td><td><span id="uptime_text">%.2f</span> seconds ​<button onclick="GetUpTime()">Refresh</button>​ Auto : ' ${sys_up}
    36. printf '<select onchange="SetTimeout(this);">'
    37. printf '  <option value="0">Off</option>'
    38. printf '  <option value="1">1s</option>'
    39. printf '  <option value="5">5s</option>'
    40. printf '</select>'
    41. printf '</td></tr>'
    42. printf '</table>'

    43. printf '<table>'
    44. printf '<tr><th colspan="2">CPU</th></tr>'
    45. printf '<tr><td>Model</td>'
    46. printf '<td>%s</td></tr>' "${cpu_model}"
    47. printf '<tr><td>Cores</td><td>%d</td></tr>' ${cpu_cores}
    48. printf '<tr><td>Load</td><td>%.2f</td></tr>' ${sys_load}
    49. printf '</table>'

    50. printf '<table>'
    51. printf '<tr><th colspan="2">Memory</th></tr>'
    52. printf '<tr><td>Total</td><td>%d Mb</td></tr>' ${mem_total}
    53. printf '<tr><td>Used</td><td>%d Mb</td></tr>' ${mem_used}
    54. printf '<tr><td>Free</td><td>%d Mb</td></tr>' ${mem_free}
    55. printf '</table>'

    56. printf '<table>'
    57. printf '<tr><th colspan="2">Network</th></tr>'
    58. printf '<tr><td>MAC Address</td><td>%s</td></tr>' "${net_mac}"
    59. printf '<tr><td>Internal IP</td><td>%s</td></tr>' "${net_ip_loc}"
    60. printf '<tr><td>External IP</td><td>%s</td></tr>' "${net_ip_ext}"
    61. printf '</table>'

    62. printf '</div>'

    63. printf '<div class="section">'

    64. printf '<form onsubmit="return false;">'
    65. printf '<table>'
    66. printf '<tr><th colspan="4">Poke Memory Location</th></tr>'
    67. printf '<tr>'
    68. printf '<td><label for="waddr">Address : </label>'
    69. printf '<input type="text" id="waddr" name="waddr" value="0x41200000" size="10"></td>'
    70. printf '<td><label for="wdata">Data : </label>'
    71. printf '<input type="text" id="wdata" name="wdata" value="0x00000000" size="10"></td>'
    72. printf '<td><input type="submit" value="Poke" onclick="WebWrite(this.form)"></td>'
    73. printf '<td><span id="wstatus">Unknown</span></td>'
    74. printf '</tr>'
    75. printf '</table>'
    76. printf '</form>'

    77. printf '<form onsubmit="return false;">'
    78. printf '<table>'
    79. printf '<tr><th colspan="4">Peek Memory Location</th></tr>'
    80. printf '<tr>'
    81. printf '<td><label for="raddr">Address : </label>'
    82. printf '<input type="text" id="raddr" name="raddr" value="0x41200008" size="10"></td>'
    83. printf '<td><label for="rdata">Data : </label>'
    84. printf '<input type="text" id="rdata" name="rdata" value="0X00000000" size="10" readonly="readonly"></td>'
    85. printf '<td><input type="submit" value="Peek" onclick="WebRead(this.form)"></td>'
    86. printf '<td><span id="rstatus">Unknown</span></td>'
    87. printf '</tr>'
    88. printf '</table>'
    89. printf '</form>'

    90. printf '</div>'

    91. printf '<div class="section">Designed by Steve Haywood @ 2021</div>'

    92. printf '</body>'
    93. printf '</html>'

    5. Modify BitBake recipe

    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/os/petalinux$ subl project-spec/meta-user/recipes-apps/website/website.bb

    website.bb

    1. #
    2. # This file is the website recipe.
    3. #

    4. SUMMARY = "Simple website application"
    5. SECTION = "PETALINUX/apps"
    6. LICENSE = "MIT"
    7. LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MIT;md5=0835ade698e0bcf8506ecda2f7b4f302"

    8. SRC_URI = "file://index.html"
    9. SRC_URI += "file://uptime.js"
    10. SRC_URI += "file://zedboard.png"
    11. SRC_URI += "file://styles.css"
    12. SRC_URI += "file://cgi-bin/index.cgi"
    13. SRC_URI += "file://cgi-bin/uptime.cgi"

    14. FILES_${PN} += "/srv/www"

    15. S = "${WORKDIR}"

    16. do_install() {
    17.      install -d ${D}/srv/www
    18.      install -m 0644 ${S}/index.html ${D}/srv/www/index_original.html
    19.      install -m 0644 ${S}/uptime.js ${D}/srv/www
    20.      install -m 0644 ${S}/zedboard.png ${D}/srv/www
    21.      install -m 0644 ${S}/styles.css ${D}/srv/www
    22.      install -d ${D}/srv/www/cgi-bin
    23.      install -m 0755 ${S}/cgi-bin/index.cgi ${D}/srv/www/cgi-bin
    24.      install -m 0755 ${S}/cgi-bin/uptime.cgi ${D}/srv/www/cgi-bin
    25. }

    #### Part 3 - Build & package PetaLinux ####

    6. Build PetaLinux

    Rebuild the project to include the updated files.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-build

    7. Package PetaLinux

    Package up the project ready for deployment.
    steve@Desktop:~/projects/zedboard_linux/os/petalinux$ petalinux-package --prebuilt --force
    #### Part 4 - Hardware Deployment ####

    8. Setup Zedboard hardware

    Connect up the hardware as follows :-
    1. Xubuntu PC USB ⇄ Zedboard USB JTAG/Debug
    2. Xubuntu PC USB ⇄ Zedboard USB UART
    3. Zedboard Ethernet ⇄ Router
    4. Xubuntu PC Ethenet ⇄ Router
    5. Router ⇄ Internet
    Missing Image! Set the boot mode jumpers on the Zedboard for JTAG. Missing Image! Power on the Zedboard.

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

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

    11. 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! Functionally of the website is exactly the same as before.
    #### Part 5 - Revision Control ####

    12. Commit to repository

    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 -am "Added Style Sheet and improved webpage layout for website application."
    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
    #### Part 6 - Quickstart ####

    13. 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 :-
    1. Build PetaLinux
    2. Package PetaLinux
    3. Setup Zedboard hardware
    4. Launch MiniCom terminal emulator
    5. Run PetaLinux on Zedboard via JTAG
    6. Check everything is working as expected