I'm trying to use tsParticles as a background to a login page but the mouse event doesn't work when I'm on the login div.
How can I make it work?
Here's my configuration
tsParticles.load('tsparticles', {
background: {
color: '#000000'
},
particles: {
color: {
value: '#CF5C36'
},
opacity: {
value: 0.5
},
lineLinked: {
color: {
value: '#EFC88B'
},
consent: true
}
},
interactivity: {
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
preset: 'basic'
});
Here's a sample fiddle of the issue: https://jsfiddle.net/jmfhk0xb/
In the interactivity section, you need to add detect_on: 'window'.
interactivity: {
detect_on: 'window',
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
Related
Hello :) I want to render particles from liblary text
Its totally basic example from this tutorial in link. But i Have this weird problem in console...
enter error image description here
I can Show you my packages and code from my component file
package.json (not all but show neccessaries :> )
"ts-node": "^10.9.1",
"tsparticles": "^2.8.0",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vue": "^3.2.33",
"vue-i18n": "^9.2.2",
"vue3-particles": "^2.8.0",
"yarn": "^1.22.19"
I tried do something like this:
Particles script in MagicParticles.vue
<script setup>
import styles from "./MagicParticles.module.scss";
import Particles from "vue3-particles";
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
await loadFull(engine);
};
const particlesLoaded = async (container) => {
console.log("Particles container loaded", container);
};
const defaultParams = {
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
};
</script>
template
<template>
<div :class="styles.particlesBox">
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="defaultParams"
/>
</div>
</template>
enter error image description here
You should use the component like this:
import { ParticlesComponent } from 'vue3-particles';
This is my code in Particle.js
import React from "react";
import Particles from "react-tsparticles";
function Particle() {
return (
<Particles
id="tsparticles"
params={{
particles: {
number: {
value: 160,
density: {
enable: true,
value_area: 1500,
},
},
line_linked: {
enable: false,
opacity: 0.03,
},
move: {
direction: "right",
speed: 0.05,
},
size: {
value: 1,
},
opacity: {
anim: {
enable: true,
speed: 1,
opacity_min: 0.05,
},
},
},
interactivity: {
events: {
onclick: {
enable: true,
mode: "push",
},
},
modes: {
push: {
particles_nb: 1,
},
},
},
retina_detect: true,
}}
/>
);
}
export default Particle;
and I call particle in Home.js
import Particle from "../Particle";
import Button from 'react-bootstrap/Button';
function Home() {
return (
<div className="mt-5">
<Particle/>
<Button href="" target="_blank" className="register-btn-inner" size="lg">
Register
</Button>
</div>
);
}
export default Home;
I checked a lot of same questions like particles.js not showing up in reactjs project and Particle.js not showing particles on ReactJS website
but solutions don't help me at all. I searched a lot but I don't understand my mistake. why Particle doesn't work?
I installed tsparticles and react-tsparticles libraries too.
You are missing the init attribute on the Particles component. It's visible in the documentation as well here
This is the documentation example:
import { useCallback } from "react";
import Particles from "react-particles";
import { loadFull } from "tsparticles";
const App = () => {
const particlesInit = useCallback(async engine => {
console.log(engine);
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async container => {
await console.log(container);
}, []);
return (
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
directions: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}}
/>
);
};
I am using the below package
https://www.npmjs.com/package/react-graph-vis
could you please tell me how to stop zoom in and zoom out of all nodes
https://stackblitz.com/edit/react-c9tnhw?file=index.js
here is my code
https://stackblitz.com/edit/react-c9tnhw?file=index.js
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
nodes: {
fixed: true
},
height: "600px"
};
Your options object should look like:
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
height: "600px",
interaction: {
zoomView: false
},
};
So just add:
interaction: {
zoomView: false
}
This is my first post. My issue is the following, I have a vuejs app that uses vue-router and one of the components in the vue uses particle.js. I was successfully able to integrate particle.js into my component using $nextTick, however when I added nested routes to the parent component of this said component, particles.js stopped working with no error. The main app is layered as follows:
App.vue:
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
Particle.js is running in the 'title' component.
which is as follows:
<template>
<div id="particles-js"></div>
</template>
<script>
export default {
name: "Title",
mounted() {
require("particles.js");
this.$nextTick(() => {
this.initParticlesJS();
});
},
methods: {
initParticlesJS() {
/* eslint-disable */
particlesJS("particles-js", {
particles: {
number: {
value: 8,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#2d3bff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#2d3bff"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#2d3bff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 800,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 800,
size: 80,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 400,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
}
};
</script>
<style scoped>
#particles-js {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
</style>
I think this might be an issue with the DOM or with the way components are rendered using nested routing because when I remove the from the main component the particles work fine and when I add it again it doesn't seem to be running. But I'm afraid that it's a little out of my depth for something that was supposed to be a simple project.
Update:
I still don't know how to diagnose this. However, I tried using different routes and when I go into a route that doesn't exist, for example: localhost:8080/#/route_that_doesnt_exist the particles will show up, meaning that it only doesn't work when the page is rendering one of the nested routes. I hope this helps.
I'm trying to create a Highcharts map but I can't get past the #13 error which states that the rendering container can't be found. All my other charts that's not a map chart works and it uses the same container class but I can't get maps to work at all.
Config object that gets passed to the initMapChart function (the map chart uses the same config as the normal charts):
highcharts.config = {
chart: {
type: highcharts.getTypeFromId(graph.type)
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function (e) {
this.chart.myTooltip.refresh(e.point, e);
}
}
},
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
},
showInLegend: true
},
line: {
cursor: 'pointer',
dataLabels: {
enabled: true
}
},
area: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
areaspline: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
column: {
stacking: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
map: {
mapData: Highcharts.maps['custom/world'],
joinBy: ['name'],
cursor: 'pointer',
dataLabels: {
enabled: true
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
toggleModify: false,
title: {
text: ''
},
xAxis: {
categories: null,
labels: {
format: graph.span === 0 && graph.isTime && graph.childTarget === null ? '{value:%Y-%m-%d}' : '{value}'
}
},
yAxis: {
title: {
text: ''
},
labels: {}
},
series: null,
credits: {
enabled: false
}
};
I wait for the series to be created first before I try creating the charts, here is where I also set the renderTo property:
scope.$on('highchartsConfigUpdated', function(e, config) {
initDataType();
bindDataTypes();
var target = element[0].querySelector('.highcharts-target');
config.chart.renderTo = target;
if (scope.graph.type === 6) {
initMapChart(config);
}
else {
initChart(config);
}
});
This function will be run for all charts with the type of 6, which means they're a map chart:
function initMapChart(config) {
console.log(config.chart.renderTo);
new Highcharts.Chart('Map', config, function(chart) {
initLabels(chart);
bindLabels(chart);
});
};
From the console log I get this which should mean that it can in fact find the element:
<div id="chart-b2b2d164-b41c-40fc-a739-00cb1bc074ba" class="highcharts-target"></div>
So I think the issue is rather in the instantiation of the chart itself, how do you create a map chart without using jQuery?