diff --git a/docs/index.md b/docs/index.md index 4b433537..bf1530bc 100644 --- a/docs/index.md +++ b/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? diff --git a/docs/setup/camera-tips.md b/docs/setup/camera-tips.md deleted file mode 100644 index 74b001ff..00000000 --- a/docs/setup/camera-tips.md +++ /dev/null @@ -1,27 +0,0 @@ -# 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 - -## Calibrate dots -1. In the [Camera view](http://localhost:3000/camera.html), open the sidebar section labeled Calibrate. -2. Select a dot color. The circle should show a white outline when in calibration mode for that color. -3. Select the corresponding color in the Camera Viewport to calibrate that color. -4. Repeat for all colors. -5. Decide if you need to make anymore webcam parameter changes. - -!!! note "Calibrating for Markers" - - Note about Markers: This sets the average size in addition to the color of the dot. If using Markers, they will be recognized based on dots three times (3x) the size of the calibrated dot. Markers also use the same color calibration as the corresponding dot color. - - diff --git a/docs/use/creator.md b/docs/setup/creator.md similarity index 99% rename from docs/use/creator.md rename to docs/setup/creator.md index d2d372b6..dd976e0f 100644 --- a/docs/use/creator.md +++ b/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! -## MVC Draft + \ No newline at end of file diff --git a/docs/setup/device-setup.md b/docs/setup/device-setup.md index f1d6cf44..3179246f 100644 --- a/docs/setup/device-setup.md +++ b/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. + + diff --git a/docs/setup/install.md b/docs/setup/install.md index 05f1ea67..ede594d6 100644 --- a/docs/setup/install.md +++ b/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 diff --git a/docs/use/tutorial.md b/docs/setup/tutorial.md similarity index 98% rename from docs/use/tutorial.md rename to docs/setup/tutorial.md index 04c54b24..e61f9feb 100644 --- a/docs/use/tutorial.md +++ b/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. diff --git a/docs/use/example-program.md b/docs/use/example-program.md index 77314338..7b79084d 100644 --- a/docs/use/example-program.md +++ b/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 diff --git a/mkdocs.yml b/mkdocs.yml index cf579c8d..07165543 100644 --- a/mkdocs.yml +++ b/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