Inspiring

Question

drawing custom shape in INDD using JS

Forum|Forum|2 years ago
September 12, 2023
16 replies
1528 views

I'm looking for a method of converting custom vector shape (for example: company logo) that i made in AI to InDesign scritp.

Whole idea behind this question is to write a script that would draw the logo on the current document so it would be a vector shape and not pasted graphic or linked image.

I've found something called drawscri.pt https://community.adobe.com/t5/illustrator-discussions/drawscript-turn-illustrator-shapes-into-code/m-p/4944211

but it's no longer available.... And it looks like something i'm looking for

Do you know any alternative for this expansion? Or maybe there is no simple way of converting vector to JS script?

Scripting

This topic has been closed for replies.

L

Laubender

Community Expert

Hi @Maciej-WR ,

if you like to do more complex bezier curve drawing, first read into this:

The Definitive Tutorial on Bézier Curves
Marc Autret, November 03, 2021

https://indiscripts.com/post/2021/11/the-definitive-tutorial-on-bezier-curves

Regards,
Uwe Laubender
( Adobe Community Expert )

L

Laubender

Community Expert

Hi @Maciej-WR ,

and because you asked this in the title of the thread. Drawing custom shapes is possible by scripting.

You start out with a basic object like a prototype polygon, that only means a closed shape. And after you added the polygon to the page you change the path by e.g. applying a entirePath array to the first path of the polygon.

It could be easy as that when no curve points are in the path.

ExtendScript for InDesign to draw a closed shape with 7 path points:

/*
	Super simple sample:

	Add a new document.
	Add a polygon.
	Apply an array of path points that draw the shape of the polygon.

*/
var newDoc = app.documents.add();
var shape = newDoc.polygons.add();

shape.paths[0].entirePath =
[
	[20,20] ,
	[40,16] ,
	[50,30] ,
	[40,50] ,
	[10,40] ,
	[10,10] ,
	[20,10]
];

Regards,
Uwe Laubender
( Adobe Community Expert )

nickcombs

Inspiring

For bezier curves or converting from Illustrator point objects, we need to input the values according to this example:

const x = 0, y = 1
shape.paths[0].entirePath = [
  [
    [ point[0].leftDirection[x],  point[0].leftDirection[y]  ],
    [ point[0].anchor[x],         point[0].anchor[y]         ],
    [ point[0].rightDirection[x], point[0].rightDirection[y] ]
  ],
  [
    [ point[1].leftDirection[x],  point[1].leftDirection[y]  ],
    [ point[1].anchor[x],         point[1].anchor[y]         ],
    [ point[1].rightDirection[x], point[1].rightDirection[y] ]
  ]
]

The documentation I could find doesn't suggest the left-anchor-right order, so this took some debugging to figure out.

Robert at ID-Tasker

Legend

The documentation I could find doesn't suggest the left-anchor-right order, so this took some debugging to figure out.

By @nickcombs

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#PathPoint.html

L

Laubender

Community Expert

Hi @Maciej-WR ,

if you want the vector shapes you already have in Illustrator created in InDesign, the simplest thing is to copy/paste the logo from Illustrator to InDesign. Then, if all is working fine, you already have the necessary vector shapes in InDesign. But note, this method works for fairly simple shapes only. Could be that Illustrator is using features InDesign does not have and a pasted logo will end up as a graphic object ( an embedded EPS file like ) in InDesign. Could also be that you get more shapes than necessary. One for the fills, one for the strokes, because InDesign does not support how Illustrator handles strokes on a path and tries to simulate the visual appearance.

To solve this issue it could be more a question how to simplify a given logo in Illustrator so that InDesign can cope with the pasted material as vector shapes. That's nothing we can discuss fruitful here without having the real data at hand, the real logo, in the Illustrator file and, at best, could do some tests with it.

So, all in all, it's questionable if the task can be done at all! By any method.

If you want to write a script to draw the logo in InDesign you need to master a couple of things:

[1] Scripting of Illustrator to get the information out how paths are constructed. But that's only the basic stuff.

[2] Transform the information so that InDesign can properly read it. Note, that there are features in Illustrator that are not available in InDesign. So from case to case you have to workaround that ( if possible at all ). Also note that coordinate systems in both apps are a real challenge.

[3] A very good understanding of the scripting DOM of InDesign to benefit from the information from step [2].

[4] Cross-scripting InDesign and Illustrator. Possible with ExtendScript's BridgeTalk API.

Hm. Followed your link to the Illustrator forum discussion.

Monika Gause gave a link to a project that is still avaialble on GitHub:

https://github.com/GreyRook/Draw2Script

Did you see into that? But I think, that's nothing you directly can benefit from.

I'm afraidy you have to write your own functions to extract path information and other things like fill and stroke color out of an Illustrator file. Some links below that are give you essential documentation:

ExtendScript:

https://javascript-tools-guide.readthedocs.io/_/downloads/en/latest/pdf/

ExtendScript's BridgeTalk:

See chapter 47 of the PDF I linked to above.

ExtendScript for Illustrator and some DOM documentation:

https://ai-scripting.docsforadobe.dev/

https://www.indesignjs.de/extendscriptAPI/illustrator27/#about.html

ExtendScript with InDesign DOM documentation:

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#about.html

Regards,
Uwe Laubender
( Adobe Community Expert )

M

Maciej-WRAuthor

Inspiring

@Laubender

Thank you very much for such a comprehensive answer.

I did find Draw2Script extension, but as You said: i didn't know how to make use out of it.

I'm at the beginning of my journey to scripting in ExtendScript, with just little to none experience at FrontEnd, so my gratitude for all the links is twofold. Thank you.

I will definitely read all the sources that You've send, but by far I'll settle for half-measures.

InDesign snippets mentioned by @m1b , are the best solution for my needs and scripting experience.

Here's a simple code that i wrote today. Maybe it will help someone someday

(please note that it only work on the 1st page of a document)

var doc = app.activeDocument;
var relativePath = "ZZ_snippet/snippet.idms";
var myScriptPath = (File(app.activeScript.fullName).parent.fsName).toString().replace(/\\/g, '/');
var snippet = myScriptPath + "/" + relativePath;
var placedItem = doc.pages[0].place(File(snippet));

m1b

Community Expert

Hi @Maciej-WR, I'm really curious about your use case—can you explain why linking to an .ai file is not suitable?

Are you making a script or plug-in that needs to draw the logo using just code? If so, then maybe you could paste the logo from Illustrator into Indesign and then, with it selected, export the logo as .idms (Indesign Snippet), then store the .idms (which is XML) in your script file and your script could write it to a temp file and place it in Indesign wherever you want it. (Snippets do not link, and do not behave like a graphic in a frame—they instantiate as native Indesign objects, which I think is what you need.)

Here's an example of some .idms markup (it's verbose, unfortunately, but maybe you can pare it down to bare basics?):

<Polygon Self="u150" ContentType="Unassigned" StoryTitle="$ID/" OverriddenPageItemProps="" Visible="true" Name="$ID/" HorizontalLayoutConstraints="FlexibleDimension FixedDimension FlexibleDimension" VerticalLayoutConstraints="FlexibleDimension FixedDimension FlexibleDimension" FillColor="Color/r227g6b19" StrokeWeight="1" MiterLimit="10" StrokeColor="Color/r255g255b255" GradientFillStart="0 0" GradientFillLength="0" GradientFillAngle="0" GradientStrokeStart="0 0" GradientStrokeLength="0" GradientStrokeAngle="0" LocalDisplaySetting="Default" GradientFillHiliteLength="0" GradientFillHiliteAngle="0" GradientStrokeHiliteLength="0" GradientStrokeHiliteAngle="0" AppliedObjectStyle="ObjectStyle/$ID/[None]" ItemTransform="1 0 0 1 0 0" ParentInterfaceChangeCount="" TargetInterfaceChangeCount="" LastUpdatedInterfaceChangeCount="">
    <Properties>
        <PathGeometry>
            <GeometryPathType PathOpen="false">
                <PathPointArray>
                    <PathPointType Anchor="171 -230.97988891601562" LeftDirection="171 -230.97988891601562" RightDirection="171 -230.97988891601562" />
                    <PathPointType Anchor="222.69900512695312 -181.04678344726562" LeftDirection="222.69900512695312 -181.04678344726562" RightDirection="222.69900512695312 -181.04678344726562" />
                    <PathPointType Anchor="274.3981018066406 -230.97988891601562" LeftDirection="274.3981018066406 -230.97988891601562" RightDirection="274.3981018066406 -230.97988891601562" />
                    <PathPointType Anchor="274.3981018066406 -128.55270385742188" LeftDirection="274.3981018066406 -128.55270385742188" RightDirection="274.3981018066406 -88.74691772460938" />
                    <PathPointType Anchor="171 -128.55270385742188" LeftDirection="171 -88.26150512695312" RightDirection="171 -128.55270385742188" />
                </PathPointArray>
            </GeometryPathType>
        </PathGeometry>
    </Properties>
    <ObjectExportOption AltTextSourceType="SourceXMLStructure" ActualTextSourceType="SourceXMLStructure" CustomAltText="$ID/" CustomActualText="$ID/" ApplyTagType="TagFromStructure" ImageConversionType="JPEG" ImageExportResolution="Ppi300" GIFOptionsPalette="AdaptivePalette" GIFOptionsInterlaced="true" JPEGOptionsQuality="High" JPEGOptionsFormat="BaselineEncoding" ImageAlignment="AlignLeft" ImageSpaceBefore="0" ImageSpaceAfter="0" UseImagePageBreak="false" ImagePageBreak="PageBreakBefore" CustomImageAlignment="false" SpaceUnit="CssPixel" CustomLayout="false" CustomLayoutType="AlignmentAndSpacing" EpubType="$ID/" SizeType="DefaultSize" CustomSize="$ID/" PreserveAppearanceFromLayout="PreserveAppearanceDefault">
        <Properties>
            <AltMetadataProperty NamespacePrefix="$ID/" PropertyPath="$ID/" />
            <ActualMetadataProperty NamespacePrefix="$ID/" PropertyPath="$ID/" />
        </Properties>
    </ObjectExportOption>
    <TextWrapPreference Inverse="false" ApplyToMasterPageOnly="false" TextWrapSide="BothSides" TextWrapMode="None">
        <Properties>
            <TextWrapOffset Top="0" Left="0" Bottom="0" Right="0" />
        </Properties>
    </TextWrapPreference>
    <InCopyExportOption IncludeGraphicProxies="true" IncludeAllResources="false" />
</Polygon>

Anyway, that's one idea. But please tell us more about your use case. It's interesting!

- Mark

M

Maciej-WRAuthor

Inspiring

Thank you for your interest and hints.

Main case is:

I try to automate (as much as possible) the workflow (rewriting CAD dielines to INDD templates) that has been operating for 10+ years now, so i can't change overall look of the template (no additional links, just native INDD obcejts and text frames). Right now there is a lot of copy/paste from one file to another (custom crop marks, color bars, graphic table with some client info and our company logo), and i want to keep it as simple as possible. In my mind it look like this: i prepare a file in INDD with the page size of a dieline with dieline on one of the layers. I run a script and it draws everything that i mentioned before, turns on a dialog where i can fill up all information that should be in a table etc etc. I was inspired by AutomationEngine/ArtPro+s Raport Templates.

I thought that maybe saving vector files as EPS or SVG could help me converting them to JS, that's why i was talking about AI.

By far i figured out everything besides how to redraw complex shapes using JS (without typing all bounds by hand...)

I will try using snippets or just copying elements from one file to another by JS.

Also, sorry for my english. It's my second language.

m1b

Community Expert

Ah, excellent! Yes I think if you are automating the table information, it will be quite simple to have your script import the logo as pre-saved snippet and position as needed. Good luck!

Peter Kahrel

Community Expert

The easier way it seems to me is to create the logo using InDesign's drawing tools and add it to the template on some master page used for assets, Then instead of a script thaqt draws the logo, you use a script that places it.

That way the logo is also easy to tweak. When you draw it you'll have to tweak the script, which is not trivial.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.