From 7b28794322c8e76275c533e44b113fedcea7a541 Mon Sep 17 00:00:00 2001 From: LachlanCourt Date: Sat, 17 Jul 2021 22:37:22 +1000 Subject: [PATCH 1/4] Add yarn commands --- .../02-tools/01-contribution-guide.mdx | 7 -- .../02-tools/01-nusight-contribution.mdx | 79 +++++++++++++++++++ 2 files changed, 79 insertions(+), 7 deletions(-) delete mode 100644 src/book/03-guides/02-tools/01-contribution-guide.mdx create mode 100644 src/book/03-guides/02-tools/01-nusight-contribution.mdx diff --git a/src/book/03-guides/02-tools/01-contribution-guide.mdx b/src/book/03-guides/02-tools/01-contribution-guide.mdx deleted file mode 100644 index 729859bfc..000000000 --- a/src/book/03-guides/02-tools/01-contribution-guide.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -section: Guides -chapter: Tools -title: Contributing to NUsight -description: All you need to know to start contributing to NUsight. -slug: /guides/tools/nusight-contribution ---- diff --git a/src/book/03-guides/02-tools/01-nusight-contribution.mdx b/src/book/03-guides/02-tools/01-nusight-contribution.mdx new file mode 100644 index 000000000..73f5191bf --- /dev/null +++ b/src/book/03-guides/02-tools/01-nusight-contribution.mdx @@ -0,0 +1,79 @@ +--- +section: Guides +chapter: Tools +title: Contributing to NUsight +description: All you need to know to start contributing to NUsight. +slug: /guides/tools/nusight-contribution +--- + +This is a guide for how to contribute to NUsight. To see what NUsight can do check out [here](/system/tools/nusight). This guide assumes you have NUsight built and are familar with using it. + + +## Yarn Commands + +| Command | Use | +| ------------ | ------------- | +| `./b yarn` | Installs dependencies for NUsight | +| `./b yarn build` | Build the NUsight codebase - Used when you make changes | +| `./b yarn prod` | Run NUsight on a local server to test changes (You will need to connect with your own NUbots image| +| `./b yarn start` | Combines the `build` and `start` commands for a live update (Refresh browser) | +| `./b yarn dev` | Starts NUsight with some generic robots running a repeated pattern for some development testing | + +## + +### Ubuntu + +Follow the instructions to setup Ubuntu with WSL [here](/guides/main/getting-started#docker) under 'docker'. + +### Gazebo 9 + +1. Install [Gazebo](http://gazebosim.org/tutorials?cat=install&tut=install_ubuntu&ver=9.0) (version 9 last tested) using Ubuntu. + +2. Install Gazebo dev libaries. + ``` + sudo apt-get install libgazebo9-dev + ``` + +### VcXsrv Windows X Server + +VcXsrv allows you to run a graphical GUI from Ubuntu WSL. + +Download and install VcXsrv [here](https://sourceforge.net/projects/vcxsrv/). + +## Running NUbots simulation + +1. Clone this repo. + ``` + git clone https://github.com/NUbots/Gazebo.git + ``` +2. Install the plugin. + + ``` + cd gazebo + sudo bash ./install_plugin.sh + ``` + + + +3. Setup WSL to connect with VcXsrv server. + + ``` + export GAZEBO_IP=127.0.0.1 + export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0 + export LIBGL_ALWAYS_INDIRECT=0 + ``` + +4. Run XLaunch (VcXsrv server). + +5. Change the Display number to 0. + ![Display number settings](./images/display-number.png 'Display number') + +6. Leave all settings default except for 'Native opengl' and 'Disable access control' + ![Xlaunch settings](./images/extra-settings.png 'Extra settings') + +7. Run the plugin. + ``` + sudo bash ./run_plugin.sh + ``` + +You are now ready to simulate! From b6f0bd84e71383a8ae811cbf619de67263c12c8e Mon Sep 17 00:00:00 2001 From: LachlanCourt Date: Tue, 20 Jul 2021 16:12:40 +1000 Subject: [PATCH 2/4] NUsight Contribution additions --- .../02-tools/01-nusight-contribution.mdx | 76 ++++++------------- 1 file changed, 22 insertions(+), 54 deletions(-) diff --git a/src/book/03-guides/02-tools/01-nusight-contribution.mdx b/src/book/03-guides/02-tools/01-nusight-contribution.mdx index 73f5191bf..883bd75bf 100644 --- a/src/book/03-guides/02-tools/01-nusight-contribution.mdx +++ b/src/book/03-guides/02-tools/01-nusight-contribution.mdx @@ -8,72 +8,40 @@ slug: /guides/tools/nusight-contribution This is a guide for how to contribute to NUsight. To see what NUsight can do check out [here](/system/tools/nusight). This guide assumes you have NUsight built and are familar with using it. - ## Yarn Commands -| Command | Use | -| ------------ | ------------- | -| `./b yarn` | Installs dependencies for NUsight | -| `./b yarn build` | Build the NUsight codebase - Used when you make changes | -| `./b yarn prod` | Run NUsight on a local server to test changes (You will need to connect with your own NUbots image| -| `./b yarn start` | Combines the `build` and `start` commands for a live update (Refresh browser) | -| `./b yarn dev` | Starts NUsight with some generic robots running a repeated pattern for some development testing | - -## - -### Ubuntu - -Follow the instructions to setup Ubuntu with WSL [here](/guides/main/getting-started#docker) under 'docker'. - -### Gazebo 9 - -1. Install [Gazebo](http://gazebosim.org/tutorials?cat=install&tut=install_ubuntu&ver=9.0) (version 9 last tested) using Ubuntu. - -2. Install Gazebo dev libaries. - ``` - sudo apt-get install libgazebo9-dev - ``` - -### VcXsrv Windows X Server - -VcXsrv allows you to run a graphical GUI from Ubuntu WSL. +| Command | Use | +| -------------------- | --------------------------------------------------------------------------------------------------- | +| `./b yarn` | Installs dependencies for NUsight | +| `./b yarn build` | Build the NUsight codebase - Used when you make changes | +| `./b yarn prod` | Run NUsight on a local server to test changes (You will need to connect with your own NUbots image) | +| `./b yarn start` | Combines the `build` and `start` commands for a live update (Refresh browser) | +| `./b yarn dev` | Starts NUsight with some generic robots running a repeated pattern for some development testing | +| `./b yarn storybook` | Builds and starts a debug environment for NUsight using Stories to perform component tests | -Download and install VcXsrv [here](https://sourceforge.net/projects/vcxsrv/). +## Creating a new tab in NUsight -## Running NUbots simulation +All components for NUsight live in the `src/client/components` directory. The process to create a new tab is as follows -1. Clone this repo. - ``` - git clone https://github.com/NUbots/Gazebo.git - ``` -2. Install the plugin. +1. Copy one of the existing tab's subdirectories and rename it. - ``` - cd gazebo - sudo bash ./install_plugin.sh - ``` +2. Set up `network.ts` to determine the format of the data that you will be receiving from NUClear and passing to your subcomponents +3. Create sub components for the tab +4. Work on the top level `view.ts`, `model.ts`, and `style.css` documents to finalise the entire tab -3. Setup WSL to connect with VcXsrv server. +5. Edit `src/client/main.tsx` to include both an `import` command and an `install` command - ``` - export GAZEBO_IP=127.0.0.1 - export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0 - export LIBGL_ALWAYS_INDIRECT=0 - ``` +## Creating a sub component for a tab -4. Run XLaunch (VcXsrv server). +1. Subcomponents work together in a tab to provide the full functionality. These should be subdirectories in the main tab's directory. It is recommended to copy an existing sub component to ensure you include everything -5. Change the Display number to 0. - ![Display number settings](./images/display-number.png 'Display number') +2. A subcomponent is typically made up of 3 files. `model.ts` is a TypeScript file which handles the interpretation of one or more NUClear protos, and handles any calculations that goes along with preparing it for display. `view.tsx` is a React file which takes the data from `model.ts` and formats it ready for display. `style.css` is used to provide custom stylisation -6. Leave all settings default except for 'Native opengl' and 'Disable access control' - ![Xlaunch settings](./images/extra-settings.png 'Extra settings') +3. A subcomponent should also include Stories which allow for unit testing under different use cases. These are found in the `stories` directory of each subcomponent -7. Run the plugin. - ``` - sudo bash ./run_plugin.sh - ``` +## Stories +Creating stories allows you to run component tests as you work to ensure that everything is running as expected. Stories are created with the `.stories.tsx` extension. Running `./b yarn storybook` will automatically include any files with this extension. -You are now ready to simulate! +There are several different kinds of Stories in the NUsight codebase and you can learn more about them [here](https://storybook.js.org/docs/react/get-started/introduction) \ No newline at end of file From bcf5c4d5486abb73b3d594324a71ed3323fbb9b7 Mon Sep 17 00:00:00 2001 From: LachlanCourt Date: Tue, 20 Jul 2021 16:13:14 +1000 Subject: [PATCH 3/4] Formatting ree --- src/book/03-guides/02-tools/01-nusight-contribution.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/book/03-guides/02-tools/01-nusight-contribution.mdx b/src/book/03-guides/02-tools/01-nusight-contribution.mdx index 883bd75bf..69ec3b47b 100644 --- a/src/book/03-guides/02-tools/01-nusight-contribution.mdx +++ b/src/book/03-guides/02-tools/01-nusight-contribution.mdx @@ -42,6 +42,7 @@ All components for NUsight live in the `src/client/components` directory. The pr 3. A subcomponent should also include Stories which allow for unit testing under different use cases. These are found in the `stories` directory of each subcomponent ## Stories + Creating stories allows you to run component tests as you work to ensure that everything is running as expected. Stories are created with the `.stories.tsx` extension. Running `./b yarn storybook` will automatically include any files with this extension. -There are several different kinds of Stories in the NUsight codebase and you can learn more about them [here](https://storybook.js.org/docs/react/get-started/introduction) \ No newline at end of file +There are several different kinds of Stories in the NUsight codebase and you can learn more about them [here](https://storybook.js.org/docs/react/get-started/introduction) From 198e6ede24d1ed0be68af4fbbda19a9f1001186e Mon Sep 17 00:00:00 2001 From: LachlanCourt Date: Tue, 20 Jul 2021 16:46:19 +1000 Subject: [PATCH 4/4] Minor fixes --- .../02-tools/01-nusight-contribution.mdx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/book/03-guides/02-tools/01-nusight-contribution.mdx b/src/book/03-guides/02-tools/01-nusight-contribution.mdx index 69ec3b47b..36b747706 100644 --- a/src/book/03-guides/02-tools/01-nusight-contribution.mdx +++ b/src/book/03-guides/02-tools/01-nusight-contribution.mdx @@ -10,14 +10,16 @@ This is a guide for how to contribute to NUsight. To see what NUsight can do che ## Yarn Commands -| Command | Use | -| -------------------- | --------------------------------------------------------------------------------------------------- | -| `./b yarn` | Installs dependencies for NUsight | -| `./b yarn build` | Build the NUsight codebase - Used when you make changes | -| `./b yarn prod` | Run NUsight on a local server to test changes (You will need to connect with your own NUbots image) | -| `./b yarn start` | Combines the `build` and `start` commands for a live update (Refresh browser) | -| `./b yarn dev` | Starts NUsight with some generic robots running a repeated pattern for some development testing | -| `./b yarn storybook` | Builds and starts a debug environment for NUsight using Stories to perform component tests | +Yarn is the system that we use to build and run NUsight. There are a number of different sub commands that can be used + +| Command | Use | +| -------------------- | -------------------------------------------------------------------------------------------------------- | +| `./b yarn` | Installs dependencies for NUsight | +| `./b yarn build` | Build the NUsight codebase - Used when you make changes | +| `./b yarn prod` | Run NUsight on a local server to test changes (You will need to connect with your own NUbots image) | +| `./b yarn start` | Combines the `build` and `prod` commands for a live update (Refresh browser) | +| `./b yarn dev` | Starts NUsight with some generic robots running a repeated pattern for some development testing | +| `./b yarn storybook` | Builds and starts a live updating debug environment for NUsight using Stories to perform component tests | ## Creating a new tab in NUsight @@ -29,7 +31,7 @@ All components for NUsight live in the `src/client/components` directory. The pr 3. Create sub components for the tab -4. Work on the top level `view.ts`, `model.ts`, and `style.css` documents to finalise the entire tab +4. Work on the top level `view.tsx`, `model.ts`, and `style.css` documents to finalise the entire tab 5. Edit `src/client/main.tsx` to include both an `import` command and an `install` command @@ -45,4 +47,4 @@ All components for NUsight live in the `src/client/components` directory. The pr Creating stories allows you to run component tests as you work to ensure that everything is running as expected. Stories are created with the `.stories.tsx` extension. Running `./b yarn storybook` will automatically include any files with this extension. -There are several different kinds of Stories in the NUsight codebase and you can learn more about them [here](https://storybook.js.org/docs/react/get-started/introduction) +There are several different kinds of Stories in the NUsight codebase which you can learn from, and you can learn more about them [here](https://storybook.js.org/docs/react/get-started/introduction)