FabricJS object functions dont work after loadFromJSON - javascript

I'm saving my canvas in JSON, and storing it in firestore.
jsonResponse.fabricInfos = this.canvas.toDatalessJSON([some properties]);
I already tried with toJSON too
The save works, and on load it loads everything right on the screen, but all the functions I try to use on the objects give an error.
Exemple:
object.set({opacity: 1});
I will always receive: set is not a function...

Related

Next js, Lottie Cannot add property completed, object is not extensible

I have a problem with Lottie's animation.
I fetch a JSON file (Lottie Animation) from Contentful, and I want to display it by Lottie Component.
But I receive an error: "TypeError: Cannot add property completed, the object is not extensible".
I don't know why I receive this error because, when I add a local JSON file from /public to property 'animationData', all works fine.
I tried everything. But local files always work well but json from cms does not.
Contentful also returned proper data
first of all it would have been better if you posted you code ss here but nevertheless i can still guess it :D, i have worked previously with lottie on react apps, so,
have you downloaded from lottiefiles because you have written "from contentful", i dont know what is that but as long as you are using the predefined method it comes along with to run a JSON lottie it should be working fine.
"when I add a local JSON file from /public to property 'animationData', all works fine." , try tinkering with the method's attributes, see if it comes.
// const defaultOptions = {
// loop: true,
// autoplay: true,
// animationData: breakingnews,
// rendererSettings: {
// preserveAspectRatio: "xMidYMid slice"
// }
// };
this was a piece i used in mine,
if this doesn't answer your question experiment on it, i'm sure will find something. happy coding. :)

How to save the last state of sliders after page reload

I have this network visualized using d3 and angular. Here is the link to the visualization.
I wanted to save the last state of the network so that even if I refresh the page it will show the last state. But don't know how to do that.
I read that it can be done using sessionStorage or localStorage but I can't seem to figure it out for my visualization.
I tried this by setting my JSON data to the sessionStorage and then getting it:
if (sessionStorage) {
sessionStorage.setItem("myKey", myJSON.toString());
}
if (sessionStorage) {
sessionStorage.getItem("myKey"); // {"myKey": "some value"}
}
and I also tried it like this:
localStorage.setItem("networkGraph", networkGraph);
var networkGraph = localStorage.getItem("networkGraph");
but it's not working. Is this the right way to do it?
Any help will be highly appreciated!
Are you sure that you need sessionStorage and not localStorage? In the case of sessionStorage saved data will be deleted when a browser tab with your app becomes closed.
You can write localStorage.setItem('inputLayerHeight', vm.inputLayerHeight); in your onChange handler to remember inputLayerHeight and Number.parseInt(localStorage.getItem('inputLayerHeight')) || 15 to restore the inputLayerHeight at value property of vm.inputLayerHeightSlider object. The same approach can be used for the other values to keep.
Your attempt is almost right. The only thing you need to change is the usage of localStorage. Simply add window or $window (more 'angulary' way to access window variable) variable like so:
$window.localStorage.setItem("networkGraph", JSON.stringify(networkGraph));
Also, I recommend using angular-storage if you're looking for an easy way to work with local storage. It makes things less painful :)
I think the problem might be related to the way you are storing data on your local storage. You are saving data as a string however I think that d3 doesn't recognize strings as valid data options. So instead you should do something like this:
if (sessionStorage) {
// Parse the data to a JavaScript Object
const data = JSON.parse(sessionStorage.getItem("myKey"));
} else {
// Fetch data...
// Set sessionStorage or localStorage
sessionStorage.setItem("myKey", myJSON.toString());
}
You can rearrange the logic as it might suit you but the idea is that in the end you should use JSON.parse() when getting the data from storage.

Setting a new property to PFObject

I have a Parse.com cloud function that sends back a PFObject. In some cases I need to send back values for keys that don't exist in the PFObject. Is that possible?
This is what I tried:
var test = prodAndTitles["products"][0];
test["XOXO"] = "kisses";
prodAndTitles["products"][0] = test;
console.log("XOXO = " + prodAndTitles["products"][0]["XOXO"]);
This prints out kisses as expected.
But back in the app when I try to get the XOXO key it's not there:
NSLog(#"The product's XOXO %#", [self.product objectForKey:#"XOXO"]);
This prints out null.
I also tried changing the product type from PFObject to id, but it doesn't help.
Is there a solution, without going into the datastore class and creating dummy columns?
Here's a complete answer to the problem I faced:
The issue is that none of the notations above works for the Parse.com backbone javascript objects that come from the datastore. This is the notation that does work:
testObject.set('TestProp', 'TestValue');
But this is still only part of the solution. When trying to send the testObject with the newly set property to the client ios app, it causes an error:
Uncaught Tried to save an object with a pointer to a new, unsaved object.
The solution for this is to save the testObject after setting the property:
testObject.save();
This doesn't really make sense because I would have liked to add properties to the testObject and NOT save them to the datastore -- and it's a waste of a database call -- but it seems like Parse won't allow it. Weird.
This is done with setting the correct ACL. The ACL has to be set for the user to be able to read and write. Then you can add new columns. In Cocoa it looks something like this:
PFACL *acl = [PFACL ACL];
[acl setReadAccess:YES forUser:[PFUser currentUser]];
[acl setWriteAccess:YES forUser:[PFUser currentUser]];
[test setACL:acl];

KnockoutJS and External JSON

I'm currently experimenting with Knockout JS just to get the hang of the library and all of it's capabilities and I appear to have run into a wall with handling external JSON data.
In the Codepen below I have a dummy observable array which is working fine. Commented out below that is the actual JSON data I want to experiment with. It takes an external feed using $.GETJSON and maps that to filter the results to extract only the data I want to use in my HTML template.
My problem is that I can't seem to get the external JSON to bind to the HTML as I always get 'tracks' is not defined, or sometimes even an empty console (which is always helpful).
Can anybody point me in the right direction of how to handle external JSON? I've done searching around and I can't see much info dedicated to handling external JSON.
http://codepen.io/anon/pen/Hnamf
Looking at your codepen, it isn't entirely clear how you want this to work, but it certainly can be made to work. Just as a quick demo, I moved your $.getJSON inside your init function so that it can actually have access to the view model and then in the callback set what you are getting to the property self.tracks. Since you were binding "tracks", I changed "title" to "tracks", but you can obviously do whatever makes sense to you:
$.getJSON('http://api.soundcloud.com/users/guy-j/tracks.json?client_id=YOUR_CLIENT_ID', {limit: 200}, function(data) {
vm.tracks($.map(data, function (track) {
return {
artwork: track.artwork_url,
duration: track.duration,
permalink: track.permalink_url,
listens: track.playback_count,
stream: track.stream_url,
track: track.title
};
}));
});
http://codepen.io/anon/pen/HAkhy

Can we set cursor as a session variable?

I tried to set a cursor as a session variable looks like it is not working.
Anyone has idea about it ??
My Code:
Meteor.call('apiresult',function(e,result)
{
console.log(result);
Session.set("object",result)
});
//getting variable
var abc=Session.get("object");
return abc.skimlinksProductAPI.numFound;
looks like it's not working
Cursors can actually be stored in Session... sometimes. open the leaderboard app and try this in the browser console:
> Session.set('mycursor', Players.find());
undefined
> Session.get('mycursor')
LocalCollection.Cursor {collection: LocalCollection, selector_f: function, sort_f: null, skip: undefined, limit: undefined…}
> Session.get('mycursor').fetch()
[Object, Object, Object, Object, Object]
Now download the code of the leaderboard example app, use the latest Meteor, and do the same thing in the browser console. You might get:
The moral of the story seems to be, don't store cursors in session variables. Store the Minimongo selector and options (sort, fields etc.) instead as objects.
Interesting thought. It would not be required though, because a cursor is already reactive. You can store the cursor in an ordinary variable.
One thing to point out though is you can't send cursors down using Meteor.call, you can send down javascript objects or specify your own EJSON but you couldn't do this with cursors.
So you can store cursors in global variables if you do the .find() locally, but you cant do it on the server then transfer the cursor using Meteor.call
You can use a publish/subscribe function for this instead.

Categories