[Feature Request] GUI Scaling with window handle?

Straticah

Hey there, my GUI is build with paint routines and LAF assets from @orange LAF Collection so i thought i might be great to create a scalable interface. At the moment i am using a dropdown but wanted to ask if we can get GUI scaling by dragging the window handle. @Christoph-Hart :)

Christoph Hart

@Straticah You can use a Panel for this.

Just add a Panel named ZoomPanel to your UI, add this code and define the constants to fit your needs.

namespace ZoomHandler
{
	const var MIN_ZOOM = 0.85;
	const var MAX_ZOOM = 2.0;
	const var ZOOM_STEP = 0.25;
	const var INTERFACE_WIDTH = 928;
	const var INTERFACE_HEIGHT = 622;

	const var ZoomPanel = Content.getComponent("ZoomPanel");
	
	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, [8, 4, 14, 14]);
	});
	
	inline function allowZoom(panel, on)
	{
		panel.data.allowDrag = on;
		panel.setMouseCursor(on ?"BottomRightCornerResizeCursor" : "NormalCursor", Colours.white, [0, 0]);
		panel.repaint();
	}
	
	allowZoom(ZoomPanel, true);
	
	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();
	});
}

Straticah

@Christoph-Hart

d.healey

@Christoph-Hart said in [Feature Request] GUI Scaling with window handle?:

@Straticah You can use a Panel for this.

Oh that's cool

DabDab

Whole cursor is changed. Resize arrow on Knobs. I want only corner resize cursor change. how?

d.healey

@DabDab Remove the parts you don't want...

MikeB

Is there a snippet - it doesn't work for me :-(

Christoph Hart

It won't work in HISE but if you compile it it should work in the plugin (make sure you set the right interface size with the constants though).

DabDab

@Christoph-Hart Do I need to parent the ZoomPanel ? If I make a child of ZoomPanel knob/Slider etc cursor are also being changed to doubleArrow Cursor

DabDab

BottomRightCornerResizeCursor where do I find all the cursor fuctions?

Tania Ghosh

@DabDab These are the functions

{
                "ParentCursor",               /**< Indicates that the component's parent's cursor should be used. */
		"NoCursor",                       /**< An invisible cursor. */
		"NormalCursor",                   /**< The standard arrow cursor. */
		"WaitCursor",                     /**< The normal hourglass or spinning-beachball 'busy' cursor. */
		"IBeamCursor",                    /**< A vertical I-beam for positioning within text. */
		"CrosshairCursor",                /**< A pair of crosshairs. */
		"CopyingCursor",                  /**< The normal arrow cursor, but with a "+" on it to indicate that you're dragging a copy of something. */
		"PointingHandCursor",             /**< A hand with a pointing finger, for clicking on web-links. */
		"DraggingHandCursor",             /**< An open flat hand for dragging heavy objects around. */
		"LeftRightResizeCursor",          /**< An arrow pointing left and right. */
		"UpDownResizeCursor",             /**< an arrow pointing up and down. */
		"UpDownLeftRightResizeCursor",    /**< An arrow pointing up, down, left and right. */
		"TopEdgeResizeCursor",            /**< A platform-specific cursor for resizing the top-edge of a window. */
		"BottomEdgeResizeCursor",         /**< A platform-specific cursor for resizing the bottom-edge of a window. */
		"LeftEdgeResizeCursor",           /**< A platform-specific cursor for resizing the left-edge of a window. */
		"RightEdgeResizeCursor",          /**< A platform-specific cursor for resizing the right-edge of a window. */
		"TopLeftCornerResizeCursor",      /**< A platform-specific cursor for resizing the top-left-corner of a window. */
		"TopRightCornerResizeCursor",     /**< A platform-specific cursor for resizing the top-right-corner of a window. */
		"BottomLeftCornerResizeCursor",   /**< A platform-specific cursor for resizing the bottom-left-corner of a window. */
		"BottomRightCornerResizeCursor"  /**< A platform-specific cursor for resizing the bottom-right-corner of a window. */
}

DabDab

@Tania-Ghosh Great. thank you @Tania-Ghosh

tomekslesicki

@Christoph-Hart I just tried this and it seems like the code doesn't seem to work. Of course I’m testing on a compiled plugin. Did anyone get it working?

orange

@tomekslesicki said in [Feature Request] GUI Scaling with window handle?:

@Christoph-Hart I just tried this and it seems like the code doesn't seem to work. Of course I’m testing on a compiled plugin. Did anyone get it working?

Do you mean ZoomPanel? Yes it is working on the compiled plugin here. Make sure that you've allowed the callbacks on the ZoomPanel.

tomekslesicki

@orange yup, that was it, thank you!

[Feature Request] GUI Scaling with window handle?

37

1.9k

10.6k

92.7k