There are basically two ways to add your own icons or images to the simCNC GUI. Here are some helpful details on how to achieve this.
In the GUI editor
General hint
Whenever you add an image or icon to a GUI element in the GUI editor, it is base64 encoded and written directly into the screen file. Thus, you do not need to keep the image in range
Adding icons to a button
simCNC GUI allows to use transparent PNG images to add icons to your buttons.
- Create a button of type „tool button“, „tool button with LED“, or „tool button with progress bar“
- Select icon – a file-open dialog will open
- Set icon width/height according to your button size
- Choose style „icon only“
You may also use solid background, but due to the theme of the default buttons may end up with some artefacts. In case you want to add color to your buttons, I recommend using CSS.
Adding a picture
To add a picture, like in our example a schema of your machine:
- create a regular text label
- remove the default text
- before (!) choosing a picture set scale mode to „keep aspect“
- choose picture by selecting pixmap – a file-open dialog will open
Via CSS border-image()
Another option to display images on your GUI is to use CSS and the border-image() property.
[id:'lblName']{
border-image: '/my/absolute/or/relative/path/icon.png';
}Attention: background-image() property is not supported!
Which also means that fill-options like background-repeat() or background-fillO() will not work. You will have to set up your already image beforehand.
In Python
If you want to change images dynamically, the above example of adding pictures via CSS can be manipulated using Python scripts.
# lblName is the ID of the label you are trying to address
# set an image
gui.lblName.setAttribute("styleSheet", " border-image: url('/my/absolute/or/relative/path/icon.png');")
# remove an image
gui.lblName.setAttribute("styleSheet", " border-image: none');")