how to scale a UI acording to window-size?

    MaxMSPadvanced

    mr.l's icon
    mr.l's icon
    mr.l
    Jan 31 2017 | 7:32 pm
    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

    • Floating Point's icon
      Floating Point's icon
      Floating Point
      Jan 31 2017 | 10:17 pm
      Max Patcher
      In Max, select New From Clipboard.
      Show Text
      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
      Share
    • mr.l's icon
      mr.l's icon
      mr.l
      Jan 31 2017 | 10:31 pm
      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 .
    • Nikolas K's icon
      Nikolas K's icon
      Nikolas K
      Feb 01 2017 | 11:28 am
      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
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 02 2017 | 9:47 pm
      Max Patcher
      In Max, select New From Clipboard.
      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.
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 02 2017 | 9:56 pm
      Max Patcher
      In Max, select New From Clipboard.
      here again. it was missing the js-code. don't know how to copy-compress it
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 03 2017 | 5:36 pm
      @Nikolas Can you post an example patch with the js included?
    • Nikolas K's icon
      Nikolas K's icon
      Nikolas K
      Feb 03 2017 | 7:14 pm
      Hi mr.L,
      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..
      I hope this helps!
      -N
      ZoomingUI.zip
      zip
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 03 2017 | 8:08 pm
      Hi Nikolas,
      yes that helps a lot. Thank you!
      best, l
    • Pedro Santos's icon
      Pedro Santos's icon
      Pedro Santos
      Feb 04 2017 | 1:48 am
      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); }
    • Ernest's icon
      Ernest's icon
      Ernest
      Feb 04 2017 | 6:30 am
      thanks for this )
    • Floating Point's icon
      Floating Point's icon
      Floating Point
      Feb 04 2017 | 7:31 am
      yes thanks, very useful!
    • Nikolas K's icon
      Nikolas K's icon
      Nikolas K
      Feb 04 2017 | 7:51 am
      @Pedro, Yes, that would definitely look better!
    • Pedro Santos's icon
      Pedro Santos's icon
      Pedro Santos
      Feb 05 2017 | 4:03 am
      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.
    • Floating Point's icon
      Floating Point's icon
      Floating Point
      Feb 05 2017 | 7:11 am
      that's great! will be very useful. thanks!
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 05 2017 | 9:50 am
      How could I make the UI stay in the center of the window, instead of the upper left? At least horizontally?
    • Nikolas K's icon
      Nikolas K's icon
      Nikolas K
      Feb 05 2017 | 12:27 pm
      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
    • mr.l's icon
      mr.l's icon
      mr.l
      Feb 05 2017 | 7:30 pm
      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...
    • Nikolas K's icon
      Nikolas K's icon
      Nikolas K
      Feb 05 2017 | 8:02 pm
      Yes sorry, just comment that out, its one of my functions. Or just replace it with a simple "post".
      -N
    • Pedro Santos's icon
      Pedro Santos's icon
      Pedro Santos
      Nov 24 2019 | 8:49 pm
      Have you seen my solution above? It deals with the ratio issue...
    • Brodie Matthews's icon
      Brodie Matthews's icon
      Brodie Matthews
      Nov 25 2019 | 1:08 am
      i was just messing with the window itself not the values..Thanks thats awesome
    • Roman Thilenius's icon
      Roman Thilenius's icon
      Roman Thilenius
      Nov 25 2019 | 8:47 am
      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.
    • Brodie Matthews's icon
      Brodie Matthews's icon
      Brodie Matthews
      Nov 26 2019 | 4:08 am
      yeh i set up a umenu thanks,but for some reason if i try to use in maxforlive the int only scales horizontally? Solved
    • Roman Thilenius's icon
      Roman Thilenius's icon
      Roman Thilenius
      Nov 26 2019 | 5:02 am
      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. ;)
    • Josep Garces's icon
      Josep Garces's icon
      Josep Garces
      Jul 14 2020 | 7:06 pm
      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!
    • Sapo's icon
      Sapo's icon
      Sapo
      Jun 06 2021 | 5:19 pm
      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 !