Develop Reference

react-particles-js: Can't set a background and width

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this:
<Particles
params={{
particles: {
number: { value: 35, density: { enable: true, value_area: 800 } },
color: {
value: [
'BB4D10',
'#820E42',
'#BD740F',
'#248592',
'#5F4DAF',
'#8BA00F',
],
},
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 3 },
image: { src: 'img/github.svg', width: 100, height: 100 },
},
opacity: {
value: 1.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 9,
random: true,
anim: {
enable: false,
speed: 43.15684315684316,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 100.82952832645452,
color: '#ffffff',
opacity: 1.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'bubble' },
onclick: { enable: false, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 109.63042366068159,
size: 13,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
}}
style={styling}
/>
After that, I'm trying to add a background color to make it look correctly, but as I can see the styling which I try to pass to the particle it just doesn't work, at least the position applies.
const styling = {
backgroundColor: '#2a2e31',
position: 'absolute',
width: '10%',
};

There are several ways to control the styling:
You can provide a className prop for canvas wrapper, and width prop for the width of canvas:
<Particles
...
style={styling}
width="10%"
className="particles-wrapper"
/>
And, write the CSS:
.particles-wrapper {
background-color: #2a2e31;
height: 100%;
width: 10%; // You may need this or may not depending on your requirement
}
Or, you can add a new div which would wrap the <Particles .. /> and set styling for this div as by default canvas is transparent.
Or, you can use canvasClassName prop and set the style for this class.
Here is a snapshot after using the 1st method from above:
The reason that we need to pass width, height separately is, as seen in source code, those present in props.style is being overwritten like this:
style={{
...this.props.style,
width,
height
}}

The easiest way to set a background to the particles is using the background option.
<Particles params={{
background: {
color: "#000"
},
/* all other options you set */
}} />
This will set a background to the canvas. If you need a transparent one use #ajeet-shah answer.

How to resize gojs button

I have a diagram in gojs that uses groups. Each group has a SubGraphExpanderButton. I want to increase the size of the SubGraphExpanderButton relative to the size of the rest of the graph (Nodes, Links, etc.). How do I do that? I could not find it in the documentation here: https://gojs.net/latest/intro/buttons.html Below is my code for my GroupTemplate:
// define the group template
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
isSubGraphExpanded: false, // initially, make all groups collapsed
layout: $(go.LayeredDigraphLayout,
{ direction: 0, columnSpacing: 10 }),
memberAdded: function(grp, part) {
grp.visible = true;
},
memberRemoved: function(grp, part) {
if (grp.memberParts.count <= 0) grp.visible = false;
}
},
$(go.Shape, "Rectangle", new go.Binding("stroke", "color"),
{ fill: COLOR_WHITE, stroke: COLOR_GRAY, strokeWidth: BORDER_STROKE_WIDTH }
),
$(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.Left, margin: 15 },
$(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Top },
$("SubGraphExpanderButton", { width:8, height:20 }),
$(go.TextBlock,
{ font: "Bold 40px Sans-Serif", margin: 4, stroke: COLOR_BLACK },
new go.Binding("text", "key"))
),
$(go.Placeholder,
{ padding: new go.Margin(0, 10) }
)
)
);
}
Thanks!

Instead of setting the width and height of the button, you could try setting its scale.

Appcelerator Titanium Animation

I am working with titanium expand and collapse for Android.I have created a tablerow with a Label and image.When i click on the image then make bottom view visibility true and set height for tablerow.Then applied animation for the expand view
for (var i = 0; i < sectionItems.length; i++) {
tblCell[i] = Ti.UI.createTableViewRow({
height: 50,
backgroundColor: 'white',
id: i,
layout:"horizontal",
rowId:i
});
topView[i]=Ti.UI.createView({
height: 50,
backgroundColor: 'white',
id: i,
rowId:i,
layout:"horizontal",
width:"100%",
});
lbltitle[i] = Ti.UI.createLabel({
text: sectionItems[i],
id:i,
color:'#000',
font: {
fontSize: '16dp',
fontFamily: 'Myriad Pro',
fontWeight: 'bold'
},
left: "1%",
width:'80%',
rowId:i,
//right: '10',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
});
lblDescription[i] = Ti.UI.createLabel({
// text: sectionItems[i].description,
id: i,
text:"Test Answer",
color:'#000',
font: {
fontSize: '14dp',
fontFamily: 'Myriad Pro',
},
backgroundColor:'green',
rowId:i,
left: "10%",
right:"10%",
top:"10dp",
width:'80%',
height:"25%",
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
});
addPic[i] = Ti.UI.createImageView({
image:"/images/carat_down.png",
rowId:i,
id: i,
right:"1%",
height:'9dp',
width:"16dp"
});
expandView[i]=Ti.UI.createView({
width:"100%",
left:'0dp',
height:"0dp",
backgroundColor:'red',
id: i,
rowId:i,
visible:false,
layout:"vertical"
});
topView[i].add(lbltitle[i]);
topView[i].add(addPic[i]);
expandView[i].add(lblDescription[i]);
tblCell[i].add(expandView[i]);
tblCell[i].add(topView[i]);
addPic[i].addEventListener('singletap', function(e) {
toggleExpand(e);
});
function toggleExpand(e){
if(expandView[e.source.rowId].visible==true){
expandView[e.source.rowId].visible=false;
tblCell[e.source.rowId].height=tblCell[e.source.rowId].height-(topView[e.source.rowId].height*3);
expandView[e.source.rowId].animate({
height:"0dp",duration:250});
}else{
for (var i = 0; i < tblsectionItems.length; i++) {
if(expandView[i].visible==true){
expandView[i].visible=false;
tblCell[i].height=tblCell[i].height-(topView[i].height*3);
expandView[i].animate({
height:"0dp",duration:250});
}}
expandView[e.source.rowId].visible=true;
expandView[e.source.rowId].animate({
height:"auto",duration:250});//"auto"
tblCell[e.source.rowId].height=tblCell[e.source.rowId].height+(topView[e.source.rowId].height*3);
}
}
But when the row expand then i can't see my previous elements of tblcell.I can't find the reason.Please help me

I think you need to change the logic you are using to add elements in the row.
First do not use separate arrays to add each elements instead use row variable to attach elements like below..
var row = Ti.UI.createTableViewRow({});
row.topView = Ti.UI.createView({});
row.expandView = Ti.UI.createView({}); like that..
then use only 2 objects for expanView or whatever view you want to show/hide in toggleExpand function.. like
if(previousView.visible == true)
{
...
}
else{
...
}
previousView = e.row.expandView;

gojs: howto increase distance between links or links labels?

How to increase distance between links (double links)?
myDiagram.linkTemplate=
$(go.Link, // the whole link panel
$(go.Shape, // the link shape
{ isPanelMain: true,
stroke: "black" }),
$(go.Shape, // the arrowhead
{ toArrow: "standard",
stroke: null }),
$(go.Panel, "Auto",
$(go.Shape, // the link shape
{ fill: radgrad, stroke: null }),
$(go.TextBlock, // the label
{ textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 4 },
new go.Binding("text", "text"))
)
);
http://jsfiddle.net/66ENu/

Toggle the values of link.curviness:
myDiagram.linkTemplate=
$(go.Link, // the whole link panel
{ curviness: 20 },
// ... rest of link template
See Link.curviness in the API

How to set the tip dimensions with jQuery qTIp?

I'm having some trouble with modifying qTip's tip size (x,y).
I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.
How can I add it to the following script?
// Status Tooltips Style
$.fn.qtip.styles.statusTooltips = {
background: '#333333',
color: 'white',
textAlign: 'center',
border: {
width: 1,
radius: 5,
color: '#333333'
},
tip: 'leftMiddle',
name: 'dark'
}
// Status Tooltips Init
$('.status[title]').qtip({
style: 'statusTooltips',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftBottom'
}
}
});

it's simpe enough:
$("#mytip").qtip({style: { tip: { size: { x: 10, y: 10}} }});
http://craigsworks.com/projects/qtip/docs/tutorials/#tips

For qtip 2, you can just set the width and height properties of the tip object:
$("#mytip").qtip({
style: {
tip: {
width: 10,
height: 10
}
}
});
See http://qtip2.com/plugins#tips.width

Got it!
$('.status[title]').qtip({
style: {background:'#333333',
color:'white',
textAlign:'center',
border:{width: 1, radius: 5, color: '#333333'},
tip:{corner:'leftMiddle',size: { x:6,y:10 }}
},
position: {corner: {target:'rightMiddle',tooltip:'leftBottom'}}
});
Thanks, StackOverflow, for being an occasional rubber duck :)