We Keep Coding

Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)

Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)

Plotly.js modebar, download as png, give png a name

I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);

Use Plotly.downloadImage
https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage
Add this to your modebar setup for the button callback:
Plotly.downloadImage({
filename: 'customNamedImage',
format: 'png', //also can use 'jpeg', 'webp', 'svg'
height: 500,
width: 500
});
Edit:
I ran a custom example and I think you will want to custimze your own download button in the modebar, like so:
Plotly.newPlot(gd, [{
y: [1, 2, 1],
line: { shape: 'spline' }
}], {
title: 'custom modebar button',
width: 400,
height: 700
}, {
showTips: false,
displayModeBar: true,
modeBarButtons: [[{
name: 'custom download button',
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: 'your_custom_name',
format: 'jpeg',
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}, 'toImage'
], []]
})

There's an easier way to do this in newer versions of Plotly (v1.38+). Use the toImageButtonOptions parameter in the config like this:
Plotly.newPlot(graphDiv, data, layout, {
toImageButtonOptions: {
filename: 'image_filename',
width: 800,
height: 600,
format: 'png'
}
});
You can leave out options you don't need to use the defaults.

Handlers (mouse, touch, scroll) do not work on Mapbox-gl-js map in a Vuejs single file component

I have a Vuejs single file component which shows the map fine:
But none of the (default) handlers work, also not after making them explicit at initialisation.
This is the single file component:
<template>
<div id='map'></div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
data () {
return {}
},
ready () {
this.createMap()
},
methods: {
createMap: function () {
mapboxgl.accessToken = [myapikey]
var simple = {
'version': 8,
'sources': {
'osm': {
'type': 'vector',
'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-[myapikey]']
}
},
'layers': [{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#bbccd2'
}
},
{
'id': 'majorroad',
'source': 'osm',
'source-layer': 'roads',
'type': 'line'
},
{
'id': 'buildings',
'type': 'fill',
'source': 'osm',
'source-layer': 'buildings'
}]
}
// init the map
this.map = new mapboxgl.Map({
container: 'map',
style: simple,
minzoom: 1.3,
bearingSnap: 15,
hash: true, // shows coordinates and zoom in URL widget
center: [-74.0073, 40.7124], // Manhattan
zoom: 16,
attributionControl: true,
interactive: true,
scrollZoom: true,
dragRotate: true,
dragPan: true,
doubleClickZoom: true,
pitch: 60
})
this.map.addControl(new mapboxgl.Navigation())
this.map.addControl(new mapboxgl.Geolocate({position: 'top-left'}))
this.map.addControl(new mapboxgl.Attribution({position: 'bottom-right'}))
this.map.addControl(new mapboxgl.Scale({
position: 'bottom-left',
maxWidth: 80,
unit: 'imperial'
}))
}
}
}
</script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
Any idea why all handlers don't work? I can zoom in and out with the widget. Same map initialisation outside of the component: all handlers works as should.

Analyzed your repo. You have an extra #map DOM element on your index.html which is absolute positioned on top of the UI. All touch/click events are captured by this DOM element and they don't reach the actual map. Created a PR to remove the extra markup.

jsPlumb draggable element javascript function

The JSFiddle will clearly allow you to understand the problem.
I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.
I have a guess that the problem lie with the CSS position but I can't find it.
jsPlumb.ready(function() {
$(".scroll-box").draggable({
drag: function() {
jsPlumb.repaintEverything();
//jsPlumb.repaint($(this));
}
});
// jsPlumb.draggable($(".scroll-box"));
drawEndPoints("in-leaf", "Right");
drawEndPoints("out-leaf", "Left");
});
function drawEndPoints(classname, endpointposition) {
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
jsPlumb.addEndpoint($("." + classname), {
anchor: endpointposition
}, endpointOptions);
//jsPlumb.repaintEverything();
}

You are missing the jsPlumb.setContainer($("body"));
https://jsfiddle.net/mkaran/mLthybzo/
https://jsplumbtoolkit.com/community/doc/home
EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/

jVectorMap on mobile requires 2 clicks

I've been using jVectorMap quite successfully-- it's a wonderful package for displaying interactive maps!
In this case, I only want some regions to be selectable, and there doesn't seem to be an option to set regions active/inactive. So instead, I set "regionsSelectable=false", and then set "selectedRegions" to the ones I want active.
This works fine (showing the correct hover attributes, etc. for "active" regions only)-- with one exception, in iOS. There, it takes two "clicks" (touches) for the "onRegionClick" handler to get invoked. On the first click, the "selectedHover" attributes are set correctly, but "handleRegion" never gets called. A second click, and "handleRegion" is called.
Initialization code looks like:
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
What is needed is either a way to "activate" only a few regions, or a way around this two-click problem.

I know this is a bit outdated question, but here is a hack around iOS issue for others like me who bumped to this question while searching for some hack around this.
As you already noted, iPad/iPhone are emulating hover with first "tap" .. and click with second "tap".
So to fix this ackward behavior we will do following (example on fiddle)
var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'green',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "white",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "white",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
if (lastCode && lastCode == country) {
e.preventDefault();
return;
}
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
},
onRegionLabelShow: function (e, el, country) {
if (iOS) {
e.preventDefault();
var map = $("#world-map").vectorMap("get", "mapObject");
if (lastCode) {
map.regions[lastCode].element.setSelected(false);
}
map.regions[country].element.setSelected(true);
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
}
},
markers: [{
latLng: [37.7833, -122.4167],
name: 'San Francisco'
}]
});
In short words, we are overwriting onRegionLabelShow functionality with custom behavior (only for the iOS devices). Basically we are preventing the tooltip from showing and instead of that we are selecting the hovered (tapped) ccountry, focusing it and storing it's code in global variable.
On second tap we are detecting if the country has changed by comparing current code with last value and in that case un-selecting previously selected country and selecting new one.
It should be fairly easy to adapt the resolution to your needs.

actually, you should check onRegionTipShow:
...
handleIOSClick = function (e, el, code) {
if (istouch) {
var mapObject = $(map).vectorMap('get', 'mapObject');
map.regions[code].element.setSelected(true);
e.preventDefault();
}
},
CreateMap = function () {
if (typeof $(map) !== 'undefined'){
$(map).width(700);
$(map).height(400);
mapObject = $(map).vectorMap({
map: 'us_lcc_en',
onRegionClick: regionClicked,
onRegionTipShow: handleIOSClick,
backgroundColor: "inherit",
regionStyle: {
initial: {
fill: '#477294'
}
}
});
}
},
...