Skip to content

Add components for more advanced notation #3

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

Open
wants to merge 8 commits into
base: tuplets-and-beams
Choose a base branch
from
Open

Add components for more advanced notation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9cf245a
Add support for multiple systems per score
ywsang Aug 13, 2020
bc56270
Add curves within or across systems
ywsang Aug 13, 2020
fd02805
Documentation for vf-curve
ywsang Aug 13, 2020
8bcfa9a
Add clef inference
ywsang Aug 13, 2020
e1b2ec0
Add time signature inference
ywsang Aug 13, 2020
f64642c
Add web component tests
ywsang Aug 13, 2020
2e0eeab
Add special system connectors
ywsang Aug 14, 2020
78dcb84
Remove comment about only one system per score
ywsang Aug 14, 2020
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
195 changes: 193 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
</head>
<body>

<vf-score x=0 height=300 renderer='canvas'>
<!-- Basics -->
<vf-score x=0 height=300>
<vf-system>
<vf-stave clef='treble' timeSig='4/4' keySig='Bb'>
<vf-voice autoBeam>C5/q[id='hello'], (C4 Eb4 G4)/q, A4, G4/16, A4, B4, C5</vf-voice>
Expand All @@ -17,6 +18,7 @@
</vf-system>
</vf-score>

<!-- Tuplets and Beams -->
<vf-score height=300>
<vf-system>
<vf-stave clef='treble'>
Expand All @@ -28,13 +30,202 @@
</vf-stave>
<vf-stave clef='bass'>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3</vf-beam>
<vf-beam>c3/8, f3, d3, g3</vf-beam>
<vf-beam>d4/16, f3, d3, g3</vf-beam>
g3/q
</vf-voice>
</vf-stave>
</vf-system>
</vf-score>

<!-- Two Systems, One Line -->
<vf-score systemsPerLine=2 width=800>
<vf-system connector='brace'>
<vf-stave clef='treble' timeSig='4/4' keySig='Bb'>
<vf-voice stem='up'>
C#5/q[id='here'], B4, A4/q., E4/8[id='there']
</vf-voice>
</vf-stave>
<vf-stave clef='bass' timeSig='4/4' keySig='Bb'>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3</vf-beam>
<vf-beam stem='down'>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>

<vf-system x=410 width=350>
<vf-stave clef='treble' x=410 width=350>
<vf-voice stem='up'>
C#5/q[id='here'], B4, A4/q., E4/8[id='there']
</vf-voice>
</vf-stave>
<vf-stave clef='bass' x=410 width=350>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3</vf-beam>
<vf-beam stem='down'>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>
</vf-score>

<!-- Wrapping Systems -->
<vf-score systemsPerLine=2 width=700>
<vf-system connector='bracket'>
<vf-stave clef='treble' timeSig='4/4' keySig='Bb'>
<vf-voice>
C#5/q[id='here'], B4, A4/q., E4/8[id='there']
</vf-voice>
</vf-stave>
<vf-stave clef='bass' timeSig='4/4' keySig='Bb'>
<vf-voice stem='down'>
<vf-beam>c3/8, f3, d3, g3</vf-beam>
<vf-beam>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>

<vf-curve from='here' to='there'></vf-curve>

<vf-system>
<vf-stave>
<vf-voice>
C#5/q, B4, A4/q.[id='finish'], E4/8
</vf-voice>
</vf-stave>
<vf-stave>
<vf-voice stem='down'>
<vf-beam>c3/8, f3, d3, g3</vf-beam>
<vf-beam>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>

<vf-curve from='there' to='finish'></vf-curve>

<vf-system>
<vf-stave>
<vf-voice>
C#5/q, B4, A4/q., E4/8
</vf-voice>
</vf-stave>
<vf-stave>
<vf-voice stem='down'>
<vf-beam>c3/8, f3, d3, g3</vf-beam>
<vf-beam>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>
</vf-score>

<!-- Clef/TimeSig Inference -->
<vf-score width=800 systemsPerLine=2>
<vf-system>
<vf-stave clef='treble' timeSig='5/4' keySig='Bb'>
<vf-voice stem='up'>
C#5/q[id='here'], B4, A4/q., E4/8[id='there'], E4/q
</vf-voice>
</vf-stave>
<vf-stave clef='bass' timeSig='5/4' keySig='Bb'>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3</vf-beam>
<vf-beam stem='down'>d4/8, f3, d3, g3</vf-beam>
g3/q
</vf-voice>
</vf-stave>
</vf-system>

<vf-curve from='here' to='there'></vf-curve>

<vf-system>
<vf-stave>
<vf-voice stem='up'>
<vf-tuplet stem='up'>C5/q, B4, A4</vf-tuplet>
E4/q, D4, D4
</vf-voice>
</vf-stave>
<vf-stave>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3</vf-beam>
<vf-beam stem='down'>d4/8, f3, d3, g3</vf-beam>
g3/q
</vf-voice>
</vf-stave>
</vf-system>

<vf-system>
<vf-stave>
<vf-voice stem='up'>
C#5/q, B4, A4/q, E4, F4
</vf-voice>
</vf-stave>
<vf-stave>
<vf-voice stem='down'>
C3/h[stem='up'], (D4 B3)/q
<vf-beam stem='down'>d3, g3</vf-beam>
g3/q[id='start']
</vf-voice>
</vf-stave>
</vf-system>

<vf-system>
<vf-stave timeSig='4/4' keySig='Eb'>
<vf-voice stem='up'>
C#5/q, B4, A4/q., E4/8
</vf-voice>
</vf-stave>
<vf-stave timeSig='4/4' keySig='Eb'>
<vf-voice stem='down'>
<vf-beam stem='down'>c3/8, f3, d3, g3[id='end']</vf-beam>
<vf-beam stem='down'>d4/8, f3, d3, g3</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>

<vf-curve from='start' to='end'></vf-curve>
</vf-score>

<!-- Lines with different number of staves in a line -->
<vf-score renderer='svg' width=600 systemsPerLine=2>
<vf-system>
<vf-stave clef='treble' timeSig='6/8'>
<vf-voice>f4/4, d4/8, g4/4, eb4/8</vf-voice>
</vf-stave>
</vf-system>

<vf-system>
<vf-stave>
<vf-voice stem='down'>ab4/4, bb4/8, (cb5 eb5)/4[stem="down"], d5/8[stem="down"]</vf-voice>
</vf-stave>
</vf-system>

<vf-system connector='brace'>
<vf-stave clef='treble' timeSig='6/8'>
<vf-voice>
<vf-beam>d4/8, d4, d4</vf-beam>
<vf-beam>d4/8, e4, eb4</vf-beam>
</vf-voice>
</vf-stave>
<vf-stave clef='bass' timeSig='6/8'>
<vf-voice stem='down'>
<vf-beam stem='down'>c4/8, c4, c4</vf-beam>
<vf-beam stem='down'>c4/8, c4, c4</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>

<vf-system connector='brace'>
<vf-stave>
<vf-voice>(eb4 ab4)/4., (c4 eb4 ab4)/4, db5/8</vf-voice>
</vf-stave>
<vf-stave>
<vf-voice stem='down'>
<vf-beam stem='down'>c4/8, c4, c4</vf-beam>
<vf-beam stem='down'>c4/8, c4, c4</vf-beam>
</vf-voice>
</vf-stave>
</vf-system>
</vf-score>

</body>
</html>
24 changes: 24 additions & 0 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* eslint-disable import/no-extraneous-dependencies */
const { createDefaultConfig } = require('@open-wc/testing-karma');
const merge = require('deepmerge');

module.exports = config => {
config.set(
merge(createDefaultConfig(config), {
files: [
// runs all files ending with .test in the test folder,
// can be overwritten by passing a --grep flag. examples:
//
// npm run test -- --grep test/foo/bar.test.js
// npm run test -- --grep test/bar/*
{ pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
],

esm: {
nodeResolve: true,
},
// you can overwrite/extend the config further
}),
);
return config;
};
Loading