diff --git a/docs/images/tutorial/simple-list.png b/docs/images/tutorial/simple-list.png new file mode 100644 index 0000000..c442e0b Binary files /dev/null and b/docs/images/tutorial/simple-list.png differ diff --git a/docs/images/tutorial/split-pane.png b/docs/images/tutorial/split-pane.png new file mode 100644 index 0000000..1b9251b Binary files /dev/null and b/docs/images/tutorial/split-pane.png differ diff --git a/docs/tutorial.md b/docs/tutorial.md index 6861d2c..97e4e0c 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -424,3 +424,59 @@ In `index.html`. Tip: Add the ui object into the viewer at time of instantiation. ![button challenge](images/tutorial/button_challenge.png) + +The split pane button will work. + +![split pane](images/tutorial/split-pane.png) + +Solution is in the tutorial folder in `button-challenge.html`. + +### simple list of content + +We're passing a single image contentId into the HTML. +Modifer the code to show a simple list. + +![simple list](images/tutorial/simple-list.png) + +In the server Python file + +```python + +# Function to query content from the RICOH360 API +def get_content(): + cloud_content_token = get_token_for_cloud_content() + # Fetch content using the token + content_headers = {"Authorization": f"Bearer {cloud_content_token}"} + content_response = requests.get( + "https://api.ricoh360.com/contents?limit=10", headers=content_headers + ) + content_data = content_response.json() + return content_data + +@app.route("/") +def index(): + token = create_token() + content_data = get_content() + contentIds = [] + for single_content in content_data: + contentIds.append(single_content["content_id"]) + return render_template("simple-list-challenge.html", token=token, contentIds=contentIds) +``` + +in the HTML file + +```html +... +... + viewer.start({ + contentId: "{{contentIds[0]}}" + }); + + +{% for contentId in contentIds %} + +{% endfor %} +``` + +Solution in the tutorial folder on GitHub. +