Frontail custom theme coloring

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.

Hi @Schnuecks
Thank you!
In the meanwhile I am updating the json, css and js files to make the customization process easier.

In particular:

  • I moved some json rules from “words” to “wordsRegExClass”. This way it uses the RegEx to add classes, that can be styled via css, instead of hardcoding the css rules in the html. This also allows to have always the same json for all css files, and only modify the css rules to change the appearance.

  • I modified part of the js to add/remove the “line-selected” class instead of replacing .line with .line-selected, as it was doing before. This allows to address some rules specific for selected lines, which was not possible before.

These modifications open to a lot more customization, doable only via css. It is also easier to test because you just need to reload the page instead of having to reload the daemon and restart frontail all the time.

As soon as I finish I will update this post with all the details!
The dark theme is finished, I am updating the light theme.