Making Your Own Theme
- Windows Computer
- USART HMI Software (We can not supply this to you. You must find it on your own. Always make sure a file is safe before downloading it!)
USART HMI (TJC Editor) is only available in Chinese. Although you can use something like Google Translate the Ui. Also, the Nextion Editor is almost identical to USART HMI but is available in English. However, you can not make the Ui in the Nextion Editor.
Open the template .HMI file in USART HMI. You can download it from the dev-resources folder.
This is the stock UI file Elegoo uses. This is what we will be modifying to make our UI.
You do not have to use this template but it is very highly recommended.
Now, you will have to create the UI. You can use any photo editor, but I use/recommend Figma. Whatever you use make sure you are creating images with a 272x480 resolution.
In most cases, you will need to create two versions of each UI Screen: Default: The standard non-pressed UI, and Pressed: What the UI will look like when interacted with. When creating the pressed UI screen, you want to make it look like all of the elements are pressed. The image will be cropped to just show the interacted UI element.
You can use the original UI images as inspiration or make your own from scratch! You can also create your actions or remove actions. Note that doing so will require additional work later down the road.
Once you are done modifying/creating your screens export all of your screens to PNG or JPG.
Now that you have your screen images made you can now make the actual UI that will be uploaded to the screen.
This is what you should see when you open USART HMI to open your HMI file go to the folder icon on the top left and select your file to open it.
This is a basic rundown of the editor. I recommend exploring the editor.
If you are modifying the original Elegoo UI I would replace the image you modified by using the refresh icon on the images panel while selecting the image you want to replace. This will replace the image and automatically change each instance of that image to reflect your new image. You will have to go into each page that you edited and adjust the function of the buttons or adjust the position of elements to reflect the new position on the image. You do not have to do this if you do not change the function or position of any UI element away from the original Elegoo UI.
If you want to make your UI not based on the Elegoo UI you can follow the instructions in the Modifying Orignal UI section and replace the UI screen that serves the same purpose (Recommended way). If you do not want to do that you can add each image and then go through every UI screen and adjust the picture number in the element properties panel once you are completely done with the original UI Images delete the original UI images.
If you delete some elements or if you change the functionality of a element you have to modify the page and or element code.