Hi. Something like particle.js ?
Would be cool to have something like a WIsej ParticlePanel, ParticleGroupbox or ParticleBackground controls
Thanks in advance!
We may turn this into a tutorial. But for now, I created a simple sequence of screenshots and a zipped project.
This are the basic steps:
1- Drop a Wisej.Web.Widget control on a container. You can set the BorderStyle, colors, etc.
2- Add the “packages” you want to use. You can refer to a CDN url or to a local url if you host it on your server. You can specify multiple js and css files. Wisej will load them in sequence. Therefore if you have dependencies, place the libraries that load first at the top. In this case we are loading just particles.js.
Wisej.Web.Widget is a simple <div> and it makes the reference to the DOM Element available to “this.container”. You can use this directly with jQuery or any other library that just needs a DOM element. In other cases you have to create a new one, the most common way is to use this.container.innerHTML = “your html”.
The particles library is happy with a <div> but it needs an id, it cannot use the element directly. Look at the lines in the screenshot below. I assigned an id to the element and then simply initialized the library. The json is copied and pasted from http://vincentgarreau.com/particles.js/.
NOTE: You’d have to do this (and more) with Angular, ASP.NET/MVC, plain HTML, etc.
4- Your are done! Almost actually. When you click OK, Wisej will immediately render the imported widget in the designer. However, in this case, you will not see it because the lines are white and the background is white. Change the background on the widget and you’ll see:
Hit Run and you’ll get your widget running.
You can even receive events, but you’d have to attach to the events fired by the widget and send them to Wisej using
On the server, just attach to WidgetEvent. That’s all. 🙂