Adding moving particles to the background

Ignition
,
1

Hi, I'd like to know whether it's possible to add particles like this: particles.js - A lightweight JavaScript library for creating particles to a page's background. If so, how?

2 Likes
2

This would only be possible with only using Ignition if you are using webdev module, or if you make a custom perspective component using Ignitions SDK.

If your heart is really set on it technically you could Iframe another webpage that has that running on it and then put that Iframe in the background.

Overall, not really an easy way to make that happen. If you are interested in either of the two Ignition routes, I am sure I can help point you in the direction to get more info.

3

I think this would be possible with markdown js injection...

4

This is true, I haven't tried injecting JS into the markdown component. I often forget it is there! Could be worth a try as well.

5

I briefly tried it out, but I'm no js md hack wizard! I couldn't get it to work myself. Maybe the wizard himself might be able to help @victordcq (sorry!)

6

Cool lib, seems very easy to use the basics, gimme a sec :stuck_out_tongue:

7

This probably won't help, but this is the minimum html I needed to run it (I modified the demo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  
  <link rel="stylesheet" media="screen" href="css/style.css">
</head>
<body>

<!-- particles.js container -->
<div id="particles-js"></div>

<!-- scripts -->
<script src="../particles.js"></script>
<script src="js/app.js"></script>

</body>
</html>

I tried adding these 4 elements (link, div, and 2x scripts) and I got a div with red bg, but no particles :frowning: I could access the js in the resultant absolute links. that's about as far as my knowledge could take me :slight_smile:

8

you dont any of that in perspective haha :stuck_out_tongue:

mainly this
https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js

1 Like
9

No I mean I put all those files under C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main
and the src I used was "http://127.0.0.1:8088/main/particles.css" for example, and I cpould access the particles.css file from that link

10

i think i coppied different json than the front page example, and maybe missing some css.

this head.txt has to go here(depending on instal folder, might need to create injectables yourself too)

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\injectables

(copy pasted from https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js)
head_bottom.txt (22.6 KB)

Than a simple view with simple js code

	code =  """<img style='display:none' src='/favicon.ico' onload=\"
		window.particlesJS('""" + value.domId + """', """ + system.util.jsonEncode(value.json).replace("\"", "'") + """)			
	\"></img>""".replace("\n", "").replace("\t", "")
	return code

where value.domId is a domid of a empty container view
and value.json is a configurable particles.js.. for this you gotta figure out what to do yourself, i just changed a color to red since default was white and not visslbe on my background :stuck_out_tongue:

particlesJs.zip (5.1 KB)

Oh the main page you linked has a download configured json button, think thats the easiest to get started on the json bit :stuck_out_tongue: (remember background color)

funny, doesnt work in designer itself though (not surprising)

5 Likes
11

Coool. I added 2 haha

image
image949×749 83.5 KB

I really need to understand this all at some stage...

What would be really cool is to make the device symbols on a P&ID float around like this on the page. I think operators would love it :slight_smile:

4 Likes
12

There appears to be an image function so should be possible to float around whatever xD

"Hey boss, i think im drunk, all the symbols are floating around..."

1 Like
13

Thanks! Really helpful :sunglasses:. I wanted to avoid placing it in the gateway, so instead I created a Web Dev application/javascript resource with the content of cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js and modified the markdown you provided:

def transform(self, value, quality, timestamp): 
  code =  """<img style='display:none' src='/favicon.ico' onload=\"   var script = document.createElement('script');  script.src = 'https://url.local/system/webdev/particles.js';  script.onload = function() {  window.particlesJS('""" + value.domId + """', """ + system.util.jsonEncode(value.json).replace("\"", "'") + """)    };  document.head.appendChild(script); \"></img>""".replace("\n", "").replace("\t", "") 
  return code

This way you can also see the particles in the designer. Thanks again, your js injection knowledge is always appreciated!

1 Like
14

if you have webdev module, do you even need markdown?:stuck_out_tongue:

1 Like
15

Let's say you have a js file resource in webdev, how would you call it from a perspective view ?

4 Likes
16

no idea ive never used the webdev module before
But this seems like it no?

17

Yes, but how would you inject it into your view without the markdown component ?

18

I mean JS itself can only be used with markdown or injectables as far as i know.
So you still would need either one i think.

i think the main point of webdev would be to use a html page though, which should be able to do with iframe atleast.

That would be easy to use as backgorund xd

3 Likes