I'm struggling updating an object property. I haven't encounter one like that before.
How can I update the duration property?!
var test = new ProgressBar.Circle('#circus', {
strokeWidth: 3,
duration: 60000,
color: '#21abe9',
trailColor: '#f4f4f4',
trailWidth: 1,
svgStyle: null,
});
test.duration = 5 for example, won't do anything.
Thank you!
I'm guessing that you are using ProgressBar.js library. According to its API you have two options:
Override duration by passing new value as optional options to .animate() call:
test.animate(0.5, {
duration: 1000 // new value
});
Create new ProgressBar with correct parameters
Related
To implement a undo/redo functionality, I have constructed an array "history" that gets filled with the latest changes based on canvas.on() events.
console.log dump:
History:
(3) […]
0: Object { target: {…} } //first object added
1: Object { e: mouseup, target: {…}, transform: {…}, … } //first object modified
2: Object { target: {…} } //another object added
length: 3
To walk back the stack of changes, I wanted to use history[step].target which contains the modified object at this stage (step).
I now look for a method to overwrite an object in the object array of fabric.
The function canvas.item(0) gives the object at position 0 on the current canvas but how can I overwrite that object with a different object (from the history[].target array)?
Note: Solutions I found for a undo/redo are seemingly based on serializing the whole canvas into JSON and saving this into an array of JSONs. I didn't want to do this since it seems a bit unsophisticated to always serialize/unserialize the whole canvas with x objects in it just to undo a small change and the history contains many usefull informations about what was changed and on which object ect.
Note2: Of course I probably could just canvas.remove(canvas.item(0)) and then canvas.add(history[x].target), however this unfortunately messes up my object stack when there's more than one objects, as canvas.item(1) becomes canvas.item(0) and the reverted change now becomes canvas.item(1) (or 2, 3... ect depending on how many items on the canvas). When I then have like a list of objects displayed depending on their position in the object stack, this get's rearranged and could confuse the user.
This is a simple example.
Given 2 rect on on a canvas, a function will add one back in the middle of those 2, and another will replace the one at position 0.
canvas#insertAt does work as suggested from #gabriele-petroli
var c = new fabric.Canvas('c');
c.add(new fabric.Rect({ fill: 'blue', width: 100, height: 100 }));
c.add(new fabric.Rect({ fill: 'green', left: 150, width: 100, height: 100 }));
var redRect = new fabric.Rect({ fill: 'red', left: 75, width: 100, height: 100 });
var purpleRect = new fabric.Rect({ fill: 'purple', left: 0,
width: 100, height: 100 });
setTimeout(function() {
c.insertAt(purpleRect, 0, true);
c.insertAt(redRect, 1);
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" ></canvas>
As far as I know it is not possible to overwrite an object.
But this might help for your Note2:
In addition to Gabriele Petriolis comment, you can position the object in the stack after inserting:
Canvas.moveTo()
Canvas.bringToFront()
Canvas.bringForward()
Canvas.sendBackwards()
Canvas.sendToBack()
See: http://fabricjs.com/docs/fabric.Canvas.html
I have a flask app that I am working on. I'm using a js gauge system and I want the value to be a variable that I scrape off of a web page. I scrape the page just fine and return the values I want but when I give that value to the script it returns NaN%. I can cal the variable in the html section just fine.
JS Snippet
var g2 = new JustGage({
id: 'g2',
value: '{{a0}}',
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 1,
counter: true
});
Flask Part
g_data = ast.literal_eval(soup.get_text())
a0 = g_data['ainputs'][3:8]
a1 = g_data['ainputs'][12:17]
a2 = g_data['ainputs'][21:26]
a3 = g_data['ainputs'][30:35]
a4 = g_data['ainputs'][39:45]
Now I have tried to use float and int on the variable, but neither one returns anything besides NaN%. If I put the variable in the value spot without quotes, none of the gauges display anything.
Apparently I wasn't passing the variables to the right view. I am sorry. Just using {{a0}} works now.
I am playing with DMAK.
I want to remove the grid, and I see in the docs that the parameter is:
grid.show - show or hide gridlines. true
So I call it like this:
var dmak = new Dmak('世界', "grid":{"show": "false"}, "stroke": {"attr": {"stroke": "#FF0000"}},"uri": "http://kanjivg.tagaini.net/kanjivg/kanji/"});
So, I edited the library and I set grid.show to false by default (line 83),
grid: {
show: false,
attr: {
"stroke": "#CCCCCC",
"stroke-width": 0.5,
"stroke-dasharray": "--"
}
}
but when I set grid.show to false (or true) on my call, it still shows the grid! It won't show if I don't set it
There's something wrong on my call?
I am trying to understand why.
Actually the call is incorrect. You are passing true and false as strings "true" and "false". A string evals to true.
Try setting it as :
var dmak = new Dmak('世界', "grid":{"show": false}, "stroke": {"attr": {"stroke": "#FF0000"}},"uri": "http://kanjivg.tagaini.net/kanjivg/kanji/"});
and
var dmak = new Dmak('世界', "grid":{"show": true}, "stroke": {"attr": {"stroke": "#FF0000"}},"uri": "http://kanjivg.tagaini.net/kanjivg/kanji/"});
And it should work. Also now you don't need to edit the library which is a bad idea in most cases.
Im trying to pass a variable('maxValue') into my Highcharts guage . I cant get the variable to pass in successfully, the graph renders but without the value.
Ive tried Number and parseInt Functions but neither make a difference.
I setup a JS fiddle here: http://jsfiddle.net/d5d4cgbe/16/
The code section in question:
var maxValue = 120; //set the maxValue var
$('#visitPerformanceWeek').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: maxValue,
title: {
text: 'Hours Worked'
}
},
I will eventually be passing a value collected from an AJAX request, this part I have working but have excluded from the fiddle to keep it simple. Help appreciated
For setting the maxValue dynamically, something like setExtremes should do it. Try
chart.yAxis[0].setExtremes(0,maxValue);
Another alternative is the update method:
chart.yAxis[0].update({ max: maxValue });
For the maxValue to be displayed by the solidgauge, you need to specify a tickerInterval which divides into the maxValue. Presently, the chart is generating a default tick interval e.g. 10, which adds up to 100. For example, a maxValue of 120, you may set the tickInterval to 12
yAxis: {
min: 0,
max: 120,
tickInterval: 12,
...
}
JSFiddle
Check here : http://jsfiddle.net/d5d4cgbe/23/
you can set value using following command :
chart.yAxis.max = maxValue;
check browser console for yAxis value.
If I have an image that I apply a filter to, e.g. Lomo filter, is there way to make that the current Caman instance?
Meaning, if I then want to then play about with the brightness on the image that I applied the filter to, and use this.revert(); to reset the brightness, I want it to revert to the canvas with the filter on it that I just applied.
Is this possible?
I'm having a nightmare with trying to apply many effects, only one at once (except for preset filters), and carry the state through...
If i understand, you want to apply filter ("Lomo") as shown on their example page and then fiddle with some properties (like brightness) and then revert changes back to "Lomo" filter?
Why not just click on filter ("Lomo") again?
EDIT:
You should probably take a look at guide and implement your own method with default values like in filters.
u.Filter.register("lomo", function (D) {
if (D == null) {
D = true
}
this.brightness(15);
this.exposure(15);
this.curves("rgb", [0, 0], [200, 0], [155, 255], [255, 255]);
this.saturation(-20);
this.gamma(1.8);
if (D) {
this.vignette("50%", 60)
}
return this.brightness(5)
});
I dont think your requirement comes "out of the box".
If i understand you correctly , You want to apply a filter and play with other effects like brightness and contrast etc.,
I made some code which will work according to your need
Caman('#canvas-camanImage',"./../media/caman.png", function () {
this.revert(false);
for(var i = 0 ;i<selectedPresets.length;i++){
this[selectedPresets[i]]();
}
for(var key in effect){
this[key](effect[key].value);
}
this.render(function () {
});
in the above code i am storing all effects like brightness contrast in effect variable like effect = {
brightness : {
min : -100,
max: 100,
value : 0
},
contrast : {
min : -100,
max: 100,
value : 0
},
saturation : {
min : -100,
max: 100,
value : 0
}
};
and presets in an array
presets = [
{filter:'vintage',name : 'Vintage'},
{filter:'lomo',name:'Lomo'},
{filter: 'clarity', name:'Clarity'},
{filter:'sinCity', name:'Sin City'}
];
So every time you add any preset or change any effect value i am changing the values in variable and rendering canvas again
It is working very fine for me Let me know if your concern is something else