@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. Sponsored by https://cloudash.dev)? 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.
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.
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.
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?
@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
@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.
Updated my frontail repository
@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.
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.
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
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:
- Cloned Schnuecks git
- Copied over the respective preset jsons into
/usr/local/lib/node_modules/frontail/preset - Copied over app.js into
/usr/local/lib/node_modules/frontail/web/assets - Copied over the respective style jsons into
/usr/local/lib/node_modules/frontail/web/assets/styles - 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... - Sadly getting a
(code=exited, status=1/FAILURE)when running a frontail restart after reload of daemon
Any advice?
Hi, could you restart the service and then please post output from this command sudo journalctl -p err -n 20
1 Like