coloring notes with humdrum/verovio

[Malcolm Sailor]

I'm wondering if it is possible with humdrum and verovio to color specific notes specific colors? (E.g., have some notes show up as green.) Or alternately/in addition, to annotate them? (I.e., have a text label show up below/above a given note.)

Thanks so much!

[Craig Sapp]

Hi Malcolm, et al.,

There are a few ways to do what you want, which are illustrated below.  These work in VHV, Humdrum Notation Plugin (https://plugin.humdrum.org), and plain verovio -- since they are implemented in the Humdrum import to verovio.   

Verovio can be run from the command-line for batch-processing of Humdrum into SVG images.  To download and compile:

       git clone https://github.com/rism-digital/verovio

       cd verovio/tools

       git checkout develop-humdrum  # (for the latest version of the Humdrum converter)

       ./.configure

       make

       make install

Then to compile a Humdrum file into notation:

       verovio file.krn

this will create file.svg containing the graphical music notation.

There are lots of options to verovio (see https://plugin.humdrum.org/options with verovio options colored purple).  Or type "verovio" as a command without arguments to the the list on the command line.   Useful ones for short examples:

--adjust-page-height   == make the SVG the height of the music, not of the page height (i.e., shrink the page to the height of the music.

--adjust-page-width     == the same for the width of the music.

--page-height  # == set the height of the page, # is roughly 1/10 mm, default 2970

--page-width # == set the width of the page, default for # is 2100

--scale (or -s) == set the scale of the music (meaning the size)  Units are percentages where I typically use 40, and default is 100.

-o filename  == output to a different filename than automatically given.  Using "-o -" will output to standard output.

example of using some of the commands (which can go before or after the filename):

verovio file.krn --adjust-page-height --scale 55 -o image.svg

Here are the three main ways of coloring notes:

(1) Marking individual notes with color:

There are a limited number of user-signifiers (characters that do not have predefined meanings in Humdrum. Some others are |, +, i, j.

(2) Color interpretation: useful to set color of all notes to one specific color afterwards:

(3) Color spine: An independent spine for color can be used to color all **kern spines to its left.  This is useful for harmonic colorings:

(you can have multiple **color lines, and each one will apply to all **kern spines

There are also more advanced ways of colorings notes that you are probably not interested in (they are outside of verovio and more for post-processing of the SVG image on a webpage):

https://doc.verovio.humdrum.org/myvhv/svg_notes

For text labels, there are three possibilities:

(1) A staff or system label (staff labels have a single !, and system have two !!)   They can be attached to notes by immediately preceding the note (or rest), as well as time signatures by coming just before a time signature:

(2) as lyrics:

(2b) as "verse-like data" which is not much different (just officially marked as not being real lyrics):

Text can  only be applied to note attacks (not rests).

(3) as chord-like data:

cdata can occur independent of note attacks (the **recip spine allows placing at second 8th of quarter note in above example).  cdata can currently only be placed above the staff, I believe.

-=+Craig

On Tue, 8 Feb 2022 at 06:58, Malcolm Sailor <malcolm...@gmail.com> wrote:

PS I realize I wrote "vhv" which I believe refers to your online humdrum viewer? That is not necessarily important. What I'd really like to be able to do is produce annotated musical examples from a shell script.

===
Malcolm Sailor
www.malcolmsailor.com

On Tue, Feb 8, 2022 at 9:54 AM Malcolm Sailor <malcolm...@gmail.com> wrote:

Hi Craig

Hope you are well. 

I had the following question and I was wondering if you could help me:

Is it possible with humdrum and vhv to color specific notes specific colors? (E.g., have some notes show up as green.) Or alternately/in addition, to annotate them? (I.e., have a text label show up below/above a given note.)

Many thanks!

Malcolm

===
Malcolm Sailor
www.malcolmsailor.com

[Malcolm Sailor]

Dear Craig,

A follow-up question:

If we are using system or staff labels, like `!!LO:TX:b:i:t=below\nsystem:color=limegreen`, is there any way to apply different colors to different segments of the text? E.g., in this case, set "below" in one color and "system" in another?

Thanks,

Malcolm

--
--
This is a message is from the **HUG newgroup.
To post to this group, send email to stars...@googlegroups.com
To unsubscribe from this group, send email to
starstarhug...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/starstarhug?hl=en
---
You received this message because you are subscribed to a topic in the Google Groups "starstarhug" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/starstarhug/shZlpJ5i25M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to starstarhug...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/starstarhug/CAPcjuFdvV%3DkWi2MjYSF89FwJG%3Dm4Rpuqjt9nuAwX5KUXFhMVOQ%40mail.gmail.com.

[Craig Sapp]

Hi Malcolm,

A finer-grained system to have multiple colors in a block of text is possible, but I haven't implemented it.

In this particular case, however, the text can be broken up into two pieces:

View in VHV

In addition, if you want to display system-level data underneath the system, it is possible by adding spines of data at the start of the text lines lines:

View in VHV

(*italic is not implemented, but should be easy to do)

[Malcolm Sailor]

Hi Craigg,

 

There are a limited number of user-signifiers (characters that do not have predefined meanings in Humdrum. Some others are |, +, i, j.

Is there anywhere I can get a complete list of user-signifiers? If I run out, is it possible to use bigrams of characters or anything like that?

Thanks!

Malcolm

[Wolfgang Drescher]

Hi Malcolm,

There are a limited number of user-signifiers (characters that do not have predefined meanings in Humdrum. Some others are |, +, i, j.

Is there anywhere I can get a complete list of user-signifiers? If I run out, is it possible to use bigrams of characters or anything like that?

I use the characters N, V, Z, @, +, |, <, > that I found on https://extras.humdrum.org/man/cint/ (Module note marking). I usually reserve lowercase letters for things like editorial accidentals or similar.

I also tried using emojis (or any other unicode character) instead to not conflict with other existing reserved characters. But I've had some problems with that, so for now I'm just using the above characters.

Best,

Wolfgang

 

[Craig Sapp]

Hi Malcolmm,

Section 3.7 on this page also has a list of the **kern user signifiers:
https://www.humdrum.org/Humdrum/representations/kern.html#Table%20of%20Signifiers

i  j  l  N  V  Z  @  +  |  <  >


In my software, bigrams have not been allowed due to the complexity of applying meaning to the signifiers (if i, j, and ij are three different signifiers, then ij, and i+j are problematic to separate).   But in theory they should be allowed (and also you can use bigrams for your own purposes/software already), so I will work on that for RDF markers used in verovio/MEI conversions.  I do use duplications of a specific signifer to have slightly different meanings such as doubling the terminal long signifier to make the note look like a maxima:

View in VHV

In theory all UTF-8 characters which are not also UTF-7 (lower half of ASCII bytes) are also user signifiers.  They were not really allowed until today:

    https://github.com/humdrum-tools/verovio-humdrum-viewer/issues/860

UTF-8 as Wolfgang mentions is a good solution for nearly unlimited user signifiers.

I assume that Humdrum data is in the UTF-8 format, so any UTF-8 character other than the UTF-7 (lower half of ASCII) is a user signifier in **kern.   Here is an example of coloring notes by pitch class using RDF markers:

View in VHV

Using UTF-8 characters works well on MacOS since the operating system uses UTF-8 natively.  Windows and Linux do not, so there may be some unwanted character translations depending on editing or data processing software.   I don't have problems editing UTF-8 files in Linux and MacOS using vi.   Also UTF-8 is the default character set for HTML, so should also work well on the web.

-=+Craig

[Malcolm Sailor]

In theory all UTF-8 characters which are not also UTF-7 (lower half of ASCII bytes) are also user signifiers.  They were not really allowed until today:

    https://github.com/humdrum-tools/verovio-humdrum-viewer/issues/860

UTF-8 as Wolfgang mentions is a good solution for nearly unlimited user signifiers.

Wow, thanks, that's great!

Malcolm

[Malcolm Sailor]

A follow up:

I've tried using UTF-8 characters as user signifiers but unfortunately, these characters seem to get removed (and sometimes replaced with newlines) by humdrum-tools that are an important part of my workflow. For example, when I put the following in a file:

```

**kern
=
4A€
4F#…
*-
```

(The tokens have characters 128 and 133 respectively at the ends. 133 is non-printing for me in gmail.)

And then run `timebase -t 8 file.krn`, I get the following output:

```

**kern
*tb8
=
4A
.
4F#

.
*-

```

Any way of allowing non-ASCII characters with humdrum-tools?

Thanks!

Malcolm

[Craig Sapp]

Hi Malcolm,

When I use timebase in MacOS terminal, I am not having any problems with UTF-8 characters:

View in VHV

Presumably you are doing this in Windows (with Cygwin?)?   Or otherwise you can say what OS and environment you are using.  

If you are trying to display the contents of the file in a non UTF-8 terminal or software, then it is unlikely that the file will display correctly unless there is an automatic detection and conversion of UTF-8 into whatever font system is being used.   So it is not necessarily that timebase is not able to handle UTF-8, but rather the display cannot handle UTF-8.   Timebase in theory should not have any problems with UTF-8 characters.  If you do certain regular expressions, UTF-8 may have problems because UTF-8 characters can have up to 5 bytes for one character, so "." in regular expressions in non-UTF-8 systems will match to one byte and not to one UTF-8 "character".   Timebase does not need to deal with such. characters, and should be echoed in the output without alteration.

One way to test is to output the results to a *.txt file and then open the file:

timebase -t 8 file.krn > file.txt

And then open file.txt in a web browser to examine its contents.

-=+Craig

[Malcolm Sailor]

Thanks for your help, Craig. I am also using a UTF-8 terminal in MacOS.

The problem turns out to be that the characters I was using are non-printing (and one of them is interpreted as a line break). (I was just generating them programmatically starting from character code 128.) But for some reason that I don't understand they *were* printing in my code editor (VS Code). Since I could see them there, I was expecting them to print in the terminal.

Malcolm

===
Malcolm Sailor
www.malcolmsailor.com

--
--
This is a message is from the **HUG newgroup.
To post to this group, send email to stars...@googlegroups.com
To unsubscribe from this group, send email to
starstarhug...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/starstarhug?hl=en
---
You received this message because you are subscribed to a topic in the Google Groups "starstarhug" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/starstarhug/shZlpJ5i25M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to starstarhug...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/starstarhug/CAPcjuFeN9mi6z9nED9TyGTRPiUrd%3Dp7NKN4o%3DOOs0b44Fm6fmw%40mail.gmail.com.

[Craig Sapp]

Hi Malcolm,

If you use 128 (hex 80) as a single character, note that that is not UTF-8 (what you are probably thinking of is called a Unicode character).   To get Unicode character 0x80 (decimal 128), you need to use the two bytes 0xC2 and 0x80, since UTF-8 is a variable byte length character encoding system for Unicode.

Here is a chart that shows how the bits are stored for the Unicode character in UTF-8 from the wikipedia entry for UTF-8:

For bytes 0 to 127 (UTF-7), there is a single byte (first line in the table).  Starting with 128 (0x80) Two bytes are needed, with the first byte starting with the bits 110 then the top 5 bits of the actual number, then the second byte starting with the bits 10, and then the last 6 bits of the number.   For example, 128 are the bits:

      10000000

Splitting that into 6 at the bottom and 5 top bits (adding leading zeros):

       00010     000000

and adding the required packing bits:

       1100010 10000000

converting to hex:

       C2  80

So hex bytes "C2 80" is UTF-8 for Unicode character 128.  (which is a padding character that you should probably avoid).

Probably starting with the emoji character range you will have a longer sequence of printable characters.  Here is a list starting with Unicode character number 128512 (hex 1F600, which is UTF-8 hex bytes F0 9F 90 80):

Emoji	UNICODE Value	UTF-8 Hex Byte Codes
😀 Grinning Face	U+1F600	F0 9F 98 80
😁 Beaming Face with Smiling Eyes	U+1F601	F0 9F 98 81
😂 Face with Tears of Joy	U+1F602	F0 9F 98 82
😃 Grinning Face with Big Eyes	U+1F603	F0 9F 98 83
😄 Grinning Face with Smiling Eyes	U+1F604	F0 9F 98 84
😅 Grinning Face with Sweat	U+1F605	F0 9F 98 85
😆 Grinning Squinting Face	U+1F606	F0 9F 98 86
😇 Smiling Face with Halo	U+1F607	F0 9F 98 87
😈 Smiling Face with Horns	U+1F608	F0 9F 98 88
😉 Winking Face	U+1F609	F0 9F 98 89
😊 Smiling Face with Smiling Eyes	U+1F60A	F0 9F 98 8A
😋 Face Savoring Food	U+1F60B	F0 9F 98 8B
😌 Relieved Face	U+1F60C	F0 9F 98 8C
😍 Heart Eyes	U+1F60D	F0 9F 98 8D
😎 Smiling Face with Sunglasses	U+1F60E	F0 9F 98 8E
😏 Smirking Face	U+1F60F	F0 9F 98 8F
😐 Neutral Face	U+1F610	F0 9F 98 90
😑 Expressionless Face	U+1F611	F0 9F 98 91
😒 Unamused Face	U+1F612	F0 9F 98 92
😓 Face with Cold Sweat	U+1F613	F0 9F 98 93
😔 Pensive Face	U+1F614	F0 9F 98 94
😕 Confused Face	U+1F615	F0 9F 98 95
😖 Confounded Face	U+1F616	F0 9F 98 96
😗 Kissing Face	U+1F617	F0 9F 98 97
😘 Face Blowing a Kiss	U+1F618	F0 9F 98 98
😙 Kissing Face with Smiling Eyes	U+1F619	F0 9F 98 99
😚 Kissing Face with Closed Eyes	U+1F61A	F0 9F 98 9A
😛 Face with Tongue	U+1F61B	F0 9F 98 9B
😜 Winking Face with Tongue	U+1F61C	F0 9F 98 9C
😝 Squinting Face with Tongue	U+1F61D	F0 9F 98 9D
😞 Disappointed Face	U+1F61E	F0 9F 98 9E
😟 Worried Face	U+1F61F	F0 9F 98 9F
😠 Angry Face	U+1F620	F0 9F 98 A0
😡 Pouting Face	U+1F621	F0 9F 98 A1
😢 Crying Face	U+1F622	F0 9F 98 A2
😣 Persevering Face	U+1F623	F0 9F 98 A3
😤 Face with Steam From Nose	U+1F624	F0 9F 98 A4
😥 Sad but Relieved Face	U+1F625	F0 9F 98 A5
😦 Frowning Face with Open Mouth	U+1F626	F0 9F 98 A6
😧 Anguished Face	U+1F627	F0 9F 98 A7
😨 Fearful Face	U+1F628	F0 9F 98 A8
😩 Weary Face	U+1F629	F0 9F 98 A9
😪 Sleeping Face	U+1F62A	F0 9F 98 AA
😫 Tired Face	U+1F62B	F0 9F 98 8B
😬 Grimacing Face	U+1F62C	F0 9F 98 AC
😭 Loudly Crying Face	U+1F62D	F0 9F 98 A5
😮 Face with Open Mouth	U+1F62E	F0 9F 98 AE
😯 Hushed Face	U+1F62F	F0 9F 98 AF
😰 Anxious Face with Sweat	U+1F630	F0 9F 98 B0
😱 Face Screaming in Fear	U+1F631	F0 9F 98 B1
😲 Astonished Face	U+1F632	F0 9F 98 B2
😳 Flushed Face	U+1F633	F0 9F 98 B3
😴 Sleeping Face	U+1F634	F0 9F 98 B4
😵 Dizzy Face	U+1F635	F0 9F 98 B5
😶 Face Without Mouth	U+1F636	F0 9F 98 B6
😷 Face with Medical Mask	U+1F637	F0 9F 98 B7
😸 Grinning Cat with Smiling Eyes	U+1F638	F0 9F 98 B8
😹 Cat with Tears of Joy	U+1F639	F0 9F 98 B9
😺 Smiling Cat with Open Mouth	U+1F63A	F0 9F 98 BA
😻 Smiling Cat with Heart-Eyes	U+1F63B	F0 9F 98 BB
😼 Cat with Wry Smile	U+1F63C	F0 9F 98 BC
😽 Kissing Cat	U+1F63D	F0 9F 98 BD
😾 Pouting Cat	U+1F63E	F0 9F 98 BE
😿 Crying Cat	U+1F63F	F0 9F 98 BF
🙀 Weary Cat	U+1F640	F0 9F 99 80
🙁 Slightly Frowning Face	U+1F641	F0 9F 99 81
🙃 Upside-Down Face	U+1F642	F0 9F 99 83
🙄 Face with Rolling Eyes	U+1F643	F0 9F 99 84
🤐 Zipper-Mouth Face	U+1F644	F0 9F A4 90
🤑 Money-Mouth Face	U+1F645	F0 9F A4 91
🤒 Face with Thermometer	U+1F646	F0 9F A4 92
🤓 Nerd Face	U+1F647	F0 9F A4 93
🤔 Thinking Face	U+1F648	F0 9F A4 94
🤕 Face with Head-Bandage	U+1F649	F0 9F A4 95
🤖 Robot Face	U+1F64A	F0 9F A4 96
🤗 Hugging Face	U+1F64B	F0 9F A4 97
🤘 Sign of the Horns	U+1F64C	F0 9F A4 98
🤙 Call Me Hand	U+1F64D	F0 9F A4 99

-=+Craig

[Malcolm Sailor]

Hi Craig,

Thanks for the encoding details. I was using Python's `chr()` function to get from a code point to a character, which gives a unicode string (which is encoded to UTF-8 by default when writing to a file). E.g.,

```

>>> chr(128).encode()  # utf-8 by default

b'\xc2\x80'

```

So the issue wasn't that the code points weren't being encoded correctly but rather that they were appearing inconsistently between my terminal and my code editor. I agree that it's clearly better to use printing characters like the emojis you give.

Thanks again!

Malcolm

===
Malcolm Sailor
www.malcolmsailor.com

--
--
This is a message is from the **HUG newgroup.
To post to this group, send email to stars...@googlegroups.com
To unsubscribe from this group, send email to
starstarhug...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/starstarhug?hl=en
---
You received this message because you are subscribed to a topic in the Google Groups "starstarhug" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/starstarhug/shZlpJ5i25M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to starstarhug...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/starstarhug/CAPcjuFc9DeUiGkAkteYoExxbgm1Q0qgsvcEmqXxjbv-PZtU%2BCQ%40mail.gmail.com.