Interface sizing

[Lindon]

Cant resize interface width past 500px wide:

Content.makeFrontInterface(800,1200);

will make the i/face 1200 high, but the width will remain at 500...

[Christoph Hart]

Hmm, weird, it works for me here. But you don't actually resize your plugin interface ( = call this method more than once) as this is not supported yet?

Also I would refrain from interface heights > 800 if I were you. There are a lot of people still using 1280x800 with older laptops.

[Lindon]

Nope not calling it more than once: (and yes i wouldnt be making any i/face this tall , but 1000 wide I will probably need soon(ish)

Content.makeFrontInterface(800,400);

const var MyTable = Content.addTable("MyTable", 22, 13);
// [JSON MyTable]
Content.setPropertiesFromJSON("MyTable", {
"width": 452,
"height": 155
});
// [/JSON MyTable]
const var MyButton = Content.addButton("MyButton", 22, 180);
// [JSON MyButton]
Content.setPropertiesFromJSON("MyButton", {
"width": 130,
"height": 24,
"filmstripImage": "C:\Users\lindon.parker\OneDrive\ChannelRobot\Instruments\Duo\pictures\2_BAND_EQ_effect.png"
});

// [JSON mySlider]
Content.setPropertiesFromJSON("mySlider", {
"width": 146,
"height": 152,
"filmstripImage": "C:\Users\lindon.parker\OneDrive\ChannelRobot\Instruments\Duo\pictures\arp_D.png",
"numStrips": "1"
});
// [/JSON mySlider]
const var Button = Content.addButton("Button", 574, 227);

[Lindon]

Maybe I just dont understand how to make this work. How do I get the central column (of the 3) to resize?

[d.healey]

The front interface size is for the plugin output of your instrument, it is not for the interface size of HISE as far as I know. If you click the plugin preview button you should see the plugin window size that you've set.

[Lindon]

Yeah thanks Dave, I know that, and when I open the plugin preview I get the right size, BUT if my plugin is 1200 px wide I'd really really like to be able to place a widget at (say) 1100 but I cant even see that part of my interface using the screen-painter.

[d.healey]

Yeah that makes sense, I think the only way that would work is if Christoph adds scrollbars to the script processor interface so that we can move around it. Stretching the interface wouldn't be so good because not everyone has a monitor large enough.

[Christoph Hart]

Ah now I get what you mean. Yeah, the interface on the script processor is limited to ~900px since this is the default width for the middle column, but this is also bugging me for quite a while so maybe this is the time to think about a layout do-over...

That being said, I managed to design a interface with 1000px width with this system somehow :)

[Lindon]

Yeah do-over if you want,. Truth is I will probably use my python-based Skin-man interpreter to generate all the UI code I need in the long run..... Even copy-paste for 512 buttons/text boxes etc is a pita.

[Christoph Hart]

Well the beauty of code based UIs are that you can do stuff like this with loops (and I would really refrain from autogenerating Javascript code that creates 512 buttons manually).

Take a look at this quick example:

Content.makeFrontInterface(400, 300);

const var buttons = [];

var x = 0;
var y = 0;

const var Panel = Content.addPanel("Panel", 10, 10);// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "width": 510,
  "height": 255
});
// [/JSON Panel]

for(i = 0; i < 64; i++)
{
	x = parseInt(i % 8);
	y = parseInt(i / 8) * 32;
	
	buttons.insert(-1, Content.addButton("button"+i, x * 64, y ));
	buttons[i].set("width", 60);
	buttons[i].set("text", x+1);
	buttons[i].set("parentComponent", "Panel");
}

The panel acts as parent component, so the positions of the buttons are set relatively to the Panel. You can select the panel and move it around and the buttons should follow (make sure you select the panel by rightclicking and choose "Select Component to Edit -> Panel"

If you planning to build sequencers or any kind of matrix (which your power of two number suggests), this is really the recommended way.