Skip to content

Enhances Jupyter notebook demo with usage examples #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crescent-stdio merged 1 commit into from
Oct 9, 2025
Merged

Enhances Jupyter notebook demo with usage examples #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 38 additions & 6 deletions docs/examples/jupyter-notebook/demo.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
"metadata": {},
"source": [
"# WaveRoll - Jupyter Notebook Demo\n",
"> JavaScript Library for Comparative MIDI Piano-Roll Visualization\n",
"\n",
"[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/crescent-stdio/wave-roll/blob/main/docs/examples/jupyter-notebook/demo.ipynb)\n",
"[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/crescent-stdio/wave-roll/blob/main/docs/examples/jupyter-notebook/demo.ipynb) [![GitHub](https://img.shields.io/badge/GitHub-View_on_GitHub-blue?logo=github)](https://github.com/crescent-stdio/wave-roll)\n",
"\n",
"This notebook demonstrates how to embed WaveRoll in Jupyter notebooks for interactive MIDI visualization and comparison.\n"
]
Expand All @@ -17,7 +18,9 @@
"id": "6be587b7",
"metadata": {},
"source": [
"## Usage\n",
"## 1. Usage\n",
"\n",
"### 1.1. Basic IFrame Embed\n",
"\n",
"Embed the WaveRoll standalone demo using an IFrame:\n",
"\n",
Expand All @@ -32,15 +35,44 @@
"outputs": [],
"source": [
"from IPython.display import IFrame\n",
"IFrame(src='https://crescent-stdio.github.io/wave-roll/standalone.html', width='100%', height='800px')"
"IFrame(src='https://crescent-stdio.github.io/wave-roll/standalone.html', width='100%', height='800px' )"
]
},
{
"cell_type": "markdown",
"id": "a7d3e64a",
"metadata": {},
"source": [
"### 1.2. IFrame with Overflow Auto\n",
"\n",
"If you need scrollbar control on the iframe itself:\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "08dc98f6",
"metadata": {},
"outputs": [],
"source": [
"from IPython.display import HTML\n",
"\n",
"HTML(\"\"\"\n",
"<iframe \n",
" src=\"https://crescent-stdio.github.io/wave-roll/standalone.html\" \n",
" width=\"100%\" \n",
" height=\"800px\"\n",
" style=\"overflow: auto; border: none;\"\n",
"></iframe>\n",
"\"\"\")"
]
},
{
"cell_type": "markdown",
"id": "dbd03610",
"metadata": {},
"source": [
"## Alternative: Using the Web Component Directly\n",
"## 2. Alternative: Using the Web Component Directly\n",
"\n",
"You can also use the `<wave-roll>` web component directly in Jupyter notebooks with specific file paths:\n"
]
Expand Down Expand Up @@ -80,7 +112,7 @@
"id": "f91c0c2a",
"metadata": {},
"source": [
"### Using Your Own Files\n",
"### 2.1. Using Your Own Files\n",
"\n",
"To use your own MIDI/audio files, you can:\n",
"\n",
Expand Down Expand Up @@ -122,7 +154,7 @@
"id": "dd99801a",
"metadata": {},
"source": [
"### Dynamic File Configuration with Python\n",
"### 2.2. Dynamic File Configuration with Python\n",
"\n",
"You can also configure files programmatically using Python variables:\n"
]
Expand Down