Can you add a system clock to the home screen of the ipfire web console.
it helps when digging through the logs.
This is not an official feature and it modifies /var/ipfire/header.pl directly, so a Core Update may overwrite it. Still, if anyone wants a simple local customization and keeps a patch afterwards, it works nicely.
What it changes
It adds a running HH:MM:SS clock next to the traffic meter.
The traffic output is rendered in showmenu() inside header.pl, and the JavaScript can be added in openpage(). The GUI setting for the speed meter itself is the existing “show ajax speedmeter in footer” option.gui.cgi.
First: make a backup
cp -a /var/ipfire/header.pl /root/header.pl.bak.$(date +%F-%H%M%S)
cp -a /var/ipfire/header.pl /var/ipfire/header.pl.orig
Then edit the file:
nano /var/ipfire/header.pl
1. Add the clock in showmenu()
Find this block:
if ($settings{'SPEED'} ne 'off') {
print <<EOF;
<div id='traffic'>
<strong>$Lang::tr{'traffic stat title'}:</strong>
$Lang::tr{'traffic stat in'} <span id='rx_kbs'>--.-- bit/s</span>
$Lang::tr{'traffic stat out'} <span id='tx_kbs'>--.-- bit/s</span>
</div>
EOF
}
Replace it with this:
if ($settings{'SPEED'} ne 'off') {
print <<EOF;
<div id='traffic'>
<strong>$Lang::tr{'traffic stat title'}:</strong>
$Lang::tr{'traffic stat in'} <span id='rx_kbs'>--.-- bit/s</span>
$Lang::tr{'traffic stat out'} <span id='tx_kbs'>--.-- bit/s</span>
<span id='topclock' style='display:inline-block; margin-left:14px; padding-left:12px; border-left:1px solid #999; white-space:nowrap;'>--:--:--</span>
</div>
EOF
}
2. Add the JavaScript in openpage()
Find this part:
$extrahead
<script type="text/javascript">
function swapVisibility(id) {
\$('#' + id).toggle();
}
</script>
Replace it with:
$extrahead
<script type="text/javascript">
function swapVisibility(id) {
\$('#' + id).toggle();
}
function ipfireUpdateClock() {
var el = document.getElementById('topclock');
if(!el)return;
var d = new Date();
var hh = String(d.getHours()).padStart(2, '0');
var mm = String(d.getMinutes()).padStart(2, '0');
var ss = String(d.getSeconds()).padStart(2, '0');
el.textContent = hh + ':' + mm + ':' + ss;
}
document.addEventListener('DOMContentLoaded', function() {
ipfireUpdateClock();
window.setInterval(ipfireUpdateClock, 1000);
});
</script>
Why inline CSS?
I originally tried using a CSS class, but in my case the border styling only worked reliably with inline CSS.
The reason seems to be that header.pl outputs its own embedded style block first, and afterwards the main theme stylesheet is loaded. So class-based styling can get overridden later, while the inline version works consistently. That load order is visible directly in openpage() in header.pl.
3. Check the syntax
perl -c /var/ipfire/header.pl
You should get:
/var/ipfire/header.pl syntax OK
4. Reload the WebGUI
Then reload the WebGUI in the browser.
A hard refresh helps:
-
Ctrl + F5on Windows/Linux -
Cmd + Shift + Ron macOS
If something goes wrong
Check the Apache error log:
tail -n 50 /var/log/httpd/error_log
If necessary, restore the backup:
cp -a /root/header.pl.bak.YYYY-MM-DD-HHMMSS /var/ipfire/header.pl
Recommended: create a patch afterwards
Once it works, I’d strongly recommend generating a patch so the change can be reapplied after an update:
diff -u /var/ipfire/header.pl.orig /var/ipfire/header.pl > /root/ipfire-topclock.patch
Later you can reapply it with:
cd /
patch -p0 < /root/ipfire-topclock.patch
perl -c /var/ipfire/header.pl
Maybe this is useful for you.
As offset in system time can lead to various problems. I would love to see the system time exactly where you placed it. Would be great, if your code would be accepted.
I don’t mean to be rude and may be missing something, but what’s the point of displaying my local system time in the ipfire GUI?
Ok will do. I will use my linux programing. Im not the greatest but i manage. Dont worry im a expert in install ipfire if i mess up.