Skip to content

Commit 197da6f

Browse files
authored
Merge pull request #223 from DCMLab/readme-ui-update
Readme UI update
2 parents 0386a86 + 8a79ec0 commit 197da6f

12 files changed

+32
-41
lines changed

README.md

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,17 @@ It is currently very much under construction, but can be tested [here](https://d
2020
The basics are as follows:
2121

2222
* Clicking selects notes. Shift-click selects them as _primary_
23-
* Linking together the selected notes into a _relation_, alternatively
24-
referred to as a _relation_ can be done either without giving the
23+
* Linking together the selected notes into a _relation_ can be done either without giving the
2524
relation a type at all, by clicking one of the preset buttons or their
2625
key bindings, or by writing a custom type into the text field and
27-
clicking the "Add relation with custom type" button.
26+
clicking the "Assign" button.
2827
* Relations with both primary and secondary notes imply a priority among
2928
the notes. If we add a number of relations such that no circular
30-
priorities are introduced, we have defined a typ of _hierarchy_ among
29+
priorities are introduced, we have defined a type of _hierarchy_ among
3130
the notes and relations.
3231
* After having annotated a number of relations/relations, we can _reduce_
33-
the lowest-ranked notes in our hierarchy by clicking the "Reduce
34-
Relations" button. We can also select a subset of the existing
32+
the lowest-ranked notes in our hierarchy by clicking the "Reduce" button.
33+
We can also select a subset of the existing
3534
relations to attempt to reduce. The basic algorithm is this: Each
3635
reduced relation also removes its secondary notes, and leaves its
3736
primary notes to the next step. However, any relations that are _not_
@@ -40,88 +39,80 @@ The basics are as follows:
4039
this step, and the removed notes are only secondaries of removed
4140
relations.
4241

43-
*Note that the below illustrations all come from a previous version referring to "hyperedges". In the present version these have all been replaced by "relations".*
44-
4542
## A short example
4643

4744
Let us load a familiar piece into the annotation app: Bach's Prelude in C
4845
Major from The Well-tempered Clavier (BWV 846). This is done by selecting
49-
the file from your computer through the file selector at the bottom left. Once
50-
chosen, the app should render it directly as in
46+
the file from your computer through the file selector accessed from the
47+
"Select a score" button. Once chosen, the app should render it directly as in
5148

52-
![](images/tutorial1.png?raw=true)
49+
![](images/tutorial21.png?raw=true)
5350

5451
This done, we can begin selecting notes by clicking them. We can also select notes as _primary_ by shift-clicking them.
5552

5653
After selecting a number of notes, we can associate them using a relation,
5754
either of some specific type, or untyped. There are a number of predefined
58-
edge types with dedicated buttons and keybindings, and a textfield for
59-
entering a custom type.
55+
relation types with dedicated buttons and keybindings, and a textfield for
56+
entering a custom type in the expanded menu.
6057

6158
Let us select the first E in the upper voice as primary, and the rest of the E's in that measure as secondary:
6259

63-
![](images/tutorial2.png?raw=true)
60+
![](images/tutorial22.png?raw=true)
6461

6562
We can do this either by clicking and shift-clicking the individual notes,
66-
and then either clicking the button marked "Add repeat(+) relation" or
63+
and then either clicking the button marked "Repeat" or
6764
using the "+" keyboard shortcut. However, specifically for the situation
6865
that all the notes of the same pitch in a single bar should be selected and
6966
related as repeats, it is also possible to just select the primary note of
7067
the repeat and then hitting "+".
7168

72-
![](images/tutorial3.png?raw=true)
69+
![](images/tutorial23.png?raw=true)
7370

74-
After having created a number of relations, we can choose to a "Reduce"
75-
step, which hides the "lowest" level of edges, as described above.. For
71+
After having created a number of relations, we can choose to do a "Reduce"
72+
step (by clicking the button in the layer menu on the left) which hides
73+
the "lowest" level of edges, as described above. For
7674
example, if we have made similar relations for the other parts in the
7775
arpeggio, we can reduce the first bar of the Prelude from this:
7876

79-
![](images/tutorial4.png?raw=true)
77+
![](images/tutorial24.png?raw=true)
8078

8179
To this:
8280

83-
![](images/tutorial5.png?raw=true)
81+
![](images/tutorial25.png?raw=true)
8482

8583
However, this doesn't look very nice, as we only hide the notes, and not
8684
the beams and other things related to notes. We can hide stems and beams
87-
and such things with the button "Toggle (s)tems etc." or the keyboard
85+
and such things with the button "Stems etc." in the "More options" menu, or the keyboard
8886
shortcut "s".
8987

90-
![](images/tutorial6.png?raw=true)
88+
![](images/tutorial26.png?raw=true)
9189

9290
But this still leaves us with an embarrassing amount of unused space, as
93-
well as unused ledger lines. To rerender the MEI with the removed notes, we
94-
can click the button marked "Rerender less hidden notes" **but beware**! Up
95-
until now, we can undo things to no ill effect (with the button or the "u"
96-
key), but as soon as we rerender, undo is not going to work past that
97-
point.
98-
99-
Still, let's go ahead:
91+
well as unused ledger lines. We can, however, create a _new layer_, which
92+
will be added in the app below the first layer, where such unused spaced can be
93+
significantly reduced, and features like note editing becomes available.
10094

101-
![](images/tutorial7.png?raw=true)
95+
![](images/tutorial27.png?raw=true)
10296

103-
Much better!
97+
Slightly better!
10498

105-
Having done a number of reductions and rerenderings, we can end up with something similar to:
99+
Having done a number of reductions and new layers, we can end up with something similar to:
106100

107-
![](images/tutorial8.png?raw=true)
101+
![](images/tutorial28.png?raw=true)
108102

109103
Which starts to be useful for further analysis.
110104

111105
By clicking the "Save" button, you will get the option to save the original
112-
MEI plus the graph as currently envisioned. For example, saving the above
106+
MEI, any selection of additional layers, plus the graph as currently envisioned. For example, saving the above
113107
state and then loading the resulting file will show this view:
114108

115-
![](images/tutorial9.png?raw=true)
116-
117-
Which can then be turned into the previous view by first reducing and then
118-
rerendering (and also hiding stems etc.).
109+
![](images/tutorial29.png?raw=true)
119110

120111
## Hierarchical analysis
121112

122113
More exciting possibilities are open by having overlapping and interacting
123114
relations, though this is beyond the scope of this simple example. For
124-
presenting this work as a Late-Breaking Demo at ISMIR2020, the following
115+
presenting an earlier version of this work as a Late-Breaking Demo at ISMIR2020, the following
125116
illustrative gifs were produced, showcasing some more advanced ideas:
126117

127118
**Update**: In the GIFs below, reference is made to needing to delete edges in order to see relations "behind" them. This is no longer required: instead, by scrolling with the scroll wheel (up or down), the currently highlighted edge is sent to the "bottom" of the stack, showing the edges that were "hidden".

images/tutorial21.png

74.4 KB
Loading

images/tutorial22.png

107 KB
Loading

images/tutorial23.png

76.3 KB
Loading

images/tutorial24.png

102 KB
Loading

images/tutorial25.png

85.2 KB
Loading

images/tutorial26.png

72.4 KB
Loading

images/tutorial27.png

76.8 KB
Loading

images/tutorial28.png

57.5 KB
Loading

images/tutorial29.png

104 KB
Loading

src/components.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@ <h4 class="fly-out__title">File</h4>
471471
<button class="btn btn--plain btn--small" type="button"><span>Save as <abbr title="Scalable Vector Graphics">SVG</abbr></span></button>
472472
<label class="file | btn btn--plain btn--small" for="file">
473473
<span>
474-
Select a <abbr title="Music Encoding Initiative">MEI</abbr> file
474+
Select a score <!--abbr title="Music Encoding Initiative">MEI</abbr> file-->
475475
<input class="file__input" id="file" type="file" accept=".mei,.mxl,.musicxml,.xml,.abc">
476476
</span>
477477
</label>

src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ <h4 class="fly-out__title">File</h4>
174174

175175
<label class="file | btn btn--plain btn--small" for="score-file-picker">
176176
<span>
177-
Select a <abbr title="Music Encoding Initiative">MEI</abbr> file
177+
Select a score <!--abbr title="Music Encoding Initiative">MEI</abbr> file-->
178178
<input class="file__input" id="score-file-picker" type="file" accept=".mei,.mxl,.musicxml,.xml,.abc">
179179
</span>
180180
</label>

0 commit comments

Comments
 (0)