Readme update (#17)

* Add useage documentation

* Change the second default model

* Update image paths

Author: gjmooney

README.md

@@ -32,38 +32,42 @@ pip install jupyterlab_gather
 
 1. Go to https://www.100ms.live/ and click `Try for Free` to get started.
 
-   ![landing page](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/1_landing.png 'Landing')
+   ![landing page](./docs/images/1_landing.png 'Landing')
 
 2. Login however you like.
 
-   ![login page](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/2_login.png 'Login')
+   ![login page](./docs/images/2_login.png 'Login')
 
 3. Select `Video Conferencing`.
 
-   ![use case page](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/3_usecase.png 'Use Case')
+   ![use case page](./docs/images/3_usecase.png 'Use Case')
 
 4. Go to the dashboard.
 
-   ![role page](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/4_role.png 'Role')
+   ![role page](./docs/images/4_role.png 'Role')
 
 5. Click on `Join` to see your room details.
 
-   ![dashboard](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/5_dashboard.png 'Dashboard')
+   ![dashboard](./docs/images/5_dashboard.png 'Dashboard')
 
 6. Copy the room code for whichever role you like. This code will be entered on the join form to gain access to the video conference room. Anyone with the code will be able to join the room.
 
-   ![room code](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/6_roomcode.png 'Room Code')
+   ![room code](./docs/images/6_roomcode.png 'Room Code')
 
 7. Start Gather from the JupyterLab start page.
 
-   ![jupyter](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/7_jupyter.png 'Jupyter')
+   ![jupyter](./docs/images/7_jupyter.png 'Jupyter')
 
 8. Enter the room code on the join form and click `Join`.
 
-   ![gather join](https://github.com/gjmooney/jupyterlab-gather/blob/add_state_db/docs/images/8_gather.png 'Join Room')
+   ![gather join](./docs/images/8_gather.png 'Join Room')
 
 9. And that's all! You're all set up!
 
+## Usage
+
+[Check here for usage instructions](./docs/usage.md)
+
 ## Uninstall
 
 To remove the extension, execute:

docs/images/usage/1_preview.png

@@ -0,0 +1,31 @@
+# jupyterlad_gather
+
+[![Github Actions Status](https://github.com/QuantStack/jupyterlab-gather/workflows/Build/badge.svg)](https://github.com/QuantStack/jupyterlab-gather/actions/workflows/build.yml)[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/QuantStack/jupyterlab-gather/main?urlpath=lab)
+
+## Usage
+
+### Starting AR Presentation mode
+
+1. After entering your username and room code and clicking join, you'll be at the preview screen where you can join the call, go back to the previous form, or change the devices you're using.
+
+   ![preview](./images/usage/1_preview.png 'Preview Screen')
+
+2. Here is where you can select which camera and microphone you'd like to use for the call.
+
+   ![device options](./images/usage/2_device_options.png 'Device Options')
+
+3. After clicking join you'll be at the main conference screen. There is a control bar on the bottom of the screen with the normal options you'd expect from a video conference tool, with one extra item.
+
+   ![conference](./images/usage/3_conference.png 'Conference')
+
+4. This enables the augmented reality mode, allowing you to present GLTF models to the rest of the room. On the sides are several toolbars allowing you to customize the scene.
+
+   ![its a duck](./images/usage/4_ar_duck.png 'Its a duck')
+
+5. These toolbars allow you to load other models into the scene, currently up to two AR cubes are supported. You can also manipulate the scale of the model.
+
+   ![toolbars](./images/usage/5_model_options.png 'Toolbars')
+
+6. Be careful.
+
+   ![careful](./images/usage/6_run_away.png 'Careful')

docs/images/usage/2_device_options.png

@@ -83,8 +83,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
         });
 
         registry.registerModel({
-          name: 'brain stem',
-          url: 'https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/BrainStem/glTF/BrainStem.gltf'
+          name: 'fox',
+          url: 'https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/Fox/glTF/Fox.gltf'
         });
       }
     });