How to start? Building Music Tablature notation (text\font based)

[Emptyself]

My computer programming competency is just between "Hello, World!" and the «;» at the end (at least in most coding languages… not Python).
So, please be gentle… yes, I have seen tutorials and have plenty of books on the subject… yet, I have a spesific design it mind, which I would like to develop as an application (maybe first for Windows).

I would like to build an app very similar to a GuitarTab notation but it can function as a «TAB» for any instrument.
And it is 100% text\font based.
Because of the nature of it, I need as much screen real estate as possible (as any Music reader\editor should be) to avoid «turning pages» (scrolling) as much as possible.

That is why I need it to be independent of «DPI Scaling» or non‑native screen resolutions (though we could agree that anything below 1024×768 is now obsolete, mainly tablets… for laptops\notebooks it is 1366×768 as a minimum).

The main goals are:
1. optimal readability with…
2. as much screen estate as possible with…
3. minimalistic but present UI elements (buttons\icons)

All text\font\svg based.

Here is a «final» overall representation.
The symbols and letters for the notes are interchangeable and mappable as shown (also with the stems\beams for note durations as «pseudo‑diacritic marks» in a single font file), but any phonetically related glyphs can be assigned from any font file or proper .svg files.

I see it as a text editor on steroids. The standard Music notation you see is just for reference and should not be a part of the application.


IMPORTANT (for other noobs such as myself):
Later in the thread a book called "Oh! Pascal!" will be recommended. I found its 2^nd Editon online and modified it to a more eye‑friendly when read on the screen.
The .pdf file contains only scanned images, hence the file is a bit big… ~65MB.
You can download the .pdf file here: "Oh! Pascal!" (.pdf ~65MB)

[MarkMLl]

OK, nice one :-)

To get the ball rolling: how much of what you need, i.e. the characters if not the precise positioning, is in the Unicode character set?

The reason I ask is that it might be necessary to distinguish between something which can be written like a text editor (albeit with special positioning) and something which has to be entirely graphical.

Edited to add: Noting what you're saying about the images you've attached being final output rather than what you expect your user to be working with, I'd suggest that a mockup of what you expect your program to look like would be useful.

I presume you're aware of Rosegarden etc.

MarkMLl

(...who also appreciates Chopin on occasion :-)

[winni]

Hi!

Have a look at this long german thread.

https://www.lazarusforum.de/viewtopic.php?f=55&t=13693&hilit=Gitarre

It contains a partial solution.

Winni

[Emptyself]

@MarkMLl

I chose to use the Private Area of Unicode and created the font (glyphs) myself.
The letters though can be found in most fonts, but the user should be able to choose their font of choice (language corresponding).

The thing is I would like the notes' stems, flags, beams to have a "mirror" option so I do not have to do a "mirrored" duplicates in the font itself.

Each note\letter will have an anchor\mark point (Above and Below) for that purpose.
In a font editor such anchor marks work, but I have no idea how to "translate" that into Pascal (any code actually).

Also I want to «centre» the overall design functionality around "Selection" and selection, based on "Grouping" of Properties. For example:
select a X note (becomes «currently» selected + awareness of its «current» pitch\"octave")
then
select all X notes (means regardless of pitch)
select all X notes, but in same "octave" as the originally selected «current»
select all X notes, same "octave", «current» bar only

and so on...

Questions:
1· How to code «Time» for Tempo (beats per minute), durations of notes?
2· How to code a «play sound» property on a note, dependent on pitch\position on a row of symbols\notes?
3· How to code a «play cursor» to trigger those notes\sounds

Regarding [3· ] I have seen some Pascal tutorials on how to move a ball on the screen, but the speed was based on skipping pixels, e.g.
Shape1.Top = Shape1.Top + 5

https://www.youtube.com/watch?v=hNaZTtJkZ0s

and I assume this «ball» in a 'Shape' of a vertical Bar (2~3 pixels wide) line could function as a Play Cursor.
It just needr to be related to Tempo somehow, not to pixels.

[KodeZwerg]

My computer programming competency is just between "Hello, World!" and the «;» at the end (at least in most coding languages… not Python).
So, please be gentle… yes, I have seen tutorials and have plenty of books on the subject… yet, I have a spesific design it mind, which I would like to develop as an application (maybe first for Windows).

I would like to build an app very similar to a GuitarTab notation but it can function as a «TAB» for any instrument.
And it is 100% text\font based.
Because of the nature of it, I need as much screen real estate as possible (as any Music reader\editor should be) to avoid «turning pages» (scrolling) as much as possible.

That is why I need it to be independent of «DPI Scaling» or non‑native screen resolutions (though we could agree that anything below 1024×768 is now obsolete, mainly tablets… for laptops\notebooks it is 1366×768 as a minimum).

The main goals are:
1. optimal readability with…
2. as much screen estate as possible with…
3. minimalistic but present UI elements (buttons\icons)

All text\font\svg based.

Here is a «final» overall representation.
The symbols and letters for the notes are interchangeable and mappable as shown (also with the stems\beams for note durations as «pseudo‑diacritic marks» in a single font file), but any phonetically related glyphs can be assigned from any font file or proper .svg files.

I see it as a text editor on steroids. The standard Music notation you see is just for reference and should not be a part of the application.

First of all, I like your idea.
Second, take a step back from your expectations about what is written on a letter and what a monitor can manage to display. (sorry about that...)

In my small thinking, I never done such and probably never will, I would to it like that:
- having a image component per line (i am not academic to music stuff so i really dont know how to name it better without need to investigate that)
- draw/load on that TImage a stretched image, knowing how big your image as reference is and knowing how big your TImage is you can scale anything perfect on it. (to scale a timeline and the shapes)
- have a set of shapes for the different "actions" (notes, notations etc...) and ofc now the scaling comes in play from above calculation
- now you can let user fill/place on lines the shapes correctly presented as it would be on a paper

Just my 50cents to that kind of project. Hope it helps you on your voyage.

[MarkMLl]

We really do need to go back to baby steps here.

For internal storage, you need to work out in far more detail exactly what needs to be saved and design an architecture around that.

For a scrolling display: I'm still not at all sure what you're aiming at here, I /really/ think you need to draw a mockup.

Something like Piano Booster (written in C++ using Qt) and I think Rosegarden have side-to-side scrolling of conventional musical notation, but (a) are graphics-intensive and (b) in the case of Piano Booster use an extremely cut-down notation.

The fact that you've been able to design fonts, and specify anchor points etc., does not necessarily mean that they're immediately usable: you will need to save them in a notation usable by your current OS, and that might mean that hints such as anchor points are lost. I do have to emphasise here that Unicode is basically about allocating codepoints, and while it does have provision for "combining characters" (i.e. overstriking etc.) I think the implementation is "left as an exercise".

The fact that you've found a bouncing ball demo (visually) useful suggests strongly that what you're looking for is actually a graphical program with smooth sideways scrolling. At that point each of your designed characters becomes a bitmap in internal storage and you have full flexibility as to what hints (i.e. anchor points etc.) need to be saved, and you will also find it trivial to generate mirror image bitmaps when necessary.

One detail here is the extent to which characters/bitmaps need to be removed interactively from your image, since that impacts on whether the image to be displayed is a single "flat" bitmap, or whether it is better saved as "layers" or- in rather retro terms- with "sprites".

Again, you'd do yourself and everybody else a favour by putting together a mockup. For example, the discussion that Winni pointed you at has pictures of the entire neck of a guitar: is that what you're looking for and how would it scroll in that case, or are you looking for something rotated by 90 degrees with multiple images smooth-scrolling from right to left?

MarkMLl

[Emptyself]

I know it is pointless to describe it over the internet, so can I explain my «logic» on how I think about this Music Notation of mine, which I see as a «Text Editor on steroids».

When I open 'Notepad++' I can type any letters, glyphs (depending on font + keyboard layout used for typing).

Let's say I have typed 12 symbols next to each other and the cursor is placed right before «on» the first glyph\letter\symbol.
Now, with the Right arrow [→] key I can run over each of the 12 symbols at my own pace «Tempo» as TAPped "beats".

How can I tell Lazarus (Pascal) to count my TAPs on the Right arrow [→] key and estimate a float number as Beats per Minute (but a rounded integer should be fine really)?

Where is the code for «Time» ticks\events in Lazarus? I know that computer chips have a dedicated quartz crystal, which is responsible for "keeping track of time" to show Clock\Time on my Task Bar.

Now, I would like to Not TAP anymore, rather Lazarus\Pascal to simulate my "latest\recent" input for that «Tempo» and start moving the cursor on its own along the letters accordingly, when press the [Space] key?
Those would equal to ⅟₄ note durations… tap, tap, tap…

Now, when the cursor "touches" (the next) letter, how to tell it to play a sound (I can record the sound samples myself) property for that letter in a given row?

[Emptyself]

For more details on what I am trying to «develop»,
please see here: Plain text Music Notation

and here: Plain text Music Notation - Presentation

[MarkMLl]

I've got to go out, so hopefully other people can pick this up... many of who are probably better at the Lazarus graphics/text side of things than I. However:

* Can you confirm that you're not, in fact, trying to do something like https://en.wikipedia.org/wiki/Tablature#Guitar_tablature which is two-dimensioned?

* Are the illustrations at the end of https://musicnotation.org/wiki/plain-music-notation-system/ representative?

* If you're talking about inserting spaces as padding I suggest you need a different marker character: just leaving blanks gets very confusing, no matter how "authentic" they are.

* You can get timing from- among others- the Now() function, and you could potentially use that together with input events in whatever graphical component you end up with.

* Each note is going to have substantially more state associated with it than a mere glyph. Irrespective of what graphical component you use you're going to need underlying storage, your interaction with the screen etc. is merely a layer on top of that.

* If you really do end up with text, the fact that you've defined your characters in Unicode's private range means that you risk tangling with UTF-8 encoding: there be dragons.

MarkMLl

[KodeZwerg]

By watching your last image the first thing that pops in my mind is some oldschool tracker like application what you try to produce.
https://openmpt.org/screenshots look at that full evolved project.

[itblumi]

I know it is pointless to describe it over the internet, so can I explain my «logic» on how I think about this Music Notation of mine, which I see as a «Text Editor on steroids».

When I open 'Notepad++' I can type any letters, glyphs (depending on font + keyboard layout used for typing).

Let's say I have typed 12 symbols next to each other and the cursor is placed right before «on» the first glyph\letter\symbol.
Now, with the Right arrow [→] key I can run over each of the 12 symbols at my own pace «Tempo» as TAPped "beats".

How can I tell Lazarus (Pascal) to count my TAPs on the Right arrow [→] key and estimate a float number as Beats per Minute (but a rounded integer should be fine really)?

To get a user input from a key have a look at the OnKeyPress event of the form or your component and enable KeyPreview of the form.

Where is the code for «Time» ticks\events in Lazarus? I know that computer chips have a dedicated quartz crystal, which is responsible for "keeping track of time" to show Clock\Time on my Task Bar.

GetTickCount gives you an value in ms to store the time between the clicks

Now, I would like to Not TAP anymore, rather Lazarus\Pascal to simulate my "latest\recent" input for that «Tempo» and start moving the cursor on its own along the letters accordingly, when press the [Space] key?
Those would equal to ⅟₄ note durations… tap, tap, tap…

I would store it in my own class with the tickCount and the symbol and the class can be added to a list -> generic list  or you write a bytestream in a sound format.
Here a link to a forum question about writing this with fpwavewriter https://forum.lazarus.freepascal.org/index.php?topic=40661.0

Now, when the cursor "touches" (the next) letter, how to tell it to play a sound (I can record the sound samples myself) property for that letter in a given row?

If you have the file allready then you can play it easily with FPC have a look to this https://wiki.freepascal.org/Play_Sound_Multiplatform documentation for that.

[Emptyself]

* Can you confirm that you're not, in fact, trying to do something like https://en.wikipedia.org/wiki/Tablature#Guitar_tablature which is two-dimensioned?

That is probably 50% to what I am trying to «develop».

* Are the illustrations at the end of https://musicnotation.org/wiki/plain-music-notation-system/ representative?

More or less… yes.

* If you're talking about inserting spaces as padding I suggest you need a different marker character: just leaving blanks gets very confusing, no matter how "authentic" they are.

No. The spaces were typed to illustrate what is "behind the scenes" (what the Code sees).
Actually those spaces shuold be shown in a form of stems or 'stems + beams'

* You can get timing from- among others- the Now() function, and you could potentially use that together with input events in whatever graphical component you end up with.

Timing is crucial in tempo based audio event visualisations.

* If you really do end up with text, the fact that you've defined your characters in Unicode's private range means that you risk tangling with UTF-8 encoding: there be dragons.

Well, I plan to provide the font file with the custom noteheads, so there should not be a problem. Well, eventually will add 12×N more, where N is any new language (i.e Hangul for Korean, Kartvelian for Georgian, Armenian… whatever if they wish to see the phonetic equivalent of B, D, L, G… in their alphabets).

I see people above trying to give me guidance, though it is really cumbersome for me to understand what is even happening, because I really do not see the connection between «type» of data, «variables», «classes», «arrays», etc. to what I have in my mind and how to connect them in code.

As I tried to give an example of my understanding on how I would approach such «Time\Tempo» based events, by which the type‑cursor «caret» I want to see affected, yet I can see it blinking in a rhythmic tempo every time I open Notepad, having no clue how it wase made to do such blinking.

And no one even tells me in the tutorials, yet wasting time with "Hello, world!" and moving circles… in pixels for some reason… which means, on a high density display the object will shift slower, yet the code will be the same.

I am having some conceptual misunderstanding about «coding» and it has kept me away from learning it even past assigning variables and such.

[MarkMLl]

Well, I plan to provide the font file with the custom noteheads, so there should not be a problem. Well, eventually will add 12×N more, where N is any new language (i.e Hangul for Korean, Kartvelian for Georgian, Armenian… whatever if they wish to see the phonetic equivalent of B, D, L, G… in their alphabets).

You miss my point. Use UTF-8 gratuitously, and you /will/ have a problem.

With an array (of objects, or appropriate data structures), you can iterate with a for loop. You can't do that to a simple string of UTF-8 characters, since their length is non-constant.

I see people above trying to give me guidance, though it is really cumbersome for me to understand what is even happening, because I really do not see the connection between «type» of data, «variables», «classes», «arrays», etc. to what I have in my mind and how to connect them in code.
...
I am having some conceptual misunderstanding about «coding» and it has kept me away from learning it even past assigning variables and such.

Well I'm very sorry, but that's something that you quite simply /have/ to get to grips with. It's obviously unreasonable to expect the community to do all the work for you, and even if there were people with the time and enthusiasm it would be enormously difficult unless you turned out to be particularly gifted at writing a specification and providing a mockup.

As I've already said: baby steps. We trust you to have done your homework and to be justified in your belief that you've got something worth doing (i.e. that it's not been done to death already), but you'd not expect a toddler to run a marathon and by your own admission that's basically what you're trying to do.

MarkMLl

[Emptyself]

@MarkMLl

Why wold I want to "iterate" over a string of UTF‑8 characters?
I want to use those UTF‑8 chars only for final «visuals», label, signs, badges. The decoration on the cake if you will.

I am not expecting someone to write it down for me. One of my best friends is a software developer and offered me many times to write the general functionality of it, but I refused every time, because I want to learn how to do it myself in my free time.
And every one and then I stumble on something that is not in agreement with my concept of establishing design practices… such as the PixelsPerInch (or per cm) and DPI vs PixelPitch and Fixel (based on ½,⅓,⅟₄ and ⅟₅ of mm), where ultimately they should refer to the same thing physically: size of some physical object (screen basic building «bricks» known as pixels).

When I open Notepad I see some of the functionality I need right there:
· rhythmically blinking cursor → to me this means «Tempo»
· cursor can sweep across rows of symbols fast as the fast I hit the arrow keys → to me this means «note durations»
· I can type\edit symbols (quite literally doing it right now)

Anyway…
I understand for example that a «string» is something like a one dimensional «array» [«vector»?!] of «objects» or «class»(?) called character\s (code table), represented by glyphs (graphical sub‑objects, assigned to that code table), loaded from PAM (permanent access memory) residing somewhere in RAM (random access memory).

I want to make a «character» "class" to have properties such as:
· duration (depends on «Tempo», which is a time count entity and on chosen value – a rational division of that Tempo)
· name (letter, symbol)
· pitch (this will have to depend on its chosen position on another "class" of «objects» called 'rows' and on the chosen name\letter\symbol)

Can I do that with Pascal using Lazarus or do I need external libraries?

[KodeZwerg]

I understand for example that a «string» is something like a one dimensional «array» [«vector»?!] of «objects» or «class»(?) called character\s (code table), represented by glyphs (graphical sub‑objects, assigned to that code table), loaded from PAM (permanent access memory) residing somewhere in RAM (random access memory).

A string is a container for characters.
"Glyphs" come from a Font.
Both don't know each other.