IMPORTANT UPDATE: Thanks to the work of @ndye, if you are on openHABian 1.6.4, you can install the custom theme through openhabian-config using menu 21.
I use a lot Frontail, both for logging, both on a wall-mounted tablet displaying some fancy HABPanel interface (maybe I will replace it with the new OH3 UI soon). Sometimes for quick access I also use it from my smartphone.
I would like to share what I did to make Frontail look better, both for readability, both to make it look nicer on my HABPanel installation. Basically I tried to do what has been done by Christoph for multitail.
I have found some previous posts about Frontail color coding, here and here. This second link is very informative, so I would like to thank @rdhaese because he made my life much easier with his tutorial.
Unfortunately, it is not just a matter of modding a css file, which would be ideal - pretty easy if you know basic html and css. The problem is that the theming implementation of Frontail is kind of limited, it is hardcoded with a bunch of spans inline with the html code, it doesn’t use css .classes and also it doesn’t seem to support RegEx. Moreover, the responsive version is not very optimized, logs are pretty hard to read on tablet and mobile devices.
I tried to do my best to modify the code, even tho I have very limited knowledge of JS and Regular Expressions.
I would like to share what I succeedded to do, it may help others dealing with Frontail, and if someone wants to bring it further, I would be glad to learn how it could be done in a better way.
In case of future modifications or improvements, I will always keep this first post updated.
FILES INVOLVED
The files to take in consideration, in my openHABian setup (OH3 on a rPi4), are the following. Please consider the paths may differ if you are not using openHABian.
/usr/lib/node_modules/frontail/web/assets/app.js
This js file contains many funcitions, including the ones that make the color coding happen.
This file is called from: usr/lib/node_modules/frontail/web/index.html, which is the html page that is loaded when you load Frontail in your browser.
/usr/lib/node_modules/frontail/preset/… .json
These files define the code to inject in the html to highlight single words, lines, etc. For example:
means: if you find the string “[ERROR]” in a line, make its color red. The result is that the word “[ERROR]” gets wrapped inside a <span style="color: #FF6464 !important;">...</span>. This is not very convenient, as it means every “[ERROR]” in the page is wrapped this way, with hard coded styles. Moreover if you need to give the same appearance to other pieces of code, e.g. “[FATAL]”, then you need to write down all the rules again. Using CSS classes for the styling is a much more convenient (and elegant) solution, since you write the rule only once, and it also give you the opportunity to define more precise styles, mixing and matching different rules from different HTML tags, classes and pseudo-classes.
Finally, .css stylesheets are inside this folder: /usr/lib/node_modules/frontail/web/assets/styles/
These files are used to define the generic layout of the page. The idea is to use the rules defined here for color coding the output, based on the HTML classes defined in the json.
PROCESS
I modified app.js adding some (very dirty!) code, in order to add RegEx support, and to use css classes instead of html hardcoded css and to implement the theming feature. I modified a few pieces of code in this file, but left the original code commented for reference. Here is the resulting file:
I created a new json starting from openhab_dark.json (dark theme of openHAB) matching also the new options available in the modified js:
I added a new css files, that includes the rules both for the dark theme and for the light theme:
In the same folder I added bootstrap.min.css:
I modified the file index.html file to include bootstrap, the button for theming and the variables to store the last used theme:
In order to make Frontail load the new css and json, the file /etc/systemd/system/frontail.service needs to be edited:
Please note that the json has the extension, while the css doesn’t.
Pay attention to edit it according to the correct paths of the json file and logs.
Also, this is the line modified for OH3. If you are still in OH2, the log paths in the final part of the line may be .../openhab2/... instead of .../openhab/...
The only thing left is to reload the daemon and restart Frontail:
sudo systemctl daemon-reload
sudo service frontail restart
I am sure the JS part is the one that could be achieved with much better code. Also the RegEx in the Json are pretty limited, because of my lack of knowledge - unfortunately I have rarely used Regular Expressions before, so please pardon if they looks terrible.
If anyone is willing to take the time to check the code and give me any suggestion on how to correct the JS and JSON parts, I am totally open to learning!
A further note, @Schnuecks has created a fork of frontail and added these modifications to it. Details in post #12.
Hello Jay,
I just noticed that there was a problem in the copy-paste of my app.js code, for some reason it added some funky “DISCOURSE_PLACEHOLDER_2” text where it should not be. I udated the post with the correct code, now you should see it correctly, try to see if it solves your problem!
You are correct about escaping the \ - actually its the same on my code. Again, for some reason this part was broken in my post. There was a problem a few days ago, and my first post got lost with the issue of the forum - probably when I reposted, the code from the backup was messed up and I didn’t notice. I am going to check all the code so that it is correct. Thank you for pointing out!
It seems like the RegEx rules are not working.
Item name is defined by:
"Item '(.*?)'": "itemStyle"
so it should add a span with class itemStyle around the item name.
Then itemStyle css rule defines the appearance.
If I were you I would try to inspect the HTML code to see if:
the span is applied: if not, then the problem is in the RegEx
the style is applied: if not, there’s something wrong with the css rule. Take in consideration that things like display: inline-block; may be problematic if not supported by your browser / webView.
The same basically applies for all the rest.
For the date, check if the format of the RegEx corresponds to your layout (yyyy-mm-dd hh:mm:ss.fff): \\d{4}-\\d\\d-\\d\\d \\d\\d:\\d\\d:\\d\\d.\\d{3}
in my case corresponds to eg: 2021-01-26 14:35:25.323
Here’s an example of the output html in my Frontail:
i also interpreted your code like this and thought i cant find the error, everything seems fine.
I tried it in chrome and firefox (both on the newest version) on Win10.
Thanks for the note for inspecting, i just didnt think about that, but that revealed, that:
my html seems fine, but i got one css problem:
this negative indent just collapses the fields and when i deactivate it i get a good looking log:
it comes from the openhab_dark.css:44 and i guess i just have to overwrite
if i remember correctly the more specific/nearer instance should be taken, so it gets set to 0 and then to -288px…
but whatever… now it works and it looks beautyful.
thank you again! =)
@Schnuecks openHABian’s files for frontail were recently updates to allow for more customization. If you want, when you move to OH3 it would be awesome if you could try and integrate some of these improvements in a PR to openHABian.
Hello,
i have created a fork of frontail and added the modifications of this thread into it.
the files used are from the frontail installation of openhabian
I found the issue, you were using the latest version of mthenw’s build (4.9.2) as source. I’m running Docker on a Synology, and I need to stick ion v4.9.1 (latest version doesn’t work on some hardware)
But I quicky made the modifications on the previous version, and the result is perfect!
This problem i had before and had to modify the Dockerfile and try to find some lightweight node images that runs on arm, but now with the node buster slim it works. But glad that it work right now.
