How to make dynamic expansion Artwork accessible for Webview?

[Oli Ullmann]

@Straticah
I can't help you with your problem but your browser looks great!

[Straticah]

@Oli-Ullmann

[HISEnberg]

@Straticah You've certainly peaked my interest with a webview based preset browser, so I'll test some things out and let you know if I find a solution to the image distribution issue.

[Straticah]

@HISEnberg currently i load via url which i try to integrate into expansion_info.xml without breaking it and bypassing any caching errors (that i currently experience in build).

https://prototype-audio-public.s3.eu-west-1.amazonaws.com/Expansions/Immersive/artwork.png

But @oskarsh suggested shipping base64 encoded artworks in expansion instead.

[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.