Merge pull request #84 from johnsonafool/feature/projection-mapping-docs

feature(projection-mapping): add documentation for projection mapping
CityScope · Aug 7, 2024 · 6cb4923 · 6cb4923
2 parents 26f93d7 + f7b3217
commit 6cb4923
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 0 deletions.
diff --git a/docs/cityscopejs/Projection mapping.md b/docs/cityscopejs/Projection mapping.md
@@ -0,0 +1,33 @@
+---
+sidebar_position: 4
+---
+
+In order to fit in different projector settings to create an accurate projection mapping, there is a tool for modifying it. This page aims to provide a guide on how to use it with existed CityScope project. The available functions for projection mapping tool are:
+
+    1. **Visit Existed CityScope Project** You can start testing out projection mapping by visit the [MIT CityScope Projection Mapping](https://cityscope.media.mit.edu/CS_cityscopeJS_projection_mapping/) project. You can enter your project as url query parameters, for example: https://cityscope.media.mit.edu/CS_cityscopeJS_projection_mapping/?cityscope=kharkiv_me will lead you to the CityScope Kharkiv project.
+
+    ###### Project page
+
+    ![Project page](img/project_page.jpg)
+
+    2. **Zoom In and Zoom Out** Once you are navigated to the projection mapping of project, you can zoom in and zoom out based on the actual result from the projector, to see if it fit the actual table.
+
+    ###### Zoom in and zoom out
+
+    ![Zoom in and zoom out](img/zoom_in_and_out.jpg)
+
+    3. **Keystone** In order to enable keystone functionality, you can press **Space** key and start keystone, you will see red border on the edge and there are dots you can modify based on your need. If you finish editing, press **Space** key again the keystone will disappear.
+
+    ###### Keystone
+
+    ![Keystone](img/keystone.jpg)
+
+    4. **Panel** In order to enable the panel, you can press **Z** key and start to see different value of view state. It helps you to understand if the view state meet the requirement of what the table needs to display. If you finish using, press **Z** key again the panel will disappear.
+
+    ###### Panel
+
+    ![Panel](img/panel.png)
+
+###### Final result
+
+![Final](img/final.jpg)
diff --git a/docs/cityscopejs/img/final.jpg b/docs/cityscopejs/img/final.jpg
diff --git a/docs/cityscopejs/img/keystone.jpg b/docs/cityscopejs/img/keystone.jpg
diff --git a/docs/cityscopejs/img/panel.png b/docs/cityscopejs/img/panel.png
diff --git a/docs/cityscopejs/img/project_page.jpg b/docs/cityscopejs/img/project_page.jpg
diff --git a/docs/cityscopejs/img/projection_mapping_landing_page.jpg b/docs/cityscopejs/img/projection_mapping_landing_page.jpg
diff --git a/docs/cityscopejs/img/zoom_in_and_out.jpg b/docs/cityscopejs/img/zoom_in_and_out.jpg