---------- 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=""></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=""></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"
address@hidden
Producer ~
Composer ~ Instrumentalist ~ Educator
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-