1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>OpenSheetMusicDisplay as an embedded iframe</title>
- <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
- <meta name="author" content="OpenSheetMusicDisplay contributors">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"
- type="text/javascript"></script>
- <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.css" media="all" rel="stylesheet" />
- <link rel="icon" href="./favicon.ico?" type="image/x-icon" />
- </head>
- <body>
- <br>
- <div style="text-align: center;width: 60%;margin:0 auto">
- <h1 class="ui centered header" id="header">
- <img src="./favicon.ico?" class="ui image">
- </h1>
- <h2>
- OpenSheetMusicDisplay as an embedded iframe
- </h2>
- </div>
- <div style="padding: 40px;margin:0 auto">
- <h3>
- Use parameters:
- </h3>
- <p>
- <table class="ui table celled ">
- <tr>
- <th>Parameter</th>
- <th>Values</th>
- <th>Default</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><b>embedded</b></td>
- <td></td>
- <td></td>
- <td>Activates the embedded mode: controls are hidden (unless other parameters specified)
- </td>
- </tr>
- <tr>
- <td>showControls</td>
- <td>"0" and "1"</td>
- <td>"0" = OFF</td>
- <td>If active, the controls of OSMD are shown like usually.</td>
- </tr>
- <tr>
- <td>showZoomControl</td>
- <td>"0" and "1"</td>
- <td>"0" = OFF</td>
- <td>If showControls == 0 and showZoomControl == 1, a small zoomControl widget will be displayed to save space.</td>
- </tr>
- <tr>
- <td>showHeader</td>
- <td>"0" and "1"</td>
- <td>"0" = OFF</td>
- <td>If activated, the OSMD title will be rendered on top of the sheet</td>
- </tr>
- <tr>
- <td>zoom</td>
- <td>floating number between 0.1 and 5.0</td>
- <td>1.0</td>
- <td>If given, the OSMD zoom level will be set at loading time</td>
- </tr>
- <tr>
- <td>overflow</td>
- <td>"hidden" , "auto", "scroll", "visible"</td>
- <td>"auto"</td>
- <td>If given, this attribute will refresh the state of the css attribute overflow to control the scrollbar.</td>
- </tr>
- </table>
- </div>
- <div>
- <center>
- <h4>Example: http://localhost:8000/?embedded&showZoomControl=1&zoom=0.5</h4>
- <iframe src="http://localhost:8000/?embedded&showZoomControl=1&zoom=0.5" width="800" height="1500"
- frameborder="1"></iframe>
- </center>
- </div>
- </body>
- </html>
|