EaselJS: Is there any way to export a shape to an image file? - createjs

I have a project in CreateJS which I'd like to remake without CreateJS, but it seems that all my images are in an EaselJS shape format. For example:
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#465762").s().p("AgOAOQgFgFAAgJQAAgHAFgHQAHgFAHgBQAIABAHAFQAFAHAAAHQAAAJgFAFQgHAHgIgBQgHABgHgHg");
this.shape_1.setTransform(43.4,42,0.747,0.747);
Is there some method I could use to export that to an image file?

You can export any EaselJS DisplayObject by caching it, and then exporting the dataURL. Note that you have to know the raw bounds. If you want a larger cache of it, just increase the scale parameter.
this.shape_1.cache(x, y, w, h, [scale]);
var url = this.shape_1.getCacheDataURL();
Unfortunately this method does not support the parameters of the Canvas.toDataURL(), so if you want that, you can hit the cache directly:
this.shape_1.target.cacheCanvas.toDataURL(…[type], [encoderOptions]);
Then, you can use the dataURL in a number of ways. Here is an article on it. Alternatively, just throw the generated cache into the DOM, and right-click on it to save.
document.body.appendChild(this.shape_1.target.cacheCanvas);
Docs:
DisplayObject.cache()
EaselJS getCacheDataURL()
Canvas.toDataURL()

Related

How can I create the resource string without a big string?

In After Effects scripts, if you want your script to be able to be docked in the program's workspace, the only way to do it as far as I know is to use a resource string like this:
var res = "Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
group1: Group{orientation:'column', alignment:['fill', ''], alignChildren:['fill', ''],\
button1: Button{text: 'Button'},\
},\
}";
myPanel.grp = myPanel.add(res);
The above code creates a script UI with one button ("button1") inside a group ("group1").
I would like to know other ways to create the same resource string. Is it possible to make it using a JSON object and then stringifying it??
I know it can be done somehow, because I have inspected the Duik Bassel script that is dockable and, for example, adds elements like this:
var button1 = myPal.add( 'button' );
but I cannot understand how to do it myself.
TL;DR: I want to make a dockable scriptUI without writing a giant string all at once, but bit by bit, like a floating script.
UI container elements have an add() method which allows you to add other UI elements to them, and you can treat them as normal objects.
var grp = myPanel.add("group");
grp.orientation = "column";
grp.alignment = ['fill', 'fill'];
grp.alignChildren = ['fill', 'fill'];
var group1 = grp.add("group");
…
var button1 = group1.add("button");
button1.text = 'Button'
More details and examples here: https://extendscript.docsforadobe.dev/user-interface-tools/types-of-controls.html#containers
Also worth checking out https://scriptui.joonas.me/ which is a visual scriptUI interface builder. You have to do some work on the code it produces to get panels for AE, but it's not hard.
extendscript still uses a 20th century version of javaScript, which doesn't have JSON built-in, but I have successfully used a JSON polyfill with it.
I used json2.js to get structured data in and out of Illustrator, and it worked beautifully, but I can see there's now a json3.js which might be better for whatever reason. This stackoverflow question addresses the differences.
To load another .js file (such as a polyfill) into your script, you need to do something like
var scriptsFolder = (new File($.fileName)).parent; // hacky but effective
$.evalFile(scriptsFolder + "/lib/json2.js"); // load JSON polyfill
These file locations may differ in other Adobe apps. Not sure what it would be in AfterEffects. I seem to remember that InDesign has a different location for scripts. You can also hardcode the path, of course.
Good luck!

Blender: How to export animation as GLTF file

I have made a very basic animation in Blender (2.79) and I am trying to export it as a GLTF or GLB. I have succesfully installed the gltf exporter and am able to export both gltfs and glbs of unanimated models no problem.
As soon as I add animation and try to export however, I get the following error message
The animation is as about as simple as it could be, I'm just experimenting. Its just the default box that changes location and rotation across 3/4 keyframes.
I am new to Blender so perhaps I am missing a step but my process is as follows: Add box to the scene, add keyframes (LocRot), go to export as I would with a static object, this has the following (default) settings.
I have tried clicking Pushdown on the action sheet as I have seen suggested somewhere but it makes no difference.
Am I missing something? Please let me know if you need any more info in order to advise, I'm happy to share the file or whatever might help.
NB this will eventually be used in a-frame so any specific tips on export for that would be much appreciated.
So after seeing someone else's export settings (thanks to the a-frame slack channel) I have got this working. I needed to have force sample animations selected in the animation export settings. Then it exports no problem and works as expected. Answering my own question in case anyone else has this problem.
Thanks.
To export multiple animated objects with armatures, vertex groups should have unique names. Here's a little script to rename bones and vertex groups based on parent armature name:
import bpy
for obj in bpy.context.selected_objects:
if obj.type == "ARMATURE":
prefix = obj.name + "_"
for bone in obj.data.bones:
bone.name = prefix + bone.name
if obj.type == "MESH":
prefix = obj.parent.name + "_"
for vg in obj.vertex_groups:
if vg.name[0:len(prefix)] != prefix:
vg.name = prefix + vg.name

Cytoscape cy png creating empty image

I'm trying to export our graph in full size but it returns an empty image.
cy.png({"full": true})
returns
"data:,"
However, if I do this:
tmpImg.attr('src', cy.png({ "full": true, "output": "base64url", "maxWidth": 20000, "maxHeight": 20000, "bg": "#fff" }));
I get a nice image exported.
The problem is the maxwidth I'm specifying is too small. If I increase it, I get an empty image again.
Please see the related issue. It is because of limit on the size of file a browser can export.
What about changing the scale to something less than 1? This will reduce the quality, but might solve your problem.
Also there is an extension that exports the view as SVG. Alternatively you can try it (SVG will probably have smaller size). Looks like it is under development, and I do not know how well it works.

Is It Possible To Use Embedded Resource Images For ObjectListView SubItems

I can't seem to find any information on this, but does anyone know if it is possible to use an embedded image from my.resources within an ObjectListView SubItem?
I am currently using images stored in an ImageList control, but I find for some reason, those images get corrupted and start displaying imperfections. I don't have the problem if I pull them from the embedded resources as I previously have with the normal listview control.
I am using the ImageGetter routine to return a key reference the ImageList, however, ultimately I would like to pull these from embedded resources. I would like to also do this for animated GIF references as well.
If anyone knows a way, could you please assist. Sample code would be appreciated.
Thanks
You can return three different types from the ImageGetter
int - the int value will be used as an index into the image list
String - the string value will be used as a key into the image list
Image - the Image will be drawn directly (only in OwnerDrawn mode)
So option number 3 could be what you want. Note that you have to set objectListView1.OwnerDraw = true.
If that does not work, an alternative could be to load the images into the ImageList at runtime. There is an example here.
this.mainColumn.ImageGetter = delegate(object row) {
String key = this.GetImageKey(row);
if (!this.listView.LargeImageList.Images.ContainsKey(key)) {
Image smallImage = this.GetSmallImageFromStorage(key);
Image largeImage = this.GetLargeImageFromStorage(key);
this.listView.SmallImageList.Images.Add(key, smallImage);
this.listView.LargeImageList.Images.Add(key, largeImage);
}
return key;
};
This dynamically fetches the images if they haven’t been already fetched. You will need to write the GetImageKey(), GetSmallImageFromStorage() and GetLargeImageFromStorage() methods. Their names will probably be different, depending on exactly how you are deciding which image is shown against which model object.

GIMP Script-fu changing default scripts

I am having issues re-writing one of the default logo scripts in GIMP(using Script-fu based on scheme). For one thing the alpha layer is not shown in the layer browser after the image is shown. I am re-writing the Create Neon Logo script(neon-logo.scm) and I want it to do the following before it displays the new image:
add an alpha channel
change black(background color) to transparent via colortoalpha
return the generated image as an object to be used in another python script(using for loops to generate 49 images)
I have tried modifying the following code to the default script:
(gimp-image-undo-disable img)
(apply-neon-logo-effect img tube-layer size bg-color glow-color shadow) *Generates neon logo
(set! end-layer (car (gimp-image-flatten img))) *Flattens image
(gimp-layer-add-alpha end-layer) *Adds alpha layer as last layer in img(img=the image)
(plug-in-colortoalpha img 0 (255 255 255)) *Uses color to alpha-NOT WORKING
(gimp-image-undo-enable img) *Enables undo
(gimp-display-new img) *Displays new image
For number 3 my python code is this:
for str1 in list1:
for color1 in list3:
img = pdb.script_fu_neon_logo(str1,50,"Swis721 BdOul BT",(0,0,0),color1,0)
But img is a "Nonetype" object. I would like to make it so that instead of displaying the generated image in a new window, it just returns the generated image for use with my python script.
Can anyone help?
Maybe to keep everything more managaeable and readable, you should translate theoriginal script into Python - that way you willhaveno surprises on otherwiser trivial things as variable assignment, picking elements from sequences and so on.
1 and 2) your calls are apparantly correct to flaten an "add an alpha channel " (not "alpha layer",a s you write, please) to the image - but you are calling color-to-alpha to make White (255 255 255) transparemt not black. Trey changing that to (0 0 0) - if it does not work, make]
each of the calls individually, either on script-fu console or on python console, and check what is wrong.
3) Script-fu can't return values to the caller (as can be seen by not having a "return value type" parameter to the register call. That means that scripts in scheme in GIMP can only render thigns on themselves and not be used to compose more complex chains.
That leaves you with 2 options: port the original script to Python-fu (and them just register it to return a PF-IMAGE) - or hack around the call like this, in Python:
create a set with all images opened, call your script-fu, check which of your images currently open is not on the set of images previously opened - that will be your new image:
The tricky part with this is that: there is no unique identifier to an image when you see it from Python-fu - so you 'dhave to compose a value like (name, number_of_layers, size) to go on those comparison sets and even that might not suffice - or youg could juggle with "parasites" (arbitrary data that can be attached to an image). As you can see, having the original script-fu rewriten in Python, since all the work is done by PDB calls, and these translate 1:1, is preferable.