Skip to content

Commit

Permalink
added code explanation
Browse files Browse the repository at this point in the history
  • Loading branch information
codetricity committed Nov 6, 2024
1 parent 126779c commit 519982f
Showing 1 changed file with 36 additions and 1 deletion.
37 changes: 36 additions & 1 deletion docs/python.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
}
);
```

0 comments on commit 519982f

Please sign in to comment.