WYSIWYG editor display only knob icon

I’m setting up a basic VST3 project using the VST3 Project Generator. The project generates and compiles successfully in visual studio , but when I load it into a DAW to edit the GUI, only a few components are visible the others disaplying placeholder and no skins.

  • Visible: Knob, label, checkbox, String list control, view

  • Missing: All other GUI components, Vu Meters, movie button, kick button, animation knob ….

Environment:

  • OS: Windows 11

  • DAWs tested: Cubase, Reaper

  • Editor: WYSIWYG editor

Screenshot:

Question: I suspect I missed a step during setup or configuration. Has anyone encountered this issue? Any advice or guidance would be greatly appreciated!

You either have to set the save option in the WYSIWYG editor to Encode Bitmaps in XML, or you have to modify your CMakeLists.txt to add the bitmaps as resources:

smtg_target_add_plugin_resources(${target}
    RESOURCES
        resource/background.png
        resource/slider_background.png
        resource/slider_handle.png
        resource/slider_handle_2.0x.png
        resource/vu_on.png
        resource/vu_off.png
)

Thanks for your help Arne.

Arne_Scheffler (post:2, topic:1012082): “You either have to set the save option in the WYSIWYG editor to Encode Bitmaps in XML.”

  • I used both save modes, but only the editor.uidesc file is generated.

Arne_Scheffler (post:2, topic:1012082): “You have to modify your CMakeLists.txt to add the bitmaps as resources:”

smtg_target_add_plugin_resources(${target}
    RESOURCES
        resource/background.png
        resource/slider_background.png
        resource/slider_handle.png
        resource/slider_handle_2.0x.png
        resource/vu_on.png
        resource/vu_off.png
)

I don’t have any of these PNG files in my VSTsdk or vstGUI folders.

Have you associated your own skins with these components?


editor.uidesc

{
	"vstgui-ui-description": {
		"version": "1",
		"bitmaps": {},
		"fonts": {},
		"colors": {},
		"gradients": {},
		"control-tags": {},
		"custom": {
			"FocusDrawing": {},
			"VST3Editor": {
				"Path": "C:/Users/ju/Documents/vieux-saxo/VieuxSaxo/resource/editor.uidesc"
			},
			"UIGridController": {
				"Grids": "1x 1,5x 5,10x 10,12x 12,15x 15"
			},
			"UITemplateController": {
				"SelectedTemplate": "view"
			},
			"UIEditController": {
				"EditViewScale": "1",
				"EditorSize": "0, 0, 500, 570.4",
				"EncodeBitmaps": "true",
				"SplitViewSize_0_0": "0.7604702424687730388797035629977472126484",
				"SplitViewSize_0_1": "0.2020573108008817120317957005681819282472",
				"SplitViewSize_1_0": "0.4812637766348273338223862083395943045616",
				"SplitViewSize_1_1": "0.5106539309331373788225505450100172311068",
				"SplitViewSize_2_0": "0.6400000000000000133226762955018784850836",
				"SplitViewSize_2_1": "0.3499999999999999777955395074968691915274",
				"TabSwitchValue": "0",
				"Version": "1",
				"WriteRCFile": "true"
			},
			"UIAttributesController": {},
			"UIViewCreatorDataSource": {
				"SelectedRow": "31"
			}
		},
		"templates": {
			"view": {
				"attributes": {
					"background-color": "~ BlackCColor",
					"background-color-draw-style": "filled and stroked",
					"class": "CViewContainer",
					"mouse-enabled": "true",
					"opacity": "1",
					"origin": "0, 0",
					"size": "300, 300",
					"transparent": "false",
					"wants-focus": "false"
				},
				"children": {
					"CKnob": {
						"attributes": {
							"angle-range": "270",
							"angle-start": "135",
							"circle-drawing": "false",
							"class": "CKnob",
							"corona-color": "~ RedCColor",
							"corona-dash-dot": "true",
							"corona-dash-dot-lengths": "1.26,0.1",
							"corona-drawing": "true",
							"corona-from-center": "false",
							"corona-inset": "12",
							"corona-inverted": "false",
							"corona-line-cap-butt": "true",
							"corona-outline": "true",
							"corona-outline-width-add": "2",
							"default-value": "0.5",
							"handle-color": "~ WhiteCColor",
							"handle-line-width": "8",
							"handle-shadow-color": "~ BlackCColor",
							"knob-range": "200",
							"max-value": "1",
							"min-value": "0",
							"mouse-enabled": "true",
							"opacity": "1",
							"origin": "30, 20",
							"size": "90, 90",
							"skip-handle-drawing": "true",
							"transparent": "false",
							"value-inset": "3",
							"wants-focus": "true",
							"wheel-inc-value": "0.1",
							"zoom-factor": "1.5"
						}
					},
					"CSegmentButton": {
						"attributes": {
							"class": "CSegmentButton",
							"default-value": "0.5",
							"font": "~ NormalFont",
							"frame-color": "~ BlackCColor",
							"frame-width": "1",
							"icon-text-margin": "0",
							"max-value": "1",
							"min-value": "0",
							"mouse-enabled": "true",
							"opacity": "1",
							"origin": "70, 170",
							"round-radius": "5",
							"segment-names": "Segment 1,Segment 2,Segment 3,Segment 4",
							"selection-mode": "Single-Toggle",
							"size": "70, 80",
							"style": "vertical",
							"text-alignment": "center",
							"text-color": "~ BlackCColor",
							"text-color-highlighted": "~ WhiteCColor",
							"transparent": "false",
							"wants-focus": "false",
							"wheel-inc-value": "0.1"
						}
					},
					"CVuMeter": {
						"attributes": {
							"class": "CVuMeter",
							"decrease-step-value": "0.5",
							"default-value": "0.1",
							"max-value": "1",
							"min-value": "0",
							"mouse-enabled": "true",
							"num-led": "10",
							"opacity": "1",
							"orientation": "vertical",
							"origin": "50, 200",
							"size": "220, 110",
							"transparent": "false",
							"wants-focus": "false",
							"wheel-inc-value": "0.1"
						}
					}
				}
			}
		}
	}
}

Knob Button: seemed to work correctly, but probably missed a part of its skins.

Vu Meter: Fails (no skin).

SegmentButton: Responds to click actions, but also lacks a skin.


Questions:

Can I use custom skins to link to the components?

For the Vu Meter, it seems tricky—any suggestions?

thanks again!!

You need to provide your own images. VSTGUI does not come with any.

in afterwards it’s logical, thanks.