abcjs icon indicating copy to clipboard operation
abcjs copied to clipboard

oneSvgPerLine affects the movement path of the cursor

Open watersoft123 opened this issue 3 years ago • 5 comments

I am using Android's webview component to display the sheet on the mobile phone. In order to see clearly, my requirement is that the music score and font should be as large as possible, but I don't want to use zoom and scroll bars. In addition, I often have the situation that the right side cannot be aligned, maybe it has something to do with my use of Chinese, but the encoding is utf-8.I have tried many methods and I am not satisfied.Recently I added oneSvgPerLine and found that the effect is good, but the cursor only moves repeatedly in the first line and cannot enter the next line. I want to use oneSvgPerLine, but I don't want to remove the cursor. How to set it?

var abc = ['T: 仰望十架\n' +'%%measurenb 1\n' +'%%musicspace 10\n' +'%%vocalspace 20\n' +'%%score {(T1 T2)|(B1 B2)}\n' +'L: 1/4\n' +'M: 4/4\n' +'Q: 1/4=100\n' +'K: Eb\n' +'V:T1 treble\n' +'V:T2 treble\n' +'V:B1 bass\n' +'V:B2 bass\n' +'[V:T1]\n' +'B | B G3/4 A/4 B c3/4 B/4 | E F G2 | G F3/4 =E/4 F A | c B G2 |\n' +'w:1.凡 靠 十 字 架 都 能 够 得 救, 耶 稣 曾 说 当 仰 望 我\n' +'w:2.我 初 来 就 主 信 心 甚 弱 微, 祂 乐 收 纳 且 发 慈 悲\n' +'w:3.注 目 十 字 架 时 刻 仰 望 主, 凡 祂 所 许 必 要 成 就\n' +'[V:T2]\n' +'G | G E3/4 F/4 G A3/4 G/4 | E D E2 | E D3/4 ^C/4 D D | E E E2 |\n' +'[V:B1]\n' +'E | E B,3/4 B,/4 E E3/4 E/4 | G, B, B,2 | B, B,3/4 B,/4 B, B, | A, G, B,2 |\n' +'[V:B2]\n' +'E, | E, E,3/4 E,/4 E, E,3/4 E,/4 | E, B,, E,2 | B,, B,,3/4 B,,/4 B,, B,, | E, E, E,2 |\n' +'[V:T1]\n' +'B G3/4 A/4 B c3/4 B/4 | E F G | c | B E3/4 F/4 G A3/4 G/4 | F F HE |\n' +'w:世 上 财 物 都 要 归 无 有, 专 靠 赖 救 主 必 永 远 存 留\n' +'w:有 时 试 探 如 同 黑 云 起, 若 仰 望 我 主 祂 要 助 我 力\n' +'w:魔 鬼 无 权 使 圣 民 跌 倒, 因 其 遵 主 命 并 靠 祂 功 劳\n' +'[V:T2]\n' +'E E3/4 F/4 G A3/4 G/4 | E D E | E | E E3/4 D/4 E F3/4 E/4 | D D E |\n' +'[V:B1]\n' +'G, B,3/4 B,/4 E E3/4 E/4 | G, B, B, | A, | G, G,3/4 A,/4 B, B,3/4 B,/4 | B, A, HG, |\n' +'[V:B2]\n' +'E, E,3/4 E,/4 E, E,3/4 E,/4 | E, B,, E, | A,, | B,, B,,3/4 B,,/4 B,, B,,3/4 B,,/4 | B,, B,, E, |\n' +'[V:T1]\n' +'B3/4 G/4 | (e2 e3/4) d/4 c3/4 e/4 | B3 | G3/4 E/4 | (F2 F3/4) c/4 B3/4 A/4 | G3 |\n' +'w:(副 歌)**************\n' +'w:仰 望 主,* 必 可 得 救; 仰 望 主,* 必 可 得 救;\n' +'[V:T2]\n' +'z | G G G A | G G G | z | D D D D | E E E |\n' +'[V:B1]\n' +'z | B, B, B, E | E E B, | z | B, B, B, B, | B, B, B, |\n' +'[V:B2]\n' +'z | E, E, E, E, | E, E, E, | z | B,, B,, B,, B,, | E, E, E, |\n' +'w:仰 望 主, 必 可 得 救; 仰 望 主, 必 可 得 救;\n' +'[V:T1]\n' +'B3/4 B/4 | (e2 e3/4) G/4 A3/4 G/4 | c3 | c3/4 c/4 | (B2 B3/4) E/4 G3/4 F/4 | HE3 |]\n' +'w:赐 救 恩,* 使 我 快 乐; 靠 十* 架, 必 可 得 救。\n' +'[V:T2]\n' +'z | G G G F3/4G/4 | A A A | z | G G G3/4 E/4 E3/4 D/4 | E3/4 B,/4 E3/4 E/4 HB, |]\n' +'[V:B1]\n' +'z | B, B, B, B, | E E E | z | E E E3/4 G,/4 B,3/4 A,/4 | G,3/4 G,/4 A,3/4 A,/4 HG, |]\n' +'w:赐 救 恩, 使 我 快 乐; 靠 十 架, 必 可 得 救。\n' +'[V:B2]\n' +'z | E, E, E, E, | A,, A,, A,, | z | B,, B,, B,,3/4 B,,/4 B,,3/4 B,,/4 | HE,3 |]\n']; 1

watersoft123 avatar Sep 04 '22 13:09 watersoft123

I'll look into the cursor problem, but I have a couple other suggestions:

For the right side not lining up, that is usually due to having too many notes on a line. You can change the width of the lines, though with

%%staffwidth 600

and experiment until that works for your longest line. 600 worked for me in the basic example.

And, if I understand you correctly, you want whatever music you generate to fit on the screen. For that, instead of oneSvgPerLine, have you tried:

ABCJS.renderAbc("paper", abc, { responsive: "resize" })

That might be what you are looking for.

paulrosen avatar Sep 04 '22 13:09 paulrosen

I'll look into the cursor problem, but I have a couple other suggestions:

For the right side not lining up, that is usually due to having too many notes on a line. You can change the width of the lines, though with

%%staffwidth 600

and experiment until that works for your longest line. 600 worked for me in the basic example.

And, if I understand you correctly, you want whatever music you generate to fit on the screen. For that, instead of oneSvgPerLine, have you tried:

ABCJS.renderAbc("paper", abc, { responsive: "resize" })

That might be what you are looking for.

Thanks for the good advice, I added resize and staffwidth and it worked perfectly. But I have thousands of Hymns in ABC format and had to experiment with matching staffwidth one by one, may take a while to do this.

watersoft123 avatar Sep 07 '22 04:09 watersoft123

I have another question. When using Ties between two notes with the same pitch, it will be played twice during playback. But generally play once on a real piano, can you judge it and keep it consistent with the real piano? My English is bad, the expression may not be clear enough, I hope you can understand what I mean. mmexport1662524879783

watersoft123 avatar Sep 07 '22 04:09 watersoft123

There are two ways to get the arc connecting two notes: slurs and ties. For slurs both notes will sound. For ties one note will sound for the entire duration. The difference is how you notate them. Did you do something like (g3|g3) in the ABC? That is the notation for slurs. If so, change to g3-|g3 instead. That is the notation for ties.

paulrosen avatar Sep 08 '22 01:09 paulrosen

There are two ways to get the arc connecting two notes: slurs and ties. For slurs both notes will sound. For ties one note will sound for the entire duration. The difference is how you notate them. Did you do something like (g3|g3) in the ABC? That is the notation for slurs. If so, change to g3-|g3 instead. That is the notation for ties.

Wow, this is amazing, I should have asked you about this earlier, now i have to spend a lot of time replacing.

watersoft123 avatar Sep 08 '22 04:09 watersoft123