JSON UI Woes

[d.healey]

I'm having some trouble with the new layout stuff... I added all of my UI components but then (for reasons I will leave out) I changed pretty much every UI ID. So none of my GUI controls showed up. So I went into the UI JSON and sure enough it had all of the old control IDs, I removed all of the JSON relating to these controls and recompiled expecting that HISE would regenerate the JSON but it didn't. So I have all of my controls set up in the script but almost none of the are showing up on the front end. Any solutions?

[Christoph Hart]

Do they show up in the Script Component List? If yes you can select them, press J and it will popup a Editor with just that JSON (press F5 to apply the changes there).

[d.healey]

Yes they are showing up in that list, but I also see all of the controls I deleted there too. Pressing J isn't working (could be related to the keyboard shortcut issue I noticed).

Where it says this property was overwritten by the script, if I click show it sometimes pops up a script window where I hit compile but it doesn't seem to make a difference, and it doesn't always pop up the window.

[d.healey]

Ok I haven't got my GUI to reappear yet but think I'm getting somewhere. I realised that I'd failed to press the apply button when removing the redundant controls from the UI JSON. So I re-removed them and now they don't show in the component list. The J button is working now too - except it's SHIFT+J ;) I selected all of the controls in the component list, hit J, and then F5 on the window that popped up, but I still have no GUI, even in the preview window :(

What do the red and green circles indicate in the script component list?

[Christoph Hart]

Sorry for this mess, I am currently cleaning up the Interface Designer. I found out that if I change all shortcuts to use the lowercase, they don't work in Windows. Crossplatform at its finest ...

I think your problem was that you were using multiple widgets with the same ID. If you do this, everything goes south because it needs to be able to get the unique ID on so many levels. I'll probably add a sanity check that fires as soon as you've got multiple components with the same ID.

The circles show the saveInPreset property, which is handy to check this for all properties at once. If the widget is invisible, it will be greyed out. I also added a {...} icon as soon as you use this widget in the script engine (and double clicking on the item will jump to the code location).

If you push the current state on GitHub, I'll take a look and clean up so you can see the interface again (that's probably the most practical solution for now).

[d.healey]

Thanks Christoph. I've pushed it to github and added in the framework as a submodule as you suggested. I haven't relinked all of the external scripts yet though, just the playable range and mic mixer. The front interface script is not an external file, it has a few includes to my framework and I've updated these links.

[Christoph Hart]

I've took a quick look at the current state. The interface is not empty, it is just masked by the grey panel for the top bar (it has a height of 290).

There's also a few other fishy things like the id aeLeftLabel and aeleftLabel, which I suppose should be the same thing.

I found the best workflow to migrate to the new Interface designer approach to click on all properties that are overwritten by the script and comment out that line (don't worry, the properties are persistent), then you can use the Interface Designer to clean up.

[d.healey]

Thanks for taking a look. I'll tinker around with it and hopefully make some progress

[d.healey]

I don't think this commenting out tactic is going to work. A lot of the places it's saying the code is overwriting are in my factory functions so it takes me to lines like this local control = Content.addPanel(id, x, y); If I comment that out then it's going to cause some other issues.

I've fixed the issue with aeLeft now.

I've also tried creating a new preset, adding a script processor, and connecting it to my mic mixer module, the interface is blank and the UI JSON and component list are empty. My key range module though doesn't seem to have any problems and the interface shows up.

[Christoph Hart]

Yes that is true, because the widget definition overwrites the position with the x and y parameters. The solution is pretty simple. In your factory function, replace:

local control = Content.addPanel(id, x, y);

with

local control = Content.getComponent(id);

in order to not overwrite the position in the factory method, but still get a reference that you can use to set up the widget. I did this last week with an older project that I am migrating to support the Interface designer. I've even added a context menu tool that converts these lines for you automatically (select the whole line and then right click -> Convert addWidget to Content.getComponent().

With this approach, you need to create the widget first (either in the interface designer or using the Content.addXXX methods before you call the factory function. Think of it that now the factory functions just shape the already existing widget into the thing you want.

[d.healey]

That seems like a good solution, thanks. I'll give it a go

[d.healey]

Ok I've reworked my uiFactory so it's more of a property setter and changed the way my controls are declared.

When I go the property inspector I'm still getting the This property was overwritten by the script message. I click show on the first one - the x position of my keyboard floating tile - and it takes me to this line const var keyboard = Content.addFloatingTile("keyboard", 0, 300); Commenting out this line won't solve it so I'm not sure what to do...

Update: I've got my GUI back partly - I'm making progress :)

[Christoph Hart]

Well you don‘t need that line after all. As soon as you created the widget either by calling that line once or more conveniently by just adding a widget in the unterface designer, you can safely delete it because the created component is persistent.

[d.healey]

I'm so confused :-( so if I delete that line how do I refer to the keyboard variable elsewhere in my script? (actually I don't really need to refer to that particular component but others I do).

[Christoph Hart]

Content.getComponent("keyboard");

[d.healey]

So I create the control using Content.addControl then I compile, then I delete that line, then I use Content.getComponent() to get the control in a variable again? It seems to me like Content.addControl is redundant

What I'm attempting now is to rebuild the GUI in the JSON view and not use any Content.addControl() commands. This isn't too bad but I have two issues, every time I hit F5 in the JSON view and it compiles it takes me back to the on init so I have to click the drop down menu again to go back to the JSON. The other issue is hex numbers don't seem to be recognised in the JSON view.

[Christoph Hart]

Well I wouldn't say it's redundant, it's just not compatible with the new Interface Designer because it overwrites the position that now can't be controlled directly via mouse / key shortcuts which is like the biggest workflow enhancement of the Interface Designer IMHO.

If you choose to not bother about it and create everything with a script, you can still use the Content.addStuff methods, but again, you miss many things.

I agree that your approach of calling the functions once, then replace it with Content.getComponent() is not very efficient. However if you start the interface from scratch you don't ever need to call one of these functions because you can create and rename the widgets directly via context menu in the interface designer (either by right clicking on the canvas or on one of the items in the widget list). So basically the recommended workflow now is:

1. Create all widgets using the interface designer, shuffle them around and set its properties, connect it to modules etc. without having to touch the script editor once.

2. As soon as you want to implement custom behaviour, customise a Panel or implement some complicated GUI logic, grab a reference to the widget (this can also be done by selecting it and pressing Ctrl+C, it will copy the line Content.getComponent(name) to the clipboard) and use this to add the code you need.

If you take a step back, this procedure is starting to become similar to the way how you connect modules with a script (just grab a reference and do something with it instead of create it completely from scratch).

[d.healey]

I've been trying to rebuild the UI from scratch, I find the ui designer really slow compared to working in the script (especially with multiple cursors) though so I've been creating controls in the JSON view, however like I said when I hit F5 it takes me to the on init so that becomes quite cumbersome too. I also just had a problem with a bunch of controls I'd created in the JSON randomly disappearing along with the JSON code... Should I not hit F5 in the JSON view but go to the normal script to compile or should I do it in both views?

Also, when using the interface designer, is it still possible to split a UI into multiple files and combine them all in the front interface script?