diff --git a/docs/2-get-visualiser.md b/docs/2-get-visualiser.md index 0aa6b78..76e23b5 100644 --- a/docs/2-get-visualiser.md +++ b/docs/2-get-visualiser.md @@ -4,4 +4,12 @@ sidebar_position: 2 # Get Visualiser -[TODO] +Open the visualiser [here](https://path-visualiser.github.io/app/). + +## Install Visualiser as a Progressive Web App + +You can install the visualiser as a progressive web app, so that it runs in its own window. + +## Standalone Builds + +Check the [releases](https://github.com/path-visualiser/app/releases) page for a list of latest Windows and Linux releases. diff --git a/docs/5-tutorials/cross-example.trace.yaml b/docs/5-tutorials/cross-example.trace.yaml new file mode 100644 index 0000000..ffa0e96 --- /dev/null +++ b/docs/5-tutorials/cross-example.trace.yaml @@ -0,0 +1,294 @@ +version: 1.0.5 +render: + components: + tile: + - "$": rect + width: 1 + height: 1 + x: "{{$.event.x}}" + y: "{{$.event.y}}" + fill: "{{$.color[$.event.type]}}" + views: + main: + components: + - "$": tile + path: + pivot: + x: "{{$.event.x + 0.5}}" + y: "{{$.event.y + 0.5}}" + scale: 0.3 +events: +- type: source + id: 96 + x: 0 + y: 0 +- type: destination + id: 228 + x: 4 + y: 4 +- type: expanding + id: 96 + x: 0 + y: 0 + pId: 18446744073709552000 + g: 5.65685 + f: 0 +- type: generating + id: 97 + x: 1 + y: 0 + pId: 96 + g: 6.24264 + f: 1 +- type: generating + id: 128 + x: 0 + y: 1 + pId: 96 + g: 6.24264 + f: 1 +- type: generating + id: 129 + x: 1 + y: 1 + pId: 96 + g: 5.65685 + f: 1.41421 +- type: expanding + id: 129 + x: 1 + y: 1 + pId: 96 + g: 5.65685 + f: 1.41421 +- type: closing + id: 96 + x: 0 + y: 0 + pId: 18446744073709552000 + g: 5.65685 + f: 0 +- type: expanding + id: 97 + x: 1 + y: 0 + pId: 96 + g: 6.24264 + f: 1 +- type: generating + id: 98 + x: 2 + y: 0 + pId: 97 + g: 6.82843 + f: 2 +- type: closing + id: 129 + x: 1 + y: 1 + pId: 96 + g: 5.65685 + f: 1.41421 +- type: closing + id: 96 + x: 0 + y: 0 + pId: 18446744073709552000 + g: 5.65685 + f: 0 +- type: expanding + id: 128 + x: 0 + y: 1 + pId: 96 + g: 6.24264 + f: 1 +- type: closing + id: 96 + x: 0 + y: 0 + pId: 18446744073709552000 + g: 5.65685 + f: 0 +- type: closing + id: 129 + x: 1 + y: 1 + pId: 96 + g: 5.65685 + f: 1.41421 +- type: generating + id: 160 + x: 0 + y: 2 + pId: 128 + g: 6.82843 + f: 2 +- type: closing + id: 97 + x: 1 + y: 0 + pId: 96 + g: 6.24264 + f: 1 +- type: expanding + id: 98 + x: 2 + y: 0 + pId: 97 + g: 6.82843 + f: 2 +- type: generating + id: 99 + x: 3 + y: 0 + pId: 98 + g: 7.41421 + f: 3 +- type: closing + id: 97 + x: 1 + y: 0 + pId: 96 + g: 6.24264 + f: 1 +- type: expanding + id: 160 + x: 0 + y: 2 + pId: 128 + g: 6.82843 + f: 2 +- type: closing + id: 128 + x: 0 + y: 1 + pId: 96 + g: 6.24264 + f: 1 +- type: generating + id: 192 + x: 0 + y: 3 + pId: 160 + g: 7.41421 + f: 3 +- type: expanding + id: 99 + x: 3 + y: 0 + pId: 98 + g: 7.41421 + f: 3 +- type: generating + id: 100 + x: 4 + y: 0 + pId: 99 + g: 8 + f: 4 +- type: generating + id: 131 + x: 3 + y: 1 + pId: 99 + g: 7.41421 + f: 4 +- type: closing + id: 98 + x: 2 + y: 0 + pId: 97 + g: 6.82843 + f: 2 +- type: generating + id: 132 + x: 4 + y: 1 + pId: 99 + g: 7.41421 + f: 4.41421 +- type: expanding + id: 132 + x: 4 + y: 1 + pId: 99 + g: 7.41421 + f: 4.41421 +- type: generating + id: 164 + x: 4 + y: 2 + pId: 132 + g: 7.41421 + f: 5.41421 +- type: closing + id: 99 + x: 3 + y: 0 + pId: 98 + g: 7.41421 + f: 3 +- type: expanding + id: 164 + x: 4 + y: 2 + pId: 132 + g: 7.41421 + f: 5.41421 +- type: closing + id: 132 + x: 4 + y: 1 + pId: 99 + g: 7.41421 + f: 4.41421 +- type: generating + id: 196 + x: 4 + y: 3 + pId: 164 + g: 7.41421 + f: 6.41421 +- type: expanding + id: 196 + x: 4 + y: 3 + pId: 164 + g: 7.41421 + f: 6.41421 +- type: closing + id: 164 + x: 4 + y: 2 + pId: 132 + g: 7.41421 + f: 5.41421 +- type: generating + id: 228 + x: 4 + y: 4 + pId: 196 + g: 7.41421 + f: 7.41421 +- type: generating + id: 195 + x: 3 + y: 3 + pId: 196 + g: 8.82843 + f: 7.41421 +- type: generating + id: 227 + x: 3 + y: 4 + pId: 196 + g: 8.82843 + f: 7.82843 +- type: end + id: 228 + x: 4 + y: 4 + pId: 196 + g: 7.41421 + f: 7.41421 \ No newline at end of file diff --git a/docs/5-tutorials/load-grid.png b/docs/5-tutorials/load-grid.png new file mode 100644 index 0000000..29127c1 Binary files /dev/null and b/docs/5-tutorials/load-grid.png differ diff --git a/docs/5-tutorials/single-agent-grid.mdx b/docs/5-tutorials/single-agent-grid.mdx new file mode 100644 index 0000000..75d3b87 --- /dev/null +++ b/docs/5-tutorials/single-agent-grid.mdx @@ -0,0 +1,102 @@ +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +# A-Star Grid Search + +Follow these steps to visualise a single-agent search, in our case A\*, on a grid map. + +## Prepare the Map + +We support grid maps as `.grid` files. A `.grid` file is a text file that looks like this: + +```txt title="cross.grid" +type octile +height 5 +width 5 +map +..... +..@.. +.@@@. +..@.. +..... +``` + +Save this file as `cross.grid` to your system. + +## Load the Map + +- In the **Layer** panel, click **+ Layer** to add a new layer. +- Click the pencil icon to edit the layer. +- For **Type**, choose **Map**. +- For **Source**, choose **Import Map**, then pick `cross.grid` from your system. +- Close the **Edit Layer** modal. +- In the **Viewport** panel, click **Fit** to fit the map to the viewport. + +This should be the result: + +![Loaded map](load-grid.png) + +## Prepare the Search Trace + +You can generate the search trace in a number of ways depending on your solver. + + + + Download [this](./cross-example.trace.yaml) pre-computed search trace. + + + TODO. + + + +The file should start like this: + +```yaml title="example.trace.yaml" +render: + components: + tile: + - $: rect + width: 1 + height: 1 + x: "{{$.event.x}}" + y: "{{$.event.y}}" + fill: "{{$.color[$.event.type]}}" + views: + main: + components: + - $: tile + path: + pivot: + x: "{{$.event.x + 0.5}}" + y: "{{$.event.y + 0.5}}" + scale: 0.3 +events: + - type: source + id: 96 + x: 0 + y: 0 + - type: destination + id: 228 + x: 4 + y: 4 +``` + +The search trace contains a record of the events that occured during the search and how to visualise them. + +## Load the Search Trace + +- In the **Layer** panel, click **+ Layer** to add a new layer. +- Click the pencil icon to edit the layer. +- For **Type**, choose **Trace**. +- For **Trace**, choose **Choose File**, then pick the search trace from your system. +- Close the **Edit Layer** modal. +- In the **Viewport** panel, click **Fit** to fit the map to the viewport. + +## Step through the Search Trace + +- In the **Steps** panel, choose the search trace layer from the layer dropdown. Here, the layer is named **Cross Example**. +- Click **Play**. + +![Step through trace](step-through-trace.png) + +You have now visualised an A\* search on a grid map. diff --git a/docs/5-tutorials/step-through-trace.png b/docs/5-tutorials/step-through-trace.png new file mode 100644 index 0000000..22b7db5 Binary files /dev/null and b/docs/5-tutorials/step-through-trace.png differ diff --git a/src/css/custom.css b/src/css/custom.css index 009c48a..e9169fd 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -109,13 +109,9 @@ header > p { --ifm-h3-font-size: 1rem; font-weight: var(--ifm-font-weight-black); } -.theme-doc-breadcrumbs { - margin-top: var(--ifm-leading) !important; - margin-bottom: 0 !important; -} .theme-doc-toc-mobile { - margin-top: calc(var(--ifm-leading) * 2) !important; + margin-bottom: calc(var(--ifm-leading) * 0) !important; } .theme-doc-toc-mobile > button { @@ -163,3 +159,10 @@ header > p { b { font-weight: 600; } + +@media screen and (min-width: 996px) { + .theme-doc-breadcrumbs { + margin-top: var(--ifm-leading) !important; + margin-bottom: 0 !important; + } +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3f36b5f..2ac7faa 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,12 +1,11 @@ -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; import { useEffect } from "react"; export default function Home() { - const { siteConfig } = useDocusaurusContext(); - useEffect(() => location.replace("./docs/overview")); - return ; + return ( + + ); }