GUI modification

[anhpham140195]

I want to edit the GUI to my liking. But when updating/editing in the gui folder(modify html & css) and saving, I tried restarting and it wasn't effected.
I also tried editing then reinstalling and it didn't work either. Please help, thanks!

[theyosh]

Hmm, that would be a bit hard. Or that would mean you have to create a new gui from scratch.

The GUI is made with svelte framework. So that means no plain javascript code anymore.

If you want to change the GUI, you should first have installed node.js.

Run npm install --force in the root folder to install all the needed libraries.

The GUI code is in the folder gui. When you build a production version of the GUI, it will be placed in the folder public.

Use npm in the root folder to test you changes with: npm run dev. But this works only on the Pi it self by default, which is not powerful enough to do GUI development. And as there is a version conflict in the packages, you need to use the --force option.

So that means development on your desktop. For that you have to change file gui/assets/index.template.html and .env.dev.json. And add a NGINX server on the Pi to make CORS requests.

So all with all it is not that easy to change the GUI if you have not a full development setup. And it will take a lot of time to explain it all. So you can try to play around with the code, but it will be hard to make GUI changes, if you are not familiar with JS frameworks.