Skip to content

7. Customizing the GUI

Jump to bottom
Readek edited this page Mar 2, 2023 · 3 revisions

Since v7, you can now modify the GUI just like all the other tool components! That means you can go edit with your code editor of choice the files used by the GUI, which are:

  • Resources/GUI.html
  • Resources/CSS/GUI.css
  • Resources/Scripts/GUI.js

And since v9, you can also edit the executable source code, which means directly interacting with Electron, at:

  • Resources/Scripts/Executable.js

You can use the same tips found on the previous wiki pages to help you out, but you may want to learn some basic html, css and javascript to be able to defend yourself here. That being said, if you want to edit something, you should know about some shortcuts that will help you:

  • F5 will reload the GUI, so any changes you did to the GUI files will update.
  • F12 will enable the dev console, as well as unlock window resolution. Extremely useful to know whats going wrong if needed.

The only thing that can't be modified without a developer environment is the Resources folder path. Everything else starts at Resources/Scripts/Executable.js

But what if we want to change the application icon? You can technically change the window icon editing Executable.js, but for the application icon, it will a bit more complicated since you will have to build a new executable. For now, you will need to get the Interface Source Code folder from this git, and change the icon.png file. To build that exe, continue reading below.

Building a new executable

Since this is Electron, and we are using files external to the executable, you can use most of Node/Electron features on any script file. That being said, there is some stuff you won't be able to do unless you set up a developer enviroment, like compiling a new executable with a different icon.

To do this, you will need to use npm or yarn on this git's Interface Source Code folder, and hit it with:

  • npm install or yarn install

So let's say you modified what you needed to and you're ready to build, so what now? Easy, just hit it with another command like so:

  • npm run dist or yarn dist

This will create a new dist folder, and inside, you will get your new executable. Move this executable to the Stream Tool folder, and you will be ready to go!

This will work for both Windows (creating a .exe) and Linux (creating an .AppImage). If you want to build this for Mac, you will need to add the missing features yourself, as I don't have an iOS device to test it on myself.

Clone this wiki locally