Frontend - UnityLink
The Visualiser takes a Visualisation File and displays an animation to the user. It is a Unity architecture.
Modifying the visualiser is only required when the current visualiser cannot adequately render the domain on-screen. It does not concern the logic of object layout. For example, a user might want to extend the Visualiser to support animated sprites.
Extending the Visualiser requires building the project in Unity and Django (see section 2.2 of README.md). Modifications or extensions of the Visualiser need only be carried out on Unity (not Django). For information on the Visualiser, see the file 'Visualiser Documentation'.
1. Getting startedLink
InstallationLink
Install Unity (See Deployment)
UsageLink
See the User Manual, which is accessible from within the application, or with the file User Manual.html.
DevelopmentLink
The visualizer will takes the visualization file generated by the visualization file generator. The visualizer will automatically analyze the visualization file and transfer the JSON data into a few Unity prefabs and display them on the screen.
Editing ScenesLink
Open Planning Visualisation folder as an Unity workspace. Drag scenes file to the Hierarchy to start editing the GameObjects in the scene, Scene files are under the Scene folders in the AnimationProfile and Visualier folders.
Editing ScriptsLink
Script can be created directly in the Assets directories, simply right click Create -> C# Script. If scripts are going to be attached to a game object, the class should be extending MonoBehaviour. Unity would recommend using their monoDeveloper to code for the guideword when using Unity.Engine.
How to RunLink
Put only the scene you want to test in the Hierarchy and press the play button at the top.
Building WebGLLink
After Selecting all the scene with the starting Scene being the first one clicked There is a WebGL module that need to be installed, open the installer again and tick only the WebGL module to be installed. After the module is loaded, in Files -> Build Setting, select WebGL and click Player Setting, the inspector on your right will show the setting of the web player, select the NewTemplate as our template, and click Build and Run in the Build Setting window and select the Built file location. This may take a while, after it is finished, the Browser will open the First Scene of the project. Later, unless we have a new built, we can go to the directory of the built and open the index.html. Notice that Chrome will not allowed to open html file locally, so better to set up a server or using other Browser to open the index.html.
2. Architecture OverviewLink
Input: a visualisation file. The visualisation file is a generic JSON file generated by the VFG, demonstrating how shapes are to be drawn on the screen in stages. The structure of the Visualisation File is outlined in the VFG Documentation file. Output: a visualisation of the visualisation file
Architectural designLink
Directory StructureLink
+---Visualiser
| +---Animations
| +---Fonts
| +---Images
| +---Resources
| +---Scenes
| +---Scripts
| | +---FileUpload
| | \---Visualisation
| | +---AnimationControl
| | +---TransferPack
| | \---VisualisationModels
| \---Sprites
\---WebGLTemplates
\---NewTemplate
The input of the visualizer is the visualization file.
The visualization file is parsed into a local object with the following structure:
// Solution - Wraps all stages as a whole solution
public class VisualSolutionObject
{
public VisualStageObject[] visualStages;
public int transferType;
public Dictionary<string, string> imageTable;
public int numberOfStages;
public Color highlightColor;
}
// Stage - Contains all sprites in this stage
public class VisualStageObject
{
public VisualSpriteObject[] visualSprites;
public string stageName;
public string stageInfo;
}
// Sprite - Presents any visual object drawn on the screen
public class VisualSpriteObject
{
public string name;
public string prefabImage;
public Color color;
public bool isShowName;
public float minX;
public float maxX;
public float minY;
public float maxY;
public int rotation;
public int depth;
public bool isHighlighted;
}
3. ComponentsLink
Components are structure via a number of subdirectories to the Visualiser folder
AnimationsLink
Keeps the files for Unity animations. These files are used to define how prefabs fade-in or fade-out. These files will only be used by the Unity Engine.
FontsLink
Keep the files for Unity fonts. These files are used by the Unity engine to correctly display text. These files will only be used by the Unity Engine.
ImagesLink
Keep the file for UI elements of the visualizer. These files are used to display the "play" button or "pause" button. Images of the animations are not kept here.
ScenesLink
Keep the files of Unity scenes.
SpritesLink
Defines the basic prefabs (or sprites) of Unity.
ResourcesLink
Other resources used by the Unity Engine.
ScriptsLink
C# scripts are kept in this folder. This is what to edit when new features are added to the visualizer.
Important ScriptsLink
SpriteController.cs
SpriteController is the script controls how a visible object is rendered on the screen. This script will generate prefab according to the data in the visualization file. It will also change the size of the prefab to fit the size of the screen. The liner-movement logic is implemented in this script too.
VisualiserController.cs
SpriteController is the script manages the solution file and all visual objects in each stage. This script keeps all the GameObject as an objects pool. It is also responsible for rendering each step in the solution.
4. ExtensionsLink
The visualizer is designed as a component that only displays data in the visualization file.
Most extensions to Planning Visualiser can be made through the VFG. If new types of animiations need to be supported which cannot be represented in the existing Visualsiation File format: * Define a new object property in the visualization file * Modify the scripts SpriteController.cs and VisualiserController.cs to implement the new object properties