Thanks Urs and Elaine for your appreciation.
Note that the same algo I wrote with (relatively) short code can be
applied for many other properties as well (for example: extra-offset) which
are painful to control through the trial and error method...
I'll be on #irc (channel #lilypond) in the next days, so I can talk easily
there with any (welcome) collaborator. My nickname is 'paolopr'.
Before integrating the script into Frescobaldi, I would like to conclude
the standalone part.
First of all, I need to add with Lilypond a <script> tag to the svg file
just before the ending </svg> tag in the following way:
1)
....
<script xlink:href="lilyEasySlurs.js"></script>
</svg>
OR in the following way:
2)
....
<script>
<![CDATA[
...javascript code...
]]>
</script>
</svg>
With method 2) I have a 100% Lilypond solution, and the produced svg is
ready do be used for modifying slurs, without having to integrate the
script manually
I searched in the API, but could not find any function for doing that.
To Eliane: note that you don't have to make a HTML document for that, nor
to rename to ".html" the ".svg" file. Just add the <script> tag as I
explained (note the xlink:href property) before the end </svg> tag., and
open the file with a normal browser.
As soon as we fix points 1) and 2) I can write a how-to, which will be very
short.
Best,
P
On Sat, Dec 14, 2019 at 12:40 AM Urs Liska <[email protected]> wrote:
> I have to second Elaine's comment.
> Due to a very heavy workload right now I didn't have the opportunity to
> have a look at your example earlier, but now I *really* like what I see.
>
> I think that you a) probably should go forward implementing a standalone
> solution of your approach, but that b) this should also be integrated into
> Frescobaldi, because this would probably kick it off and make it even more
> widely known. Plus, Frescobaldi should make it easier to write the code
> back into the LilyPond file. There are 2-3 people who would be more than
> willing to help you with the integration of the functionality in
> Frescobaldi.
>
> Best
> Urs
> Am 13.12.19 um 23:49 schrieb Flaming Hakama by Elaine:
>
>
> ---------- Forwarded message ----------
>> From: Paolo Pr <[email protected]>
>> To: lilypond-user <[email protected]>
>> Cc:
>> Bcc:
>> Date: Thu, 12 Dec 2019 17:52:58 +0100
>> Subject: A Javascript test code for modifying ties and slurs with mouse
>> I just created a javascript script to change the slurs of the .svg file
>> produced by Lilypond using the mouse, as I had announced. The coordinates
>> of the control points of the associated Bezier curve can be reported in the
>> corresponding .ly file and this completely avoids the time consuming trial
>> and error process we were talking about. The script is 100% Javascript
>> native, without any additional library and I tried it on the Firefox and
>> Chromium browsers. Let's see how it works.
>>
>> 1) Create a score using the template that shows the control points,
>> implemented by Aaron (please, re-indent it); I added a small change to set
>> some attributes on the generated svg tags:
>>
>> http://lilybin.com/29lnbd/4
>>
>> 2) Generate with Lilypond the .svg file and add to it the Javascript
>> script implemented by me. To test everything, let's use JsFiddle:
>>
>> https://jsfiddle.net/61pb9Le4/
>>
>> My script is in the lower left pane; in the upper left pane I pasted the
>> .svg file generated by Lilypond. Note that, to make the script work, if you
>> create a new JsFiddle, you need to select "LOAD TYPE" option = "No wrap -
>> bottom of <body>".
>>
>> 3) Modify the slurs by moving the control points with the mouse
>>
>> 4) The coordinates of the modified slur can be displayed by
>> right-clicking on one of the slur's control points. A string will appear in
>> the form:
>>
>> "shape # '((x1. y1) (x2. y2) (x1. y1) (x3. y3) (x4. y4)) PhrasingSlur"
>>
>> or
>>
>> "shape # '((x1. y1) (x2. y2) (x1. y1) (x3. y3) (x4. y4)) Slur"
>>
>> or
>>
>> "shape # '((x1. y1) (x2. y2) (x1. y1) (x3. y3) (x4. y4)) Tie"
>>
>> This string must be copied to the .ly file, near the slur to be modified.
>>
>> .....................
>>
>> I wrote all this really in a hurry, and the code needs to be improved at
>> various points. But the first tests seem to work. Now I'm trying to figure
>> out what is the best (and portable) way to automatically include the
>> Javascript script in the .svg file generated by Lilypond ...
>>
>> HTH
>> P
>>
>
> This is fantastic!
>
> I often leave mediocre slurs and ties as is, just because wrangling them
> in code is a pain. This will make it much more likely that I'll have the
> bandwidth to improve them.
>
> This may help folks who want to try this out, here is how I understand the
> intended approach and how I was able to reproduce it locally.
>
>
> 1) Prepare the score for control point tweaking
>
> Include in your lilypond files this new definition
>
> showControlPoints = #(grob-transformer 'stencil (lambda (grob orig)
> ...
>
> As well as this layout context
>
> \layout {
> \context {
> \Voice
> \override PhrasingSlur.stencil = #showControlPoints
> \override PhrasingSlur.output-attributes = #'((class .
> "lilySlur")(slurtype . "PhrasingSlur"))
> \override Slur.stencil = #showControlPoints
> \override Slur.output-attributes = #'((class . "lilySlur")(slurtype .
> "Slur"))
> \override Tie.stencil = #showControlPoints
> \override Tie.output-attributes = #'((class . "lilySlur")(slurtype .
> "Tie"))
> }
> }
>
> 2) Create the SVG version.
>
> run lilypond with the option -dbackend=svg
>
>
> 3) Create an HTML page that allows editing
>
> Save the JavaScript code in a file, such as show-control-points.js.
>
> Create an HTML document like this:
>
> <html>
> <head><title>Editing Lilypond curves</title>
> </head>
> <body>
> <svg...>...</svg>
> <script src="show-control-points.js"></script>
> </body>
> </html>
>
>
> I tried to figure out how to include the SVG file by reference, but either
> using <img src=""> or <object src="">. But that did not work, since it
> would produce objects that do not have width or height attributes
> accessible via JavaScript. Seems like the SVG has to be inline in the HTML
> document for this approach to work.
>
> In terms of workflow, I would probably create this HTML document
> subsequent to creating the SVG using a script:
>
> #!/usr/local/bin/bash
> # Usage: create-html-for-svg.sh svgFileName htmlFileName
> SVG=$1
> HTML=$1
> echo "<html>" > $HTML
> echo "<head><title>Editing Lilypond curves</title>" >> $HTML
> echo "</head>" >> $HTML
> echo "<body>" >> $HTML
> echo "" >> $HTML
> cat $SVG >> $HTML
> echo "" >> $HTML
> echo "<script src="edit-control-points.js"></script>" >> $HTML
> echo "</body>" >> $HTML
> echo "</html>" >> $HTML
> echo "" >> $HTML
>
> Then invoke it like:
> $ create-html-for-svg.sh example.svg edit-curves.html
>
>
> 4) Open HTML page in a browser and edit curves
>
> move the points around, right click to get the \shape definition,
>
>
> 5) Update lilypond source
>
> For each curve you modify, apply that shape modification in your lilyond
> source.
>
> To generate the final document, remove the \layout section that we added
> in step 1.
>
>
>
> Thanks,
>
> Elaine Alt
> 415 . 341 .4954 "*Confusion is
> highly underrated*"
> [email protected]
> Producer ~ Composer ~ Instrumentalist ~ Educator
>
> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
>
>
>
