mr.l

I wonder if it is possible to scale a bpatcher and it's UI (in presentation-mode) acording to the size of its parent patcher.

I am working on a standalone which has a kind of "menu structure". Depending where the user navigates to, the patcher reveals (makes visible) a bpatcher with textbuttons or other UI-Objects. I would like to have the bpatcher always fill the entire patcher-window and it's content (textbuttons) should be scaled accordingly when the user changes the windowsize. Is this somehow possible? Maybe a script? Or is it possible to change the Objects Presentation-Rectangles to relative values instead of absolute values?

I wonder if it is possible to scale a bpatcher and it's UI (in presentation-mode) acording to the size of its parent patcher.
I am working on a standalone which has a kind of "menu structure". Depending where the user navigates to, the patcher reveals (makes visible) a bpatcher with textbuttons or other UI-Objects. I would like to have the bpatcher always fill the entire patcher-window and it's content (textbuttons) should be scaled accordingly when the user changes the windowsize. Is this somehow possible? Maybe a script? Or is it possible to change the Objects Presentation-Rectangles to relative values instead of absolute values?

how-to-scale-a-ui-acording-to-window-size

this is pretty clunky, but it may be a start-- it works in max 6, don't know about v7.

don't know if it works in a bpatcher or in presentation mode; there may be some more sophisticated tools you can use with javascript

this is pretty clunky, but it may be a start-- it works in max 6, don't know about v7.
don't know if it works in a bpatcher or in presentation mode; there may be some more sophisticated tools you can use with javascript


I think that is a nice idea. thanks. I don't know if zoomfactor can by applied onto a bpatcher, but it could be applied inside of it. So it could work.

I came up with javascript which calculates a relative size and position for each object, but that's a lot of scripting when it comes to a higher amount of objects in the UI. I'll post it tomorrow .

I think that is a nice idea. thanks. I don't know if zoomfactor can by applied onto a bpatcher, but it could be applied inside of it. So it could work.
I came up with javascript  which calculates a relative size and position for each object, but that's a lot of scripting when it comes to a higher amount of objects in the UI. I'll post it tomorrow .


Just my 2 cents, I found it easier to scale everything by including the whole main patcher, in a "top ui" bpatcher, except the "scaling" mechanism.

Also, when scaling up and down the screen doesn't stay at the "top-left" corner. As a solution, every time I change the UI scale (using the zoomfactor), I also trigger a 

 in a JS to reset the view at the top left.

I haven't found a way to reset the window view without JavaScript, if anyone knows, please let me know!

Just my 2 cents, I found it easier to scale everything by including the whole main patcher, in a "top ui" bpatcher, except the "scaling" mechanism.
Also, when scaling up and down the screen doesn't stay at the "top-left" corner. As a solution, every time I change the UI scale (using the zoomfactor), I also trigger a this.patcher.wind.scrollto(0, 0); in a JS to reset the view at the top left.
I haven't found a way to reset the window view without JavaScript, if anyone knows, please let me know!

thanks. That is what I came up with. (To simplify, I didn't pack it into a bpatcher). Since in this case, there are only 3 Objects, my method works ok. But with more UI-Objects it would be to much coding. 

here again. it was missing the js-code. don't know how to copy-compress it

Can you post an example patch with the js included?

@Nikolas
Can you post an example patch with the js included?


I included a simple zooming ui, based on the idea. The only problem is that you have to keep the aspect ratio the same, else it will clip the "excess" interface! But you can scale any interface, without worrying about positions, font sizes etc..

Nikolas, if you change yout JS code slightly, you can easily get rid of the aspect ratio problem you mentioned:

var prevSize = [450, 350]; // The original starting size

    if ((newWidth != prevSize[0]) || (newHeight != prevSize[1]))

        var zoomX = newWidth / prevSize[0];

        var zoomY = newHeight / prevSize[1];

        {var finalZoom = zoomY} else {var finalZoom = zoomX}

    this.patcher.message("zoomfactor", newFactor);

    this.patcher.wind.scrollto(0, 0);

// global vars about the box.
var prevSize = [450, 350]; // The original starting size

function updateSize(newWidth, newHeight)
{
	if ((newWidth != prevSize[0]) || (newHeight != prevSize[1]))
	{
		// The size has changed!
		var zoomX = newWidth / prevSize[0];
		var zoomY = newHeight / prevSize[1];

		if (zoomX > zoomY)
		{var finalZoom = zoomY} else {var finalZoom = zoomX}
		scaleFactor(finalZoom);
	}
}

function scaleFactor(newFactor)
{
	this.patcher.message("zoomfactor", newFactor);
	this.patcher.wind.scrollto(0, 0);
}


@Pedro,
Yes, that would definitely look better!


OK, I had some time to search for some previous attempts at this and to revise the JS code (which I'm terrible at, btw...) in order to have a very simple and practical "single-object" solution that can be easily incorporated on any patch, and that is CPU friendly (only processes if the window size has changed since the last time). Here it is.

that's great! will be very useful. thanks!

How could I make the UI stay in the center of the window, instead of the upper left? At least horizontally?

You have to give a scripting name to the UI objects you want to move dynamically. Thus the "need" to put everything int a main top bpatcher so you have to deal with one object only. Also, when zooming and moving UI objects around, I found it difficult to calculate the proper positions for everything (again leading to a top bpatcher!!)

You have to give a scripting name to the UI objects you want to move dynamically. Thus the "need" to put everything int a main top bpatcher so you have to deal with one object only. Also, when zooming and moving UI objects around, I found it difficult to calculate the proper positions for everything (again leading to a top bpatcher!!)
Hope the example helps!

thanks for the update. It does what I was looking for! However I get the error:

ps.window_zoom-centered.js: Javascript ReferenceError: myPost is not defined, line 61

Putting the UI into a bpatcher was my intention, because I switch between different UIs - each of them wrapped into a bpatcher and hidden or shown as desired...

Hi Nikolas,
thanks for the update. It does what I was looking for! However I get the error:
ps.window_zoom-centered.js: Javascript ReferenceError: myPost is not defined, line 61
(It is working anyhow)...
Putting the UI into a bpatcher was my intention, because I switch between different UIs - each of them wrapped into a bpatcher and hidden or shown as desired...


Yes sorry, just comment that out, its one of my functions. Or just replace it with a simple "post".

Hi, this is super helpful but i have had some problems, atm my patch when loaded is completely off screen even if i set the window size and restrictions ?

hi, my patch isn't really square is it possible to adjust the width to scale more somehow? thanks

1.jpg

2.jpg

if i can scale the width ratio some how that would be very good thanks any suggestions would be awesome

Have you seen my solution above? It deals with the ratio issue...

thanks Pedro iv been using this actually but the bpatch is being trimmed off at the bottom? i think i might have put one in a sub patch and in the parent

i was just messing with the window itself not the values..Thanks thats awesome

if it is enough for you to give the user three options, fullscreen, 3/4 of fullscreen, and half the screensize, you could easily solve the problem programmatically (without java´n stuff) by not allowing the user to resize the window himself the normal way but only by a button/toggle/menu.


if it is enough for you to give the user three options, fullscreen, 3/4 of fullscreen, and half the screensize, you could easily  solve the problem programmatically (without java´n stuff) by not allowing the user to resize the window himself the normal way but only by a button/toggle/menu.


yeh i set up a umenu thanks,but for some reason if i try to use in maxforlive the int only scales horizontally? Solved

yeh i set up a umenu thanks,but for some reason if i try to use in maxforlive the int only scales horizontally?  Solved

no idea about m4l. if all you did works in max, you know that it is because of m4l.

but it is also easy to mix up the order of the position and size values for all of these windows jobs.

care to share what you did? the name "zoom" sounds suspicious. ;)


no idea about m4l. if all you did works in max, you know that it is because of m4l.

but it is also easy to mix up the order of the position and size values for all of these windows jobs.

care to share what you did? the name "zoom" sounds suspicious. ;)


Yeh, great work tho for sure..the function exist so there might be another way. Thanks for the responses ill clean my comments after.

the window message size is still scaleing so thats awesome.i scaled some dial values and its almost working ..👏not sure if im gaining pxls or maybe a border set but yeh its not very smooth but thats ok pretty happy

the window message size is still scaleing so thats awesome.i scaled some dial values and its almost working ..👏not sure if im gaining pxls or maybe a border set but yeh its not very smooth but thats ok pretty happy
Thanks guys

Thank you Pedro Santos for your solution! that's wonderful!

I just found one issue. The dimensions of my patch can be 2 different, depends of some options. So it is for example: 300x200 and 300x150. I guess the argument cannot be changed, so I tried to make 2 copies of the object but it didn't work properly.

Could this issue be solved in the js code?

I just found one issue. The dimensions of my patch can be 2 different, depends of some options. So it is for example: 300x200 and 300x150. I guess the argument cannot be changed, so I tried to make 2 copies of the object but it didn't work properly.   

Could this issue be solved in the js code?  

I'm thinking about making this work with a "no title" floating window. I think a "button" (jit.pwindow) as an handle could be a nice way to achieve that. 

As I'm not really familiar with jit stuff, does someone have a lead to realize this ? or maybe have already done it ? 

I'm thinking about making this work with a "no title" floating window. I think a "button" (jit.pwindow) as an handle could be a nice way  to achieve that. 

As I'm not really familiar with jit stuff,  does someone have a lead to realize this ? or maybe have already done it ? 

Thanks !

how to scale a UI acording to window-size?