Merge pull request #24 from theta360developers/tutorial-2

added challenge to control right pane
theta360developers · Nov 14, 2024 · bf26106 · bf26106
2 parents daa46b6 + a8bd451
commit bf26106
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 0 deletions.
diff --git a/docs/images/tutorial2/annotation.png b/docs/images/tutorial2/annotation.png
diff --git a/docs/images/tutorial2/drawing.png b/docs/images/tutorial2/drawing.png
diff --git a/docs/images/tutorial2/right-pane-enhance.png b/docs/images/tutorial2/right-pane-enhance.png
diff --git a/docs/images/tutorial2/split-screen.png b/docs/images/tutorial2/split-screen.png
diff --git a/docs/tutorial2.md b/docs/tutorial2.md
@@ -410,3 +410,98 @@ viewer.start({
 The image is now enhanced.
 
 ![enhancement](images/tutorial2/enhancement.png)
+
+### annotation
+
+Set up a constant for the viewer ui.  In the toolbar,
+add the annotation button.
+
+```javascript
+const ui = {
+  toolbar: {
+    annotationButton: {
+      isHidden: false
+    }
+  }
+}
+const viewer = new RICOH360Viewer({
+  divId: "viewer",
+  onFetchToken: () => "{{token}}",
+  ui
+});
+```
+
+![annotation](images/tutorial2/annotation.png)
+
+### drawing
+
+```javascript
+const ui = {
+  toolbar: {
+    annotationButton: {
+      isHidden: false
+    },
+    drawingButton: {
+      isHidden: false
+    }
+  }
+}
+```
+
+![drawing](images/tutorial2/drawing.png)
+
+### split-screen
+
+The split-screen control is in the `verticalPanel`. 
+
+```javascript
+const ui = {
+  toolbar: {
+    annotationButton: {
+      isHidden: false
+    },
+    drawingButton: {
+      isHidden: false
+    }
+  },
+  verticalPanel: {
+    isHidden: false,
+    topMargin: 25,
+  }
+}
+```
+
+![split-screen](images/tutorial2/split-screen.png)
+
+### control of right pane
+
+![right pane enhance](images/tutorial2/right-pane-enhance.png)
+
+1. create a function to switch scene
+1. in the function, add the pane "1", which is the right pane
+1. create a button to run the function to switch the scene
+
+```javascript
+const viewer = new RICOH360Viewer({
+    divId: "viewer",
+    onFetchToken: () => "{{token}}",
+    ui
+  });
+viewer.start({
+  contentId: "{{contentId}}",
+});
+const enhanceRightPane = () => {
+  viewer.switchScene(
+  {
+    contentId: "{{contentId}}",
+    transform: 'enhancement'
+  }, "1"
+  );
+}
+```
+
+Below the viewer, add this:
+
+```html
+<button type="button" onclick="enhanceRightPane()">enhance right</button>
+```