Adding moving particles to the background

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