Hello @alfista2600 reverting back to stock should be quite easy. The json and css files you added can be left where they are or you can delete them. There’s no difference since you just need to point to other json and css files inside:
/etc/systemd/system/frontail.service
What I would suggest is:
Revert the content of /usr/lib/node_modules/frontail/web/assets/app.js
to the original one. If you didn’t make a backup copy, you should be good overriding it with this.
Modify the line you edited in /etc/systemd/system/frontail.service.
For the light theme mine on OH3 was:
@Schnuecks
I forked your repository and sent you a pull request. I think it is an easier workflow, but of course if you have a better idea, I am totally open to alternatives. I am not familiar with Github, moving my first baby steps there!
@Schnuecks@AEM You could potentially further improve this by integrating it with openHABian and making it the default for all users of frontail and openHAB. Just a thought but worth looking at, let me know if you have any questions about that process as I am an openHABian maintainer and can help point you in the right direction.
@ndye Im totally in, my only cocern is that I modified /usr/lib/node_modules/frontail/web/assets/app.js and I am not sure my js code is good enough - as I said, I don’t know js and RegEx that much, this can potentially lead to unexpected behaviours. Also, what happens in case of future updates of that file on the main frontail repository?
I think we could merge it if the new version has fixes or enhancement and add your modifications to it. Or you could make a pr on the original and ask for implementation with that you had someone who knows his js and could say if it’s ok or not.
Well, if you look at the way I have it implemented right now, I’m already overwriting some of the files to allow for upgrading bootstrap.min.css. We could start there and the move forward, I agree it is not the best solution but should work for the moment. I’m not to worried about the JS code as it is not the most important thing if it breaks, as frontail is not a core component.
Infact, I just noticed some parts have changed, for example the play/pause button appearance - I saw bootstrap.min.css has appeared among the files, I was wondering when I read your message. I am checking right now the new implementation and thinking about how to move from there.
MY TODO LIST
css: need to rewrite part of the css using CSS Variables - this is beneficial both for file management (lighter), both because you can implement multiple themes inside a single css. That’s the best way to have light/dark themes all in one.
use a minimal js function to implement a button to switch between light and dark themes, as @Schnuecks suggested.
Hi @epicurean , it depends a bit on how you use Docker. I use docker-compose for this but it also only works with Docker. The instructions from this thread are still usable as described there.
To be able to help you more precisely I would have to know how openHAB is installed on your system. The container only makes sense if you already have openHAB running in the container. If so, please show me your docker-compose.yml and I can show you how to add frontail.
Hi @Schnuecks, maybe it would make sense to create 2 docker-compose examples inside the git, or in the first post.
In case you are using openhab also inside docker
In case openhab runs normal outside docker
In (2) you could expose the openhab log folder to the frontail container with something like /var/log/openhab:/logs:ro
Should be a pretty simply yml from that end and not a lot different to (1), whereas yes, folder paths might be different.
This one is the docker hub page for frontail with the docker run command which could be adopted and translated to compose (composerize)
docker run -d -P -v /var/log:/log mthenw/frontail /log/syslog
Thank you for your reply Andreas.
I run OH3 in a ubuntu VM in esxi ,as a docker container. Its a recent migration from 2.5.11. My mqtt,zigbee2mqtt are also docker containers.
I do not use docker-compose, as I usually install each container one at a time and then manage them via portainer.
Hi, I will edit the Readme.md when the new version is available.
I’m not sure if it doesn’t make sense to center the whole thing somewhere, a repo at my place is nothing official. Maybe this could also be cloned to e.g. openhab-frontail and be authorized accordingly to maintainers. But unfortunately I don’t know if this is desired, but would offer myself as a maintainer.
In general, I would prefer to see the instructions in the official documentation rather than in a Github repo. I’m also happy to create corresponding instructions for docker-compose or add to the existing Docker documentation, I think that’s more purposeful in the end.
I find the log files in this location in terminal:
root@raspiserve:/var/lib/docker/volumes/openhab3_openhab_userdata/_data/logs#
I changed the permissions to at least readable (I hope…)
When building with your docker-compose.yml
frontail:
container_name: frontail
restart: unless-stopped
#here you must put the folder where you cloned the repo
build: ./frontail
command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/custom.json -t custom -l 2000 -n 100 /logs/openhab.log /logs/events.log
depends_on:
- openhab
volumes:
#here belongs the path where your openhab stores the logs and mount it into /logs
#in my case i use iotstack which mounts the folder as below
- ./volumes/openhab/userdata/logs:/logs:ro
ports:
- "9001:9001"
I need to uncomment depends_on: -openhab because the build fails. I even tried openhab3 but error.
Then I build it with this path:
volumes:
- /var/lib/docker/volumes/openhab3_openhab_userdata/_data/logs:/logs:ro
The container starts with this errors in logs
Error: Preset file /frontail/preset/custom.json doesn’t exists
at Object. (/frontail/index.js:121:13)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/frontail/bin/frontail:2:1)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
Hey @ndye today I played a bit with the new layout that takes advantage of bootstrap.
I am thinking to modify the header with 2 icons, one for the play/pause button, the other for the theme switch.
Something like this:
The buttons both work, the icon changes with a nice transition and everything.
Now the thing I am wondering is how to store the last used theme, it would be nice.
Let’s say I load Frontail, by default it comes with light theme. I decide to switch to dark theme. Then I close the browser. Next time I come back to Frontail, I should load the page with the dark theme, since it’s the last used and it would be a better experience if Frontail could remember my preference. Do you (or anyone else) have a clue how to achieve that?
