How to make dynamic expansion Artwork accessible for Webview?

[Christoph Hart]

@Straticah there's actually a system built into the webview wrapper that allows you to create virtual assets from the embedded images in a plugin - this is a very common use case so you shouldn't have to hack around loading images from a server every time.

It's been a while that I've implemented it so I have to look into it again, but it should be possible to reference image data using the normal HISE expansion wildcards in your HTML:

<img src="{EXP::MyExpansion}thumbnail.png">

I haven't tested this with expansions though, but I can take a look how to make it work.

[Straticah]

@Christoph-Hart oh this would be very helpful?! :)

[Straticah]

@Christoph-Hart I was not able to get it to work with my Expansions so far. If you have an example or rough script this would be very helpful :)

[Christoph Hart]

@Straticah yeah, I haven't implemented it yet, but it was pretty simple to add:

const var WebView1 = Content.getComponent("WebView1");
WebView1.set("x", 0);
WebView1.set("y", 0);
WebView1.set("width", 600);
WebView1.set("height", 600);

WebView1.setHtmlContent("
<style>
body { background: #888; }
</style>
<p>Hallo</p>
<img src=\"{EXP::noicenoicenoice}hise.png\"/>
");

Compile the latest commit, create an expansion called noicenoicenoice and slap the hise logo in there, then load this script and it should display the image. I haven't tested it in a compiled plugin but since it uses the default HISE image loading mechanism this should work without issues. Let me know if there are any hiccups / problems.

[Christoph Hart]

@Christoph-Hart oh and it needs to be a PNG file because the webview can only load those.

[Straticah]

@Christoph-Hart works thank you very much this saved on a lot of time and potential bugs.

[Straticah]

@Christoph-Hart

Let me know if there are any hiccups / problems.

prototype_sampler_04:! WebView Resource for /%7BEXP::Hardware%20Lab%7Dartwork.png not found
prototype_sampler_04:! WebView Resource for /%7BEXP::Pro%20Essentials%7Dartwork.png not found

Mac works just fine as you have seen.
Win works fine if expansion name has no spaces like "Immersive".

I have some problems on windows encoding url from expansions with a separator.

[Christoph Hart]

@Straticah said in How to make dynamic expansion Artwork accessible for Webview?:

%20

ah yes, somehow the illegal URL characters are not converted properly - I half-assed it myself to convert the {} brackets of the wildcard, but I guess I have to look up exactly which characters are supposed to be encoded and reverse that process before checking the reference string in HISE.

I will so use ChatGPT for that lol...

[Straticah]

@Christoph-Hart Thats the way to go! I used Cursor for the webview.

[Straticah]

@Christoph-Hart How can i get the expansion_info.xml content into webview?
I would like to populate it with tags and a description - that then goes into the info panel.

Does the wildcard reference work?

[bendurso]

@Straticah To get the Tags text you can use

ExpansionHandler.getCurrentExpansion().getProperties().Tags

Supposing that is for the current expansion getCurrentExpansion(), but you could use any expansion.

It doesn't contain a description field in the expansion_info.xml.

[Straticah]

@bendurso ah thats a good starting point, maybe i put everything into tags and try try to format it if possible.