From 519982f26f72b8e1e69ff65cdaadf8b864b7ee9d Mon Sep 17 00:00:00 2001
From: Craig <craig@oppkey.com>
Date: Wed, 6 Nov 2024 10:57:37 -1000
Subject: [PATCH] added code explanation

---
 docs/python.md | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/docs/python.md b/docs/python.md
index 066839b..720a1fd 100644
--- a/docs/python.md
+++ b/docs/python.md
@@ -31,7 +31,12 @@ WARNING: This is a development server. Do not use it in a production deployment.
 
 ```
 
-## viewer token creation
+## viewer token creation using PyJWT
+
+The demo uses [PyJWT](https://pyjwt.readthedocs.io/en/stable/) to create the web token.  To create the token, you must use the Private Key
+obtained from RICOH.  This demo does not come with a private key.
+
+You must have the private key in your  `secrets.env` file.
 
 ```python
 # Function to create a JWT token for the viewer API
@@ -42,3 +47,33 @@ def create_token():
 
     return token if isinstance(token, str) else token.decode("utf-8")
 ```
+
+## viewer HTML template with Jinja2
+
+The HTML file to display the viewer is in [`views/flask_viewer.html`](https://github.com/theta360developers/oppkey-ricoh-viewer-demo-basic/blob/main/views/flask_viewer.html).
+
+The viewer is imported with this line:
+
+`<script src="https://r360pf-prod-static.s3.us-west-2.amazonaws.com/viewer/v0.15.0/ricoh360-viewer.js"></script>`
+
+### Viewer instantiation
+
+The fetchToken method returns the token generated in the Python
+file. The Python variable that was passed into the HTML is in
+double quotes `{{token}}`.
+
+```javascript
+const fetchToken = () => "{{token}}";
+
+const viewer = new RICOH360Viewer({
+    divId: "viewer",
+    onFetchToken: fetchToken,
+    isCubemapEnabled: true,
+    ui,
+onSelected: (index) => {
+    console.log("index: ", index);
+    },
+    onCropped: onCropped,
+}
+);
+```