ikcomponeer blog part 4— capturing the data structures of music sets

Bertus van Dalen
4 min readMar 29, 2018

--

This is a blog in a series describing its migration to Azure and JavaScript. In today’s edition we take a closer look at the data we are going to migrate.

See also:

In preparation for migrating the data models it will be good to understand what the data models actually represent. Below you see how the composition tool is used. There are phrases by instrumental sections in the lower area with the green rectangle. The phrases are dragged to the composition area where they can be arranged and the total mix can be listened to. The total of the five groups containing the many phrases … let’s name this a music set.

As was planned in our earlier action plan, we would like to capture the JSON representation of these data in order to generate C# and TypeScript classes.

Let’s press F12 and see how the data is loaded. I must admit I wrote the code a couple of years ago and I can’t remember all of it … I’m a bit afraid it will be ugly. But here we go.

Looks like there is only one call which contains ALL the data that the composition tool needs to function. Let’s paste the JSON in Visual Studio to view it formatted and in colors for a closer look.

I am already creating an empty ASP.NET Core 2 project with a solution directory for the captured data. In there I create a json file for composition number 27129, paste the data and Visual Studio will then format it for me.

OMG!! This is a lot of data to analyze. It’s 1471 lines.

To understand what’s in there let’s view it section by section…. but first we want to make some other captures for the different configurations we have for the composition tool. For example it can load with simplified controls.

In Visual Studio I see this has only 218 lines. Probably this is because it has less music blocks in it.

The composition tool can also load with some of the music sets hidden and some displayed.

Let’s capture these data too and see how this implementation is reflected in the startup data.

Haha … it cought my eye already!

Then we have the ultracool version…

The same tool looks totally different here and the music blocks have three modalities: idle, mouse-over and active.

Here you can see that there are lots of things with prefix conf_

Now that we have captured all this … the next blog post will be dedicated to analyzing what all the data elements mean.

Some background: the website ikcomponeer.nl has been around since 2009. It contains eight recordings by the Dutch Metropole Orchestra. These recordings are cut to pieces like a jigsaw puzzle and presented in groupings per instrument section. Children may arrange the piece differently and experiment with the sounds, or they may try to make the piece of music as it was recorded. When saving their composition the system makes an mp3 mixdown that can be retrieved in a playlist and listened to, with parents or in the classroom with fellow pupils and a teacher. At its height there were a couple of hundreds of users per day of which 200 stored a composition to the playlist. Because the project is not multilingual these are mostly Belgian (Flemish) and Dutch users.

But alas, now Flash is not well supported for general purposes any longer so the usage is now declining. To make it future proof it will migrate from Flash to Angular and from PHP and MySQL to ASP.NET Core (C#) on Azure and table storage. This series of blog posts will cover the adventures.

--

--