Particles FX - JavaScript Library

[bendurso]

Hey guys! Is it possible to use a Javascript Library like this in Hise? https://vincentgarreau.com/particles.js/

Would be really cool for the background.

[d.healey]

@bendurso You might be able to use it with the webview component.

https://github.com/christophhart/hise_tutorial/tree/master/WebViewTests
https://docs.hise.audio/scripting/scripting-api/scriptwebview/index.html

[bendurso]

@d-healey Thanks I'll take a look to that :)

[bendurso]

@d-healey Oh it worked, it was really easy to implement. Hise is amazing :)

[d.healey]

@bendurso Excellent!

[aaronventure]

@bendurso I yet to get around to trying out WebView in detail, how exactly did your implementation go if you don't mind sharing?

[Christoph Hart]

The webview is not really suitable for a background panel because you can‘t put stuff in top of it.

You‘re better off with either a shader or a rlottie animation for this.

[bendurso]

@aaronventure I just download the github project example from Christoph, and did the same: https://github.com/christophhart/hise_tutorial/tree/master/WebViewTests

He first declared the WebView component:

const var wv = Content.getComponent("WebView1")

Then he did some stuff to get a child folder inside images (this folder should contain the web files):

const var webroot = FileSystem.getFolder(FileSystem.AudioFiles).getParentDirectory().getChildFile("Images/your-web-folder");

And then set the file index file inside that folder.

wv.setIndexFile(webroot.getChildFile("index.html"));

It's everything explained on that example project, I'm just repeating the most essential parts :)

[bendurso]

@Christoph-Hart Oh yes, I just realized that. You can't place anything on top of the WebView for any particular reason or is this something you might consider changing?

[Christoph Hart]

The webview is basically a browser window that will take over the area of the screen that you assign it to so there's no way to render something above it.

[bendurso]

@Christoph-Hart Oh ok, shaders are really cool too, dind't know about them. I'll take a look to that. Thanks :)

[aaronventure]

@Christoph-Hart I'm thinking of having built-in full fledged docs instead of just widget info on hover, is WebView something that I can leverage here, to, say point at my own website where I have the docs? This could also let me painlessly update the docs that the user sees in the plugin. Are there limitations in terms of content playback, or is it the same as the system native browser (that would be Edge/Safari)?

[d.healey]

@aaronventure said in Particles FX - JavaScript Library:

I'm thinking of having built-in full fledged docs

There is a built in documentation system, no need for webview.

https://github.com/christophhart/hise_tutorial/tree/master/DocumentationTutorial
https://docs.hise.audio/working-with-hise/project-management/documentation/index.html

To see it in action press F1 in HISE, the built in docs use the same system.

[aaronventure]

@d-healey

Ah of course. Ideally I'd like to be maintaining one doc per plugin so I would host it... on github? Written in markdown? Then reference it on the webpage and use the docs system in the plugin to pull in the docs from the target repo?

Can it play MP4 files with sound?

[d.healey]

@aaronventure I haven't used it for a while but looking at one of my older projects on github it seems I'm just hosting the markdown there - https://github.com/davidhealey/omalleysIrishWhistles/tree/master/Documentation

If you have a bunch of plugins it might be a good idea to setup a dedicated documentation repo with a sub folder for each project - I think this will work...

I don't believe it will support video files. HISE doesn't have an inbuilt video player/streamer, I think animated gifs might work though.

[Christoph Hart]

Yes audio examples do not work (but they also don‘t work in the webview unless you‘re OK with them being played through the systems default audio device, you can‘t route webview audio back into the plugin).

Or you could just put your entire documentation on a website and make a link to it, from the plugin you can then open a weblink that spawns a browser, you could even attach a broadcaster to multiple components and call different links when you click there), whatever works for you.

[aaronventure]

@Christoph-Hart I am fine with that. Though you might have a point there, this might be a bit of a gimmicky idea, opening a page directly in the browser is likely a safer option for more consistent results/expreience.

[Christoph Hart]

@aaronventure It might also be a better UX for your users so they can keep using your plugin while reading the docs on another tab / monitor / whatever.