Re: making SVG output ready for web GUIs

2013-09-23 Thread Jan Nieuwenhuizen
SoundsFromSound writes:

> Welcome. If you are interested in an online music application, have you
> looked here yet? -->
> http://weblily.net/web/guest;jsessionid=CF320C2C6F66038EA5B98FAC59F34B28

Or here

   http://lilypond.org/schikkers

Jan

-- 
Jan Nieuwenhuizen  | GNU LilyPond http://lilypond.org
Freelance IT http://JoyofSource.com | AvatarĀ®  http://AvatarAcademy.nl  

___
lilypond-devel mailing list
lilypond-devel@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-devel


Re: making SVG output ready for web GUIs

2013-09-23 Thread 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:
>  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.
>  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


making SVG output ready for web GUIs

2013-09-23 Thread Gordon Rouse
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:



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.



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@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-devel