mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-08 00:05:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve the website and readme with details and cleanup

Browse source
This commit is contained in:
Keavon Chambers 2022-09-16 01:29:33 -07:00
parent 54b63c3eb5
commit ab75f0fbfb
8 changed files with 112 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

20
README.md
View file

@ -20,9 +20,9 @@ Learn more on the [project website.](https://graphite.rs/)
If the Graphite project strikes your fancy, [join our Discord community](https://discord.graphite.rs) to chat with the community and development team. You're invited to stop by just to lurk, ask questions, offer suggestions, or get involved in the project. We are seeking collaborators to help design and develop the software and this is where we communicate.
## Contributing
## Building/Contributing
We need Rust and web developers! See [instructions here](https://graphite.rs/contribute/) for getting started.
We need Rust and web developers! See [instructions here](https://graphite.rs/contribute/) for setting up the project and getting started.
We are also in search of artists to create beautiful sample work in Graphite and illustrations for the website and social media. Please [get in touch](https://graphite.rs/contact/) if you are able to help out.
@ -40,18 +40,6 @@ Below are some mockups demonstrating future goals for the user interface once no
*Node graph mockup demonstrating how the layers directly correspond to nodes. Thick vertical (upward) lines represent compositing stacks and horizontal (rightward) links represent data flow connections.*
## Roadmap
## Features/Roadmap
Graphite does not use formal version numbers because of the constant rate of feature development and continuous release cycle. Changes can be tracked by [commit hash](https://github.com/GraphiteEditor/Graphite/commits/master). Development is broken into [monthly sprints](https://github.com/GraphiteEditor/Graphite/milestones) and less frequent release series based on major technology readiness milestones:
- Alpha Milestone 1 is the current release series available at [editor.graphite.rs](https://editor.graphite.rs) which encompasses minimum-viable-product (MVP) vector editing features. Features and improvements are continually added and deployed. Regrettably, file format stability isn't guaranteed at this stage since it would prohibitively hinder the pace of development.
- Alpha Milestone 2 is the next release series. It will introduce the node graph system for procedural vector editing. Late summer is the optimistic target.
- Alpha Milestone 3 will probably focus on switching to an in-house vector graphics render engine built on [wgpu](https://wgpu.rs/).
- Alpha Milestone 4 will probably introduce raster compositing.
- Beta versions will follow once basic procedural vector and raster editing is fully supported. File format stability, authoring + sharing custom nodes/extensions, and a downloadable native desktop client will be included during or before Beta.
- RAW photo editing, advanced color handling, automation and batch processing, and procedural painting workflows will be added during further Beta development.
[See the web page for this information.](https://graphite.rs/features/)

8
docs/README.md
View file

@ -1,15 +1,15 @@
# Graphite project documentation
WARNING: A lot of the information in these documents are out of date.
WARNING: A lot of the information in these documents is out of date.
## [Graphite editor manual](editor/README.md)
Click above for the Graphite editor manual. This will evolve into the official manual for the Graphite editor. It contains documentation for each feature of Graphite focused on both usage instructions and technical details.
This will evolve into the official manual for the Graphite editor. It contains documentation for each feature of Graphite focused on both usage instructions and technical details.
## [Graphite codebase docs](codebase/README.md)
Click above for the Graphite codebase docs. This is meant as a good starting point for new developers to jump into the Graphite codebase. It aims to explain the architecture, code structure, and other useful details.
This is meant as a good starting point for new developers to jump into the Graphite codebase. It aims to explain the architecture, code structure, and other useful details.
## [Graphite design notes](design/README.md)
Click above for the Graphite design notes. This is a collection of notes and ideas pertaining to the user experience, workflow, and UI design of Graphite. It should aim to be mostly up-to-date and reflect the current state of understanding of the design for relatively finalized features, but in-progress feature designs may contain ideas, concepts, and proposals.
This is a collection of notes and ideas pertaining to the user experience, workflow, and UI design of Graphite. It should aim to be mostly up-to-date and reflect the current state of understanding of the design for relatively finalized features, but in-progress feature designs may contain ideas, concepts, and proposals.

24
docs/design/feature-goals.md
View file

@ -39,7 +39,7 @@
Contributions welcome! If you think of something Graphite would be great for, submit a pull request or send Keavon a message on Graphite's Discord server to add it here.
## Photography
### Photography
- Using a face detection node to sort photos into the correct folders upon export
- Using a face detection node to place a watermark near every face to prevent customers from cropping out watermarks placed in less important areas of some photos
- Shadow removal from part of an image by masking the location of a shadow and using the texture details of the darker area and the lighting and color context of the illuminated area
@ -47,49 +47,49 @@ Contributions welcome! If you think of something Graphite would be great for, su
- Isolating clipping highlights (that have expanded into neighboring pixels) in one or more color channels from point light sources like city lights and rendering smoother bright gradient point lights in place of them
- Advanced, intuitive blending with a node that lets you create a "custom blend mode" by specifying something like "Anything that's white: display as is. Anything else further from white by luminosity: fade out the saturation and opacity."
## Image editing
### Image editing
- Removing translucent watermarks that were applied in the same location to a batch of photos by finding their shared similarities and differences and using that as a subtraction diff
## Game development
### Game development
- Design a GUI for the game and use Graphene to render the in-game GUI textures at runtime at the desired resolution without scaling problems, or even render it live as data updates its state
- Authoring procedural noise-based textures and PBR materials
## Data visualization
### Data visualization
- Creating a chart from a CSV
- Rendering an always-up-to-date chart powered by real-time updates from a database
- Data-driven infographics like an org chart that can be updated with text instead of manual design work
- Request the weather from an API and render live visualizations which gets displayed on a monitor in your house or a museum (export to a Windows screen saver?)
## Digital painting
### Digital painting
- Creating a digital acrylic or oil painting using various brushes
- Preventing mixing/smearing of previous wet paint layers by drying it with a hair dryer tool
- Smearing wet paint colors together on a simulated paint palette and then sampling paint colors from that palette to paint with
## Education
### Education
- Rendering a timelapse video of everything operation done in the history of a document
## Graphic design
### Graphic design
- Prototyping cards for board games fed with data in a spreadsheet which generates the cards from a template
- Creating an image that has been shredded but pieced back together, where the image can be updated then return to the shredded one without having to redo the editing steps to shred it
## Broadcast and streaming
### Broadcast and streaming
- Rendering overlays for live streams or television broadcasts based on live input data, for example somebody donates and leaves a comment on a live stream and this web hook could trigger an animated display containing the user and their comment, or live telemetry for a rocket launch streams in and gets rendered as graphical overlays for a webcast.
## Interactive exhibits and digital signage
### Interactive exhibits and digital signage
- Rendering a custom live clockface with hour/minute/second hands based on an input of the current time, then showing them fullscreen on a display
- Data from sensors can render interactive 2D graphics at a museum art installation
- A storefront can have a monitor set up showing daily or hourly sales items based on web hooks or polling from the company’s website
- Polling an API for content like Twitter or an RSS feed and displaying the tweet or headline when it arrives on screen, styled as desired
## Print and publishing
### Print and publishing
- Formatting Markdown documents into PDF print layouts
- Laying out book covers for proper PDF export to a printer
- Typesetting and formatting all the interior pages of a book with manual control where needed
## Automation
### Automation
- Laser cutter artwork processing for automating custom Etsy orders
- Running on a server to let users upload images for a custom T-shirt printing website, and it renders their graphic on the model’s shirt (or other custom printing online stores)
- Generating a PDF invoice based on data in a pipeline in a server
## Computer vision and industrial control
### Computer vision and industrial control
- Factory line is examining its fruit for defects. In order to verify the quality, they need to enhance the contrast, automatically orient the image and correct the lighting. They then pass the results into a machine learning algorithm to classify, and sometimes need to snoop on the stream of data to manually do quality control (ImageMagick or custom Python libraries are often used for this right now)

6
docs/design/tool-behavior.md
View file

@ -4,8 +4,8 @@
<kbd>LMB Click</kbd> selects the outermost group.
<kbd>LMB Click</kbd><kbd>LMB Click</kbd> "digs down" the layer tree and selects the layer or group in the currently selected group.
<kbd>LMB Double Click</kbd> "digs down" the layer tree and selects the layer or group in the currently selected group.
<kbd>LMB Click</kbd><kbd>LMB Click</kbd> lets you pick the innermost layer. While holding down the click, the cursor can be dragged outwards from that innermost layer and it selects parent groups that contain it.
<kbd>Ctrl</kbd><kbd>LMB Click</kbd> lets you pick the innermost layer. While holding down the click, the cursor can be dragged outwards from that innermost layer and it selects parent groups that contain it.
Holding <kbd>Ctrl</kbd> displays vector points and they can be <kbd>LMB Click</kbd>ed on to select the individual points, and so long as the modifier key is still held down, they may be dragged. Instead of selecting individual points, they are all selected by default and individual points can be dragged to move the entire shape around, which is useful for snapping the final destination in relation to the point being dragged from.
Holding <kbd>Ctrl</kbd> displays vector points and they can be <kbd>LMB Click</kbd>ed on to select the individual points, and so long as the modifier key is still held down, they may be dragged. Instead of selecting individual points, they are all selected by default and individual points can be dragged to move the entire shape around, which is useful for snapping the final destination in relation to the point being dragged from.

42
website/content/contribute/_index.md
View file

@ -7,9 +7,7 @@ It's great to hear you are interested in contributing to Graphite! We want to ma
## Building and running the codebase.
Graphite is built with Rust and web technologies. Download and install the latest LTS version of [Node.js](https://nodejs.org/) and stable release of [Rust](https://www.rust-lang.org/), as well as [Git](https://git-scm.com/).
On Windows, Rust requires the MSVC toolchain properly configured with the Visual Studio Build Tools installed on your machine including the "Desktop development with C++" workload. **If you are having issues building,** you might have skipped this step or you may have outdated Node.js or Rust versions (compare `node --version` and `rustc --version` against the versions listed in the links above, use `rustup update` to upgrade Rust).
Graphite is built with Rust and web technologies. Install the latest LTS version of [Node.js](https://nodejs.org/) and stable release of [Rust](https://www.rust-lang.org/), as well as [Git](https://git-scm.com/).
Clone the project:
```
@ -22,7 +20,7 @@ cd frontend
npm install
```
You only need to explicitly install Node.js dependencies. Rust's cargo dependencies will be installed automatically on your first build. One dependency in the build chain, `wasm-pack`, will be installed automatically on your system when the Node.js packages are installing. If you prefer to install this manually, you can get it from the [wasm-pack website](https://rustwasm.github.io/wasm-pack/), then install your npm dependencies with `npm install --no-optional`.
You only need to explicitly install Node.js dependencies. Rust's cargo dependencies will be installed automatically on your first build. One dependency in the build chain, `wasm-pack`, will be installed automatically on your system when the Node.js packages are installing. (If you prefer to install this manually, get it from the [wasm-pack website](https://rustwasm.github.io/wasm-pack/), then install your npm dependencies with `npm install --no-optional` instead.)
To run the project while developing:
```
@ -47,7 +45,7 @@ Join the [project's Discord server](https://discord.graphite.rs) then hop on the
## Docs.
We have some documentation [here](https://github.com/GraphiteEditor/Graphite/blob/master/docs/README.md). However it could use some improvements and currently isn't a substitute for mentorship described in the section above. If you also want to dig into the code and solidify your understanding by writing documentation, that would be equally valuable to the project!
Look for `README.md` files within select folders of the codebase and read the code comments at the top of some Rust files. As many folders are missing docs, this currently isn't a substitute for mentorship described in the section above. If you also want to dig into the code and solidify your understanding by writing documentation, that would be equally valuable to the project!
## Codebase overview.
@ -81,22 +79,42 @@ Because this is cumbersome, we have a proc macro `#[child]` that automatically i
</details>
## Debugging
Use the browser console (<kbd>F12</kbd>) to check for warnings and errors. Use the Rust macro `debug!("A debug message")` to print to the browser console. These statements should be for temporary debugging. Remove them before committing to master. Print-based debugging is necessary because breakpoints are not supported in WebAssembly.
Additional print statements are available that *should* be committed.
- `error!()` is for descriptive user-facing error messages
- `warn!()` is for non-critical problems that may indicate a bug somewhere
- `trace!()` is for verbose logs of ordinary internal activity, hidden by default
To show trace logs, activate *Help* > *Debug: Print Trace Logs*.
To also view logs of the messages dispatched by the message bus system, activate *Help* > *Debug: Print Messages* > *Only Names*. Or use *Full Contents* for more verbose insight with the actual data being passed.
## Contributing guide.
### Code style
The Graphite project highly values code quality and accessibility to new contributors. Therefore, please make an effort to make your code readable and well-documented.
**Naming:** Please use descriptive variable/function/symbol names and keep abbreviations to a minimum. Prefer to spell out full words most of the time, so `gen_doc_fmt` should be written out as `generate_document_format` instead. This avoids the mental burden of expanding abbreviations into semantic meaning. Monitors are wide enough to display long variable/function names, so descriptive is better than cryptic.
- **Naming:**
Please use descriptive variable/function/symbol names and keep abbreviations to a minimum. Prefer to spell out full words most of the time, so `gen_doc_fmt` should be written out as `generate_document_format` instead. This avoids the mental burden of expanding abbreviations into semantic meaning. Monitors are wide enough to display long variable/function names, so descriptive is better than cryptic. To streamline code review, it's recommended that you set up a spellcheck plugin in your editor. This project uses American English spelling conventions.
**Imports:** At the top of Rust files, please follow the convention of separating imports into three blocks, in this order:
1. Local (`use super::` and `use crate::`)
2. First-party crates (e.g. `use graphene::`)
3. Third-party libraries (e.g. `use std::` or `use serde::`)
- **Linting:**
Please ensure Clippy is enabled. This should be set up automatically in VS Code. Try to avoid committing code with lint warnings.
Combine related imports with common paths at the same depth. For example, the lines `use crate::A::B::C;`, `use crate::A::B::C::Foo;`, and `use crate::A::B::C::Bar;` should be combined into `use crate::A::B::C::{self, Foo, Bar};`. But do not combine imports at mixed path depths. For example, `use crate::A::{B::C::Foo, X::Hello};` should be split into two separate import lines. In simpler terms, avoid putting a `::` inside `{}`.
- **Imports:**
At the top of Rust files, please follow the convention of separating imports into three blocks, in this order:
1. Local (`use super::` and `use crate::`)
2. First-party crates (e.g. `use graphene::`)
3. Third-party libraries (e.g. `use std::` or `use serde::`)
**Tests:** It's great if you can write tests for your code, especially if it's a tricky stand-alone function. However at the moment, we are prioritizing rapid iteration and will usually accept code without associated unit tests. That stance will change in the near future as we begin focusing more on stability than iteration speed.
Combine related imports with common paths at the same depth. For example, the lines `use crate::A::B::C;`, `use crate::A::B::C::Foo;`, and `use crate::A::B::C::Bar;` should be combined into `use crate::A::B::C::{self, Foo, Bar};`. But do not combine imports at mixed path depths. For example, `use crate::A::{B::C::Foo, X::Hello};` should be split into two separate import lines. In simpler terms, avoid putting a `::` inside `{}`.
- **Tests:**
It's great if you can write tests for your code, especially if it's a tricky stand-alone function. However at the moment, we are prioritizing rapid iteration and will usually accept code without associated unit tests. That stance will change in the near future as we begin focusing more on stability than iteration speed.
Additional best practices will be added here soon. Please ask @Keavon in the mean time.

62
website/content/features/_index.md
View file

@ -3,32 +3,60 @@ title = "Features and roadmap"
template = "page.html"
+++
This page is a work in progress. Below is an incomplete list of planned features in no particular order. Many are long-term aspirations. Soon, this will be sequenced into a roadmap and expanded with further details.
The current version of Graphite provides tools for designing vector art with Bezier curves, similar to tools like Inkscape, Illustrator, and Affinity Designer. These creations may be exported to SVG, JPG, or PNG formats. External images may be imported and placed in the document as a layer (but not directly edited yet).
Short-term feature development at a more granular level is tracked in the [Task Board](https://github.com/GraphiteEditor/Graphite/projects/1) on GitHub. Check that out to see what's coming down the pipeline during monthly sprints.
The present priority is building the node graph system and integrating it with the existing vector editing toolset. Once ready, work will shift to building a raster-based render engine. More advanced features will build off those core capabilities.
The current order of priorities right now begins with adding a node graph system to the existing vector editing toolset, then building a raster-based render engine. More advanced features will build off those core capabilities.
Short-term feature development at a granular level is tracked in the [Task Board](https://github.com/GraphiteEditor/Graphite/projects/1) on GitHub. Check that out to see what's coming down the pipeline during monthly sprints. Graphite does not use formal version numbers because of the constant rate of feature development and continuous release cycle. Changes can be tracked by [commit hash](https://github.com/GraphiteEditor/Graphite/commits/master) and progress divided into [monthly sprints](https://github.com/GraphiteEditor/Graphite/milestones). The hosted web app deploys a [recent commit](https://github.com/GraphiteEditor/Graphite/releases/tag/latest-stable) from the past week or two.
## Milestones
Release series are announced based on major technology readiness milestones. Following a year of pre-alpha development, alpha milestone 1 was [announced](https://graphite.rs/blog/announcing-graphite-alpha/) and work has continued under that banner while progressing towards the features of the second milestone release.
- Alpha Milestone 1 is the current release series available at [editor.graphite.rs](https://editor.graphite.rs) which encompasses minimum-viable-product (MVP) vector editing features. Features and improvements are continually added and deployed. Regrettably, file format stability isn't guaranteed at this stage since it would prohibitively hinder the pace of development.
- Alpha Milestone 2 is the next release series. It will introduce the node graph system for procedural vector editing. This is expected to be ready before the end of 2022.
- Alpha Milestone 3 will probably focus on switching to an in-house vector graphics render engine built on [wgpu](https://wgpu.rs/).
- Alpha Milestone 4 will probably introduce raster compositing.
- Beta versions will follow once basic procedural vector and raster editing is fully supported. File format stability, authoring + sharing custom nodes/extensions, and a downloadable native desktop client will be included during or before Beta.
- RAW photo editing, advanced color handling, automation and batch processing, and procedural painting workflows will be added during further Beta development.
## Planned capabilities
Below is an incomplete list of planned features and longer-term aspirations.
Short Term:
- Node graph and layer tree
- Resolution-agnostic rendering
- Compositing engine
- Procedural generation
- Mixed vector and raster design
- Importing SVG files
Medium Term:
- Mixed vector and raster workflow
- Compositing engine
- Resolution-agnostic rendering
- RAW photo editing
- Physically-based painting
- Data viz/graph/chart creation
- Advanced typesetting
- HDR/WCG color handling
- Motion graphics and animation
- Live video compositing
- Animated SVG creation
- Data viz/graph/chart creation
- Data-driven template replacement
- Advanced typesetting
- Procedural painting
- CAD-like constraint solver
- Real-time collaborative editing
- Constraint solver
- Custom node scripting
- Asset manager and store
- Portable render engine
- Batch conversion and processing
- Data-driven template replacement
- Native desktop application
- Distributed rendering system
- Portable render engine
- Localization/internationalization
- Keyboardless touch and stylus controls
- Native desktop application
Long Term:
- Physically-based painting
- Motion graphics and animation
- Live video compositing
- Animated SVG authorship
- Distributed rendering system

4
website/sass/base.scss
View file

@ -169,6 +169,10 @@ ol + p {
margin-top: 0;
}
li + li {
margin-top: 0.5em;
}
code {
background: var(--color-fog);
padding: 0 4px;

20
website/templates/index.html
View file

@ -52,19 +52,19 @@
<section id="screenshots">
<div class="carousel">
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="carousel torn left">
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="carousel torn right">
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="screenshot-details">
<div class="carousel-controls">
@ -86,11 +86,6 @@
</div>
<div class="screenshot-description">
<p class="balance-text active">
Vector artwork created in the alpha version of the Graphite editor. Try this out at
<a href="https://editor.graphite.rs">editor.graphite.rs</a>
instantly in your browser.
</p>
<p class="balance-text">
Viewport interface mockup showcasing a photo editing project that utilizes Graphite's raster graphics pipeline, one of the upcoming roadmap milestones. Raster editing is not yet
supported.
</p>
@ -98,6 +93,11 @@
Node graph mockup demonstrating how the layers directly correspond to nodes. Thick vertical (upward) lines represent compositing stacks and horizontal (rightward) links represent data
flow connections.
</p>
<p class="balance-text">
Vector artwork created in the alpha version of the Graphite editor. Try this out at
<a href="https://editor.graphite.rs">editor.graphite.rs</a>
instantly in your browser.
</p>
</div>
</div>
<hr />
@ -137,7 +137,7 @@
One year ago, Graphite was merely an idea. Today, the first milestone of the alpha release series is available for testing.
</p>
<p>
Milestone 1 focused on building an editor interface with basic vector design and illustration tools. Now the alpha release series moves toward milestone 2: developing a novel node-based
Milestone 1 focused on building an editor interface with basic vector design and illustration tools. Now the alpha release series moves toward Milestone 2: developing a novel node-based
vector graphics workflow. After that, raster graphics and more are planned in the <a href="/features">roadmap</a>.
</p>
<p>
@ -243,7 +243,7 @@
<div id="newsletter" class="section">
<h1>Stay in the loop.</h1>
<p>
Graphite is early in development and the most ambitious features are still to come. Subscribe for occasional news about big development updates. The first newsletter will be sent for the alpha milestone 2 release, featuring node-based editing.
Graphite is early in development and the most ambitious features are still to come. Subscribe for occasional news about big development updates. The first newsletter will be sent for the Alpha Milestone 2 release, featuring node-based editing.
</p>
<div id="newsletter-success">
<h2>Thanks!</h2>