Variable Importer Dev

# VariableTypesTester

See me on Github

This file set of applications helps visualize potential non-native Illustrator variables.

# Constituents

Action

  • VariableTypesTester.html -- HTML visualizer.
  • jsx/IllustratorVariableTypesTester.jsx -- ExtendScript tester.

Data

  • data/UserCsvData-1.csv
  • data/UserCsvData-2.csv -- Sample CSV data of user-provided non-native variable data. Uses pipe-delimiting to store multiple values in a cell.
  • data/UserCsvSampleData1.js
  • data/UserCsvSampleData2.js -- The sample CSV wrapped in javascript files to easy access via the local HTML VariableTypesTester.html app.
  • data/DefaultManifestData.js -- Sample JSON variables manifest, maps CSV headers to meta instructions.
  • data/ManifestData2.js -- This sample shows alternative configurations for variables compared to the 1st manifest.
  • data/SampleTestSvg.js -- A sample SVG to edit, wrapped in javascript files.

Art

  • ai/Test Art Doc.ai -- The sample Illustrator document to test on.
  • ai/Test Art Doc.svg -- The sample SVG exported from the .ai test file for HTML viz preview.

Helper Code

  • ai/ArtTagger.jsx -- An ExtendScript snippet which helps read and write tags to pageItems.

Shared Logic

Shared logic contains core processing algorithms which are usable in both ExtendScript and modern javascript. This also requires that such code is written for the lowest-common denominator which is ExtendScript.

  • js/shared/CsvParser.js -- A javascript for parsing a CSV. Whichever code is used for csv-parsing should be very generic and usable in any code where this feature is needed.
  • js/shared/VariableTypeMapper.ts -- Typescript file containing object type definitions for the core logic operations of mapping non-native variable data to structured records.
  • js/shared/VariableTypeMapper.js -- The file js/shared/VariableTypeMapper.ts is compiled into this ES3-compatible javascript file.
  • js/shared/ApplicationKeys/ApplicationKeys.ts -- Contains variables which serve as 'keys' in that help build other variables in the application.
  • js/shared/ApplicationConstants/ApplicationConstants.ts -- Contains variables which serve as contant data in the application. (values such as min/max amounts)
  • js/shared/GeneralApplicationClasses/Color.ts -- Classes that structure user input data containing color instructions into a typed object.
  • js/shared/VariableTypes/VariableAttributeInfo.ts -- Object containing string parsing functions and default value getters for all variable attributes.
  • js/shared/VariableTypes/VariablesBase.ts -- The super-classes from which all art variable types are inherited.
  • js/shared/VariableTypes/Position.ts -- An art variable that controls an object's xy position on the artboard.
  • js/shared/VariableTypes/LineArt.ts -- A collection of art variables that affect a PathItem's style.
  • js/shared/VariableTypes/AppearanceEffects.ts -- A collection of art variables that involve Illustrator appearance effects.
  • js/shared/VariableTypes/AppearanceAttributes.ts -- A collection of art variables that involve Illustrator appearance added stroke and width attributes.
  • js/shared/DataSet/DataRecords.ts -- Classes which give structure to the incoming user record data.
  • js/shared/ApplicationErrors/ApplicationErrors.ts -- Typescript file containing object type definitions for the various application errors that may be encountered. It facilitates inheritance or interfaces when using many different kinds of error objects which are appropriate for their respective cases.
  • js/shared/prototypes.js -- Just some prototypes for basic functionality such as Function.prototype.getParamNames.

Diverse Processing Logic

Illustrator and the HTML VariableTypesTester.html app process the input data using the same shared javascript code, but output the results in different ways. These code files contain processing routines used for dataset visualization in both HTML and Illustrator. While the browser-based restylable artwork is detected by using the object's Illustrator-name (id and data-name attributes in SVG), the JSX file finds its artwork based on special scripting tags which were previously applied to some document artwork using the helper script ai\ArtTagger.jsx.

  • js\shared\SvgVariableReplacer.js -- Contains code which edits copies of an SVG image by altering attributes based on the input variable data instructions.
  • jsx\IllustratorVariableTypesTester_DocumentProcessing.jsx -- Contains code which changes art properties in an Illustrator document.

# Usage

# HTML

To use this file set, open the file VariableTypesTester.html in the browser by simply double-clicking on it. Explore the different sections and try to make some valid changes to any of the data and see the effects in any visual output. Every section can be made to be fullscreen via an icon that appears in its upper-right corner.

You can also use Vue dev tools Chrome Extension to monitor the internal data: $vm0.typeMapper.dataRecords and $vm0.typeMapper.typedHeaderItems are the most important ones to note.

Mainly for observing the effects of data on multiple records.

# Illustrator

To see the effects of the data on an Illustrator document, first ensure the file ai\Test Art Doc.ai is the current open document. Then, run the script jsx\IllustratorVariableTypesTester.jsx. It first will put up an input dialog to enter the paths to the sample CSV data and JSON manifest data. If this file set is kept all together, the sample provided files are automatically pre-populated and all you need to do is press Enter. (But you can also put in your own files, and we can have personal settings later if needed.)

Next, a small palette will appear with a dropdown and a left/right arrow. You can now use these arrows and dropdown to cycle between the CSV data records. Using the core data structures and Illustrator-specific output processing, the palette sends Illustrator a BridgeTalk message to change the document's state based on the current record's instructions.

# TODO

  • CEP Project -- Use the class definitions in the shared logic in the CEP project.
  • Default Value -- Currently there's no validation or substitution of default values to accound for any bad data.
  • Other Variables -- Using just JSX and very basic art, it's possible to create the logic for and to test out a multitude of variables.

General Description →