I would like to change the color of the onHover effect in IFCjs viewer. Currently it is pink, it would be nice if it was lightGrey.
Can anybody help me do it?
Try this (change the preselectMat as you wish):
const preselectMat = new MeshLambertMaterial({
transparent: true,
opacity: 0.9,
color: 0xff0000,
depthTest: true,
});
viewer.IFC.selector.preselection.material = preselectMat
Related
I did Lottie animation by using Lottie-web and now trying to change the color dynamically so I used Lottie API(https://github.com/bodymovin/lottie-api). In that, I got the keyPath for changing the color but don't know how to change the color of an object.
This is the code for creating the lottie object animation
var animData = {
container: animationContainer,
renderer: "canvas",
loop: true,
autoplay: true,
rendererSettings: {
preserveAspectRatio: "xMidYMid meet"
},
path: "https://labs.nearpod.com/bodymovin/demo/chameleon/chameleon2.json"
};
anim = lottie.loadAnimation(animData);
for changing the color of a Lottie JSON I used
animationAPI.getKeyPath(
"#leaf_3,Contents,color_group,fill_prop,Color"
);
I got the path of an object but now I don't know how to change the color so Kindly help me if anyone knows?
The easiest way to make the color dynamic for a shape in Lottie is to rename your "Stroke 1" or "Fill 1" in After Effects to "#somename". After exporting, you can reference that shape in your CSS like this:
#somename {
stroke: red;
/*or*/
fill: red;
}
You can use lottie-colorify package to change animation colors:
const animation = Lottie.loadAnimation({
container: container.current,
animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});
I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left : 100,
bottom : 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#startupRiskLineChart').datum(
prepareDataObj(val1_y, val1_x, val2_y, val1_x))
.transition().call(chart);
;
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.
To get a line chart with a filled area in a specific color:
Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }
The opacity of the area is set to 0.5, so filling it with red will actually make it pink:
chart.color(["red","yellow","blue"]);
'#00FFFF','#0FF','cyan' all are valid ways to set colors
Another way is set it in data itself
[{
values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
key: 'not a Sine Wave',
color: '#ff7f0e' //color - optional: choose your own line color.
}]
duplicate question i guess
Add
classed: "my-custom-approx-line"
to config of specific line and add styling:
&.nv-area {
fill-opacity: 0.2;
}
As of commit #becd772
Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line
I am using Highmaps in one of my web based application. Until now it was easy to modify it according to my use case but now i need to changes the border color of the region and i am unable to do it.
Code i have tried but failed:
chart: {
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
}
See attached image what i want to achieve
Want to change the outline color to white
http://jsfiddle.net/qLen614m/
You can use the stroke attribute of the path element:
path {
stroke: white;
}
There is an options to set border color for map series. It is borderColor and it should be set in series.
series : [{
borderColor: 'white',
...
API link
Example: http://jsfiddle.net/qLen614m/1/
You should use borderWidth property for series.
The border width of each map area.
series: [{
borderWidth: 2
}]
Here is the official demo.
Problem:
When zooming a heat map the gradient gets to thin (dillutedt) to be visible.
(google.maps.visualization.HeatmapLayer)
I have set
heatmap.setOptions({
//radius: 10,
opacity: 1.0,
//dissipating: false
});
to no avail.
I have experienced with radius and dissipating, no success.
For those reading this, here is the solution:
heatmap.setOptions({
dissipating: true,
maxIntensity: 10,
radius: 5,
opacity: 0.9,
//dissipating: false
});
I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.
My HTML:
<canvas id="canvasColor">
My CSS:
<style type="text/css">
#canvasColor {
z-index: 998;
opacity:1;
background: red;
}
</style>
As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.
Live preview:
http://devsgs.com/preview/test/particle/
Any ideas how to overwrite the default black?
I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:
renderer.setClearColorHex( 0x000000, 1 );
in your threejs init function. Change it to:
renderer.setClearColorHex( 0xffffff, 1 );
Update: Thanks to HdN8 for the updated solution:
renderer.setClearColor( 0xffffff, 0);
Update #2: As pointed out by WestLangley in another, similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:
var renderer = new THREE.WebGLRenderer({ alpha: true });
Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:
var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
A full answer: (Tested with r71)
To set a background color use:
renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color
If you want a transparent background you will have to enable alpha in your renderer first:
renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
View the docs for more info.
For transparency, this is also mandatory: renderer = new THREE.WebGLRenderer( { alpha: true } ) via Transparent background with three.js
In 2020 using r115 it works very good with this:
const renderer = new THREE.WebGLRenderer({ alpha: true });
const scene = new THREE.Scene();
scene.background = null;
I found that when I created a scene via the three.js editor, I not only had to use the correct answer's code (above), to set up the renderer with an alpha value and the clear color, I had to go into the app.json file and find the "Scene" Object's "background" attribute and set it to:
"background: null".
The export from Three.js editor had it originally set to "background": 0
Set renderer clear colour
With the below code
renderer.setClearColor( 0x000000, 1 );
I'd also like to add that if using the three.js editor don't forget to set the background colour to clear as well in the index.html.
background-color:#00000000