| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title><%= htmlWebpackPlugin.options.title %></title>
- <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
- <meta name="author" content="OpenSheetMusicDisplay contributors">
- <!-- Demo js file is included automatically by webpack druing build -->
- <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>
- <h1 class="ui centered header">
- <img src="./favicon.ico?" class="ui image">
- <%= htmlWebpackPlugin.options.title %>
- </h1>
- <div class="ui three column grid container">
- <div class="column">
- <h3 class="ui header">Select a sample:</h3>
- <select class="ui selection dropdown" id="selectSample" style="width:320px; height:40%"></select>
- </div>
- <div class="column">
- <h3 class="ui header">Render backend:</h3>
- <select class="ui selection dropdown" id="backend-select" value="svg" style="height:40%">
- <option value="svg">SVG</option>
- <option value="canvas">Canvas</option>>
- </select>
- </div>
- <div class="column">
- <h3 class="ui header">Cursor controls:</h3>
- <div>
- <div class="ui vertical buttons">
- <div class="ui animated fade button" id="show-cursor-btn">
- <div class="visible content">Show</div>
- <div class="hidden content">
- <i class="eye icon"></i>
- </div>
- </div>
- <div class="ui animated fade button" id="hide-cursor-btn">
- <div class="visible content">Hide</div>
- <div class="hidden content">
- <i class="eye slash icon"></i>
- </div>
- </div>
- </div>
- <div class="ui vertical buttons">
- <div class="ui animated fade button" id="next-cursor-btn">
- <div class="visible content">Next</div>
- <div class="hidden content">
- <i class="arrow right icon"></i>
- </div>
- </div>
- <div class="ui animated fade button" id="reset-cursor-btn">
- <div class="visible content">Reset</div>
- <div class="hidden content">
- <i class="undo icon"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="column">
- <h3 class="ui header">Zoom controls:</h3>
- <div class="ui buttons">
- <div class="ui button" id="zoom-in-btn">
- <i class="search plus icon"></i>
- </div>
- <div class="ui button" id="zoom-out-btn">
- <i class="search minus icon"></i>
- </div>
- </div>
- <h4 class="ui header" id="zoom-str">???</h4>
- </div>
- <div class="column">
- <h3 class="ui header">Show bounding box for:</h3>
- <select class="ui selection dropdown" id="selectBounding">
- <option value="none">None</option>
- <option value="all">All</option>
- <option value="VexFlowMeasure">Measures</option>
- <option value="VexFlowStaffEntry">Staff entries</option>
- <option value="GraphicalLabel">Labels</option>
- <option value="VexFlowStaffLine">Staff lines</option>
- <option value="SystemLine">System lines</option>
- <option value="StaffLineActivitySymbol">Activity symbols</option>
- </select>
- </div>
- <div class="column">
- <h3 class="ui header">Show debug information:</h3>
- <div class="ui relaxed list">
- <div class="item">
- <div class="ui toggle checkbox">
- <input type="checkbox" name="public" id="skylineDebug">
- <label>Skyline</label>
- </div>
- </div>
- <div class="item">
- <div class="ui toggle checkbox">
- <input type="checkbox" name="public" id="bottomlineDebug">
- <label>Bottomline</label>
- </div>
- </div>
- </div>
- </div>
- </div>
- <table cellspacing="0" style="max-width:700px;">
- <tr id="error-tr">
- <td></td>
- <td id="error-td"></td>
- </tr>
- </table>
- </body>
- </html>
|
