Compare commits
4 Commits
adc4f163b7
...
f41326b6ac
Author | SHA1 | Date | |
---|---|---|---|
f41326b6ac | |||
b57f4dce55 | |||
8f5a7c81e9 | |||
0aaccce21f |
@ -2,4 +2,3 @@ REACT_APP_API_URL="http://localhost:2001"
|
||||
REACT_APP_IMAGINARY_URL="http://localhost:9000"
|
||||
REACT_APP_SENTRY_DSN=""
|
||||
REACT_APP_SOURCE_REPO_URL="https://git.wilw.dev/wilw/treadl"
|
||||
REACT_APP_SUPPORT_ROOT="https://git.wilw.dev/wilw/treadl/wiki/"
|
BIN
web/public/images/docs/editing1.png
Normal file
After Width: | Height: | Size: 135 KiB |
BIN
web/public/images/docs/editing10.png
Normal file
After Width: | Height: | Size: 188 KiB |
BIN
web/public/images/docs/editing11.png
Normal file
After Width: | Height: | Size: 221 KiB |
BIN
web/public/images/docs/editing12.png
Normal file
After Width: | Height: | Size: 206 KiB |
BIN
web/public/images/docs/editing13.png
Normal file
After Width: | Height: | Size: 227 KiB |
BIN
web/public/images/docs/editing14.png
Normal file
After Width: | Height: | Size: 240 KiB |
BIN
web/public/images/docs/editing15.png
Normal file
After Width: | Height: | Size: 195 KiB |
BIN
web/public/images/docs/editing16.png
Normal file
After Width: | Height: | Size: 182 KiB |
BIN
web/public/images/docs/editing17.png
Normal file
After Width: | Height: | Size: 202 KiB |
BIN
web/public/images/docs/editing18.png
Normal file
After Width: | Height: | Size: 215 KiB |
BIN
web/public/images/docs/editing2.png
Normal file
After Width: | Height: | Size: 159 KiB |
BIN
web/public/images/docs/editing3.png
Normal file
After Width: | Height: | Size: 138 KiB |
BIN
web/public/images/docs/editing4.png
Normal file
After Width: | Height: | Size: 118 KiB |
BIN
web/public/images/docs/editing5.png
Normal file
After Width: | Height: | Size: 373 KiB |
BIN
web/public/images/docs/editing6.png
Normal file
After Width: | Height: | Size: 181 KiB |
BIN
web/public/images/docs/editing7.png
Normal file
After Width: | Height: | Size: 170 KiB |
BIN
web/public/images/docs/editing8.png
Normal file
After Width: | Height: | Size: 178 KiB |
BIN
web/public/images/docs/editing9.png
Normal file
After Width: | Height: | Size: 171 KiB |
BIN
web/public/images/docs/groups1.png
Normal file
After Width: | Height: | Size: 152 KiB |
BIN
web/public/images/docs/groups10.png
Normal file
After Width: | Height: | Size: 122 KiB |
BIN
web/public/images/docs/groups11.png
Normal file
After Width: | Height: | Size: 152 KiB |
BIN
web/public/images/docs/groups12.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
web/public/images/docs/groups13.png
Normal file
After Width: | Height: | Size: 158 KiB |
BIN
web/public/images/docs/groups14.png
Normal file
After Width: | Height: | Size: 159 KiB |
BIN
web/public/images/docs/groups15.png
Normal file
After Width: | Height: | Size: 154 KiB |
BIN
web/public/images/docs/groups2.png
Normal file
After Width: | Height: | Size: 127 KiB |
BIN
web/public/images/docs/groups3.png
Normal file
After Width: | Height: | Size: 134 KiB |
BIN
web/public/images/docs/groups4.png
Normal file
After Width: | Height: | Size: 130 KiB |
BIN
web/public/images/docs/groups5.png
Normal file
After Width: | Height: | Size: 126 KiB |
BIN
web/public/images/docs/groups6.png
Normal file
After Width: | Height: | Size: 141 KiB |
BIN
web/public/images/docs/groups7.png
Normal file
After Width: | Height: | Size: 150 KiB |
BIN
web/public/images/docs/groups8.png
Normal file
After Width: | Height: | Size: 154 KiB |
BIN
web/public/images/docs/groups9.png
Normal file
After Width: | Height: | Size: 143 KiB |
BIN
web/public/images/docs/projects1.png
Normal file
After Width: | Height: | Size: 145 KiB |
BIN
web/public/images/docs/projects10.png
Normal file
After Width: | Height: | Size: 266 KiB |
BIN
web/public/images/docs/projects11.png
Normal file
After Width: | Height: | Size: 184 KiB |
BIN
web/public/images/docs/projects12.png
Normal file
After Width: | Height: | Size: 236 KiB |
BIN
web/public/images/docs/projects13.png
Normal file
After Width: | Height: | Size: 147 KiB |
BIN
web/public/images/docs/projects2.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
web/public/images/docs/projects3.png
Normal file
After Width: | Height: | Size: 127 KiB |
BIN
web/public/images/docs/projects4.png
Normal file
After Width: | Height: | Size: 131 KiB |
BIN
web/public/images/docs/projects5.png
Normal file
After Width: | Height: | Size: 137 KiB |
BIN
web/public/images/docs/projects6-1.png
Normal file
After Width: | Height: | Size: 131 KiB |
BIN
web/public/images/docs/projects6.png
Normal file
After Width: | Height: | Size: 131 KiB |
BIN
web/public/images/docs/projects7.png
Normal file
After Width: | Height: | Size: 135 KiB |
BIN
web/public/images/docs/projects8.png
Normal file
After Width: | Height: | Size: 142 KiB |
BIN
web/public/images/docs/projects9.png
Normal file
After Width: | Height: | Size: 164 KiB |
@ -43,8 +43,12 @@ import GroupMembers from './main/groups/Members.js';
|
||||
import GroupProjects from './main/groups/Projects.js';
|
||||
import GroupSettings from './main/groups/Settings.js';
|
||||
|
||||
import Docs from './docs';
|
||||
import DocsHome from './docs/Home';
|
||||
import DocsDoc from './docs/Doc';
|
||||
|
||||
import Root from './main/root';
|
||||
//import Docs from './docs';
|
||||
|
||||
|
||||
function App() {
|
||||
const dispatch = useDispatch();
|
||||
@ -116,6 +120,10 @@ function App() {
|
||||
<Route path='' end element={<GroupFeed />} />
|
||||
</Route>
|
||||
<Route path='/root' element={<Root />} />
|
||||
<Route path='/docs' element={<Docs />}>
|
||||
<Route path=":doc" element={<DocsDoc />} />
|
||||
<Route path='' element={<DocsHome />} />
|
||||
</Route>
|
||||
<Route path='/:username/:projectPath' element={<Project />}>
|
||||
<Route path="settings" element={<ProjectSettings />} />
|
||||
<Route path=":objectId/edit" element={<ObjectDraft />} />
|
||||
@ -150,7 +158,7 @@ function App() {
|
||||
</p>
|
||||
<p>
|
||||
<Icon name='book' />
|
||||
<a href={process.env.REACT_APP_SUPPORT_ROOT} target='_blank' rel='noopener noreferrer'>Documentation</a>
|
||||
<a href='/docs' target='_blank' rel='noopener noreferrer'>Documentation</a>
|
||||
</p>
|
||||
|
||||
<Divider />
|
||||
|
57
web/src/components/docs/Doc.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import patternDoc from './patterns.md';
|
||||
import projectDoc from './projects.md';
|
||||
import groupDoc from './groups.md';
|
||||
|
||||
const docs = {
|
||||
patterns: patternDoc,
|
||||
projects: projectDoc,
|
||||
groups: groupDoc,
|
||||
};
|
||||
|
||||
const StyledDoc = styled.div`
|
||||
img {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
function Doc() {
|
||||
const [markdown, setMarkdown] = useState();
|
||||
const [notFound, setNotFound] = useState(false);
|
||||
const { doc } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
async function prepareDoc() {
|
||||
if (!docs[doc]) {
|
||||
setNotFound(true);
|
||||
return;
|
||||
}
|
||||
const markdownFile = await fetch(docs[doc]);
|
||||
const markdown = await markdownFile.text();
|
||||
setMarkdown(markdown);
|
||||
}
|
||||
prepareDoc();
|
||||
}, [doc]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{notFound ?
|
||||
<div>
|
||||
<h2>This document could not be found</h2>
|
||||
<p>Please select a different document.</p>
|
||||
</div>
|
||||
:
|
||||
<StyledDoc>
|
||||
<ReactMarkdown>{markdown}</ReactMarkdown>
|
||||
</StyledDoc>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Doc;
|
14
web/src/components/docs/Home.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
function DocsHome() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Support documentation</h2>
|
||||
<p>Welcome to the Treadl documentation. Feel free to explore through the links on this page to learn more about how to use Treadl.</p>
|
||||
|
||||
<p>If you need help, we recommend taking a look through these pages first to see if they can answer your question. If you're still stuck then reach out to us by emailing <a href='mailto:hello@treadl.com'>hello@treadl.com.</a></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocsHome;
|
128
web/src/components/docs/groups.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Groups
|
||||
Groups are a way of building communities of people together on Treadl. A group can contain any number of people and projects. They can include discussion boards (e.g. for talking about projects, weaving, or for arranging meetings) and a directory to allow members to see who else is a member of their group.
|
||||
|
||||
Groups might be useful for the following purposes:
|
||||
|
||||
* General interest (e.g. around particular topics)
|
||||
* Forums
|
||||
* Teaching groups
|
||||
* Guild groups
|
||||
* Weaving groups
|
||||
* ... and much more!
|
||||
|
||||
Groups are configurable and can be open or **closed**. That means you can have a group that anyone can find and join, or a group that is kept private, and to which other people must be invited to join.
|
||||
|
||||
In this article we will discuss groups in more detail and explain how some of the key concepts work.
|
||||
|
||||
## Creating a new group
|
||||
Any Treadl user can create a new group. To do so, find the **Groups** area on your homepage (when logged-in) and click the **Create a new group** button.
|
||||
|
||||
![Finding the create group button](/images/docs/groups1.png)
|
||||
|
||||
A screen like the following will then display:
|
||||
|
||||
![The new group page](/images/docs/groups2.png)
|
||||
|
||||
On this page you can:
|
||||
|
||||
* **Name your group**: A short but meaningful name for your group (e.g. "Hogwarts Weaving Class 2022" or "Double Weave Forum").
|
||||
* **Describe your group**: Add additional longer text to describe your group in more detail.
|
||||
* **Choose whether your group is closed or not**: Closed groups mean you will need to invite others or approve join requests yourself.
|
||||
|
||||
Please note that all of this information can later be changed at any time.
|
||||
|
||||
When you are ready, click the **Create group** button to complete the creation process.
|
||||
|
||||
You'll then be taken to your new group, and you will notice that you are the only member.
|
||||
|
||||
![A new empty group](/images/docs/groups3.png)
|
||||
|
||||
## A tour around your group
|
||||
In this section we describe the different areas of your group. These areas can be found using the tabs shown on the left-hand side.
|
||||
|
||||
### The Noticeboard
|
||||
The **Noticeboard** is a place for you and other members to post updates and discussions. It is a way for people to communicate. Users can reply to each others' posts, include attachments (like files or images) and even attach their projects.
|
||||
|
||||
![The group Noticeboard](/images/docs/groups4.png)
|
||||
|
||||
### Members
|
||||
The **Members** tab lists the current members of your group. If you are a group administrator, you are shown how to invite other people to join your group.
|
||||
|
||||
### Projects
|
||||
The **Projects** tab lists the *projects* that have been made visible to this group. Projects can be made visible to the group from the projects' settings page, or directly from this tab by clicking the **Add one of your own projects** button.
|
||||
|
||||
![The group Projects tab](/images/docs/groups5.png)
|
||||
|
||||
### Settings
|
||||
The **Settings** tab will only show for users that are admins of the group. On this tab you can change the settings of the group and also delete your group.
|
||||
|
||||
![The group Settings tab](/images/docs/groups6.png)
|
||||
|
||||
## Deleting a group
|
||||
A group can be deleted (or "disbanded") by finding the **Settings** tab of your group, and then clicking the **Delete group** button.
|
||||
|
||||
![Deleting a group](/images/docs/groups7.png)
|
||||
|
||||
**Please note that you can only access the settings page of a group if you are an admin for the group.**
|
||||
|
||||
Deleting a group does not delete the users or projects it contains.
|
||||
|
||||
## Discovering your group
|
||||
If your group is **not closed**, then other members can find your group from the search bar.
|
||||
|
||||
In the example below, a user "Alice" has searched for our "Test group" and pressed the enter key. The group is shown.
|
||||
|
||||
![Searching for a group](/images/docs/groups8.png)
|
||||
|
||||
Alternatively, you can send them a link to your group. To find the link, go to the **Members** tab of your group and find the share link. This can be copied to your clipboard using the button, as shown below.
|
||||
|
||||
![Finding the group link](/images/docs/groups9.png)
|
||||
|
||||
This link can then be shared with someone (e.g. via email or Whatsapp) to allow them to discover your group.
|
||||
|
||||
Whether the user has found your group via search, or if they have followed a link you have sent them, they will see a screen that looks like the following. The user can join the group by clicking the **Join group** button.
|
||||
|
||||
![Viewing the group as a non-member](/images/docs/groups10.png)
|
||||
|
||||
Once the user has joined the group, they will be able to view and post on the Noticeboard.
|
||||
|
||||
## Inviting others to your group
|
||||
If your group is **closed**, users cannot discover your group. Instead, you will need to **invite them** to join.
|
||||
|
||||
**Important: you can only invite people that are already have an account on Treadl. If you want to invite someone who isn't yet on Treadl, ask them to register first.**
|
||||
|
||||
To invite someone to join, find the **search bar** on the **Members** tab of your group. Please note you need to be a group admin to invite others.
|
||||
|
||||
![Finding the group invite member search bar](/images/docs/groups11.png)
|
||||
|
||||
Type the user's username into the group. As you type, Treadl will suggest users to you. When the desired user has been listed, you can click their username to add them to the group.
|
||||
|
||||
![Searching for a new member](/images/docs/groups12.png)
|
||||
|
||||
Once they have been invited, the prospective member will receive an email notification and the invite will also appear on their homepage (as shown in the section below).
|
||||
|
||||
Until the prospective member accepts your invitation, they will show as "invited" in your group's member list.
|
||||
|
||||
![The group member list, showing an invited user](/images/docs/groups13.png)
|
||||
|
||||
From here you can also delete the invitation, which revokes it.
|
||||
|
||||
## Accepting an invitation to join a group
|
||||
If you have received an invitation to join a group, you will receive an email (if your notification preferences are set accordingly) and the invitation will also be shown on your homepage.
|
||||
|
||||
![Pending invitations on the homepage](/images/docs/groups14.png)
|
||||
|
||||
If you **choose to accept** the invitation, you will be added to the group. You can then view other members and participate in the group's Noticeboard.
|
||||
|
||||
If you **choose to decline** the invitation, the invite will be deleted. You will not be added to the group.
|
||||
|
||||
## Removing a member from your group
|
||||
As a group admin, you can remove other people from your group.
|
||||
|
||||
To do so, identify the user on the **Members** tab of your group, and click the **Kick** option in the **Options** dropdown. This is demonstrated in the image below.
|
||||
|
||||
![Kicking a user from the group](/images/docs/groups15.png)
|
||||
|
||||
The member will be immediately removed, and will no longer have access to the group member list or noticeboard.
|
||||
|
||||
**Please note: if your group is not closed, the user will be able to simply re-join again.**
|
@ -1,28 +1,38 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Container } from 'semantic-ui-react';
|
||||
import { Switch, Route, Link } from 'react-router-dom';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import stuff from './stuff.md';
|
||||
|
||||
function Docs({ }) {
|
||||
const [markdown, setMarkdown] = useState();
|
||||
|
||||
const getDoc = async key => {
|
||||
const markdownFile = await fetch(stuff);//.then(res => res.text()).then(text => this.setState({ markdown: text }));
|
||||
const markdown = await markdownFile.text();
|
||||
console.log(markdown);
|
||||
setMarkdown(markdown);
|
||||
};
|
||||
import React from 'react';
|
||||
import { Container, Divider, Grid, Card, Message, Button, Icon } from 'semantic-ui-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
function Docs() {
|
||||
return (
|
||||
<Container>
|
||||
<Container style={{marginTop: 40}}>
|
||||
<h1>Treadl documentation</h1>
|
||||
<ReactMarkdown># Hello, *world*!</ReactMarkdown>
|
||||
<ReactMarkdown>{stuff}</ReactMarkdown>
|
||||
<Divider section />
|
||||
|
||||
<Switch>
|
||||
<Route path="/docs/project" component={<ReactMarkdown>{markdown}</ReactMarkdown>} />
|
||||
</Switch>
|
||||
<Grid stackable>
|
||||
|
||||
<Grid.Column width={4}>
|
||||
<h3>Learning resources</h3>
|
||||
<Card as={Link} to='/docs/projects' header='Projects'
|
||||
description='Learn about how to create, manage, and organise your projects.'
|
||||
/>
|
||||
<Card as={Link} to='/docs/patterns' header='Pattern editor'
|
||||
description='Learn how to use the Treadl pattern editor.'
|
||||
/>
|
||||
<Card as={Link} to='/docs/groups' header='Groups'
|
||||
description='Learn more about Treadl groups, and how they can be managed.'
|
||||
/>
|
||||
<Message style={{marginTop: 20}} size='small' info header='Want to contribute documentation?'
|
||||
content={<p>That's great! Please reach out to us by emailing <a href='mailto:hello@treadl.com'>hello@treadl.com</a>.</p>}
|
||||
/>
|
||||
|
||||
<Button style={{position: 'fixed', bottom: 40}} onClick={() => window.scrollTo(0, 0)} secondary><Icon name='arrow up' /> Back to the top</Button>
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={12}>
|
||||
<Outlet />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
147
web/src/components/docs/patterns.md
Normal file
@ -0,0 +1,147 @@
|
||||
# Editing patterns
|
||||
|
||||
Treadl offers a rich patten-editor directly within the web platform. This allows you to view and make changes to your patterns as you build up your projects.
|
||||
|
||||
## Create or import a new pattern
|
||||
|
||||
If you already have a pattern in a project (either from starting from scratch or by importing a WIF file), then you can skip this step.
|
||||
|
||||
### Create a pattern
|
||||
|
||||
Creating a new pattern from scratch will provide you with a blank canvas to work from.
|
||||
|
||||
To begin, find (or newly create) the project that you want to store your pattern in. Navigate to your project and click the **Add something** button and then select the **Create a new weaving pattern** option.
|
||||
|
||||
![Creating a new pattern from scratch](/images/docs/editing1.png)
|
||||
|
||||
You'll then be presented with the editor showing a new blank pattern to begin editing.
|
||||
|
||||
![A new blank pattern](/images/docs/editing2.png)
|
||||
|
||||
### Import an existing pattern
|
||||
|
||||
If you have a .wif (Weaving Interchange Format) file you have exported from another weaving program, you can import it into Treadl.
|
||||
|
||||
To do so, find (or newly create) the project that you want to store your pattern in. Navigate to your project and click the **Add something** button and then select the **Import a WIF file** option.
|
||||
|
||||
![Importing a pattern](/images/docs/editing3.png)
|
||||
|
||||
Your computer will open up a dialog to let you choose a WIF file to upload. Navigate to the folder on your computer storing the file and select the appropriate file
|
||||
|
||||
![Choosing a WIF file](/images/docs/editing4.png)
|
||||
|
||||
Once chosen, Treadl will load the file into a pattern. You can then select the pattern to view it in the editor.
|
||||
|
||||
![Viewing the imported pattern](/images/docs/editing5.png)
|
||||
|
||||
## Using the pattern editor
|
||||
|
||||
Once you have a pattern opened up in the editor (whether it's blank or not), you can begin to edit it. The image below shows the layout of the editor.
|
||||
|
||||
![The editor components](/images/docs/editing6.png)
|
||||
|
||||
**Please note that the drawdown will not display your pattern until you have "drawn" on the warp and weft and have edited your tieups. All of these concepts are described below.**
|
||||
|
||||
**Tip: you can hover over tools with your mouse to learn what they are.**
|
||||
|
||||
### Using tools to "draw" on the warp and weft
|
||||
|
||||
Treadl offers three ways of selecting threads on the warp and weft:
|
||||
|
||||
* Manually selecting the thread
|
||||
* Using "straight draw" to draw threads in diagonal lines
|
||||
* Using "point draw" to draw threads as a series of points
|
||||
|
||||
To **manually** draw individual threads on your warp, simply select either the **straight** or **point** draw (in the tools area) and click the desired threads.
|
||||
|
||||
![Manually selecting threads](/images/docs/editing7.png)
|
||||
|
||||
To use the "**straight draw**", first select the **straight draw** tool (in the tools area). Next, position your mouse over the start thread, click and hold your mouse button down as you draw from right-to-left (or top-to-down on the weft) moving your mouse gradually upwards to change how the pattern draws. Release the mouse button to complete the draw.
|
||||
|
||||
![Performing a straight draw](/images/docs/editing8.png)
|
||||
|
||||
To use the "**point draw**", first select the **point draw** tool (in the tools area). Next, position your mouse over the start thread, click and hold your mouse button down as you draw from right-to-left (or top-to-down on the weft) moving your mouse gradually upwards to change how the pattern draws. Release the mouse button to complete the draw.
|
||||
|
||||
![Performing a point draw](/images/docs/editing9.png)
|
||||
|
||||
As you move the mouse while drawing, you'll notice the draw updating - this allows you to release the mouse and complete the draw once you are happy with the threads being selected.
|
||||
|
||||
The example below shows a point draw on both the warp and weft.
|
||||
|
||||
![Point draw on warp and weft](/images/docs/editing10.png)
|
||||
|
||||
**Note how the drawdown does not yet display any pattern! This is because our tieups are still empty.**
|
||||
|
||||
### Tieups
|
||||
|
||||
Interacting with tieups is as simple as clicking on the tieups area of the editor until the selected tieup has been achieved.
|
||||
|
||||
In the example below you'll see we have a tieup as a diagonal straight line, and this has resulted (along with the threads on the warp and weft) in a simple diamond pattern being shown on the drawdown.
|
||||
|
||||
![Adding the tieup](/images/docs/editing11.png)
|
||||
|
||||
### Adding colour to threads
|
||||
|
||||
Individual threads in your warp and weft can be coloured. This will update the drawdown to display the coloured threads.
|
||||
|
||||
To begin, select the **colour** tool, click a colour from the **palette**, and then either click on individual threads in your warp and weft threading, or click and drag to apply the colour to threads more quickly.
|
||||
|
||||
![Adding colours](/images/docs/editing12.png)
|
||||
|
||||
|
||||
As you paint, you'll notice the drawdown update to show your new colours.
|
||||
|
||||
### Configuring your pattern
|
||||
|
||||
You can rename and adjust the number of **treadles** and **shafts** your pattern uses in the **properties** menu. This information can be changed at any time.
|
||||
|
||||
In the example below we have increased the number of treadles and shafts to 12 - allowing for more complex patterns. Note that the tieup also increases in size accordingly.
|
||||
|
||||
![Adding colours](/images/docs/editing13.png)
|
||||
|
||||
## Changing the view
|
||||
|
||||
Treadl offers a number of ways to view your pattern.
|
||||
|
||||
### Zooming and panning
|
||||
|
||||
You can zoom in (to see more detail) and out (to view more of your pattern in one go) of your pattern using the **zoom** tool.
|
||||
|
||||
To do so, slide the zoom from left-to-right to make your pattern bigger, and from right-to-left to make your pattern appear further away.
|
||||
|
||||
In the example below, we have zoomed in further to see it in more detail.
|
||||
|
||||
![Zooming the pattern](/images/docs/editing14.png)
|
||||
|
||||
If some of your pattern is off the edge of the screen (e.g. if you have zoomed in as described above), you can use the **pan** tool to "move your view" around the pattern.
|
||||
|
||||
To do so, select the **pan** tool, and then click and drag in your drawdown area to move the view around your pattern.
|
||||
|
||||
In the example below, we have moved our view to the left such that the weft and tieups are no longer visible.
|
||||
|
||||
![Panning the pattern](/images/docs/editing15.png)
|
||||
|
||||
### View modes
|
||||
|
||||
Treadl offers a number of modes for viewing your pattern. The modes are as follows:
|
||||
|
||||
* **Interlacement (default)** - a view that uses shadows to mimic how the threads will interlace
|
||||
* **Colour only** - a view that shows the threads and colours, but without shadow
|
||||
* **Warp view** - a view that only shows the warp threads
|
||||
* **Weft view** - a view that only shows the weft threads
|
||||
|
||||
In the example below, you can see the view has been set to "Warp view"
|
||||
|
||||
![Changing the view](/images/docs/editing16.png)
|
||||
|
||||
## Saving your pattern
|
||||
|
||||
To ensure you do not lose your changes, we recommend saving your pattern frequently. To do so, click the "Save" button which will appear when you make changes.
|
||||
|
||||
![Showing the save button](/images/docs/editing17.png)
|
||||
|
||||
## Deleting your pattern
|
||||
|
||||
If you want to remove the pattern from your project, it can be deleted from the "**Advanced**" section of the editor.
|
||||
|
||||
![Showing the delete button](/images/docs/editing18.png)
|
128
web/src/components/docs/projects.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Projects
|
||||
_Projects_ are the core organisational feature of Treadl. Think of them like folders on your computer - you can use them to store images, patterns, and other arbitrary files.
|
||||
|
||||
Treadl users can create any number of projects, and projects can be as big as you want them to be. This gives you the flexibility to use projects for the following:
|
||||
|
||||
* Design inspirations
|
||||
* Individual weaving projects
|
||||
* Scrap books
|
||||
* Galleries
|
||||
* Classwork
|
||||
* ... and much more.
|
||||
|
||||
Projects can be kept private (i.e. so only you can view them), or made public. Public projects can be shared with the world via a link, so that even if someone doesn't have a Treadl account they can still view your project's contents.
|
||||
|
||||
Projects can also be shared to specific _groups_.
|
||||
|
||||
In this article we will describe the various project features and how to use them.
|
||||
|
||||
## Creating a new project
|
||||
A project can be created by clicking the **Create a project** button from your Treadl homepage (once logged-in).
|
||||
|
||||
![Finding the create project button](/images/docs/projects1.png)
|
||||
|
||||
On the next screen you will be asked to configure your project.
|
||||
|
||||
![Configuring the new project](/images/docs/projects2.png)
|
||||
|
||||
All of this project information can be changed later.
|
||||
|
||||
* The project **name** is how you (and potentially others) will identify your project
|
||||
* The **description** provides some extra context for the project.
|
||||
* Marking a project as **private** will ensure only you can access it (unless you also add it to a group). **Non-private** (public) projects can be found and viewed by others.
|
||||
* Marking a project as **open-source** will allow visitors to your project to download source WIF files and more from your project. We recommend open-source projects (just like Treadl itself is!)
|
||||
* Adding your project to a **group** (or multiple groups) will allow other people in those group(s) to view your project - even if it is private.
|
||||
|
||||
When ready, click **Create project** to complete the creation process.
|
||||
|
||||
You'll now see your new project, which will be empty to start with.
|
||||
|
||||
![A new blank project](/images/docs/projects3.png)
|
||||
|
||||
## Deleting a project
|
||||
To delete a project you own, click the **Settings** button on your project's page.
|
||||
|
||||
![Finding the settings button](/images/docs/projects6.png)
|
||||
|
||||
On the next screen click the **Delete project** button.
|
||||
|
||||
## Editing the project description
|
||||
The project's description can be changed at any time. Note that you must be logged-in and you must be an owner of the project.
|
||||
|
||||
To do so, navigate to your project in Treadl, and then click the **Edit description** button.
|
||||
|
||||
![Finding the edit description button](/images/docs/projects4.png)
|
||||
|
||||
A text box will display, allowing you to edit the description. You can make the box bigger by dragging its corner downwards. You can now make changes to your description and then remember to click **Save description** when you've finished.
|
||||
|
||||
![Saving the project description](/images/docs/projects5.png)
|
||||
|
||||
## Changing the project's settings
|
||||
In the project settings you can:
|
||||
|
||||
* Change the name of your project
|
||||
* Update its visibility and whether it's open source or not
|
||||
* Update the groups it's available to
|
||||
* Delete your project
|
||||
|
||||
To access the project settings, click the **Settings** button on your project's page.
|
||||
|
||||
![Finding the settings button](/images/docs/projects6.png)
|
||||
|
||||
A screen will show, allowing you to change the settings (as described in "Creating a new project" above).
|
||||
|
||||
![The settings screen](/images/docs/projects7.png)
|
||||
|
||||
**Please note: project URLs (the web address in your browser) are based on the _name_ of your project. As such, if you change the name of your project the URL will also change. Bear this in mind if you have already shared a link to your project with someone.**
|
||||
|
||||
**Please note: if you have shared a link with someone to your project and then make your project private, they will no longer be able to access your project.**
|
||||
|
||||
## Adding content to your project
|
||||
The whole point of having a project is that it stores patterns, items, and files! Since a project can pretty much contain anything, we call their contents _objects_.
|
||||
|
||||
It is quite straight forward to add objects to your project. To do so, click the **Add something** button shown on your project (if you are logged-in and own the project).
|
||||
|
||||
![The add something button](/images/docs/projects8.png)
|
||||
|
||||
From here you can:
|
||||
|
||||
* **Create a new weaving pattern**: this creates a new empty weaving pattern, from which you can begin to edit.
|
||||
* **Import a WIF file**: this will open up your computer's file browser to allow you to choose a .wif file to upload. WIF files are special types of weaving files that Treadl can understand, and they can be created from within Treadl or other weaving software.
|
||||
* **Upload an image or a file**: this will open up your computer's file browser to allow you to choose a file to upload. For example, PDFs, images, documents, and more. Image files will automatically get displayed as images in your project.
|
||||
|
||||
The image below displays a project now we've added a weaving pattern (by importing a WIF file) and uploaded an image.
|
||||
|
||||
![A project with some content](/images/docs/projects9.png)
|
||||
|
||||
## Viewing and editing objects
|
||||
Once you have content in your project, you can click on them to view them in more detail. For example, if we click the image object we uploaded in the section above, we will see the following screen.
|
||||
|
||||
![Viewing an image](/images/docs/projects10.png)
|
||||
|
||||
On this page, a number of options are open to you.
|
||||
|
||||
* You can **delete** the object from the **Options** button.
|
||||
* You can **rename** the object by clicking the **pencil** icon next to the name.
|
||||
* You can **add a description** by clicking the **Add a description** button.
|
||||
* You can add comments to your object. If your project is available to others, they can also add comments.
|
||||
|
||||
Adding a description to an object allows you to write in rich-text. This means you can use this tool to add commentary, research, or even an essay about your object. Descriptions are also useful for viewers
|
||||
|
||||
![Editing an object description](/images/docs/projects11.png)
|
||||
|
||||
## Viewing patterns
|
||||
If you are viewing an object pattern (instead of a file or image), then other options are available to you.
|
||||
|
||||
![Viewing a pattern object](/images/docs/projects12.png)
|
||||
|
||||
You can still **delete** the pattern, add a **description** and **rename** it, but you can also:
|
||||
|
||||
* **Download** it as an image or in WIF format
|
||||
* **Copy to** another project you own
|
||||
* **Edit** the pattern in the pattern editor
|
||||
|
||||
The image below shows the options available when downloading a pattern.
|
||||
|
||||
![Downloading a pattern object](/images/docs/projects13.png)
|
||||
|
||||
The **download** and **copy to** options are also available to others who view your project - as long as your project is open-source.
|
@ -1,6 +0,0 @@
|
||||
# Hello
|
||||
|
||||
This is some content
|
||||
|
||||
* and here
|
||||
* there
|
@ -209,7 +209,7 @@ function NavBar() {
|
||||
{user?.roles?.indexOf('root') > -1 &&
|
||||
<Dropdown.Item as={Link} to='/root'>Root</Dropdown.Item>
|
||||
}
|
||||
<Dropdown.Item as='a' href={`${process.env.REACT_APP_SUPPORT_ROOT}`} target='_blank' rel='noopener noreferrer'>Help</Dropdown.Item>
|
||||
<Dropdown.Item as={Link} to='/docs'>Help</Dropdown.Item>
|
||||
<Dropdown.Item onClick={logout}>Logout</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
@ -251,7 +251,7 @@ function NavBar() {
|
||||
|
||||
<h3>Help and support</h3>
|
||||
<p>The Treadl Wiki provides useful information that might help you if you get stuck.</p>
|
||||
<Button as='a' href={process.env.REACT_APP_SUPPORT_ROOT} target='_blank' rel='noopener noreferrer'>View the Wiki</Button>
|
||||
<Button as='a' href='/docs' target='_blank' rel='noopener noreferrer'>View the Wiki</Button>
|
||||
|
||||
<h3>We hope you enjoy using Treadl</h3>
|
||||
<p>If you have any comments or feedback please tell us by emailing <a href="mailto:hello@treadl.com">hello@treadl.com</a>!</p>
|
||||
|
@ -118,7 +118,7 @@ function Home() {
|
||||
)}
|
||||
</List>
|
||||
<Button className='joyride-createGroup' fluid size='small' icon='plus' content='Create a new group' as={Link} to='/groups/new' />
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Groups`} text='Learn more about groups' marginTop/>
|
||||
<HelpLink link={`/docs/groups`} text='Learn more about groups' marginTop/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
:
|
||||
@ -150,7 +150,7 @@ function Home() {
|
||||
<p>Projects can contain anything - from rough ideas or design experiments through to commissions and exhibitions. Treat them as if they were just weaving-related <span role="img" aria-label="folder">📁</span> folders on your computer.</p>
|
||||
<Divider />
|
||||
<h4>Start by creating a new project. Don't worry, you can keep it private.</h4>
|
||||
<p><HelpLink className='joyride-help' link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects`} text='Learn more about projects' marginTop/></p>
|
||||
<p><HelpLink className='joyride-help' link={`/docs/projects`} text='Learn more about projects' marginTop/></p>
|
||||
<Button className='joyride-createProject' as={Link} to="/projects/new" color="teal" icon="plus" content="Create a project" />
|
||||
</Segment>
|
||||
|
||||
@ -162,7 +162,7 @@ function Home() {
|
||||
<Button className='joyride-createProject' as={Link} to="/projects/new" color='teal' content='Create a project' icon='plus' floated='right'/>
|
||||
<h2><Icon name='book' /> Your projects</h2>
|
||||
<p>Projects contain the patterns and files that make up your creations.
|
||||
<HelpLink className='joyride-help' link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects`} text='Learn more about projects' marginLeft/>
|
||||
<HelpLink className='joyride-help' link={`/docs/projects`} text='Learn more about projects' marginLeft/>
|
||||
</p>
|
||||
<Divider clearing hidden />
|
||||
<Card.Group itemsPerRow={2} stackable>
|
||||
|
@ -148,7 +148,7 @@ function Group() {
|
||||
</Menu>
|
||||
}
|
||||
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Groups#a-tour-around-your-new-group`} />
|
||||
<HelpLink link={`/docs/groups#a-tour-around-your-new-group`} />
|
||||
|
||||
</Grid.Column>
|
||||
<Grid.Column computer={12}>
|
||||
|
@ -94,14 +94,14 @@ function Members() {
|
||||
<Grid stackable columns={2}>
|
||||
<Grid.Column>
|
||||
<p>Share this link with others that you'd like to join your group. You can also send this link to people who don't already have a Treadl account.</p>
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Groups#discovering-your-group`} text='Get help with discovery' marginBottom/>
|
||||
<HelpLink link={`/docs/groups#discovering-your-group`} text='Get help with discovery' marginBottom/>
|
||||
<Input ref={joinLinkRef} fluid readOnly value={utils.absoluteUrl(`/groups/${group._id}`)}
|
||||
action=<Button color='teal' icon='copy' onClick={copyLink}/>
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<p>If you know someone who already has a Treadl account you can search for their username and we'll send them an invitation to join your group.</p>
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Groups#inviting-others-to-your-group`} text='Get help with invites' marginBottom/>
|
||||
<HelpLink link={`/docs/groups#inviting-others-to-your-group`} text='Get help with invites' marginBottom/>
|
||||
<UserSearch fluid onSelected={sendInvitation}/>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
|
@ -39,7 +39,7 @@ function NewGroup() {
|
||||
</h2>
|
||||
<p>Groups are great for communities of weavers and makers, or to help people of similar interests collaborate and come together.</p>
|
||||
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Groups#creating-a-new-group`} />
|
||||
<HelpLink link={`/docs/groups#creating-a-new-group`} />
|
||||
|
||||
<Divider section />
|
||||
|
||||
|
@ -64,7 +64,7 @@ Create a new project
|
||||
</h2>
|
||||
<p>This will contain all of the files and patterns for your project.</p>
|
||||
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects#creating-a-new-project`} />
|
||||
<HelpLink link={`/docs/projects#creating-a-new-project`} />
|
||||
|
||||
<Divider section />
|
||||
|
||||
|
@ -120,7 +120,7 @@ function Project() {
|
||||
}
|
||||
</Card>
|
||||
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects`} />
|
||||
<HelpLink link={`/docs/projects`} />
|
||||
</Grid.Column>
|
||||
)}
|
||||
|
||||
|
@ -12,7 +12,7 @@ function ProjectObjects() {
|
||||
<Grid stackable>
|
||||
<Grid.Column width={4}>
|
||||
<ObjectList compact />
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects#viewing-and-editing-objects`} marginTop />
|
||||
<HelpLink link={`/docs/projects#viewing-and-editing-objects`} marginTop />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={12}>
|
||||
<ObjectViewer />
|
||||
|
@ -62,7 +62,7 @@ function ProjectSettings() {
|
||||
<div>
|
||||
<h2>Project settings</h2>
|
||||
|
||||
<HelpLink link={`${process.env.REACT_APP_SUPPORT_ROOT}Projects#changing-the-project-s-settings`} />
|
||||
<HelpLink link={`/docs/projects#changing-the-project-s-settings`} />
|
||||
|
||||
<Divider hidden section />
|
||||
|
||||
|
@ -102,7 +102,7 @@ function Draft() {
|
||||
</div>
|
||||
|
||||
<div style={{width: 300, marginLeft: 20}}>
|
||||
<HelpLink className='joyride-help' link={`${process.env.REACT_APP_SUPPORT_ROOT}Editing-patterns#using-the-pattern-editor`} marginBottom/>
|
||||
<HelpLink className='joyride-help' link={`/docs/patterns#using-the-pattern-editor`} marginBottom/>
|
||||
<ReRunTour id='pattern' />
|
||||
<Tools warp={warp} weft={weft} object={object} pattern={pattern} updateObject={updateObject} updatePattern={updatePattern} saveObject={saveObject} baseSize={baseSize} unsaved={unsaved} saving={saving}/>
|
||||
</div>
|
||||
|