how to scale a UI acording to window-size?
Hi,
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?
Thanks! mr.l
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 .
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!
-N
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
@Nikolas
Can you post an example patch with the js included?
Hi Nikolas,
yes that helps a lot. Thank you!
best, l
Nikolas, if you change yout JS code slightly, you can easily get rid of the aspect ratio problem you mentioned:
inlets = 1;
outlets = 1;
// 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);
}
thanks for this )
yes thanks, very useful!
@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!!)
Hope the example helps!
-N
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".
-N
Have you seen my solution above? It deals with the ratio issue...
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.
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. ;)
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?
thank you so much!
Hi !
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 !