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/).
The current development repository URL: https://github.com/visual-heuristics/frontend-js
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.
The planimation goals are:
-
help to debug PDDL code for Online PDDL Editor users
-
increases user understanding of planning problems
-
showing planning solutions to non-technical audiences
The system uses a domain PDDL script, a problem PDDL script and a Animation profile script to produce visualisation.
The main goal is:
- Improve project efficiency, maintainability and extendability of Planimation software
The specific goals are:
-
replace the current frontend programed in C# with the Unity engine, for a Javascript and PixiJS framework
-
decrease the loading times produced by the Unity engine
-
maintaining its current features
-
integrate with current development tools (Online pddl Editor plugin)
-
develop a new plugin for Visual Studio Code
Before building your development environment, you’ll need: A code editor VS Code is suggested. Download link
Recommended extensions: Jest; GitLens;tslint;
WebStorm is an alternative JavaScript IDE for frontend development.
Git Check if you installed Git:
git --version
Please refer to https://docs.github.com/en/get-started/quickstart/set-up-git to see the installment and basic usage of Git.
Please follow the instructions and download Node.js to your system. https://nodejs.org/en/
Recommended version: 14.17.5. Npm is the package manager for the Node JavaScript It is already installed along with Node.
Now you can check the versions:
node -v
v14.17.5
npm -v
6.14.14
npm install -g yarn
Clone the repository from GitHub:
git clone https://github.com/visual-heuristics/frontend-js
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.
git config user.name "Mona Lisa"
git config user.email "email@example.com"
In the current working directory to the local repository:
Open the working directory with VS code, in the terminal:
yarn //or “npm install”
This command will automatically install all the packages you need in this project.
npm run start
This will open a page on your browser, and you should see a jumping rabbit like this:
Now, the development environment is all set up! Start coding😊
yarn test //or “npm test” or testing in Jest
./node_modules/.bin/cypress open // for testing in Cypress
Open the link in your browser, and you should see a visualisation of block world .
https://confluence.cis.unimelb.edu.au:8443/display/VH/Technical+Environment
https://confluence.cis.unimelb.edu.au:8443/display/VH/Non-technical+Environment
https://confluence.cis.unimelb.edu.au:8443/display/VH/Development+Environment+Setup
In coordinator homepage: Shows the four sections of the project. https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook
Go to the first page to generate visualisation using PDDL files.
Go to the second page to generate visualisation using VFG files.
Check the documentation for Planimation
Check the Demo Video for Planimation
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.
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.
On document page, you can access the resources for how to use planimation and how to deploy it on your computer.
In the demo page we have a youtube video which would teach you how does planimation works and how we deployed it.
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.
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.
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.
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.
https://confluence.cis.unimelb.edu.au:8443/display/VH/Architecture
https://confluence.cis.unimelb.edu.au:8443/display/VH/Prototype+Design+and+Interactive+Diagram
https://confluence.cis.unimelb.edu.au:8443/display/VH/System+Architecture+Diagram
https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook
https://confluence.cis.unimelb.edu.au:8443/display/VH/Operational+Concept+Documents
https://confluence.cis.unimelb.edu.au:8443/display/VH/Developer+Information+Frontend
- Fork from original repository, initial commits
- Init react framework
- Update Jest
- Update .travis.yml; Add template
- Updated global styles
- Add drag&drop function
- Animation bugs fixed
- Add animation playing/pausing function
- Updated Confluence
- Added speed control for animation
- Added function of reading vfg file
- Interact with backend
- Added export file function
- Updated Animation display
- Modified styles for pages
- Updated tests