Part 18 - Update website to have style sheet
Missing Image!Missing Image!Missing Image!

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 :-
  1. Setup environment
  2. Change present working directory
  3. Create style sheet
  4. Improve layout of website
  5. Modify BitBake recipe
  6. Build, package & deploy on Zedboard
  7. Check everything is working

1. Setup environment

Setup Xilinx design environment for the 2020.2 toolset.
steve@Linux-Steve:/home/steve$ source xilinx.sh
Xilinx tools available tools at /opt/Xilinx :-
1) 2020.2 - Vivado - SDK - Vitis - PetaLinux
0) Exit
Please select tools required or exit : 1

Tools are as follows :-
vivado @ /opt/Xilinx/Vivado/2020.2/bin/vivado
vitis @ /opt/Xilinx/Vitis/2020.2/bin/vitis
petalinux-build @ /opt/Xilinx/PetaLinux/2020.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/avnet-digilent-zedboard-2020.2

3. Create style sheet

Create a style sheet to adjust the HTML elements used in the website.
steve@Linux-Steve:/home/steve/projects/petalinux/avnet-digilent-zedboard-2020.2$ 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@Linux-Steve:/home/steve/projects/petalinux/avnet-digilent-zedboard-2020.2$ 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@Linux-Steve:/home/steve/projects/petalinux/avnet-digilent-zedboard-2020.2$ 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. }

6. 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/avnet-digilent-zedboard-2020.2$ petalinux-build
steve@Linux-Steve:/home/steve/projects/petalinux/avnet-digilent-zedboard-2020.2$ petalinux-package --prebuilt --force
steve@Linux-Steve:/home/steve/projects/petalinux/avnet-digilent-zedboard-2020.2$ petalinux-boot --jtag --prebuilt 3

7. 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! Functionally of the website is exactly the same as before.

'projects' location : 'repos' location : 'downloads' location :
Copyright © 2021 Steve Haywood
Missing Image!
Missing Image!Missing Image!Missing Image!