A new project: Day 1

I’ve decided to write up as I progress on a new project. This is something that I’ve had in mind for quite a while, but I’m not sure it will ever become a product.

I’m writing it up as a way of keeping track for my own sake, but also to give you a glimpse into my thoughts, and the technologies I’m using.

I’m not planning to try to teach you anything through this — think of it as just a development journal.

The idea

One of my first projects was Pointed Psalms (pointedpsalms.co.uk). No sooner had I finished the first working version of this (in about 2006) did I decide that it required a complete rewrite! This has had a few false starts, and never really got there. A couple of people have logins to this original (and only) system, but it’s not very good (the user interface is rubbish, and the way the data is stored has several flaws).

The closest I got to the “new” version was in Summer 2015 while on holiday in Whitby, but unfortunately that didn’t reach completion.

One of my ideas for the new version was to give the user a way of customising the pointing of a psalm by dragging the barlines around, and that’s what I’ve decided to work on. For this to work, the system would need to know where all the syllables are. It would need to know if a barline was in a middle of a word so that a hyphen could be added. There are many little things like that that need thinking about.

Day 1

I’m a fan of both Angular and React, so the first decision was between those two. After comparing drag-drop libraries, I decided to go for Angular — because the drag-drop library is part of the official Angular CDK so unlikely to fall out of use. In my limited experience, I’ve found it easier to keep performance high with Angular than with React.

So I got myself a blank Angular template, installed @angular/cdk and added the DragDropModule to my AppModule.

For now, I’ve structured the app into two Components: WordsComponent and WordComponent. Already these are clearly badly named: the WordsComponent deals with a line of text. The WordComponent deals with a syllable (this includes any pointing symbols).

What it does so far

• The WordsComponent receives a line of text.
• Then it splits it into words.
• For each word, it checks if there are more than one syllable (for now this is hard-coded), and if so, splits into those syllables.
• Each Syllable has a SyllableType which (for now) can be either a WordStart, WordMiddle, WordEnd, Word or Barline.
• We just put a single barline at the end of each line. Obviously in the future, we’ll need to add the correct number of barlines, and try to guess the best place for them.

Depending on the SyllableType (and depending on the type of previous and next syllables), the WordComponent adds spaces or hyphens.

Using the DragDropModule, we make each WordComponent a drag item (cdkDrag), but only the Barline type is draggable. You can drag the barline around, and when you let go, the drop() function is called. In that, we re-arrange the array and this recalculates whether or not spaces/hyphens should be shown.

That’s where I am. For now, I just hard-coded in one verse of Psalm 122. Have a look and play, but don't get too excited just yet.

https://stackblitz.com/github/dansoper/psalm-pointer/tree/1f316e67d77faa1c0b586b23f290c7b0e0e389d1

• Development
• Angular
• Psalms

• Next: Should we use Common Worship for Evensong?
• All posts
• Previous: Merging the Treble lines at Rochester