Frontail custom theme coloring

nYce · February 11, 2021, 5:39pm

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:

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

AEM · February 12, 2021, 10:26am

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!

nYce · February 12, 2021, 1:38pm

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

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

Jay

AEM · February 12, 2021, 2:06pm

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:

<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?

nYce · February 12, 2021, 2:37pm

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:

it comes from the openhab_dark.css:44 and i guess i just have to overwrite

here the overview how it looks deactivated:

Thanks again for your help!

AEM · February 12, 2021, 3:04pm

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!

nYce · February 12, 2021, 7:59pm

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

Schnuecks · February 23, 2021, 8:47pm

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

ndye · February 23, 2021, 10:09pm

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

wars · February 24, 2021, 12:09am

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

Schnuecks · February 24, 2021, 12:12am

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

wars · February 24, 2021, 8:10pm

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"

Schnuecks · February 24, 2021, 8:14pm

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

wars · February 25, 2021, 7:50pm

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!

Schnuecks · February 25, 2021, 8:03pm

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.

ndye · March 1, 2021, 5:44pm

Have you created a light version of your updated theme?

Schnuecks · March 1, 2021, 6:11pm

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

AEM · March 2, 2021, 12:57pm

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

Schnuecks · March 3, 2021, 7:38pm

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.

AEM · March 4, 2021, 10:29am

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.