How to implement GUI scaling / resizing in HISE plugins? (like Waves-style zoom)

[the red_1]

Hey everyone,
I’m currently developing a plugin and I’d like to implement GUI scaling (resize/zoom feature), similar to what some commercial plugins offer (like 75%, 100%, 150%, etc.).
Right now, my interface has a fixed size, and I want to give users the ability to resize it depending on their screen.
What would be the best approach to achieve this in HISE?
Is there a built-in way to scale the entire interface?
Any recommended workflow or examples?
Thanks a lot

[David Healey]

@the-red_1 https://youtu.be/_9-7LMOUCfY

[the red_1]

@David-Healey Thanks a lot! I always watch your videos, can’t believe I missed this haha

[the red_1]

@David-Healey I followed everything in the video and the zoom works inside the app after compiling, but in FL Studio it doesn’t work and the GUI becomes very small.

[David Healey]

@the-red_1 does it work in a different DAW?

[the red_1]

@David-Healey I only use FL Studio.

[David Healey]

@the-red_1 It's probably an FL Studio problem, can't tell without testing it. Reaper is a good one to test in, it's very reliable and you can download the trial for free, it's only about 15mb

[the red_1]

@David-Healey Yeah, it works in Reaper.

[David Healey]

@the-red_1 Looks like it's a FL Studio specific issue then, you'll have to play around with the script and see if you can find the cause of the issue.

[the red_1]

@David-Healey I changed the code in ZoomHandler.js to allowZoom(ZoomPanel, !IS_PLUGIN). Is this correct?

// Author: Christoph Hart
// License: Public Domain
namespace ZoomHandler
{
	const var MIN_ZOOM = 0.65;
	const var MAX_ZOOM = 2.0;
	const var ZOOM_STEP = 0.10;
	const var INTERFACE_WIDTH = 918;
	const var INTERFACE_HEIGHT = 581;
	const var ZoomPanel = Content.getComponent("pnlZoom");
	const var IS_PLUGIN = Engine.isPlugin();
	
	const var draggerData = [110,109,143,130,218,67,147,216,145,66,108,147,216,145,66,143,130,218,67,108,0,0,0,0,143,130,218,67,108,143,130,218,67,0,0,0,0,108,143,130,218,67,147,216,145,66,99,109,143,130,218,67,139,140,96,67,108,139,140,96,67,143,130,218,67,108,66,160,23,67,143,
	130,218,67,108,143,130,218,67,66,160,23,67,108,143,130,218,67,139,140,96,67,99,109,143,130,218,67,102,22,188,67,108,102,22,188,67,143,130,218,67,108,66,160,151,67,143,130,218,67,108,143,130,218,67,66,160,151,67,108,143,130,218,67,102,22,188,67,99,101,
	0,0];
		
	const var draggerPath = Content.createPath();
		
	draggerPath.loadFromData(draggerData);
	
	ZoomPanel.setPaintRoutine(function(g)
	{
		g.setColour(Colours.withAlpha(Colours.white, (this.data.hover && this.data.allowDrag) ? 0.8 : 0.2));
		g.fillPath(draggerPath, [0, 0, 10, 10]);
	});
	
	inline function allowZoom(panel, on)
	{
		panel.data.allowDrag = on;
		panel.setMouseCursor(on ?"BottomRightCornerResizeCursor" : "NormalCursor", Colours.white, [0, 0]);
		panel.repaint();
	}
	
	allowZoom(ZoomPanel, !IS_PLUGIN);
	
	ZoomPanel.setMouseCallback(function(event)
	{
		this.data.hover = event.hover;
		
		if(event.clicked)
		{
			this.data.zoomStart = Settings.getZoomLevel();
		}
		if(event.mouseUp)
		{
			return;
		}
	
		if(event.drag)
		{
			if(!this.data.allowDrag)
				return;
	
			var diagonal = Math.sqrt(INTERFACE_WIDTH*INTERFACE_WIDTH + INTERFACE_HEIGHT*INTERFACE_HEIGHT);
			var currentZoom = Settings.getZoomLevel();
			var dragPixel = 0;
			
			if(event.dragX > event.dragY)
				dragPixel = (event.dragX * currentZoom) / INTERFACE_WIDTH;
			else
				dragPixel = (event.dragY * currentZoom) / INTERFACE_HEIGHT;
			
			var maxScaleFactor = Content.getScreenBounds(false)[3] / INTERFACE_HEIGHT;
			var diagonalDrag = this.data.zoomStart + dragPixel;
			
			diagonalDrag += (ZOOM_STEP / 2);
			
			diagonalDrag = Math.min(diagonalDrag, maxScaleFactor);
			
			diagonalDrag -= Math.fmod(diagonalDrag, ZOOM_STEP);
			diagonalDrag = Math.range(diagonalDrag, MIN_ZOOM, MAX_ZOOM);
			
			var zoomToUse = diagonalDrag;
			if (currentZoom != zoomToUse)
				Settings.setZoomLevel(zoomToUse);
		}
		
		this.repaint();
	});
}

[David Healey]

@the-red_1 said in How to implement GUI scaling / resizing in HISE plugins? (like Waves-style zoom):

Is this correct?

What does correct mean to you?

[the red_1]

@David-Healey Can it work like this?

[David Healey]

@the-red_1 The zoom functionality will be disabled in the plugin but will be enabled in the standalone.

[the red_1]

@David-Healey Can you give me the solution or advice?

[David Healey]

@the-red_1 Without knowing what causes it I can't offer a solution. I don't use FL Studio so it's not something I've encountered.

Start with a minimal test plugin - completely empty project with just the zoom handler. See if that works.

[the red_1]

@David-Healey Haha, I made a silly mistake . I had an old version of the VST in Program Files and a new version as a .dll in my DAW FL Studio. FL Studio was detecting both of them, and that’s what caused the problem. Now everything is fine. Thanks for the time you gave me!

[David Healey]

@the-red_1 Aha great to know it works :)