Re: making SVG output ready for web GUIs

[SoundsFromSound]

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.