doc rearrangement and cleanup

docs/index.md

@@ -53,10 +53,10 @@ See Setup section for installation and device setup instruction. See Documentati
 
 | Setup      | Documentation |
 | ----------- | ----------- |
-| [Installation](./setup/install.md)          | [Tutorial](./use/tutorial.md)                      |
+| [Installation](./setup/install.md)          | [Tutorial](./setup/tutorial.md)                      |
 | [Device Setup](./setup/device-setup.md)     | [Board API Documentation](./use/board-api.md)      |
 | [Device Recommendations](./setup/reqs.md)   | [Example Paper Programs](./use/example-program.md) |
-| [Camera Setup Tips](./setup/camera-tips.md) | [Model-View-Controller Framework](./use/mvc.md)    |
+| [Creator Tutorial](./setup/creator.md) | [Model-View-Controller Framework](./use/mvc.md)    |
 |                                             | [Resources and Downloads](./use/resources.md)      |
 
 ## What is coming?

docs/use/creator.md → docs/setup/creator.md

@@ -12,7 +12,7 @@
 
 The primary vision of Creator is to bring the relationships between the components of your project to the forefront. The goal is to let you focus on the most important pieces and how they connect to your chosen interactions and outputs (sounds, speech, images, etc).
 
-Creator is organized around the [Model-View-Component framework](mvc.md).
+Creator is organized around the [Model-View-Component framework](../use/mvc.md).
 
 Simply stated: You create **Model components** (pieces of your idea that other components will need to use or change to make your project work), to be controlled by **Controller components** and display the information dynamically as a visual (e.g., text, image, shape), sound, speech, and more using **View components**
 
@@ -57,7 +57,7 @@ The files will now appear in the dropdown selection for those components!
 </figure>
 
 
-## MVC Draft
+<!-- ## MVC Draft
 
 Alright kiddo, imagine you're playing a simple card game on your computer or tablet. In this card game, you can see cards, click on them to play, and the computer tells you if you won or lost. The Model-View-Controller, or MVC for short, is a way for programmers to organize this game. Let's break it down:
 
@@ -224,4 +224,4 @@ Sure, let's list out some typical JavaScript components you might encounter in t
    }
    ```
 
-In both scenarios, the **Model** holds the main data and logic, the **View** manages the presentation (what users see and hear), and the **Controller** deals with user inputs and communicates between the Model and View.
+In both scenarios, the **Model** holds the main data and logic, the **View** manages the presentation (what users see and hear), and the **Controller** deals with user inputs and communicates between the Model and View. -->

docs/setup/device-setup.md

@@ -7,7 +7,7 @@
 
 This page will guide you through setting up your devices so your computer can detect your printed paper programs and you can (optionally) project visuals onto them!
 
-If you're already setup, then head over the [Tutorial](../use/tutorial.md) for a run-down of the interface and how to get started making programs!
+If you're already setup, then head over the [Tutorial](../setup/tutorial.md) for a run-down of the interface and how to get started making programs!
 
 ## Board Projector Setup
 
@@ -19,7 +19,7 @@ If you are using a projector to display visual elements in your playspace or on
 
 Find a place to place your projector that will let you move your paper programs easily in the projection space. Ideally, you are able to mount the projector above you, pointed toward the floor for the most natural interaction between the papers and anyone working with you. Webcam/projector configurations parallel to the floor (e.g., pointing at a wall) are possible, especially using tape, sticky tack, or magnets (in the case of e.g., a whiteboard).
 
-You may later find that you need to adjust the relative positions of your projector and webcam in order to get the best program detection and most space to move papers around. See [Fine-tuning program detection](#fine-tuning-program-detection) and [Webcam tips](camera-tips.md) for more advice on improving program detection.
+You may later find that you need to adjust the relative positions of your projector and webcam in order to get the best program detection and most space to move papers around. See [Fine-tuning program detection](#fine-tuning-program-detection) and [Webcam tips](#webcam-optimization-tips) for more advice on improving program detection.
 
 After powering on your projector and connecting it to your computer, open the Board interface (board.html) in a separate window and move it into the projector window.
 
@@ -81,6 +81,22 @@ Calibration also sets the average dot size. This will determine how large dots n
 
       You can test how big your markers need to be in the camera view by bringing your paper closer to the camera which will "enlarge" your dots relative to the camera view.
 
+#### Webcam Optimization Tips
+
+If you have control over the software of your webcam, you can optimize some parameters to help with dot/program detection. Your camera may not feature every parameter mentioned or may use different language for the same parameter.
+
+You are looking for dots to be stably detected and might need to iteratively switch between adjusting parameters and [color calibration](device-setup.md#color-calibrating-your-webcam-for-program-detection).
+
+We have found the following parameters to be most influential:
+
+- TURN OFF any Auto setting for: Zoom, Exposure, White Balance
+- Adjust Exposure to see papers clearly (not too dark or bright)
+- Adjust: Zoom (clearest text)
+- Adjust White Balance (make sure blacks look black, and not blue or green, vice versa)
+- (optional) Adjust contrast
+- (optional) Raise Sharpness if edges look fuzzy
+
+
 #### Fine-tuning program detection
 
 If your setup is not detecting all of the dots on your papers, you will not be able to calibrate them and your programs will not be detected (or will be detected intermittently).
@@ -120,3 +136,5 @@ Look under the Detection header in the sidebar of Camera.html and adjust the con
 If you're using the legacy Canvas (projector.html) page to send visual elements to the web canvas, rather than the Display (board.html), you'll follow these intructions instead:
 
 Power on the projector and separate [http://localhost:3000/projector.html](http://localhost:3000/projector.html) to its own window. Move this window to the projector's display and enter fullscreen mode (Ctrl/Cmd+Shift+F). If you encounter issues (e.g., a recently created program not displaying), refreshing the page should help.
+
+

docs/setup/install.md

@@ -16,7 +16,7 @@ The Paper Playground client runs locally and can utilize a remote database for c
 6. Open [localhost:3000](http://localhost:3000/) in your browser and follow the links on the landing page.
 
 
-You should be good to go! Move on to [setting up your devices](device-setup.md) or straight to the [overview and tutorial](../use/tutorial.md).
+You should be good to go! Move on to [setting up your devices](../setup/device-setup.md) or straight to the [overview and tutorial](../setup/tutorial.md).
 
 ### Recommended Start Up
 

docs/use/tutorial.md → docs/setup/tutorial.md

@@ -145,4 +145,4 @@ When you're ready to print that program as a real piece of paper, click the Prin
 !!! note
       Paper Playground looks for a comment on the first line of the file and uses that as the program's name. It will use the keywords on the second line for search purposes.
 
-At this point you should have everything you need to start building a collaborative Paper Playground "play" Space and a working interactive paper program experience! Look at the [Board API reference](board-api.md) for more information about the functions available to your programs.
+At this point you should have everything you need to start building a collaborative Paper Playground "play" Space and a working interactive paper program experience! Look at the [Board API reference](../use/board-api.md) for more information about the functions available to your programs.

docs/use/example-program.md

@@ -4,7 +4,7 @@ Below you will find a set of example paper programs that create the abstract ide
 
 !!! note
 
-        These examples use the Paper Event functions (`onProgramAdded`, `onProgramChangedPosition`, `onProgramRemoved`) to run code on the Interactive Board (board.html). They include basic code for the Projector (projector.html) to provide names if viewing that window. For more advanced usage of Projector, please see the [Paper API](paper-api.md).
+        These examples use the Paper Event functions (`onProgramAdded`, `onProgramChangedPosition`, `onProgramRemoved`) to run code on the Interactive Board (board.html). They include basic code for the Projector (projector.html) to provide names if viewing that window. For more advanced usage of Projector, please see the [legacy Paper API](https://github.com/janpaul123/paperprograms/blob/master/docs/api.md).
 
 ## Model Program
 

mkdocs.yml

@@ -120,20 +120,19 @@ markdown_extensions:
 
 nav:
     - Home: index.md
-    - Setup:
+    - Getting Started:
       - Hardware Recommendations: setup/reqs.md
       - Step 1 Installation: setup/install.md
       - Step 2 Device Setup: setup/device-setup.md
-      - Webcam Tips: setup/camera-tips.md
-    - Documentation: 
-      - Tutorial: use/tutorial.md
-      - Creator Tutorial: use/creator.md
-      - Board API: use/board-api.md
+      - Tutorial: setup/tutorial.md
+      - Creator Tutorial: setup/creator.md
+    - Resources: 
       - Model-View-Controller Framework: use/mvc.md
+      - paper-land API: use/board-api.md
       - Design Tips: use/designing-programs.md
-      - Example JavaScript Papers: use/example-program.md
-      - Resources: use/resources.md
-    - Media:
+      - Example Papers (deprecated): use/example-program.md
+      - Downloadables: use/resources.md
+    - Examples:
       - Gallery: media-gallery.md
     - Community:
       - Join Us: community.md