WebView persistence - help me wrap my head around it
-
My understanding is that the WebView spawns not only on plugin init, but on interface open.
The docs say that HISE keeps track of its interactions with the WebView and repeats the last instance of every function when the interface opens, i.e. the new WebView spawns.
But how do I keep the web app itself persistent? Things like scrolling position, current tab, current button states?
Do I just shoot every interaction back into HISE, store that into a persistent object (I see that the WebView itself can be one) and use the interfaceOpen broadcaster to plonk all that data back into the webview using a special function that will then reset it back?
I'm talking about a scenario where the whole shebang is WebView, not just a display. Or, at least, there's a display that's scrollable and the scrolling is implemented in the web app instead of in HISE via mouse broadcaster or something triggering a function in the webview (even though scrolling event is still missing from HISE).
-
Do I just shoot every interaction back into HISE, store that into a persistent object (I see that the WebView itself can be one) and use the interfaceOpen broadcaster to plonk all that data back into the webview using a special function that will then reset it back?
@aaronventure Yes. Not a huge fan of web views though - I always end up finding another solution because the entire process of spawning a hidden web browser for your plugin feels fishy to me.
-
@Christoph-Hart you mean from a stability standpoint?
-
@aaronventure from a "it might work or it might not work and if it doesn't work have fun trying to reach someone at Microsoft about why their embedded Edge browser is not executing the javascript functions at the page initialisation properly if loaded into Ableton 11"-standpoint.
The Webview concept is intriguing and the idea of leveraging the endless possibilities of UI design in a browser seems nice, but I haven't used it in a real project and the very limited interaction I had with it when creating the minimal examples were not too joyful.
-
@Christoph-Hart I need to do some perspective graphics so I turned to it and it's studly simple to get stuff done using threeJS.
I did, however, write a simple 3d renderer in HISE that leverages the Graphics API to draw stuff. It takes in camera data and spits out the world as defined. It can be dynamic, too.
Before I go off the deep end and end up using small short lines to create everything that's not a line, I thought I'd explore this, because I need to do non-affine transforms to paths, i.e. I need to draw them using 4 points, like the quadrilateral, as rectangles stretch when rendered in projection, and in searching through the JUCE docs I didn't find anything that points to a possibility of this. There's also nothing in the HISE source code (it's obviously not in the AffineTransforms class).
Unless you have an idea how to do this using the tools that are here, or know how you would implement drawProjectedPath(4PointArray).
-
@Christoph-Hart Any chance you can implement a "webview loaded" callback that will trigger whenever a new webview is created, either on init or on UI open? I'm getting some inconsistencies with including stuff in onInit or with the UI-Open broadcaster: 1/10 chance that the webview spawns with a sort of delay and callFunction doesn't go through.
The workaround is to call it after a delay, but I'm not sure how it'll work across systems so it's better have HISE tell me "Webview has spawned, what do you wanna do?".
.evaluate() does not execute in onInit.
Perhaps it's best do make it a broadcaster.
-
@aaronventure can‘t you just bind a function that you call from HTML when the DOM has loaded?
-
@Christoph-Hart Well that sounds like it's exactly what I'm asking for, lemme try it out. Thanks.
-
<script> // Define a fallback for development mode if (typeof window.DOMContentLoaded === 'undefined') { window.DOMContentLoaded = function() { console.log('DOMContentLoaded called (development fallback)'); }; } document.addEventListener('DOMContentLoaded', function() { // Call the function that will be defined in the HISE app DOMContentLoaded(); }); </script>in index.html seems to do the trick.
