Frontail custom theme coloring


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. :slightly_smiling_face:

All the modified files are in my fork of Frontail.

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:

{
  "words": {
    "[ERROR]": "color: #FF6464 !important;"
} 

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

  1. 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:
  1. I created a new json starting from openhab_dark.json (dark theme of openHAB) matching also the new options available in the modified js:
  1. 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:

  1. I modified the file index.html file to include bootstrap, the button for theming and the variables to store the last used theme:
  1. In order to make Frontail load the new css and json, the file /etc/systemd/system/frontail.service needs to be edited:
sudo nano /etc/systemd/system/frontail.service

The line to modify is:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --disable-usage-stats --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab_AEM.json --theme openhab_AEM --lines 2000 --number 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

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

  1. 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.
:sweat_smile:

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.

9 Likes

Dear Alberto,

i really liked your layout and the intuitive visibility you managed to achieve,
so i tried to apply your instructions but i ran in some problems:

  1. i got some json parsing errors when using your .json code:
  "wordsRegExClass": {
    "\d{4}-\d\d-\d\d \d\d:\d\d:\d\d.\d{3}": "dateStyle",
    "\[openhab(.*?)\]": "squareBracketsStyle",
    "\[nal(.*?)\]": "squareBracketsStyle",
    "\[hab(.*?)\]": "squareBracketsStyle"
  },

it seems like i needed to escape the \ and with this code my frontrail would properly start:

  "wordsRegExClass": {
    "\\d{4}-\\d\\d-\\d\\d \\d\\d:\\d\\d:\\d\\d.\\d{3}": "dateStyle",
    "\\[openhab(.*?)\\]": "squareBracketsStyle",
    "\\[nal(.*?)\\]": "squareBracketsStyle",
    "\\[hab(.*?)\\]": "squareBracketsStyle"
  },

But now… my log looks like this:


what am i missing?

LG Jay

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!

Hi Alberto,
thanks for your fast reply.
I replaced your code with the update and it looks better than before :smiley:

But i still have some missing pieces (Beginning and Item names are not visible)
image

Jay

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:

  1. the span is applied: if not, then the problem is in the RegEx
  2. 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:

<div class="line-selected" style="color: #999;">
	<p class="inner-line">
		<span class="dateStyle">2021-02-12 14:35:00.323</span> <span style="color: #9EEF49 !important;">[INFO ]</span> <span class="squareBracketsStyle">[openhab.event.ItemStateChangedEvent ]</span> - Item '<span class="itemStyle">iSonoff_1AFE1C_Voltage</span>' changed from<span class="afterFromStyle"> 222</span> to<span class="afterToStyle"> 221</span>
	</p>
</div>

What browser / OS are you using to display the logs?

Hey,

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:
image
it comes from the openhab_dark.css:44 and i guess i just have to overwrite :slight_smile:

here the overview how it looks deactivated:

Thanks again for your help!

Thats a strange behaviour since that rule should be overwritten by the following rule for .log.no-indent .inner-line :

BTW not a big deal, you just need to add a rule in your css to overwrite it, and that should be ok!

Yeah, i already fixed it.

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! =)

Thank you very much. Have integrated in my docker frontail looks very nice now.

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

Did you created you own docker image or did you used an existing image (eg GitHub - mthenw/frontail: 📝 streaming logs to the browser)? I’m also interested to integrate this in my container.

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

HowTo in the repository

Thanks

I already used the original Docker image with the presets, this is already very good.

Tried your fork, but when running it, I get these message in the Docker log:

standard_init_linux.go:222: exec user process caused "no such file or directory"

seems like it can’t access the logs. please recheck the log path mount yourpath:/logs:ro

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!

1 Like

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.

Have you created a light version of your updated theme?

Hi @ndye I just made a docker image with this modifications included. Please ask @AEM for a light version.

@ndye I created a light version, please find all the details in the first post.

1 Like

Hi, @AEM thank you for the light theme.
I added the new files in my repo add renamed files in it so it use your name in it like in your first post.

#this is Albertos (@AEM) dark theme
command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/custom_ALB.json -t custom_ALB_dark -l 2000 -n 100 /logs/openhab.log /logs/events.log
#this is Albertos (@AEM) light theme
command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/custom_ALB.json -t custom_ALB_light -l 2000 -n 100 /logs/openhab.log /logs/events.log

#this is the openhab default theme
command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/openhab.json -t openhab -l 2000 -n 100 /logs/openhab.log /logs/events.log
#this is the openhab default dark theme
command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/openhab_dark.json -t openhab_dark -l 2000 -n 100 /logs/openhab.log /logs/events.log

just pull the new version, change your docker-compose as you like with the commands above and have fun.