The dynamic (client side) website will contain the same elements as the previous dynamic (server side) website along with the ability to refresh the uptime element without reloading the whole page.
Create a shell script that returns the uptime in seconds.
steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/cgi-bin/uptime.cgi
- #!/bin/sh
-
- # Output Header
- printf "Content-type: text/html\r\n\r\n"
-
- # Output Command
- awk '{print $1}' /proc/uptime
Create a Javascript file that contains the functions required to send & receive data to & from the webserver. Also add a function to enable & disable a timer.
steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/uptime.js
- // Requests
- var uptime_req;
- var timer_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);
- }
- }
Modify the
index.cgi webpage as follows :-
- Add an include entry for the new uptime.js Javascript file (line 25).
- Modify the uptime entry (line 36) to wrap the data inside an element with the unique ID of uptime_text as used by the GotUpTime Javascript function.
- Add a button (line 37) to call the GetUpTime Javascript function such that the uptime can be refreshed when the button is pressed without reloading the whole page.
- Add a dropdown (lines 38-42) to call the SetTimeout Javascript function such that a timer can be used to automatically refresh the uptime without reloading the whole page.
steve@Linux-Steve:/home/steve/projects/petalinux$ subl project-spec/meta-user/recipes-apps/website/files/cgi-bin/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 '</body>'
- printf '</html>'
Reload the page to refresh all the information displayed, most of which is static except for elements such as time, uptime, load & memory.
The index.cgi page can be accessed directly via [Zedboard IP]/cgi-bin/index.cgi and the original index.html via [Zedboard IP]/index_original.html.
Reload the page to refresh all the information displayed or click on the Refresh button to refresh only the uptime. Use the Auto dropdown to select the interval of an automatic uptime refresh.