# Adding moving particles to the background

**URL:** <https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 6, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283 "2024-11-06T15:37:15Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [November 6, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/1 "2024-11-06T15:37:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 6, 2024, 7:37pm UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/2 "2024-11-06T19:37:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 6, 2024, 7:52pm UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/3 "2024-11-06T19:52:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 6, 2024, 8:14pm UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/4 "2024-11-06T20:14:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 7, 2024, 8:03am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/5 "2024-11-07T08:03:27Z")

</div>

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!)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 8:21am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/6 "2024-11-07T08:21:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 7, 2024, 8:24am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/7 "2024-11-07T08:24:51Z")

</div>

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

```python
<!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 ☹ I could access the js in the resultant absolute links. that's about as far as my knowledge could take me 🙂

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 8:29am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/8 "2024-11-07T08:29:11Z")

</div>

you dont any of that in perspective haha 😛

mainly this  
[https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js](https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 7, 2024, 8:38am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/9 "2024-11-07T08:38:08Z")

</div>

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](http://127.0.0.1:8088/main/particles.css)" for example, and I cpould access the particles.css file from that link

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 8:50am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/10 "2024-11-07T08:50:46Z")

</div>

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)

```python
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](https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js))  
[head\_bottom.txt](https://forum.inductiveautomation.com/uploads/short-url/qcsBo4SN24cig9PP6chJ9O4IHv7.txt) (22.6 KB)

Than a simple view with simple js code

```python
	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 😛

[particlesJs.zip](https://forum.inductiveautomation.com/uploads/short-url/b3sDK3bB2NRCl1ytuH1F6ztvPSe.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 😛 (remember background color)

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 7, 2024, 9:07am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/11 "2024-11-07T09:07:41Z")

</div>

Coool. I added 2 haha

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/702b1f74aca66d2d18fed471f6a72497fa0a6e5f.png)

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 🙂

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 9:29am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/12 "2024-11-07T09:29:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [November 7, 2024, 9:38am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/13 "2024-11-07T09:38:14Z")

</div>

Thanks! Really helpful 🕶. 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](https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js) and modified the markdown you provided:

```python
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!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 9:40am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/14 "2024-11-07T09:40:16Z")

</div>

if you have webdev module, do you even need markdown?😛

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 7, 2024, 9:43am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/15 "2024-11-07T09:43:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 9:56am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/16 "2024-11-07T09:56:12Z")

</div>

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

> [@mmadariaga](#):
>
> `'https://url.local/system/webdev/particles.js';`

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 7, 2024, 9:57am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/17 "2024-11-07T09:57:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2024, 10:09am UTC](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/18 "2024-11-07T10:09:43Z")

</div>

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