Ui Widget with scrollbar possible?

FMOD Studio
1

Hi,

I’m looking more into creating more workflow helper scripts using the javascript API and I am wondering if UI dialogs with scrollable content are possible (think longer list of widgets in a grid for instance). I played with the sizePolicy options but couldn’t find a solution.

Thanks in advance,
Michael

2

Widget types certainly do support scrolling, but I believe it requires them to be wrapped around a fixed layout of sorts.

Are you able to post the code you are working on and I’ll take a closer look at what could be causing it to not scroll?

3

Hi Richard,

sorry for the late reply. Here’s a script I’m toying with the edit event macros of multiple selected events. I’ve set the height set to 500px and resize policy set to fixed but when I select more events that would fit it still grows instead of scrolling and I haven’t quite figured out how to setup alignment correctly.

Thanks in advance!

/**
 * Function to launch the modal dialog from the console
 */
this.uiEventMacros = function() {
  return execute()
}

/**
 * Menu item entry
 */
studio.menu.addMenuItem({
  name: "Bulk Edit\\Event Macros",
  execute: execute,
  isEnabled: function() { 
    return studio.window.browserSelection().length 
  }
})

var widgetHeader = [
  {
    widgetType: studio.ui.widgetType.Label,
    column: 0,
    row: 0,
    text: "Event:",
    alignment: studio.ui.alignment.AlignTop
  },
  {
    widgetType: studio.ui.widgetType.Label,
    column: 1,
    row: 0,
    text: "Priority:",
    alignment: studio.ui.alignment.AlignTop
  },
  {
    widgetType: studio.ui.widgetType.Label,
    column: 2,
    row: 0,
    text: "Max Voices:",
    alignment: studio.ui.alignment.AlignTop
  },
  {
    widgetType: studio.ui.widgetType.Label,
    column: 3,
    row: 0,
    text: "Stealing:",
    alignment: studio.ui.alignment.AlignTop
  }
]

/**
 * Shows modal for setting macros of the selected events
 * @returns {managedObject[]|[]} - array of selected events or empty array when called from console
 */
function execute() {
  var objects = studio.window.browserSelection()
  var out = []
  var items = widgetHeader

  if(objects.length > 0) {
    var row = 1;

    objects.forEach(function(object, index) {
      if(object.isOfExactType("Event")) {

        out.push(object)
        row++;

        items = items.concat([
          {
            widgetType: studio.ui.widgetType.Label, 
            alignment: studio.ui.alignment.AlignTop,
            column: 0,
            text: object.name,
            row: row,
          },
          {
            widgetType: studio.ui.widgetType.ComboBox,
            alignment: studio.ui.alignment.AlignTop,
            stretchFactor: 10,
            column: 1,
            row: row,
            items: [
              { text: "Lowest" },
              { text: "Low" },
              { text: "Medium" },
              { text: "High" },
              { text: "Highest" }
            ],
            currentIndex: object.automatableProperties.priority,
            onCurrentIndexChanged: function() {
              object.automatableProperties.priority = this.currentIndex()
            }
          },
          {
            widgetType: studio.ui.widgetType.SpinBox,
            value: object.automatableProperties.maxVoices,
            column: 2,
            row: row,
            range: { minium: 0, maxium: 65 },
            onValueChanged: function() {
              object.automatableProperties.maxVoices = this.value()
            }
          },
          {
            widgetType: studio.ui.widgetType.ComboBox,
            alignment: studio.ui.alignment.AlignTop,
            column: 3,
            row: row,
            items: [
              { text: "Oldest" },
              { text: "Quietest" },
              { text: "Virtualize" },
              { text: "None" },
              { text: "Furthest" }
            ],
            currentIndex: object.automatableProperties.voiceStealing,
            onCurrentIndexChanged: function() {
              object.automatableProperties.voiceStealing = this.currentIndex()
            }
          }
        ])
      }
    })

    if(items.length > 0) {

      studio.ui.showModalDialog({
        windowTitle: "Batch Edit Event Macros",
        windowHeight: 500,
        widgetType: studio.ui.widgetType.Layout,
        layout: studio.ui.layoutType.GridLayout,
        sizePolicy: studio.ui.sizePolicy.Fixed,
        items: items,
      })
    } else {
      console.error("Error: no events selected.")
      alert("Error: no events selected.")
    }

  } else {
    console.error("Error: browser selection empty.")
  }

  return out;
}
4

Thanks for providing the sample code. What’s happening is that only certain widgets can have scrollbars (such as TextEdit), although there is no reason other widgets can’t have it also. On top of this, it appears that the studio.ui.sizePolicy settings are not working correctly internally and so will need to address this for a future update.

You can work around this issue by either just limiting how many events you bulk select or by paginating the selected events so only 12 or so events are displayed at a time.

1 Like
5

Hi Richard,

thanks for your response and sorry for the late reply (the notification mail somehow got lost in my inbox).

Okay good to know I’m not doing anything wrong per se, I will resort to pagination for the time being :). Thanks again and have a nice xmas holiday.

Michael