Skip to content

Latest commit

 

History

History
109 lines (68 loc) · 9.45 KB

README.md

File metadata and controls

109 lines (68 loc) · 9.45 KB
Raw

AdaCAD

AdaCAD is a parametric design tools for making woven drafts. It supports a designer in creating drafts by connecting different operations into a model or pipeline that results in drafts. It currently supports outputs and representations for Jacuqard, Floor, and Direct-Tieup Loom.

For more information about the project and user guides, visit https://adacad.unstable.design/ or our YouTube Channel

AdaCAD does not require any installing or downloading anything on your device, just open the app in your browser (same link as above).

We invite anyone interested to hack on AdaCAD, should you wish to dive into the code. If that describes you, read on!

Development Setup

AdaCAD is built with Angular, a web development framework for progressive web apps. This project was generated with Angular CLI version 7.3.8.

To ask questions, make suggestions, and get support, consider posting to the AdaCAD Forum

Prerequisites

  • Node.JS and Node Package Manager (npm)
  • Intermediate JavasScript/TypeScript – if you know JavaScript but not TypeScript, it should be fairly easy to pick up TypeScript basics.
  • Basic HTML/CSS – enough to understand how these file types are structured and interact with scripts
  • The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

Installation for developers

  1. Clone this repository onto your local hard drive.
  2. Install Angular
  3. Open your terminal on the local root directory and run npm install to download the requirements. This can take a while.
  4. Once installed, run ng serve in the terminal and wait for Angular to compile the app. It should tell you once it's ready. If your system doesn't recognize ng serve, make sure that you're in the app and run node_modules/.bin/ng serve
  5. Navigate to http://localhost:4200/ and you should see AdaCAD!

Development Notes

There are three core modules in this repo:

  • Core: contains components, services, directives, etc. that are used by both weaver (individual draft view) and mixer (generative workspace) modules. Changes to core will affect both deployments and should be checked before pushing.

  • DraftDetail: contains all components, services, directives, etc. that are used in "Detail" mode for a given draft. This view supports designing on a simulated loom and viewing yarn paths.

  • Mixer: contains all components, services, directives, etc. that are used to design and control the AdaCAD Mixer. This view supports more freeform and parametric experimentation on stitch structures.

Developer Documentation

You can use view automatically generated documentation of our project at http://adacad.unstable.design/AdaCAD/.

Code organization

The information here references Angular documentation, such as this page on Angular concepts and architectural patterns.

  • An Angular app like AdaCAD is organized into modules (bundles of functionality), each of which has their directory in src/app/<module-name>. The modules are currently core, mixer, and weaver as described previously.
  • Each module provides a "view" into the user's design process. The building blocks of these views are Angular components that display some of the data that the user manipulates when designing. Each component has its own subfolder within the module.
  • Components don't handle the actual data manipulation, such as editing drafts or logging the user's history of design operations. For that, we have Angular services, which components use as dependencies. Each module has a provider subdirectory (e.g. src/app/core/provider) that holds the relevant services.
  • Many of the files in the repository are automatically generated by the Angular CLI to make each component or service function properly. See the Code scaffolding section for some useful commands when making a new entity.

Important Files, Vocabulary, and File Locations

AdaCAD is a large (and growing) application and chances are that you will only need to touch a few files when implementing or augmenting it to your own needs. We are slowly migrating the code from impertive/object-oriented styles to functional/reactive styles, so there is a mixture of styles in this base. Here, we will list the files in which you can find core information or action points for the program:

a labeled diagram of the components of AdaCAD as they are experienced by the viewer

Core Data Types:

You can find a description of all of the core datatypes used in AdaCAD at /core/model/datatypes.ts.

  • Cell - This is a single cell or square within the draft. It has two boolean values, one describing the position of the heddle as up/raised or down/lowered, and the second relating to whether or not a weft travels over the warp at this location, which is required for inlay weaving and certain elements of simulation. This value can be set/true or unset/false.

  • Drawdown - A drawdown is the actual pattern of cells and values that make up the weaving draft. For the purposes of computation the cell at [0][0] always corresponds to the top left corner of the draft in memory.

  • Draft - A draft stores the drawdown as well as arrays mapping each warp/weft in the draft to a unique material_id, and system_id. Each draft has a unique id, which allows us to crosslink draft inforamation between the model (data) and view components.

  • Loom - A Loom is simply a collection of arrays representing the threading, tieup and threadling.

  • LoomUtil - A loom utility describes a particular kind of loom (jacquard, direct tieup, etc.) and contains all the functions neccessary for producing a threading, tieup and treadling from a drawdown and vice versa.

  • Tree - The tree is a data representation of the relaitonships between operations and drafts within the mixer. It is the "brain" of AdaCAD and stores all information relating to screen position of the design components, their current parameter vaues, and their parent/child relationships to other on screen design elements.

  • Operation - An operation holds all data required to compute specific chagnes to an input draft. The operation object holds information about the kind of data it can receive and how it manipulates that data. All operations available in AdaCAD are described in: (stored in /mixer/provider/operation.service.ts). Adding a new operation at this location adds it to the entire app, without requiring the user to make any custom UI elements for the operation.

UI Types:

The mixer describes the parametric design view of the AdaCAD interface. This view consists of the following:

  • Palette - this is the visual space of all the design elements in the mixer

  • Subdraft - this is the view that holds the visual represeention and provided options on any draft on view in AdaCAD

  • Operation - this is the view that holds the visual representation of each operation. The operation consists of subtypes: Inlet, which governs the type of input this operation can receive, Parameter, which describe how to represent and validate parameter inputs on screen. The data used to generate inlets and parameters is described by the operation (stored in /mixer/provider/operation.service.ts)

  • Connection - this is the visual represenation of the connection between drafts and operations.

  • Weaver - the weaver is separate module from the mixer which stores all the UI features that the user sees and uses when they expand or "Fine Tune" a draft.

Angular CLI Tips

Code scaffolding

The Angular CLI provides built-in commands to generate the utility files for components, services, and other such things categorized as "schematics". These files will be generated in the current directory of the terminal, so navigate to the appropriate subdirectory first.

  • New component:
    1. Make a subfolder in the appropriate module named <component-name>
    2. In this subfolder, run ng generate component <component-name>
  • New service:
    1. In the appropriate module's provider subfolder, run ng generate service <service-name>
  • For other options, refer to the Angular CLI documentation.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you save changes in any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Further help

To get more help on the Angular CLI, use ng help or go to the Angular CLI README.