Illustrator Script: Generate a JSON file - javascript

I have been working on creating a system where I can export my swatches from Illustrator as a JSON object in order to allow for my simplicity when trying to update my App that I have created.
Using the illustrator scripting API I have managed to loop through all my swatches and generate an object. What I am attempting to do now is take this data and generate a JSON file with it. This is so that whenever I make colour updates to my App in illustrator it will immediately change everything when I run that script.
I have been making use of Adobe Documentation as well as a helpful site with it simplified and easier to navigate Jongware.
The code overall looks like this: JSFiddle
The code in question is the following. I am not sure if there is way to generate the file without making use of the API. They seem to be using the same JS engine as a browser would but I am not 100% sure. Any advice would be great!
var file = new File('filename.txt');
file.saveAs('txt');
So the main question is how would I generate a new file locally that is able to store this object I have created? As the API isnt that clear on how to create a basic text file from the data I have created.

Based off of the suggestion #enhzflep and this question.
I came to the final output of:
var file;
file = File.saveDialog('Export');
file.open('w');
file.write(JSON.stringify(colourObject));
file.close();
Making use of Douglas Crockfords JSON2 Pollyfill (As Illustrator scripts dont support .stringify) to create a stringify method I was able to create a JSON exported file.

Related

Turn CSV file into array using Vanilla Javascript without input element

I am trying to read turn a CSV file, the file is on local, could be same folder with the script file. Since I am writing JSX for photoshop, I couldn't use any other library. And there are a lot of tutorial out there using input element which is not what I need. The path of the file could be hard coded. What I am trying to do is read the CSV, and take out some data. Please advise!
Let me explain it clearly!
I am writing JSX for photoshop script which has no browser element - input tag something like that. And it must be pure Javascript no library such as jQuery. I did a lot of google search what they do is taking the input tag from browser let user select the CSV file, I just want the file path is hard code, it is a fixed path and filename. And I don't see any tutorial for read CSV file and turn into array via vanilla javascript.
You can use the File class. How this works is explained in the ExtendScript toolkit docs which are installed on your computer alongside Creative Cloud. An online version can also be found here. (The scripting guide references this under the File object on page 110, referring to a section about JavaScript on different platforms on page 32, which then refers to the ExtendScript docs.)
Example:
const file = new File("/c/Users/user/Desktop/text.csv");
file.encoding = 'UTF-8';
file.open("r");
const contents = file.read();
file.close();
alert(contents);

How to use annotation layer in PDF.js?

Some of the PDF.js code mentions an "annotation layer", for example AnnotationLayerBuilder here:
https://github.com/mozilla/pdf.js/blob/95e102c07bc257c2120fd7fd9141762b2c813a1c/web/annotation_layer_builder.js#L118
There is also pdfDocument.annotationStorage and pdfjsLib.AnnotationLayer, which - on all the documents I've tried - are empty, even in documents which do have text annotations.
I couldn't find any examples or documentation on the annotation layer and how it is supposed to be used, but it sure sounds interesting :)
What is the annotation layer? Is this talking about standard PDF annotations, as described in https://pspdfkit.com/blog/2018/what-are-annotations/ or https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf section 8.4 Annotations? Or, is it something internal to PDF.js?
How do I list the existing annotations from javascript code in PDF.js, and how do I add one? (just for display; not expecting to be able to save it in the pdf, of course) Can anyone provide a working code example?
Thanks!
Annotations are standard for the PDF file format as described in the links you provided. They are not a new concept to PDF.js.
How you get the annotations will depend on your situation. I'm building a view layer to replace the viewer the PDF.js team built. The basic idea there is you:
Get a reference to the PDFDocumentProxy object via const doc = getDocument(url)
Get a reference to a PDFPageProxy object via const page = await doc.getPage(num)
Get the annotations via await page.getAnnotations()
If you're already using the viewer they built, it doesn't appear to be exposed anywhere.

Text file data into a webpage for graphing

I am new to web dev and I have a text file that I created using C# to collect some data from a website. Now I want to use that data to make graphs or some way to show the info on a website. Is it possible to use I/O in javascript or what is my best option here? Thanks in advance.
You have several options at your disposal:
Use a server-side technology (like ASP.Net, Node.js etc) to load, parse and display the file contents as HTML
Put the file on a web server and use AJAX to load and parse it. As #Quantastical suggested in his comment, convert the file to JSON forma for easir handling in Javascript.
Have the original program save the file in HTML format instead of text, and serve that page. You could just serve the txt file as is, but the user experience would be horrible.
Probably option 1 makes the most sense, with a combination of 1 + 2 to achieve some dynamic behavior the most recommended.
If you are working in C# and ASP then one option is to render the html from the server without need for javascript.
In C# the System.IO namespace gives access to the File object.
String thetext = File.ReadAllText(fileName);
or
String[] thetextLines = File.ReadAllLines(fileName);
or
If you have JSON or Xml in the file then you can also read and deserialize into an object for easier use.
When you have the text you can create the ASP/HTML elements with the data. A crude example would be:
HtmlGenericControl label = new HtmlGenericControl("div");
label.InnerHTML = theText;
Page.Controls.Add(label);
There are also HTMLEncode and HTMLDecode methods if you need them.
Of course that is a really crude example of loading the text at server and then adding Html to the Asp Page. Your question doesn't say where you want this processing to happen. Javascript might be better or a combination or C# and javascript.
Lastly to resolve a physical file path from a virtual path you can use HttpContext.Current.Server.MapPath(virtualPath). A physical path is required to use the File methods shown above.

Loading JSON FIle in FileMaker for D3 in WebViewer

I am trying to implement D3 graphs and charts in a FileMaker solution. I am stuck on loading a JSON file properly to be used in D3 code displayed in the webviewer.
I am loading all JS libraries into global variables ($$LIB.D3.JS, $$LIB.JQUERY.JS, etc.). Then I am placing the HTML code on the layout (giving an object name, i.e. html). The web viewer grabs the HTML code (from a text box on the layout) and JS code (from global variables) to render the page. This all works fine. (I am using this method detailed here: https://www.youtube.com/watch?v=lMo7fILZTQs)
However, the D3 code I have uses the getJSON() function to get a JSON, parse the data and create the visualization. I can't figure out a way to get the JSON file as a file from within FileMaker. I could put the content of the JSON file into a FileMaker variable and feed that into the HTML, but I then would not be able to use getJSON(). I would have to redo the D3 code to get the data from a JS variable and parse the data from the variable.
Is there a way for me to load a JSON file so FileMaker could use it to render the visualization properly in the WebViewer.
You have two options.
1. Calc the JSON into the HTML as you mentioned. Your right you will have to change how you load the JSON with d3. But its not tough. When you load the JSON from disk, using something like d3.json('/data.json', callback) you are just loading the json and then giving it to the callback function. If the JSON is in the HTML page in a something like var embeddedJSON You can just call the callback directly with the embeddedJSON like
callback (embeddedJSON)
Your code may look more like this.
d3.json('/data.json', function(data){
// bunch of d3 code
})
The callback in this case is an anonymous function. You can change it like this.
var render = function(data){
// bunch of d3 code
})
// then call render with your json variable that you embedded into the html
render ( embeddedJSON )
That will work just fine.
2. Export the html page to the temp directory, and export the json file with the data into right next to it. Then display the html using a file://url. In this case you can use d3.json(/data.json, callback ) and that will work just fine too.
Each of these methods have their pros and cons, but they both work.
In most cases, the best practice for integrating javascript or other assets in a Webviewer is to push assets to the temp directory (get this using GetTemporaryPath() in FileMaker), you can then export assets directly to named files. Once this is done, you can reference these files in your code using the file:// protocol.
This has numerous advantages over older methods, such as loading everything into global variables. One of the biggest of these is that provided you load your JSON into a discrete file and don't "pollute" any other files with FileMaker data, you can work entirely in the code environment of your choice, then simply move web JavaScript libraries, html, CSS, and other assets directly into your FileMaker solution.

Organize Csv file based on filestructure using JavaScript.

Here's the whole problem:
I need to create a plain csv table from a file structure from the server.
Everyline should be organized as follows:
,
Currently, all the files on the server are organized like this:
L:\Dados\rd\20110727000002978\110614.pdf
Where the string 20110727000002978 is the docid and L:\Dados\rd\20110727000002978\110614.pdf is the file path.
So, the CSV table should have the data like this
L:\Dados\rd\20110727000002978\110614.pdf, 20110727000002978
Currently I'm using a BATCH file to do a DIR /S/B > FILELIST.TXT to list all the files, and MANUALLY updating the
Is it possible to automate this using javascript? I guess it would be a simple script, but I had no idea how to start this.
I guess I don't need to use JavaScript, as I long as I don't need any copyrighted copiler - I guess I can use anything.
As far as I know, the code itself is rather simple, but all programming I know is BATCH and a little PASCAL.
If I understand your question, you won't be able to do this entirely in JavaScript. You'll need a sever-side language, like PHP (as an example) to do the file processing.

Categories