Skip to content

Commit 77edf8c

Browse files
Update ReadMe.md
1 parent 1b4f3cc commit 77edf8c

File tree

1 file changed

+251
-27
lines changed

1 file changed

+251
-27
lines changed

ReadMe.md

Lines changed: 251 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,116 @@
1-
# Planimation Javascript Frontend
1+
# COMP900082 - PL-Boxjelly. Project: Planimation
22

3-
The initial work of Planimation JS Library, and the frontend is waiting to be developed.
3+
planimation is a modular and extensible open source framework to visualize sequential solutions of planning problems specified in PDDL. planimation has a preliminary declarative PDDL-like animation profile specification, expressive enough to synthesise animations of arbitrary initial states and goals of a benchmark with just a single profile.(https://planimation.github.io/documentation/).
44

5-
## Features
6-
- Visualise Planimation VFG file
7-
- Visualise the last action of a given plan
85

9-
## Tech
6+
# Table of Contents
7+
[1.0 Project Overview](#1.0)
108

11-
- [PIXIJS] - The HTML5 Creation Engine
12-
- [RequireJS] - RequireJS is a JavaScript file and module loader
9+
[2.0 Deployment](#2.0)
10+
11+
[3.0 Development Environment Document](#3.0)
12+
13+
[4.0 Using the system](#4.0)
14+
15+
[5.0 Architecture Diagrams](#5.0)
16+
17+
[6.0 Change Log](#6.0)
18+
19+
[7.0 Quality Assurance](#7.0)
20+
21+
<h1 id="1.0"> 1.0 Project Overview </h1>
22+
23+
## Background
24+
25+
Planimation is an openSource framework to visualise sequential solutions of planning problems specified in PDDL. The framework was built by a team of University of Melbourne students in the context of the course SWEN90013 and under the lead of Professor Nir Lipovetzky and it has been continually supported by students and contributors. The project has important awards and recognitions.
26+
27+
The planimation goals are:
28+
29+
* help to debug PDDL code for Online PDDL Editor users
30+
31+
* increases user understanding of planning problems
32+
33+
* showing planning solutions to non-technical audiences
34+
35+
The system uses a domain PDDL script, a problem PDDL script and a Animation profile script to produce visualisation.
36+
37+
## Goal for This Project
38+
39+
The main goal is:
40+
* Improve project efficiency, maintainability and extendability of Planimation software
41+
42+
The specific goals are:
43+
* replace the current frontend programed in C# with the Unity engine, for a Javascript and PixiJS framework
44+
45+
* decrease the loading times produced by the Unity engine
46+
47+
* maintaining its current features
48+
49+
* integrate with current development tools (Online pddl Editor plugin)
50+
51+
* develop a new plugin for Visual Studio Code
52+
53+
<h1 id="2.0"> 2.0 Deployment </h1>
54+
55+
## Overview
56+
57+
Before building your development environment, you’ll need:
58+
A code editor
59+
VS Code is suggested. Download link
60+
61+
Recommended extensions: Jest; GitLens;tslint;
62+
63+
WebStorm is an alternative JavaScript IDE for frontend development.
64+
65+
Git
66+
Check if you installed Git:
67+
68+
```
69+
git --version
70+
```
71+
Please refer to https://docs.github.com/en/get-started/quickstart/set-up-git to see the installment and basic usage of Git.
72+
73+
### Node
74+
Please follow the instructions and download Node.js to your system. https://nodejs.org/en/
75+
76+
Recommended version: 14.17.5. Npm is the package manager for the Node JavaScript It is already installed along with Node.
77+
78+
Now you can check the versions:
79+
```
80+
node -v
81+
v14.17.5
82+
npm -v
83+
6.14.14
84+
```
85+
86+
### Install yarn:
87+
88+
```
89+
npm install -g yarn
90+
```
91+
92+
### Building development environment:
93+
Clone the repository from GitHub:
94+
```
95+
git clone https://github.com/visual-heuristics/frontend-js
96+
```
97+
### It’s good if you could setup your username and email address for the repository, so the other team members will have a clear idea the contributors of branches and codes on GitHub.
98+
99+
```
100+
git config user.name "Mona Lisa"
101+
102+
git config user.email "[email protected]"
103+
```
104+
## Install frontend development environment:
105+
In the current working directory to the local repository:
13106

14-
## Run the demo
15107
Open the working directory with VS code, in the terminal:
16108
```
17109
yarn //or “npm install”
18110
```
19111
This command will automatically install all the packages you need in this project.
20112

21-
Run the demo:
113+
### Run the project:
22114
```
23115
npm run start
24116
```
@@ -28,28 +120,160 @@ This will open a page on your browser, and you should see a jumping rabbit like
28120

29121
Now, the development environment is all set up! Start coding😊
30122

31-
Test your code:
123+
### Test your code:
32124
```
33-
yarn test //or “npm test”
125+
yarn test //or “npm test” or testing in Jest
126+
./node_modules/.bin/cypress open // for testing in Cypress
34127
```
35128
Open the link in your browser, and you should see a visualisation of block world .
36129

37-
## Development Guide
38-
Currently, only the main logic of the visaulisation part has been developed, and there are lots of other features that can be developed.
39130

40-
For examples:
41-
* Subgoal feature
42-
* Step Control
43-
* Linear animation
131+
<h1 id="3.0"> 3.0 Development Environment Document</h1>
132+
133+
### Technical Environment
134+
135+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Technical+Environment
136+
137+
### Non-technical Environment
138+
139+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Non-technical+Environment
140+
141+
### Development Environment Setup
142+
143+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Development+Environment+Setup
144+
145+
146+
<h1 id="4.0"> 4.0 Using the system </h1>
147+
148+
## 4.1. Project Homepage:
149+
150+
In coordinator homepage: Shows the four sections of the project.
151+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook
152+
153+
### 4.1.1 Go to PDDL file upload page
154+
155+
Go to the first page to generate visualisation using PDDL files.
156+
157+
### 4.1.2 Go to VFG file upload page
158+
159+
Go to the second page to generate visualisation using VFG files.
160+
161+
### 4.1.3 Check document for the project
162+
163+
Check the documentation for Planimation
164+
165+
### 4.1.4 Check demo video for the project
166+
167+
Check the Demo Video for Planimation
168+
169+
170+
## 4.2. PDDL file upload page
171+
172+
On this page, you need to upload 3 PDDL file to the PDDL editor server, and it will lead you to the visualization page with a generated vfg file.
173+
174+
## 4.3. VFG file upload page
175+
176+
On this page, you need to upload a single vfg file for animation generating. It will lead you to the visualization page once your .vfg file is accepted.
177+
178+
## 4.4. Document Page
179+
180+
On document page, you can access the resources for how to use planimation and how to deploy it on your computer.
181+
182+
## 4.5. Demo Page
183+
184+
In the demo page we have a youtube video which would teach you how does planimation works and how we deployed it.
185+
186+
## 4.6. Visualization Page
187+
188+
This is the main functionality page for the project. It will show the animation generated from the VFG file on pages 1 and page 2. On this page, your could de the following operation.
189+
190+
### 4.6.1 Check the stage list on the left side of the page
191+
On the left, you will see a list of all the stages for this problem. And you can check the visualization for this stage by clicking on it.
192+
193+
### 4.6.2 Check the subgoal list on the right side of the page
194+
On the right, you will see a list of all the subgoal conditions for this problem. And you can check the visualization for the condition where this sub goal is satisfied by clicking on that step.
195+
196+
### 4.6.3 Operation on visualization
197+
In the middle of the page, you will see the visualization sections which will look different depends on your problem. By clicking on the control button in this section, you can easily pause, play, reset, speed up, slow down and move to the pre/next step.
198+
199+
200+
<h1 id="5.0"> 5.0 Architecture and Design </h1>
201+
202+
### Architecture Model
203+
204+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Architecture
205+
206+
### Prototype Design and Interactive Diagram
207+
208+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Prototype+Design+and+Interactive+Diagram
209+
210+
### System Architecture Diagram
211+
212+
https://confluence.cis.unimelb.edu.au:8443/display/VH/System+Architecture+Diagram
213+
214+
### Design Notebook
215+
216+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook
217+
218+
### Operational Concept Documents
219+
220+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Operational+Concept+Documents
221+
<h1 id="6.0"> 6.0 Change Log </h1>
222+
223+
### Directory structure and key files and components
224+
225+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Developer+Information+Frontend
226+
227+
### 19/08/2021
228+
* Fork from original repository, initial commits
229+
230+
### 22/08/2021
231+
* Init react framework
232+
233+
### 23/08/2021
234+
* Update Jest
235+
236+
### 25/08/2021
237+
* Update .travis.yml; Add template
238+
239+
### 06/09/2021
240+
* Updated global styles
241+
242+
### 11/09/2021
243+
* Add drag&drop function
244+
* Animation bugs fixed
245+
246+
### 15/09/2021
247+
* Add animation playing/pausing function
248+
249+
### 18/09/2021
250+
* Updated Confluence
251+
252+
### 26/09/2021
253+
* Added speed control for animation
254+
255+
### 01/10/2021
256+
* Added function of reading vfg file
257+
258+
### 03/10/2021
259+
* Interact with backend
260+
261+
### 06/10/2021
262+
* Added export file function
263+
264+
### 13/10/2021
265+
* Updated Animation display
266+
267+
### 20/10/2021
268+
* Modified styles for pages
269+
270+
### 21/10/2021
271+
* Updated tests
272+
273+
<h1 id="7.0"> 7.0 Quality Assurance </h1>
274+
44275

45-
When you develop the new features for Planimation JS Libary, please try to modularise it. So it will be easier to maintain the front-end in future. Also, the potential user can use the relevant feature to build their application. Visualise the search tree with Planimation is a good example here.
46276

47-
## Resources
48-
* Pixi JS - https://www.pixijs.com/
49-
* Pixi JS Tutorial - https://github.com/kittykatattack/learningPixi
50-
* Pixi JS Demos - https://pixijs.io/examples/#/demos-basic/container.js
51-
* ReactPixi - https://reactpixi.org/
52-
* React - https://reactjs.org/docs/getting-started.html
277+
### Test Document
53278

54-
[PIXIJS]: <https://www.pixijs.com/>
55-
[RequireJS]:<https://requirejs.org/>
279+
https://confluence.cis.unimelb.edu.au:8443/display/VH/Testing+Document

0 commit comments

Comments
 (0)