Hi Gordon,
Welcome. If you are interested in an online music application, have you
looked here yet? --
http://weblily.net/web/guest;jsessionid=CF320C2C6F66038EA5B98FAC59F34B28
For starters / ideas:
LilyPond-driven applications, etc.
Ben
Gordon Rouse wrote
Being interested in writing music and web-development,
I am interested in making an online
music editing system that would maybe be half as good as Sibelius!
The idea would be to use the lilypond with SVG backend.
I have had a look at the SVG output from lilypond and
I am impressed with the work.
To make the SVG able to be manipulated with a
javascript library like jQuery I would need a manner to identify the
elements in the SVG to
add functionality to clicking and dragging the elements.
While I could work with the curent
output, it would be better
if the elements could have some identifiers in them - like classes
and ids, that would allow easier manipulation.
Here is an example of the current note element:
path
transform=translate(35.6618, 7.0119) scale(0.0040, -0.0040)
d=M220 138c56 0 109 -29
109 -91c0 -72 -56 -121 -103
-149c-36 -21 -76 -36 -117
-36c-56 0 -109 29 -109 91c0 72 56 121
103 149c36 21 76 36 117 36z
fill=currentColor/
I might be able to figure out it is a note by the numbers,
and its position might tell me
something about what note it is.
However, if we added some extra information
to the element like a class tag, we could have
some useful information that would make
the SVG output easily manipulated by javascript.
path
id=el-X
class=note g4 bar-32 beat-2.5
{group-X} {triplet|duplet|etc} {grouplength-2}
{groupindex-2}
transform=translate(35.6618, 7.0119)
scale(0.0040, -0.0040)
d=M220 138c56
0 109 -29 109 -91c0 -72 -56 -121 -103
-149c-36 -21 -76 -36 -117 -36c-56 0 -109 29 -109 91c0
72 56 121 103 149c36 21 76 36 117 36z
fill=currentColor/
The element should have a unique id which allows it's identification
Then I envisage that the first class item tells me it is a note, rest stem
etc, the second
tells what note (not exactly as notated in ly file as these characters
need
to be www3
compliant), the third item gives me bar number, fourth the beat position,
the fifth links it
to other elements - ie stem and quaver groupings, with the X being a
unique
generated index
for subsequent groups. The sixth item would tell me if it was part of
special triplet or
duplet etc over grouplength parameter and is the nth item as given in
groupindex.
The layout of such information needs to be easy for jQuery or other
javascript libraries to
find related items. In the above example,
if I was trying to find all elements in bar 32, I
could use jQuery notation $('.bar-32').
Hence why I want the separation of bits of
information into useful groupings. Naturally,
once I found an item, I can lookup its other
properties.
These are just ideas.
Obviously this extra information adds more size to the SVG output, so
it would not be part of any default SVG output.
Maybe if someone could point out the files where
the SVG syntax is generated I could have a
look at implementing this myself.
Regards
Gordon Rouse
Web-Programmer/Developer
___
lilypond-devel mailing list
lilypond-devel@
https://lists.gnu.org/mailman/listinfo/lilypond-devel
-
composer | sound designer
--
View this message in context:
http://lilypond.1069038.n5.nabble.com/making-SVG-output-ready-for-web-GUIs-tp151249p151250.html
Sent from the Dev mailing list archive at Nabble.com.
___
lilypond-devel mailing list
lilypond-devel@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-devel
