@dannytaurus Don't have anything released yet but this is what you do in HISE
const var Interface = Content.addWebView("Interface", 0, 0);
Interface.set("width", 1600);
Interface.set("height", 900);
Interface.set("enableCache", true);
Interface.set("enableCache", false); // comment this out before export
Interface.set("enablePersistence", true);
Interface.reset();
Interface.set("saveInPreset", true);
// Point to index.html
var index = FileSystem.getFolder(FileSystem.AudioFiles).getParentDirectory().getChildFile("Images/Interface/build/index.html");
Interface.setIndexFile(index);
Interface.setConsumedKeyPresses("all");
//=====================================================================
Interface.bindCallback("DOMContentLoaded", function(args)
{
// Push persisted state into the interface. Simply call this when the DOM loads in your index.html,
});
//=====================================================================
// WebView component callback
// Only executes on init when persistent data is restored
inline function onInterfaceControl(component, value)
{
//Init stuff, recall config.ini, push persisted state back into the interface...
};
Content.getComponent("Interface").setControlCallback(onInterfaceControl);
Your app.html while developing the interface is mostly empty anyway since you do everything in +layout.svelte and the individual components. But it does have
<script>
// Define a fallback for development mode
if (typeof window.DOMContentLoaded === 'undefined') {
window.DOMContentLoaded = function () {
};
}
document.addEventListener('DOMContentLoaded', function () {
// Call the function that will be defined in the HISE app
DOMContentLoaded();
});
</script>
So you open the interface, it finishes loading and calls DOMContentLoaded, which is defined in HISE, and in HISE you simply take the value of the webview component (or wherever you're storing the state) and call a function in your interface https://docs.hise.dev/scripting/scripting-api/scriptwebview/index.html#callfunction.
In your interface, you take the object that this function receives and reset your state.
For every interaction, you're managing your Svelte state anyway. In your appState.svelte or whatever you call it, you simply define a callback which says when the state changes, it calls a function "storeToHISE" or whatever you call it, which again you define in HISE, which just receives the json and stores it in the webviewcomponent or in any other component via setValue() so that it can persist.
