Re: A Javascript test code for modifying ties and slurs with mouse

On Sat, Dec 14, 2019 at 3:49 AM Carl Sorensen <address@hidden> wrote:

Paolo,

I really appreciate your doing this.

However, I would like to see us improve the *automatic* handling of slurs in LilyPond, so that \shape is almost never needed (much like extra-offset for standard music). I’m not asking for you to do any work on improving the automatic slur handling, but I would love to have us have a collection of slurs automatically created by LilyPond along with the revised slurs created by \shape. That would give us a test library to be able to test improvements in the LilyPond slur code.

I’ve created issue #5638

https://sourceforge.net/p/testlilyissues/issues/5638/

as a place for users to place snippets that give bad automatic slurs and that show improved slurs by using \shape. I’d invite everybody who finds ugly slurs to post both the ugly slur code and the improved slur code.

Thanks,

Carl

From: Urs Liska <address@hidden>
Date: Friday, December 13, 2019 at 4:40 PM
To: <address@hidden>
Subject: Re: A _javascript_ test code for modifying ties and slurs with mouse

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 <address@hidden>
To: lilypond-user <address@hidden>
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=""> </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="" >> $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"

address@hidden

Producer ~ Composer ~ Instrumentalist ~ Educator
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

From:	Paolo Pr
Subject:	Re: A Javascript test code for modifying ties and slurs with mouse
Date:	Sat, 14 Dec 2019 04:38:17 +0100