Frontail custom theme coloring

Apps & Services 3rd Party
,
21

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.

22

Hi, this sounds great.
This looks aloot easier yes, but on docker side container restart would still needed if the changes are made in the compose file but now only the css part would need to change.

It may be possible or not, but would it possible to switch the theme with a button, like pause/unpause ?
Currently i have a little problem on my ipad that i couldn’t use the pause/unpause button because the button is under the filter field. So if we could move this button for pause/unpause somewhere else and add a button for the theme too. I think that would be an idea.

image
image1536×488 133 KB

23

Just updated the first post with the new stuff:

  • Modified a couple lines more in the app.js to add/remove the “line-selected” class instead of replacing .line with .line-selected

  • Now the JSON is the same both for the dark and the light theme. Everything uses css classes so hopefully no need to touch the json any more. There are no more css rules inside the JSON.

  • Added some classes and rules in the css, to make it more customizable.

  • Added some very basic media queries to make the logs more readable on tablet and mobile devices.

About your questions:

I guess it is possible via js, but my knowledge in JS is very, very limited.
Since the 2 css files now share most of the rules (basically the only differences are the colors used), instead of switching css file it could be easier to add/remove an ID to the body, and merge both css files in one. E.g.

<body> → the rules for the light theme are used.
<body id="darkTheme"> → all the rules that start with #darkTheme are used - to override just the colors.

Unfortunately I don’t have an iPad to test, and i couldn’t reproduce the problem neither with Safari Inspector, nor with Chrome dev tools, nor on my 7" and 9" android tablets.

I tried to mess around with the media queries to make the pause button label shorter on smaller devices. I also reduced the font size of the title of the page to free some space.

Can you test if this solves your problem?

24

@AEM are you able to tell me if the files in the first post are the latest? I see you have improve things along the thread and want to be sure to get the latest

25

@Andrew_Pawelski Yes, this is the latest version. But please be careful with the app.js and replace only the appropriate parts in the original, no copy / paste of the whole file.

@AEM Thanks for the modification now I can at least reach and press the pause button, the text doesn’t quite fit yet but I can live with that.

image
image1536×216 49.5 KB

Updated my frontail repository

26

@Andrew_Pawelski I confirm the first post is the most updated. Sorry if it was misleading.

the whole thing is pretty finished on my side. There are 2 things still TBD:

  • There is a glitch @Schnuecks is noticing on his iPad, which I am trying to solve in the next few days

  • There is also an interesting suggestion @Schnuecks gave, a button to switch theme, but it will take some time to implement, and I’m not even sure I can do it, TBH. :slight_smile:

In case of future updates I will always keep the first post updated, and I will write down in the thread what I updated. I think it is easier for those that don’t want to read the whole thing.

27

Great stuff
I actually still had a bit of trouble following what you did so I went to @Schnuecks git fork and copied the whole files that you referred to change to their respective locations then changed the service to match the names and all is working - I love it so clean and now I can finally use my phone with frontail

1 Like
28

Thanks a lot @AEM and @Schnuecks for this awesome work!
I am trying to get the new styles up and running with my frontail install (manual install, not openhabian) via systemd whereas systemd is unable to start once I changed the files (it works with base frontail install).

My steps:
  1. Cloned Schnuecks git
  2. Copied over the respective preset jsons into /usr/local/lib/node_modules/frontail/preset
  3. Copied over app.js into /usr/local/lib/node_modules/frontail/web/assets
  4. Copied over the respective style jsons into /usr/local/lib/node_modules/frontail/web/assets/styles
  5. Changed my systemd ExecStart into ExecStart=/usr/local/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/custom_ALB.json -t custom_ALB_light -l 2000 -n 100 --disable-usage-stats /var/log...
  6. Sadly getting a (code=exited, status=1/FAILURE) when running a frontail restart after reload of daemon

Any advice?

29

Hi, could you restart the service and then please post output from this command sudo journalctl -p err -n 20

1 Like
30

Hey @chrismast just to be sure, I noticed you wrote “style jsons” - maybe it’s just a typo but better double check: the files involved in this step are .css files, not .json files.

So, according to your description, you should have copied over the following files:

/usr/local/lib/node_modules/frontail/preset/custom_ALB.json
/usr/local/lib/node_modules/frontail/web/assets/app.js
/usr/local/lib/node_modules/frontail/web/assets/styles/custom_ALB_light.css
/usr/local/lib/node_modules/frontail/web/assets/styles/custom_ALB_dark.css

(actually this second css file is not strictly needed if you just want to use the light theme)

Also, in step 5 there may be a /local missing in the json path.

1 Like
31

Hi, What was your solution? Same issue come for me

kép
kép841×102 11.7 KB

I modified the origin openhab_dark.css, change the -288 to 0 and now its correct.
I use welteki based docker file and modify it, now its works, but in this case, I had to create local version of openhab_dark.css.
https://hub.docker.com/r/gudszent/openhab-frontail

32

Thanks guys! I got it working (the missing local was the error) with a normal frontail install, whereas it seems several design components/formats are missing.

Tried then to copy the full git from Schnuecks pointing whereas I am ending again in a frontail boot loop.
Output as per sudo journalctl -p err -n 20 does not help too much:

Mar 06 08:21:43 openhab3 systemd[1]: Failed to start Frontail.
Mar 06 08:22:34 openhab3 systemd[1]: Failed to start Frontail.
Mar 06 08:24:31 openhab3 systemd[1]: Failed to start Frontail.
My systemd frontail.service file looks like this now: 
#!/bin/sh -
[Unit]
Description=Frontail

[Service]
ExecStart=/usr/local/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/local/lib/node_modules/frontail/preset/custom_ALB.json -t custom_ALB_dark -l 2000 -n 100 --disable-usage-stats /var/log/openhab/audit.log /var/log/openhab/events.log /var/log/openhab/openhab.log

Restart=always
User=root
Group=root
Environment=PATH=/usr/bin/
Environment=NODE_ENV=production
WorkingDirectory=/usr/bin/

[Install]
WantedBy=multi-user.target
Alias=frontail.service

Is the git based on openhabian? If so, are there know differences in files etc. vs a normal direct frontail install?

EDIT: Update: I got it now working, using my first method copying all files manually. It seems that a chmod +x was needed on the custom_ALB.json file. Will run it a bit on my test openhab system before moving it into production to see if all is good. Thanks guys!

EDIT2: Now talking about formatting: Somehow the WARN level (which I assume should be then highlighted in orange as per screenshot?) does not trigger.
My log entry:
Log.logWarn("Rule ", “WARN TESTing the Time” + " " + now + " " + current_time);
Output:

log
log793×65 6.44 KB

33

The -288 pt text-indent rule is defined inside openhab_dark.css (this is the standard dark theme of openHAB). This css is imported as a “base” in my css (see first line of custom_ALB_dark.css).

Actually this rule should be overwritten by another more specific rule inside the same css file, as visible in the screenshot in post #7.
I don’t know why they inserted this weird -288pt text indent rule in openhab_dark.css, just to override it a few lines later. Maybe they were trying to achieve some layout result dealing only with css and not touching the js / json as I did - which led to using negative margins, text-indents, etc, which works and is probably more future-proof, but it is also a dangerous hack that can sometimes lead to unexpected behaviours.

Basically, according to openHAB’s css, if your html has a tag:

<pre class "log no-indent">

… then the rule:

.log .inner-line {
    margin-left: 288pt;
    text-indent: -288pt;
}

should be overwritten by the “stronger” rule:

.log.no-indent .inner-line {
    margin-left: 0;
    text-indent: 0;
}

Somehow this does not always happen, maybe your pre does not have the no-indent class so only the first more generic rule with the -288 indent will apply and it will skip the second rule.

Long story short, in the next update I will add a rule in my css to override .log .inner-line, no matter if it has the .no-indent class or not - so this glitch should happen no more.

In the meanwhile as I guess you already discovered, you just need to add this rule in my css:

.log .inner-line {
    margin-left: 0 !important;
    text-indent: 0 !important;
}

(The !important is not strictly needed but better be sure, it is a bold statement :rofl:)

2 Likes
34

Hey @chrismast

For the git part I let @Schnuecks answer, I am not so familiar with Github. In my understanding he forked directly Frontail, so maybe some references to file locations don’t match, but again, I am not sure so I may be wrong. I personally edited the files by hand, less elegant, less practical and old school. :sweat_smile:

About the formatting you are correct, the WARN level should be in orange.
For your reference, the logs that have the whole line highlighed in Frontail / OH are the ones that contain these words:

[ERROR]
[FATAL]
[WARN ]
[DEBUG]
[INFO ]
[TRACE]

I just restyled them, here is a quick test:

special logs
special logs2709×1842 760 KB

As you can notice, also the top line of your screenshot ("==> /var/log/ … <==") is not styled correctly, the text for example should be aligned to the right.

What browser/device/OS are you experiencing this issue on? Did you try to check on another device?
Can you copy-paste the html of that portion of page so I can check what is the html the json is dealing with?

35

Thanks for your reply.
I saw those entries in the json file and also tried to create my own by copying the WARN one and renaming it into RULES (as I wanted to highlight all RULES log entries).
Below screenshot of log and html, hope that is what you are looking for (?).

frontail
frontail1904×793 209 KB

frontail2
frontail21909×923 270 KB

Tried it with Chrome, Edge and on my Android, all with same result.

EDIT: Switched to the black version, with same result.

36

Thank you, it seems the problem is in the app.js because it should output classes, not styles.

For example in the highlighted line in the html you should have:

<div class="line logLine">

Instead it is outputting

<div ... style="line logLine">

“style=…” is what app.js is doing by default (and after you modify that file it will ouput “class=…”)

37

Hi, @chrismast my frontail is a fork of the original version from GitHub - mthenw/frontail: 📝 streaming logs to the browser. Sponsored by https://cloudash.dev, the only modifactions are the files of this thread.
Path depend on how nodejs is installed via package manager it should be /usr/lib/node_modules or /usr/local/lib/node_modules if you’ve compiled and installed from source. the nodejs image is build from source so the path ist /usr/local/lib.

1 Like
38

I’ve managed to mess up my frontail installation trying to get this going.

when I run this command attempting to test:

sudo /usr/bin/frontail  -t openhab -l 2000 -n 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

I get these errors:

Error: Cannot find module 'cookie'
Require stack:
- /usr/lib/node_modules/frontail/index.js
- /usr/lib/node_modules/frontail/bin/frontail
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/usr/lib/node_modules/frontail/index.js:3:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/lib/node_modules/frontail/index.js',
    '/usr/lib/node_modules/frontail/bin/frontail'

but if I reinstall from within openhabian-config it looks like cookie is installed.

I’m not sure cookie is getting installed to the right node area? I’m not well versed in node…

any thoughts on how to fix or reset/reinstall?

39

I had the same issue by only cloning the git.
When I installed frontail via the “normal” route, in my case npm, and overwrite respective files only it worked.

40

I triple checked the app.js file now and it aligns to your code above, for reference attached my app.js (renamed to txt).
app.txt (8.3 KB)

EDIT: Looking at the other posts here, it seems that the same missing format is happening here as well.