Skip to content

Commit

Permalink
start gui revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@hlorenzi
hlorenzi committed Jul 9, 2017
1 parent 296bee8 commit 7055850
Show file tree
Hide file tree
Showing 5 changed files with 368 additions and 301 deletions.
356 changes: 147 additions & 209 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,228 +7,166 @@
<title>Music Analysis</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Homenaje" rel="stylesheet">

</head>


<body id="body" onLoad="main();">

<div id="divEditor">
<svg id="svgEditor"></svg>
</div>
<div id="main">

<div id="divToolbox" style="visibility:hidden;">
<table id="tableToolboxMainLayout">
<tr>
<td class="toolboxGroup">
<button id="buttonPlay" class="toolboxButton toolboxButtonPlay" onClick="handleButtonPlay();"></button>
<button id="buttonRewind" class="toolboxButton toolboxButtonRewind" onClick="handleButtonRewind();">◀◀</button>
<br>
<span class="toolboxLabel">Tempo: </span>
<input id="inputTempo" class="toolboxInput" onInput="handleInputTempo();" value="120"></input>
<br>
<span class="toolboxLabel">Snap: </span>
<select id="selectSnap" class="toolboxButton" onInput="handleSelectSnap();"></select>
</td>

<td></td>

<td class="toolboxGroupMainTabs">
<button id="buttonTabFile" class="toolboxButton" style="width:100%;"
onClick="g_MainTabIndex = 0; refreshMainTabs();">General ></button>

<br>
<!-- Toolbox -->
<div id="toolbox" style="grid-area:1/1">

<!-- Play/Stop -->
<button class="toolbox-button" id="button-play" style="grid-area:1/1">
<i class="material-icons" style="font-size:5em">play_arrow</i>
</button>

<!-- Rewind -->
<button class="toolbox-button" id="button-rewind" style="grid-area:1/2">
<i class="material-icons" style="font-size:3em">fast_rewind</i>
</button>

<!-- Import/Export -->
<button class="toolbox-tab" id="button-file" style="grid-area:1/4">
<span class="toolbox-tab-label">Import/Export</span>
<br>
<i class="material-icons"><span class="toolbox-tab-icon">folder</span></i>
</button>

<!-- Markers -->
<button class="toolbox-tab" id="button-file" style="grid-area:1/5">
<span class="toolbox-tab-label">Markers</span>
<br>
<i class="material-icons"><span class="toolbox-tab-icon">fullscreen</span></i>
</button>

<!-- Notes/Chords -->
<button class="toolbox-tab-selected" id="button-file" style="grid-area:1/6">
<span class="toolbox-tab-label">Notes/Chords</span>
<br>
<i class="material-icons"><span class="toolbox-tab-icon">music_note</span></i>
</button>

<!-- Settings -->
<button class="toolbox-tab" id="button-file" style="grid-area:1/7">
<span class="toolbox-tab-label">Settings</span>
<br>
<i class="material-icons"><span class="toolbox-tab-icon">settings</span></i>
</button>

</div>

<!-- Toolbox Drawer -->
<div class="toolbox-drawer" style="grid-area:2/1">

<!-- Notes/Chords Drawer -->
<div id="toolbox-drawer-notes-chords">

<span style="grid-area:1/1/3/2">
<!-- Chord Kind Drop-down Menu -->
<select class="toolbox-select" id="select-chord-kind" style="width:5em"></select>

<button id="buttonTabMarkers" class="toolboxButton" style="width:100%;"
onClick="g_MainTabIndex = 1; refreshMainTabs();">Markers ></button>
<br>
<!-- Chord Application Drop-down Menu -->
<select class="toolbox-select" id="select-chord-appl" style="width:5em; margin-top:0.25em">
<option>No Appl.</option>
<option>/I</option>
<option>/V</option>
<option>/IV</option>
</select>

<button id="buttonTabChords" class="toolboxButton" style="width:100%;"
onClick="g_MainTabIndex = 2; refreshMainTabs();">Chords ></button>
</td>
<!-- Chord Borrow Drop-down Menu -->
<select class="toolbox-select" id="select-chord-borrow" style="width:5em; margin-top:0.25em">
<option>No Borrow</option>
<option>Ionic</option>
<option>Dorian</option>
<option>Phrygian</option>
</select>
</span>

<td></td>
<!-- Chord Accidental Radio Buttons -->
<!--<span style="grid-area:2/1">
<label><input type="radio" name="radio-chord-accidental">♭</label><br>
<label><input type="radio" name="radio-chord-accidental" checked>♮</label><br>
<label><input type="radio" name="radio-chord-accidental">♯</label><br>
</span>-->

<td class="toolboxGroup" style="text-align:left;">
<table>
<td id="tdTabFile">
<table><tr>
<td>
<table>
<tr>
<td>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonNew();">New</button>
<button class="toolboxButton" onClick="handleButtonGenerateLink();">Generate Link</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">String:</span>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonLoadString();">Load</button>
<button class="toolboxButton" onClick="handleButtonSaveString();">Save</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">String (Compr.):</span>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonLoadStringCompressed();">Load</button>
<button class="toolboxButton" onClick="handleButtonSaveStringCompressed();">Save</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">Dropbox:</span>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonLoadDropbox();">Load</button>
<button class="toolboxButton" onClick="handleButtonSaveDropbox();">Save</button>
<button class="toolboxButton" onClick="handleButtonSaveAsDropbox();">Save As</button>
</td>
</tr>
</table>
</td>

<td class="toolboxSeparator"></td>

<td>
<table><tr>
<td class="toolboxGroup2">
<label>
<input type="checkbox" id="checkboxPopularNotation" class="toolboxCheckbox" onChange="handleCheckboxPopularNotation();"></input>
<span class="toolboxLabel">Use Absolute Notation</span>
</label>

<br>

<label>
<input type="checkbox" id="checkboxChordPatterns" class="toolboxCheckbox" onChange="handleCheckboxChordPatterns();" checked></input>
<span class="toolboxLabel">Use Chord Patterns</span>
</label>
</td>
</tr></table>
</td>
</tr></table>
</td>

<td id="tdTabMarkers">
<table style="text-align:left;">
<tr>
<td>
<span class="toolboxLabel">Key Change:</span>
</td>
<td>
<select id="selectKeyPitch" class="toolboxButton"></select>
<select id="selectKeyScale" class="toolboxButton"></select>
<button class="toolboxButton" onClick="handleButtonInsertKeyChange();">Insert</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">Meter Change:</span>
</td>
<td>
<select id="selectMeterNumerator" class="toolboxButton"></select>
<span class="toolboxLabel">/</span>
<select id="selectMeterDenominator" class="toolboxButton"></select>
<button class="toolboxButton" onClick="handleButtonInsertMeterChange();">Insert</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">Measure Break:</span>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonInsertMeasureBreak();">Insert</button>
</td>
</tr>
<tr>
<td>
<span class="toolboxLabel">Line Break:</span>
</td>
<td>
<button class="toolboxButton" onClick="handleButtonInsertLineBreak();">Insert</button>
</td>
</tr>
</table>
</td>

<td id="tdTabChords">
<table>
<tr>
<td><select id="selectChordKinds" class="toolboxButton" onChange="handleSelectChordKindsChange();"></select></td>

<td></td>
</tr>

<tr>
<td></td>

<td style="text-align:center;">
<button id="buttonChord0" class="toolboxChord"></button>
<button id="buttonChord1" class="toolboxChord"></button>
<button id="buttonChord2" class="toolboxChord"></button>
<button id="buttonChord3" class="toolboxChord"></button>
<button id="buttonChord4" class="toolboxChord"></button>
<button id="buttonChord5" class="toolboxChord"></button>
<button id="buttonChord6" class="toolboxChord"></button><br>
<button id="buttonChord7" class="toolboxChord"></button>
<button id="buttonChord8" class="toolboxChord"></button>
<button id="buttonChord9" class="toolboxChord"></button>
<button id="buttonChord10" class="toolboxChord"></button>
<button id="buttonChord11" class="toolboxChord"></button>
<button id="buttonChord12" class="toolboxChord"></button>
<button id="buttonChord13" class="toolboxChord"></button><br>
<button id="buttonChord14" class="toolboxChord"></button>
<button id="buttonChord15" class="toolboxChord"></button>
<button id="buttonChord16" class="toolboxChord"></button>
<button id="buttonChord17" class="toolboxChord"></button>
<button id="buttonChord18" class="toolboxChord"></button>
<button id="buttonChord19" class="toolboxChord"></button>
<button id="buttonChord20" class="toolboxChord"></button>
</td>
</tr>
</table>
</td>
</table>
</tr>
</table>
<!-- Chord Embelishments Checkboxes -->
<label style="grid-area:1/2"><input type="checkbox">7</label>
<label style="grid-area:1/3"><input type="checkbox">9</label>
<label style="grid-area:1/4"><input type="checkbox">11</label>
<label style="grid-area:1/5"><input type="checkbox">sus2</label>
<label style="grid-area:1/6"><input type="checkbox">sus4</label>
<label style="grid-area:1/7"><input type="checkbox">add9</label>

<!-- Chord Buttons -->
<button class="toolbox-chord" id="button-chord-0" style="grid-area:2/2">
<span class="toolbox-chord-label">I</span>
</button>
<button class="toolbox-chord" id="button-chord-1" style="grid-area:2/3">
<span class="toolbox-chord-label">ii</span>
</button>
<button class="toolbox-chord" id="button-chord-2" style="grid-area:2/4">
<span class="toolbox-chord-label">iii</span>
</button>
<button class="toolbox-chord" id="button-chord-3" style="grid-area:2/5">
<span class="toolbox-chord-label">IV</span>
</button>
<button class="toolbox-chord" id="button-chord-4" style="grid-area:2/6">
<span class="toolbox-chord-label">V</span>
</button>
<button class="toolbox-chord" id="button-chord-5" style="grid-area:2/7">
<span class="toolbox-chord-label">vi</span>
</button>
<button class="toolbox-chord" id="button-chord-6" style="grid-area:2/8">
<span class="toolbox-chord-label">vii<sup>o</sup></span>
</button>

</div>

</div>

<!-- Editor -->
<div class="cell-scroll" style="grid-area:3/1">
<svg id="editor"></svg>
</div>

</div>

</body>


<script src="src/util/math.js"></script>
<script src="src/util/string.js"></script>
<script src="src/util/rational.js"></script>
<script src="src/util/list_by_point.js"></script>
<script src="src/util/list_by_range.js"></script>
<script src="src/util/theory.js"></script>
<script src="src/util/binaryio.js"></script>

<script src="src/song/song.js"></script>
<script src="src/song/note.js"></script>
<script src="src/song/chord.js"></script>
<script src="src/song/meter.js"></script>
<script src="src/song/key.js"></script>
<script src="src/song/measurebreak.js"></script>

<script src="src/editor/editor.js"></script>
<script src="src/editor/editor_interaction.js"></script>

<script src="src/synth/instrument.js"></script>
<script src="src/synth/synth.js"></script>

<script src="src/main.js"></script>

<script src="src/test/test.js"></script>

<script src="src/pako/pako.js"></script>
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="9h2eh3v67sgghpl"></script>
<script src="src/util/math.js"></script>
<script src="src/util/string.js"></script>
<script src="src/util/rational.js"></script>
<script src="src/util/list_by_point.js"></script>
<script src="src/util/list_by_range.js"></script>
<script src="src/util/theory.js"></script>
<script src="src/util/binaryio.js"></script>

<script src="src/song/song.js"></script>
<script src="src/song/note.js"></script>
<script src="src/song/chord.js"></script>
<script src="src/song/meter.js"></script>
<script src="src/song/key.js"></script>
<script src="src/song/measurebreak.js"></script>

<script src="src/editor/editor.js"></script>
<script src="src/editor/editor_interaction.js"></script>

<script src="src/synth/instrument.js"></script>
<script src="src/synth/synth.js"></script>

<script src="src/main.js"></script>
<script src="src/toolbox.js"></script>
<script src="src/toolbox_notes_chords.js"></script>

<script src="src/test/test.js"></script>

<script src="src/pako/pako.js"></script>
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="9h2eh3v67sgghpl"></script>

</body>

</html>
8 changes: 5 additions & 3 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@ function main()

g_Song = new Song();

var elemSvgEditor = document.getElementById("svgEditor");
var elemSvgEditor = document.getElementById("editor");
g_Editor = new Editor(elemSvgEditor, g_Synth);
g_Editor.setSong(g_Song);
g_Editor.refresh();
g_Editor.callbackTogglePlay = refreshButtonPlay;
g_Editor.callbackCursorChange = callbackCursorChange;
g_Editor.usePopularNotation = document.getElementById("checkboxPopularNotation").checked;
g_Editor.useChordPatterns = document.getElementById("checkboxChordPatterns").checked;
g_Editor.usePopularNotation = false;//document.getElementById("checkboxPopularNotation").checked;
g_Editor.useChordPatterns = false;//document.getElementById("checkboxChordPatterns").checked;

toolboxInit();

refreshButtonPlay(false);
refreshMainTabs();
Expand Down
Loading

0 comments on commit 7055850

Please sign in to comment.