How to make dynamic expansion Artwork accessible for Webview?

[d.healey]

@Straticah Are you able to use the FileSystem API to copy the images to where they are accessible?

[Straticah]

@d-healey this would be inside the VST which is not possible since its compiled.

= any other place would be outside of root.

[d.healey]

@Straticah Aha I get it. What about pulling from a server?

[Straticah]

@d-healey I guess that is what i am going for if local url with a Base64 string fails.
I just thought there has to be an easier solution if i can send so much stuff via API already.

Also i have no test so far if web based hosting in VST plugins is cached reliably, but will explore :)

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